@imposium-hub/components 2.5.9 → 2.5.10-1

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { useHotkeys } from 'react-hotkeys-hook';
+import Modal from '../modal/Modal';
+import Button from '../button/Button';
+import { confirm as copy } from '../../constants/copy';
+import Section from '../section/Section';
+
+export const ConfirmModal = ({
+    onClose,
+    onYes,
+    onNo,
+    title,
+    onYesLabel,
+    onNoLabel,
+    showCancel
+}) => {
+    useHotkeys('enter', onYes, { enableOnFormTags: true });
+    const { cancel } = copy;
+
+    const modal = (
+        <Modal
+            onRequestClose={onClose}
+            wrapperStyle={{
+                left: '0px',
+                width: '100%'
+            }}
+            style={{
+                width: '400px',
+                height: '12%',
+                top: 'calc(50% - 150px)',
+                left: 'calc((100% - 400px) / 2)'
+            }}
+            isOpen={true}>
+            <Section>
+                <div className='confirm-modal'>
+                    <p>{title}</p>
+                    <div className='confirm-buttons'>
+                        {showCancel ? (
+                            <Button
+                                onClick={onClose}
+                                size='large'
+                                color='default'>
+                                {cancel}
+                            </Button>
+                        ) : null}
+                        <Button
+                            onClick={onNo}
+                            size='large'
+                            color='default'>
+                            {onNoLabel}
+                        </Button>
+                        <Button
+                            onClick={onYes}
+                            size='large'
+                            style='bold'
+                            color='primary'>
+                            {onYesLabel}
+                        </Button>
+                    </div>
+                </div>
+            </Section>
+        </Modal>
+    );
+
+    const PortalContextComponent = () =>
+        ReactDOM.createPortal(modal, document.querySelector('#react-root'));
+
+    return <PortalContextComponent />;
+};

package/src/components/header/Header.tsx

@@ -236,6 +236,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 <Button
                     color='primary'
                     style='bold'
+                    customClass='creativeMgrBtn'
                     size='large'>
                     {ICON_UP_RIGHT_FROM_SQUARE}&nbsp;{'Creative Manager'}
                 </Button>

package/src/constants/copy.ts

@@ -271,3 +271,9 @@ export const copying: any = {
     error: 'Error copying to clipboard.',
     tooltip: 'Copy to clipboard!'
 };
+
+export const confirm: any = {
+    yes: 'Save',
+    no: "Don't Save",
+    cancel: 'Cancel'
+};

package/src/constants/icons.tsx

@@ -73,7 +73,7 @@ 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 { faFilters } from '@fortawesome/pro-solid-svg-icons';
+import { faCloudArrowUp, faFilters } from '@fortawesome/pro-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -218,3 +218,5 @@ export const ICON_CLAPPERBOARD_PLAY = <FontAwesomeIcon icon={faClapperboardPlay}
 export const ICON_CODE = <FontAwesomeIcon icon={faCode} />;
 
 export const ICON_UP_RIGHT_FROM_SQUARE = <FontAwesomeIcon icon={faUpRightFromSquare} />;
+
+export const ICON_FILE_UPLOAD = <FontAwesomeIcon icon={faCloudArrowUp} />;

package/src/index.ts

@@ -158,6 +158,7 @@ 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 } from './components/confirm-modal/ConfirmModal';
 
 export {
     AppWrapper,
@@ -311,5 +312,6 @@ export {
     ContextMenuItem,
     ContextMenuTrigger,
     Submenu,
-    CopyPropIdButton
+    CopyPropIdButton,
+    ConfirmModal
 };

package/src/redux/actions/asset-uploads.ts

@@ -257,7 +257,8 @@ export const replaceAsset = (
     api: IImposiumAPI,
     assetId: any,
     files: File[],
-    storyId: string
+    storyId: string,
+    bindToOverlay?: (f: any) => any
 ): any => {
     return (dispatch, getStore) => {
         return new Promise<void>((resolve) => {
@@ -303,17 +304,23 @@ export const replaceAsset = (
                 )
                     .then((result) => {
                         const currentOngoingJobs = () => {
+                            if (bindToOverlay) {
+                                bindToOverlay(result);
+                            }
                             return {
+                                footageId: result.id,
+                                jobId: result.job_id,
                                 filename: replacedFileBlobs[activeIndex].filename,
                                 onProcessed: () => {
                                     const fileName = ongoingJobs.filter(
-                                        (job: any) => job.jobId === result[0].job_id
+                                        (job: any) => job.jobId === result.job_id
                                     )[0].filename;
                                     dispatch({
                                         type: assetUploadsActions.REMOVE_UPLOAD,
                                         filename: fileName
                                     });
                                     doAssetTableHydration(api, storyId);
+                                    resolve(result);
                                 }
                             };
                         };
@@ -326,23 +333,22 @@ export const replaceAsset = (
                         } else {
                             ongoingJobs = ongoingJobs.filter((j: any, i: number) => {
                                 const jobIdExists: boolean = typeof j.jobId === 'string';
-
                                 if (!jobIdExists) {
                                     dispatch({
                                         type: assetUploadsActions.REMOVE_UPLOAD,
                                         filename: j.filename
                                     });
                                     doAssetTableHydration(api, storyId);
+                                    resolve(result);
                                 }
                                 return jobIdExists;
                             });
-
                             if (ongoingJobs.length > 0) {
                                 pollAssetJobs(api, ongoingJobs, processingTimeout);
                             }
                         }
 
-                        resolve(result);
+                        // resolve(result);
                     })
                     .catch((e: Error[]) => {
                         if (axios.isCancel(e) && currentQueue !== queueLength - 1) {