@imposium-hub/components 2.9.0-5 → 2.9.0-7

package/src/components/replace-files-modal/ReplaceFilesModal.tsx

@@ -0,0 +1,217 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import Modal from '../modal/Modal';
+import Button from '../button/Button';
+import CheckboxField from '../checkbox-field/CheckboxField';
+import Section from '../section/Section';
+import { assets as copy } from '../../constants/copy';
+import { replaceFilesModalEvent } from '../../utils/modal';
+
+export interface IReplaceFilesModalProps {
+    onUpload: (f) => any;
+    onInstantUpload: (f) => any;
+    onApplyToAll: (e) => any;
+    onClose: () => void;
+    applyToAll: boolean;
+    existedAssets: any[];
+    existedAssetIds: any[];
+}
+
+export const ReplaceFilesModal = () => {
+    const [props, setProps] = useState<IReplaceFilesModalProps>(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [applyToAll, setApplyToAll] = useState<boolean>();
+    const [height, setHeight] = useState(200);
+    const [index, setIndex] = useState<number>(0);
+
+    const replaceFileModalRef = useRef(null);
+
+    useEffect(() => {
+        if (replaceFileModalRef.current) {
+            const {
+                current: { clientHeight }
+            } = replaceFileModalRef;
+            setHeight(clientHeight + 40);
+        }
+    });
+
+    const onOpen = (event) => {
+        setProps({
+            ...event.detail
+        });
+        setIsOpen(true);
+    };
+
+    const onClose = () => {
+        props.onClose();
+        setIsOpen(false);
+    };
+
+    const onReplaceHandler = (curApplyToAll, curIndex, file, assetId) => {
+        const newIndex = curIndex + 1;
+
+        if (curApplyToAll && curIndex === 0) {
+            const updatedAssets = props.existedAssets.map((asset, i) => {
+                const updatefile = asset;
+                updatefile['assetId'] = props.existedAssetIds[i];
+                return updatefile;
+            });
+
+            props.onInstantUpload(updatedAssets);
+            setIndex(0);
+            setIsOpen(false);
+        } else if (curApplyToAll) {
+            const updatedAssets = [];
+
+            for (let i = 0; i < props.existedAssets.length; i++) {
+                const updateFile =
+                    curIndex === 0
+                        ? props.existedAssets[i]
+                        : [
+                              ...props.existedAssets.slice(0, curIndex - 1),
+                              ...props.existedAssets.slice(curIndex)
+                          ][i];
+
+                if (updateFile) {
+                    updateFile['assetId'] =
+                        curIndex === 0
+                            ? props.existedAssetIds[i]
+                            : [
+                                  ...props.existedAssetIds.slice(0, curIndex - 1),
+                                  ...props.existedAssetIds.slice(curIndex)
+                              ][i];
+                    updatedAssets.push(updateFile);
+                    props.onInstantUpload(updatedAssets);
+                    setIndex(0);
+                    onClose();
+                }
+            }
+        } else {
+            if (newIndex === props.existedAssets.length) {
+                setIndex(0);
+                onClose();
+            } else {
+                setIndex(newIndex);
+            }
+
+            const updateFile = file;
+            updateFile['assetId'] = assetId;
+            props.onUpload([updateFile]);
+        }
+    };
+
+    const onAsNewHandler = (curApplyToAll, curIndex, file) => {
+        const newIndex = curIndex + 1;
+
+        if (curApplyToAll) {
+            props.onUpload(
+                curIndex === 0 ? props.existedAssets : props.existedAssets.slice(curIndex)
+            );
+
+            setIndex(0);
+            onClose();
+        } else {
+            if (newIndex === props.existedAssets.length) {
+                setIndex(0);
+                onClose();
+            } else {
+                setIndex(newIndex);
+            }
+
+            props.onUpload([file]);
+        }
+    };
+
+    const onApplyToAllHandler = (e) => {
+        setApplyToAll(e);
+        props.onApplyToAll(e);
+    };
+
+    const onReplace = useCallback(
+        (curApplyToAll, curIndex, file, assetId) =>
+            onReplaceHandler(curApplyToAll, curIndex, file, assetId),
+        [isOpen]
+    );
+
+    const onApplyToAll = useCallback((e) => onApplyToAllHandler(e), [isOpen]);
+
+    const onAsNew = useCallback(
+        (curApplyToAll, curIndex, file) => onAsNewHandler(curApplyToAll, curIndex, file),
+        [isOpen]
+    );
+
+    useEffect(() => {
+        window.addEventListener(replaceFilesModalEvent, onOpen);
+        return () => {
+            window.removeEventListener(replaceFilesModalEvent, onOpen);
+        };
+    }, []);
+
+    const modal = () => {
+        if (isOpen) {
+            const file = props.existedAssets[index];
+            const assetId = props.existedAssetIds[index];
+            const name = file.name.slice(0, file.name.lastIndexOf('.'));
+            return (
+                <Modal
+                    onRequestClose={onClose}
+                    wrapperStyle={{
+                        left: '0px',
+                        width: '100%'
+                    }}
+                    style={{
+                        width: '400px',
+                        height: `${height}px`,
+                        top: 'calc(50% - 150px)',
+                        left: 'calc((100% - 400px) / 2)'
+                    }}
+                    isOpen={true}>
+                    <Section>
+                        <div
+                            className='replace-files-modal'
+                            ref={replaceFileModalRef}>
+                            <p>{copy.uploads.title.replace('[name]', name)}</p>
+                            <div className='replace-files-buttons'>
+                                <div className='checkbox'>
+                                    <CheckboxField
+                                        label={copy.uploads.applyAll}
+                                        value={applyToAll}
+                                        onChange={onApplyToAll}
+                                    />
+                                </div>
+                                <div className='buttons'>
+                                    <Button
+                                        onClick={() => onAsNew(applyToAll, index, file)}
+                                        size='large'
+                                        style='bold'
+                                        color='primary'>
+                                        {copy.uploads.keepBoth}
+                                    </Button>
+                                    <Button
+                                        onClick={() => onReplace(applyToAll, index, file, assetId)}
+                                        size='large'
+                                        style='bold'
+                                        color='primary'>
+                                        {copy.uploads.replace}
+                                    </Button>
+                                    <Button
+                                        onClick={onClose}
+                                        size='large'
+                                        style='bold'
+                                        color='default'>
+                                        {copy.uploads.cancelButton}
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </Section>
+                </Modal>
+            );
+        }
+    };
+
+    const PortalContextComponent = () =>
+        ReactDOM.createPortal(modal(), document.querySelector('#react-root'));
+
+    return <PortalContextComponent />;
+};

package/src/constants/copy.ts

@@ -28,7 +28,11 @@ export const assets = {
         assignToProjectInfo:
             'If selected, any assets uploaded will be available to use with all projects on the current organization.',
         uploadButton: 'Upload',
-        cancelButton: 'Cancel'
+        cancelButton: 'Cancel',
+        title: `An asset named "[name]" already exists in this project. Do you want to replace it with the one you're uploading?`,
+        keepBoth: 'Keep Both',
+        replace: 'Replace',
+        applyAll: 'Apply To All'
     },
     tags: {
         add: 'Add new tag',

package/src/constants/icons.tsx

@@ -73,7 +73,12 @@ import {
 } from '@fortawesome/pro-light-svg-icons';
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
-import { faCloudArrowUp, faFilters } from '@fortawesome/pro-solid-svg-icons';
+import {
+    faCloudArrowUp,
+    faFileCirclePlus,
+    faFilePen,
+    faFilters
+} from '@fortawesome/pro-solid-svg-icons';
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
@@ -223,3 +228,7 @@ export const ICON_UP_RIGHT_FROM_SQUARE = <FontAwesomeIcon icon={faUpRightFromSqu
 export const ICON_FILE_UPLOAD = <FontAwesomeIcon icon={faCloudArrowUp} />;
 
 export const ICON_FILE_ERROR = <FontAwesomeIcon icon={faCircleExclamation} />;
+
+export const ICON_FILE_ADD = <FontAwesomeIcon icon={faFileCirclePlus} />;
+
+export const ICON_FILE_REPLACE = <FontAwesomeIcon icon={faFilePen} />;

package/src/index.ts

@@ -154,7 +154,6 @@ import ContextMenuItem from './components/context-menu/ContextMenuItem';
 import ContextMenuTrigger from './components/context-menu/ContextMenuTrigger';
 import CopyPropIdButton from './components/copy-prop-id-button/CopyPropIdButton';
 import Submenu from './components/context-menu/SubMenu';
-import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
 import AssetsTableAssetIdCell from './components/assets/AssetsTableAssetIdCell';
 import { resetStoryFilter, updateStoryFilter } from './redux/actions/story-filter';
 import storyFilter from './redux/reducers/story-filter';
@@ -163,7 +162,8 @@ import { AppWrapper } from './components/app-wrapper/AppWrapper';
 import { pushRoute, replaceRoute } from './utils/routing';
 import { ProjectDropdown } from './components/header/ProjectDropdown';
 import { EditGuideModal, IEditGuideModalProps } from './components/edit-guide-modal/EditGuideModal';
-import { openConfirmModal } from './utils/modal';
+import { openConfirmModal, openReplaceFilesModal } from './utils/modal';
+import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
 
 export {
     ProjectDropdown,
@@ -260,6 +260,7 @@ export {
     updateAssetData,
     doAssetTableHydration,
     uploadAssets,
+    openReplaceFilesModal,
     replaceAsset,
     selectAsset,
     deselectAsset,