diff --git a/src/components/editors/EditorImageUploadButton/index.tsx b/src/components/editors/EditorImageUploadButton/index.tsx new file mode 100644 index 00000000..410667f4 --- /dev/null +++ b/src/components/editors/EditorImageUploadButton/index.tsx @@ -0,0 +1,23 @@ +import React, { FC } from 'react'; +import { EditorUploadButton } from '~/components/editors/EditorUploadButton'; +import { INode } from '~/redux/types'; + +interface IProps { + data: INode; + setData: (val: INode) => void; + temp: string[]; + setTemp: (val: string[]) => void; +} + +const EditorImageUploadButton: FC = ({ data, setData, temp, setTemp }) => ( + +); + +export { EditorImageUploadButton }; diff --git a/src/components/editors/EditorPanel/index.tsx b/src/components/editors/EditorPanel/index.tsx index 78e60097..bbcec349 100644 --- a/src/components/editors/EditorPanel/index.tsx +++ b/src/components/editors/EditorPanel/index.tsx @@ -1,8 +1,7 @@ -import React, { FC } from 'react'; +import React, { FC, createElement } from 'react'; import * as styles from './styles.scss'; import { INode } from '~/redux/types'; -import { EditorUploadButton } from '~/components/editors/EditorUploadButton'; -import { NODE_UPLOAD_TYPES } from '~/redux/node/constants'; +import { NODE_PANEL_COMPONENTS } from '~/redux/node/constants'; interface IProps { data: INode; @@ -13,9 +12,10 @@ interface IProps { const EditorPanel: FC = ({ data, setData, temp, setTemp }) => (
- {data.type && NODE_UPLOAD_TYPES[data.type] && ( - - )} + {NODE_PANEL_COMPONENTS[data.type] && + NODE_PANEL_COMPONENTS[data.type].map((el, key) => + createElement(el, { key, data, setData, temp, setTemp }) + )}
); diff --git a/src/components/editors/EditorUploadButton/index.tsx b/src/components/editors/EditorUploadButton/index.tsx index 47660d5b..a4b2aee1 100644 --- a/src/components/editors/EditorUploadButton/index.tsx +++ b/src/components/editors/EditorUploadButton/index.tsx @@ -27,6 +27,9 @@ type IProps = ReturnType & setData: (val: INode) => void; temp: string[]; setTemp: (val: string[]) => void; + + accept?: string; + icon?: string; }; const EditorUploadButtonUnconnected: FC = ({ @@ -37,6 +40,8 @@ const EditorUploadButtonUnconnected: FC = ({ statuses, files, uploadUploadFiles, + accept = 'image/*', + icon = 'plus', }) => { const eventPreventer = useCallback(event => event.preventDefault(), []); @@ -116,10 +121,10 @@ const EditorUploadButtonUnconnected: FC = ({ return (
- +
- +
); diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx index c4a2eb50..55350dbf 100644 --- a/src/components/editors/ImageGrid/index.tsx +++ b/src/components/editors/ImageGrid/index.tsx @@ -17,14 +17,14 @@ interface IProps { const ImageGrid: FC = ({ files, setFiles, locked }) => { const onMove = useCallback( ({ oldIndex, newIndex }: SortEnd) => { - setFiles(moveArrItem(oldIndex, newIndex, files) as IFile[]); + setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]); }, [setFiles, files] ); const onDrop = useCallback( (remove_id: IFile['id']) => { - setFiles(files.filter(file => file.id === remove_id)); + setFiles(files.filter(file => file && file.id !== remove_id)); }, [setFiles, files] ); diff --git a/src/containers/dialogs/Modal/index.tsx b/src/containers/dialogs/Modal/index.tsx index d3c6362d..d0470af1 100644 --- a/src/containers/dialogs/Modal/index.tsx +++ b/src/containers/dialogs/Modal/index.tsx @@ -29,8 +29,6 @@ const ModalUnconnected: FC = ({ if (!dialog || !DIALOG_CONTENT[dialog] || !is_shown) return null; - console.log({ onRequestClose }); - return ReactDOM.createPortal(
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 44f85a85..8ec40fd8 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -7,6 +7,7 @@ import { ImageEditor } from '~/components/editors/ImageEditor'; import { TextEditor } from '~/components/editors/TextEditor'; import { VideoEditor } from '~/components/editors/VideoEditor'; import { UPLOAD_TYPES } from '../uploads/constants'; +import { EditorImageUploadButton } from '~/components/editors/EditorImageUploadButton'; const prefix = 'NODE.'; export const NODE_ACTIONS = { @@ -89,8 +90,8 @@ export const NODE_EDITORS = { [NODE_TYPES.VIDEO]: VideoEditor, }; -export const NODE_UPLOAD_TYPES = { - [NODE_TYPES.IMAGE]: [UPLOAD_TYPES.IMAGE], +export const NODE_PANEL_COMPONENTS = { + [NODE_TYPES.IMAGE]: [EditorImageUploadButton], }; export const NODE_EDITOR_DATA: Record<