@imposium-hub/components 2.16.0-0 → 3.0.0-0

package/src/components/publish-wizard/publish/EmailWorkflow.tsx

@@ -729,9 +729,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         };
 
         if (!publishDataset) {
-            if (!batchError) {
-                emailOptions.push(downloadSampleCsv);
-            }
+            emailOptions.push(downloadSampleCsv);
             emailOptions.push(selectCsv);
         } else {
             emailOptions.push(uploadDataset);
@@ -795,7 +793,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
 
         const downloadCSV = (
             <>
-                {downloadCSVDiv}
+                {this.props.error ? (this.props.next ? downloadCSVDiv : '') : downloadCSVDiv}
                 {this.renderColumnMap()}
             </>
         );
@@ -871,13 +869,6 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                             />
                         );
                     })}
-                    {batchError && (
-                        <BigButton
-                            label={downloadCsvLabel}
-                            disabled={downloading}
-                            onClick={() => this.downloadCsv()}
-                        />
-                    )}
                 </div>
             </div>
         );

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/components/select-field/SelectField.tsx

@@ -23,15 +23,6 @@ interface ISelectFieldProps {
     showCopy?: boolean;
     onNotification?(e): void;
     onError?(e): void;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
 }
 
 class SelectField extends React.PureComponent<ISelectFieldProps> {
@@ -77,6 +68,7 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
 
     public render() {
         const {
+            label,
             showCopy,
             options,
             value,
@@ -88,15 +80,7 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
             info,
             labelPosition,
             labelWidth,
-            disableFirst,
-            propKey,
-            override,
-            inventory,
-            setOverride,
-            removeOverride,
-            onClose,
-            showCopyPropIds,
-            activeOverride
+            disableFirst
         } = this.props;
 
         const selectValue = value === null || value === undefined ? '' : value;
@@ -163,22 +147,13 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
         return (
             <FieldWrapper
                 customClass='select-field'
-                label={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 buttons={btns}
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='text'>
+                width={width}>
                 <select
                     value={selectValue}
                     onChange={(e) => this.onChange(e)}

package/src/components/slider-field/SliderField.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
-import { ICON_CHECK } from '../../constants/icons';
 
 interface ISliderFieldProps {
     label?: any;
@@ -16,18 +15,6 @@ interface ISliderFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
-    enabledToggle?: boolean;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
-
-    previewMultiplier?: number;
 }
 
 interface ISliderFieldState {
@@ -82,14 +69,6 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
         }
     }
 
-    private toggle() {
-        if (this.props.value !== undefined && this.props.value !== null) {
-            this.props.onChange(null);
-        } else {
-            this.props.onChange(this.props.defaultValue);
-        }
-    }
-
     public render() {
         const {
             label,
@@ -102,24 +81,16 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
             tooltip,
             info,
             labelPosition,
-            labelWidth,
-            enabledToggle,
-            propKey,
-            showCopyPropIds,
-            inventory,
-            setOverride,
-            onClose,
-            activeOverride,
-            removeOverride,
-            override,
-            previewMultiplier
+            labelWidth
         } = this.props;
         const { tempValue } = this.state;
-        const valueSet = value !== null && value !== undefined;
-        const val = tempValue !== null ? tempValue : !valueSet ? defaultValue : value;
 
-        const showInputs = (enabledToggle && valueSet) || !enabledToggle;
-        const icon = valueSet ? ICON_CHECK : null;
+        const val =
+            tempValue !== null
+                ? tempValue
+                : value === null || value === undefined
+                ? defaultValue
+                : value;
 
         return (
             <FieldWrapper
@@ -129,45 +100,22 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='number'
-                previewMultiplier={previewMultiplier}>
-                {enabledToggle && (
-                    <div
-                        className='checkbox'
-                        onClick={(e) => this.toggle()}>
-                        {icon}
-                    </div>
-                )}
-
-                {showInputs && (
-                    <input
-                        className={enabledToggle ? 'toggle' : ''}
-                        onChange={(e) => this.rangeInputChange(e)}
-                        type='range'
-                        min={min}
-                        max={max}
-                        value={val}
-                        step={step}
-                    />
-                )}
-
-                {showInputs && (
-                    <input
-                        className='val'
-                        onChange={(e) => this.numberInputChange(e)}
-                        type='number'
-                        value={val}
-                    />
-                )}
+                width={width}>
+                <input
+                    onChange={(e) => this.rangeInputChange(e)}
+                    type='range'
+                    min={min}
+                    max={max}
+                    value={val}
+                    step={step}
+                />
+
+                <input
+                    className='val'
+                    onChange={(e) => this.numberInputChange(e)}
+                    type='number'
+                    value={val}
+                />
             </FieldWrapper>
         );
     }

package/src/components/smpte-field/SMPTEField.tsx

@@ -87,20 +87,14 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
         }
     }
 
-    private onError(isValid) {
-        if (this.props.onError) {
-            this.props.onError(isValid);
-        }
-    }
-
     private onChange() {
         const val = this.inputRef.current.value;
         const isValid = this.SMTPEValidator(val);
 
-        if (isValid && this.props.onChange) {
+        if (isValid) {
             this.props.onChange(val);
         } else {
-            this.onError(isValid);
+            this.props.onError(isValid);
         }
     }
 
@@ -111,7 +105,7 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
             if (smpte && this.props.onBlur) {
                 this.props.onBlur(smpte);
             } else {
-                this.onError(isValid);
+                this.props.onError(isValid);
             }
         }
     }

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -20,7 +20,7 @@ import ImagePlayer from '../players/ImagePlayer';
 import { saveAs } from 'file-saver';
 import MediaVariableField from '../media-variable-field/MediaVariableField';
 import { IExperience } from '../../interfaces/experience';
