@imposium-hub/components 2.9.0-4 → 2.9.0-6

package/dist/styles.less

@@ -362,44 +362,6 @@ body{
     }
 }
 
-// .assetUploads {
-//     .imposium-dropdown {
-//         border: unset;
-
-//         .uploads-dropzone{
-//             position: absolute;
-//             top: 0;
-//             height: 100%;
-//             z-index: 2;
-//             display: none;
-
-//             &.asset-over {
-//                 .uploads-menu{
-//                     opacity: .3;
-//                 }
-//                 .overlay {
-//                     border-style: dashed;
-//                     border-color: hsl(225, 100%, 50%);
-//                     border-width: medium;
-//                     position: absolute;
-//                     top: 50%;
-//                     left: 50%;
-//                     transform: translate(-50%, -50%);
-//                     -ms-transform: translate(-50%, -50%);
-//                     text-align: center;
-//                     height: 98%;
-//                     width: 99%;
-//                     display: flex;
-//                     z-index: 1;
-//                     p {
-//                         vertical-align: middle;
-//                         margin: auto;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }
 .uploads-menu {
     height: 100%;
     overflow-y: auto;
@@ -577,7 +539,7 @@ body{
         width: 173px;
         z-index: 1001;
     }
-} 
+}
 
 .asset-details .rta .rta__autocomplete {
     width: 362px;
@@ -634,6 +596,10 @@ body{
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
+    .upload-icon {
+        padding-left: 2px;
+        padding-right: 2px;
+    }
     .tags-column {
         width: unset;
         padding: unset;
@@ -743,6 +709,7 @@ body{
 
         &.left{
             right: 0;
+            z-index: 2000;
         }
     }
 }
@@ -929,26 +896,65 @@ body{
 }
 
 .confirm-modal {
-	position: relative;
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-	top: calc(50% - 38px);
-	p{
-		text-align: center;
-		padding-bottom: 5px;
-	}
-	.confirm-buttons {
-		.imposium-btn {
-			width: 76px;
-
-			.btn-bold{
-				border: 1px solid #2D8CEA;
-			}
-		}
-	}
+    top: calc(50% - 38px);
+    p {
+        text-align: center;
+        padding-bottom: 5px;
+    }
+    .confirm-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+
+.replace-files-modal,
+.confirm-modal {
+    position: relative;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    .confirm-buttons,
+    .replace-files-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+.replace-files-modal {
+    text-align: center;
 }
 
+.replace-files-buttons {
+    width: 100%;
+    margin-top: 10px;
+    .checkbox {
+        float: left;
+        padding-left: 10px;
+        position: relative;
+        top: 6px;
+        .label-left {
+            width: fit-content;
+        }
+        .checkbox {
+            top: 0px;
+        }
+    }
+    .buttons {
+        float: right;
+        padding-right: 10px;
+    }
+}
+
+
 @cardHeaderHeight:25px;
 @cardHeaderHeightSmall:21px;
 @cardHeaderHeightLarge:35px;
@@ -2810,7 +2816,7 @@ body{
             padding-left:4px;
             height:@storyViewerHeaderHeight;
             background:darken(@background, 1%);
-            z-index: 2000;
+            z-index: 1000;
 
             .output{
                 margin-top:4px;

package/less/components/assets.less

@@ -116,44 +116,6 @@
     }
 }
 
-// .assetUploads {
-//     .imposium-dropdown {
-//         border: unset;
-
-//         .uploads-dropzone{
-//             position: absolute;
-//             top: 0;
-//             height: 100%;
-//             z-index: 2;
-//             display: none;
-
-//             &.asset-over {
-//                 .uploads-menu{
-//                     opacity: .3;
-//                 }
-//                 .overlay {
-//                     border-style: dashed;
-//                     border-color: hsl(225, 100%, 50%);
-//                     border-width: medium;
-//                     position: absolute;
-//                     top: 50%;
-//                     left: 50%;
-//                     transform: translate(-50%, -50%);
-//                     -ms-transform: translate(-50%, -50%);
-//                     text-align: center;
-//                     height: 98%;
-//                     width: 99%;
-//                     display: flex;
-//                     z-index: 1;
-//                     p {
-//                         vertical-align: middle;
-//                         margin: auto;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }
 .uploads-menu {
     height: 100%;
     overflow-y: auto;
@@ -331,7 +293,7 @@
         width: 173px;
         z-index: 1001;
     }
-} 
+}
 
 .asset-details .rta .rta__autocomplete {
     width: 362px;
@@ -388,6 +350,10 @@
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
+    .upload-icon {
+        padding-left: 2px;
+        padding-right: 2px;
+    }
     .tags-column {
         width: unset;
         padding: unset;

package/less/components/button-menu.less

@@ -22,6 +22,7 @@
 
         &.left{
             right: 0;
+            z-index: 2000;
         }
     }
 }

package/less/components/button.less

@@ -166,22 +166,60 @@
 }
 
 .confirm-modal {
-	position: relative;
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-	top: calc(50% - 38px);
-	p{
-		text-align: center;
-		padding-bottom: 5px;
-	}
-	.confirm-buttons {
-		.imposium-btn {
-			width: 76px;
-
-			.btn-bold{
-				border: 1px solid #2D8CEA;
-			}
-		}
-	}
-}
+    top: calc(50% - 38px);
+    p {
+        text-align: center;
+        padding-bottom: 5px;
+    }
+    .confirm-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+
+.replace-files-modal,
+.confirm-modal {
+    position: relative;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    .confirm-buttons,
+    .replace-files-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+.replace-files-modal {
+    text-align: center;
+}
+
+.replace-files-buttons {
+    width: 100%;
+    margin-top: 10px;
+    .checkbox {
+        float: left;
+        padding-left: 10px;
+        position: relative;
+        top: 6px;
+        .label-left {
+            width: fit-content;
+        }
+        .checkbox {
+            top: 0px;
+        }
+    }
+    .buttons {
+        float: right;
+        padding-right: 10px;
+    }
+}

package/less/components/story-previewer.less

@@ -222,7 +222,7 @@
             padding-left:4px;
             height:@storyViewerHeaderHeight;
             background:darken(@background, 1%);
-            z-index: 2000;
+            z-index: 1000;
 
             .output{
                 margin-top:4px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.9.0-4",
+    "version": "2.9.0-6",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/app-wrapper/AppWrapper.tsx

@@ -9,6 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 import { initPendo } from '../../utils/pendo';
 import { EditGuideModal } from '../edit-guide-modal/EditGuideModal';
+import { ReplaceFilesModal } from '../replace-files-modal/ReplaceFilesModal';
 
 export interface IAppWrapperProps {
     appLabel: string;
@@ -287,6 +288,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             {innerContent}
             <ConfirmModal />
             <EditGuideModal />
+            <ReplaceFilesModal />
         </div>
     );
 };

package/src/components/assets/AssetsUploadMenu.tsx

@@ -18,7 +18,7 @@ import AssetsTableTagsPivot from './AssetsTableTagsPivot';
 import Tag from '../tag/Tag';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEraser } from '@fortawesome/free-solid-svg-icons';
-import { ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
+import { ICON_FILE_ADD, ICON_FILE_REPLACE, ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
 import AssetsTableDropzone from './AssetsTableDropzone';
 
 interface IAssetsUploadMenuProps {
@@ -167,6 +167,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
         let uploadsListInner;
         const uploading = [];
+
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u: any) => {
                 const { filename, percent, tags } = u;
@@ -182,21 +183,27 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                         </Button>
                     );
 
-                    const fileTags = tags
-                        ? tags.map((tag: string) => (
-                              <Tag
-                                  key={tag}
-                                  copy={tag}
-                                  colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                              />
-                          ))
-                        : [];
+                    const fileTags =
+                        tags && !u.assetId
+                            ? tags.map((tag: string) => (
+                                  <Tag
+                                      key={tag}
+                                      copy={tag}
+                                      colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
+                                  />
+                              ))
+                            : [];
 
                     return (
                         <div
                             className='ongoing-upload'
                             key={filename}>
                             <div className='ongoing-upload-inner'>
+                                {u.assetId ? (
+                                    <div className='upload-icon'>{ICON_FILE_REPLACE}</div>
+                                ) : (
+                                    <div className='upload-icon'>{ICON_FILE_ADD}</div>
+                                )}
                                 <input
                                     className='upload-filename'
                                     value={filename}

package/src/components/confirm-modal/ConfirmModal.tsx

@@ -4,6 +4,7 @@ import Modal from '../modal/Modal';
 import Button from '../button/Button';
 import { confirm as copy } from '../../constants/copy';
 import Section from '../section/Section';
+import { confirmModalEvent } from '../../utils/modal';
 
 export interface IConfirmModalProps {
     onYes: () => void;
@@ -65,9 +66,9 @@ export const ConfirmModal = () => {
     );
 
     useEffect(() => {
-        window.addEventListener('openconfirmmodal', onOpen);
+        window.addEventListener(confirmModalEvent, onOpen);
         return () => {
-            window.removeEventListener('openconfirmmodal', onOpen);
+            window.removeEventListener(confirmModalEvent, onOpen);
         };
     }, []);
 

package/src/components/number-field/NumberField.tsx

@@ -74,8 +74,8 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
 
     private onChange(e) {
         let val = e.target.value;
-        if (val === '') {
-            val = null;
+        if (val === '' || val === null) {
+            val = this.props.min;
         } else {
             val = parseFloat(val);
         }

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

@@ -0,0 +1,209 @@
+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(curIndex)[i];
+                updateFile['assetId'] =
+                    curIndex === 0
+                        ? props.existedAssetIds[i]
+                        : props.existedAssetIds.slice(curIndex)[i];
+                updatedAssets.push(updateFile);
+            }
+
+            props.onUpload(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} />;