diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx index e3b7ab1d..1b0abbfd 100644 --- a/src/components/editors/ImageEditor/index.tsx +++ b/src/components/editors/ImageEditor/index.tsx @@ -102,6 +102,8 @@ const ImageEditorUnconnected: FC = ({ data, setData, uploadUploadFiles, onFileMove={onFileMove} items={data.files} locked={temp.filter(id => !!statuses[id]).map(id => statuses[id])} + onUpload={onInputChange} + onDrop={onDrop} /> ); }; diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx index 86bcdfa7..897ad7cc 100644 --- a/src/components/editors/ImageGrid/index.tsx +++ b/src/components/editors/ImageGrid/index.tsx @@ -1,21 +1,24 @@ -import React, { FC, ReactChildren, useCallback } from 'react'; +import React, { FC, ReactChildren, useCallback, ChangeEventHandler, DragEventHandler } from 'react'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import * as styles from './styles.scss'; import { ImageUpload } from '~/components/upload/ImageUpload'; import { IFile } from '~/redux/types'; import { IUploadStatus } from '~/redux/uploads/reducer'; +import { ImageUploadButton } from '~/components/editors/ImageUploadButton'; interface IProps { items: IFile[]; locked: IUploadStatus[]; onFileMove: (o: number, n: number) => void; + onUpload?: ChangeEventHandler; + onDrop: DragEventHandler; }; const SortableItem = SortableElement(({ children }) =>
{children}
); -const SortableList = SortableContainer(({ items, locked }: { items: IFile[], locked: IUploadStatus[] }) => { +const SortableList = SortableContainer(({ items, locked, onUpload, onDrop }: { items: IFile[]; locked: IUploadStatus[]; onUpload: ChangeEventHandler; onDrop: DragEventHandler }) => { return ( -
+
{ items.map((file, index) => ( @@ -37,7 +40,9 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc )) } -
+ + + ); }); @@ -45,11 +50,13 @@ const ImageGrid: FC = ({ items, locked, onFileMove, + onUpload, + onDrop, }) => { const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [onFileMove]); return ( - + ) } diff --git a/src/components/editors/ImageUploadButton/index.tsx b/src/components/editors/ImageUploadButton/index.tsx new file mode 100644 index 00000000..d5b8d402 --- /dev/null +++ b/src/components/editors/ImageUploadButton/index.tsx @@ -0,0 +1,16 @@ +import React, { FC, ChangeEventHandler } from 'react'; +import * as styles from './styles.scss'; + +interface IProps { + onUpload?: ChangeEventHandler; +}; + +const ImageUploadButton: FC = ({ + onUpload, +}) => ( +
+ +
+ ) + +export { ImageUploadButton }; \ No newline at end of file diff --git a/src/components/editors/ImageUploadButton/styles.scss b/src/components/editors/ImageUploadButton/styles.scss new file mode 100644 index 00000000..311da355 --- /dev/null +++ b/src/components/editors/ImageUploadButton/styles.scss @@ -0,0 +1,22 @@ +.wrap { + padding-bottom: 100%; + box-shadow: inset lighten($content_bg, 20%) 0 0 0 4px; + position: relative; + border-radius: $radius; + cursor: pointer; + opacity: 0.5; + transition: opacity 0.5s; + + &:hover {} + + input { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + opacity: 0; + z-index: 1; + cursor: pointer; + } +} \ No newline at end of file