-import { useResizeDetector } from 'react-resize-detector';
+import ReactResizeDetector from 'react-resize-detector';
 import { ERROR, previewer as copy } from '../../constants/copy';
 import { formattedTime } from '../../Util';
 import Timer from '../../services/Timer';
@@ -30,25 +30,6 @@ import { ICON_DOWNLOAD, ICON_CLIPBOARD } from '../../constants/icons';
 import AudioPlayer from '../players/AudioPlayer';
 import ColorField from '../color-field/ColorField';
 
-const ResizeDetectorWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const { width, height, ref } = useResizeDetector<HTMLDivElement>({
-        handleWidth: true,
-        handleHeight: true
-    });
-    return (
-        <div
-            ref={ref}
-            style={{ width: '100%', height: '100%' }}>
-            {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                    return React.cloneElement(child, { width, height } as any);
-                }
-                return child;
-            })}
-        </div>
-    );
-};
-
 interface IStoryPreviewerProps {
     api: IImposiumAPI;
     storyId: string;
@@ -449,18 +430,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                             />
                         );
                         break;
-                    case VARIABLE_TYPES.QR_CODE:
-                        fields.push(
-                            <TextField
-                                label={inv.name}
-                                key={inv.id}
-                                value={inventory[inv.id]}
-                                onChange={(v) => this.variableInputChanged(inv.id, v)}
-                                labelPosition='top'
-                                width='100%'
-                            />
-                        );
-                        break;
                 }
             }
         }
@@ -805,7 +774,13 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 );
             }
 
-            return <ResizeDetectorWrapper>{player}</ResizeDetectorWrapper>;
+            return (
+                <ReactResizeDetector
+                    handleWidth
+                    handleHeight>
+                    {player}
+                </ReactResizeDetector>
+            );
         }
 
         return null;

package/src/components/tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useResizeDetector } from 'react-resize-detector';
+import { withResizeDetector } from 'react-resize-detector';
 import ButtonMenu from '../button-menu/ButtonMenu';
 import ButtonMenuItem from '../button-menu/ButtonMenuItem';
 import Button from '../button/Button';
@@ -14,15 +14,15 @@ export interface ITab {
     menuButtons?: JSX.Element;
 }
 
-export interface ITabsProps {
+interface ITabsProps {
     activeTab?: string;
     keepMounted?: boolean;
     options: ITab[];
     onChange(i): void;
-    onClose?(i): void;
+    onClose(i): void;
     tabPadding?: number;
-    width?: number;
-    height?: number;
+    width: number;
+    height: number;
 }
 
 interface ITabsState {
@@ -85,7 +85,7 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
     }
 
     private renderContent() {
-        const { options, activeTab, keepMounted, width = 0, height = 0 } = this.props;
+        const { options, activeTab, keepMounted, width, height } = this.props;
 
         if (keepMounted) {
             const contentArray = [];
@@ -132,9 +132,7 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
                     onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        if (this.props.onClose) {
-                            this.props.onClose(key);
-                        }
+                        this.props.onClose(key);
                     }}>
                     {ICON_TIMES}
                 </Button>
@@ -220,19 +218,4 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
     }
 }
 
-const TabsWithResize: React.FC<Omit<ITabsProps, 'width' | 'height'>> = (props) => {
-    const { width = 0, height = 0, ref } = useResizeDetector<HTMLDivElement>();
-    return (
-        <div
-            ref={ref}
-            style={{ width: '100%', height: '100%' }}>
-            <Tabs
-                {...props}
-                width={width}
-                height={height}
-            />
-        </div>
-    );
-};
-
-export default TabsWithResize;
+export default withResizeDetector(Tabs);

package/src/components/text-field/TextField.tsx

@@ -46,7 +46,6 @@ interface ITextFieldProps {
     labelWidth?: string | number;
     className?: string;
     maxLength?: number;
-    header?: boolean;
 }
 
 interface ITextFieldState {
@@ -488,8 +487,7 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     public render() {
-        const { label, width, tooltip, info, labelPosition, labelWidth, className, header } =
-            this.props;
+        const { label, width, tooltip, info, labelPosition, labelWidth, className } = this.props;
         return (
             <FieldWrapper
                 customClass={`text-field ${className}`}
@@ -499,8 +497,7 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                header={header}>
+                width={width}>
                 {this.renderInput()}
             </FieldWrapper>
         );