muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

moved out image grid components

Browse source
This commit is contained in:
Fedor Katurov 2019-10-16 15:40:39 +07:00
parent a957281d01
commit 5872e7a457
6 changed files with 69 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/editors/ImageGrid/index.tsx
View file

@ -1,15 +1,12 @@
import React, { FC, useCallback } from 'react';
import { SortableContainer, SortableElement, SortEvent, SortEnd } from 'react-sortable-hoc';
import { SortEnd } from 'react-sortable-hoc';
import * as styles from './styles.scss';
import { ImageUpload } from '~/components/upload/ImageUpload';
import { IFile, INode } from '~/redux/types';
import { IUploadStatus } from '~/redux/uploads/reducer';
import { getURL } from '~/utils/dom';
import assocPath from 'ramda/es/assocPath';
import { moveArrItem } from '~/utils/fn';
import omit from 'ramda/es/omit';
import remove from 'ramda/es/remove';
import reject from 'ramda/es/reject';
import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
interface IProps {
data: INode;
@ -17,38 +14,6 @@ interface IProps {
locked: IUploadStatus[];
}
const SortableImageGridItem = SortableElement(({ children }) => (
<div className={styles.item}>{children}</div>
));
const SortableImageGrid = SortableContainer(
({
items,
locked,
onDrop,
}: {
items: IFile[];
locked: IUploadStatus[];
onDrop: (file_id: IFile['id']) => void;
}) => (
<div className={styles.grid}>
{items
.filter(file => file && file.id)
.map((file, index) => (
<SortableImageGridItem key={file.id} index={index} collection={0}>
<ImageUpload id={file.id} thumb={getURL(file)} onDrop={onDrop} />
</SortableImageGridItem>
))}
{locked.map((item, index) => (
<SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
<ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
</SortableImageGridItem>
))}
</div>
)
);
const ImageGrid: FC<IProps> = ({ data, setData, locked }) => {
const onMove = useCallback(
({ oldIndex, newIndex }: SortEnd) => {

28
src/components/editors/ImageGrid/styles.scss
View file

@ -1,30 +1,4 @@
.grid {
min-height: 200px;
padding-bottom: 62px;
box-sizing: border-box;
display: grid;
grid-column-gap: $gap;
grid-row-gap: $gap;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
// display: flex;
// flex-wrap: wrap;
@media (max-width: 600px) {
grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
}
}
.item {
// flex: 0 4 25%;
// width: 25%;
// float: left;
// padding: $gap / 2;
z-index: 1;
box-sizing: border-box;
}
.helper {
opacity: 0.5;
z-index: 10;
z-index: 10 !important;
}

38
src/components/editors/SortableImageGrid/index.tsx Normal file
View file

@ -0,0 +1,38 @@
import React from 'react';
import { SortableContainer } from 'react-sortable-hoc';
import { ImageUpload } from '~/components/upload/ImageUpload';
import * as styles from './styles.scss';
import { SortableImageGridItem } from '~/components/editors/SortableImageGridItem';
import { IFile } from '~/redux/types';
import { IUploadStatus } from '~/redux/uploads/reducer';
import { getURL } from '~/utils/dom';
const SortableImageGrid = SortableContainer(
({
items,
locked,
onDrop,
}: {
items: IFile[];
locked: IUploadStatus[];
onDrop: (file_id: IFile['id']) => void;
}) => (
<div className={styles.grid}>
{items
.filter(file => file && file.id)
.map((file, index) => (
<SortableImageGridItem key={file.id} index={index} collection={0}>
<ImageUpload id={file.id} thumb={getURL(file)} onDrop={onDrop} />
</SortableImageGridItem>
))}
{locked.map((item, index) => (
<SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
<ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
</SortableImageGridItem>
))}
</div>
)
);
export { SortableImageGrid };

14
src/components/editors/SortableImageGrid/styles.scss Normal file
View file

@ -0,0 +1,14 @@
.grid {
min-height: 200px;
padding-bottom: 62px;
box-sizing: border-box;
display: grid;
grid-column-gap: $gap;
grid-row-gap: $gap;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@media (max-width: 600px) {
grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
}
}

10
src/components/editors/SortableImageGridItem/index.tsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react';
import { SortableElement } from 'react-sortable-hoc';
import * as styles from './styles.scss';
const SortableImageGridItem = SortableElement(({ children }) => (
<div className={styles.item}>{children}</div>
));
export { SortableImageGridItem };

4
src/components/editors/SortableImageGridItem/styles.scss Normal file
View file

@ -0,0 +1,4 @@
.item {
z-index: 1;
box-sizing: border-box;
}