@imposium-hub/components 2.9.0-14 → 2.9.0-3

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_FILE_ADD, ICON_FILE_REPLACE, ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
+import { ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
 import AssetsTableDropzone from './AssetsTableDropzone';
 
 interface IAssetsUploadMenuProps {
@@ -148,7 +148,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
     public render() {
         const {
-            assetUploads,
+            assetUploads: { uploads },
             editor: {
                 fromCrM,
                 showUploadsMenu,
@@ -163,13 +163,10 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
             },
             assetTags
         } = this.props;
-
-        const uploads = assetUploads?.uploads || [];
         const disable = uploads.length > 0 ? false : true;
 
         let uploadsListInner;
         const uploading = [];
-
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u: any) => {
                 const { filename, percent, tags } = u;
@@ -185,27 +182,21 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                         </Button>
                     );
 
-                    const fileTags =
-                        tags && !u.assetId
-                            ? tags.map((tag: string) => (
-                                  <Tag
-                                      key={tag}
-                                      copy={tag}
-                                      colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                                  />
-                              ))
-                            : [];
+                    const fileTags = tags
+                        ? 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,7 +4,6 @@ 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;
@@ -66,9 +65,9 @@ export const ConfirmModal = () => {
     );
 
     useEffect(() => {
-        window.addEventListener(confirmModalEvent, onOpen);
+        window.addEventListener('openconfirmmodal', onOpen);
         return () => {
-            window.removeEventListener(confirmModalEvent, onOpen);
+            window.removeEventListener('openconfirmmodal', onOpen);
         };
     }, []);
 

package/src/components/field-wrapper/FieldWrapper.tsx

@@ -14,7 +14,6 @@ interface IFieldWrapperProps {
     width?: string | number;
     labelPosition?: string;
     labelWidth?: string | number;
-    header?: boolean;
 }
 
 interface IFieldWrapperState {
@@ -88,7 +87,7 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     public render() {
-        const { label, width, customClass, header } = this.props;
+        const { label, width, customClass } = this.props;
         const labelJSX = this.renderLabel();
 
         const style = {};
@@ -101,22 +100,19 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
         }
 
         return (
-            <>
-                {header && this.renderButtons()}
+            <div
+                className={`form-field ${customClass} ${this.getLabelClass()}`}
+                style={style}>
+                {labelJSX}
                 <div
-                    className={`form-field ${customClass} ${this.getLabelClass()}`}
-                    style={style}>
-                    {labelJSX}
-                    <div
-                        className={`form-field-content ${this.getLabelClass()}`}
-                        {...fieldProps}>
-                        {this.props.children}
-                        {!header && this.renderButtons()}
-                    </div>
-                    {renderTooltip(this.tooltipId, this.props.tooltip)}
-                    {this.renderInfo()}
+                    className={`form-field-content ${this.getLabelClass()}`}
+                    {...fieldProps}>
+                    {this.props.children}
+                    {this.renderButtons()}
                 </div>
-            </>
+                {renderTooltip(this.tooltipId, this.props.tooltip)}
+                {this.renderInfo()}
+            </div>
         );
     }
 

package/src/components/header/Header.tsx

@@ -179,8 +179,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
             openConfirmModal({
                 showCancel: true,
-                showNo: true,
                 noLabel: header.noSave,
+                showNo: true,
                 onNo: () => changeStory(),
                 yesLabel: header.onSave,
                 onYes: () => onYes(),
@@ -211,7 +211,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                                 api.cacheActiveStory(activeServiceId, orgId, storyId);
                             } else {
                                 pushRoute(`/${orgId}`);
-                                api.cacheActiveStory(activeServiceId, orgId);
                             }
                         })
                         .catch((e) => {
@@ -229,8 +228,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
                     openConfirmModal({
                         showCancel: true,
-                        showNo: true,
                         noLabel: header.noSave,
+                        showNo: true,
                         onNo: () => changeOrg(),
                         yesLabel: header.onSave,
                         onYes: () => onYes(),

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

@@ -17,7 +17,6 @@ interface INumberFieldProps {
     min?: number;
     max?: number;
     onBlur?(e): void;
-    focusOnMount?: boolean;
 }
 
 interface INumberFieldState {
@@ -38,9 +37,6 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
     }
 
     public componentDidMount(): void {
-        if (this.props.focusOnMount && this.inputRef.current) {
-            this.inputRef.current.focus();
-        }
         this.setState({
             error: false,
             value: this.props.value
@@ -74,8 +70,8 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
 
     private onChange(e) {
         let val = e.target.value;
-        if (val === '' || val === null) {
-            val = this.props.min;
+        if (val === '') {
+            val = null;
         } else {
             val = parseFloat(val);
         }

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/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,7 +15,6 @@ interface ISliderFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
-    enabledToggle?: boolean;
 }
 
 interface ISliderFieldState {
@@ -71,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,
@@ -91,15 +81,16 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
             tooltip,
             info,
             labelPosition,
-            labelWidth,
-            enabledToggle
+            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
@@ -110,34 +101,21 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
                 width={width}>
-                {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}
-                    />
-                )}
+                <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/story-previewer/StoryPreviewer.tsx

@@ -48,7 +48,6 @@ interface IStoryPreviewerProps {
     compositionOptions?: any[];
     editor: any;
     updateEditorConfig(c): void;
-    reRender: boolean;
 }
 
 interface IStoryPreviewerState {
@@ -200,15 +199,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         if (!prevProps.editor?.autoRender && this.props.editor?.autoRender) {
             this.props.updateEditorConfig({ autoRender: false });
             this.evtHandlers.gotExperience = null;
-            this.props.api.cancelExperiencePolling().then(() => {
-                if (this.props.editor?.reRender) {
-                    this.setState({ compositionOverride: null }, () =>
-                        this.createExperience(this.props.compositionId)
-                    );
-                } else {
-                    this.createExperience();
-                }
-            });
+            this.props.api.cancelExperiencePolling().then(() => this.createExperience());
         }
 
         if (
@@ -511,17 +502,11 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                                     onExperenceLoaded(resVideo);
                                                 }
 
-                                                this.setState(
-                                                    {
-                                                        rendering: false,
-                                                        activeOutput: this.getFirstOutput(resVideo),
-                                                        experience: resVideo
-                                                    },
-                                                    () =>
-                                                        this.props.updateEditorConfig({
-                                                            reRender: false
-                                                        })
-                                                );
+                                                this.setState({
+                                                    rendering: false,
+                                                    activeOutput: this.getFirstOutput(resVideo),
+                                                    experience: resVideo
+                                                });
                                             };
 
                                             api.getExperience(experienceId, true)
@@ -624,12 +609,12 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         );
     }
 
-    private createExperience(compositionId?) {
+    private createExperience() {
         const { storyId, onNotification, onError, api, onExperienceCreated, useWorkingCopy } =
             this.props;
 
         const fastRender = this.props.editor?.fastRender || false;
-        const compId = compositionId ? compositionId : this.getCompId();
+        const compId = this.getCompId();
 
         this.resetState(false, () => {
             this.setState(
@@ -894,7 +879,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         const { storyId } = this.props;
         const renderCopy = experience ? copy.btnReRender : copy.btnRender;
         const compId = this.getCompId();
-
         const btnRender = !rendering ? (
             <Button
                 disabled={!compId}

package/src/components/tabs/Tabs.tsx

@@ -95,8 +95,7 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
                 const content = React.cloneElement(option.content, {
                     active,
                     width,
-                    height,
-                    key: option.key
+                    height
                 });
 
                 contentArray.push(content);

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>
         );

package/src/constants/copy.ts

@@ -28,11 +28,7 @@ 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',
-        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'
+        cancelButton: 'Cancel'
     },
     tags: {
         add: 'Add new tag',

package/src/constants/icons.tsx

@@ -73,12 +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 {
-    faCloudArrowUp,
-    faFileCirclePlus,
-    faFilePen,
-    faFilters
-} from '@fortawesome/pro-solid-svg-icons';
+import { faCloudArrowUp, faFilters } from '@fortawesome/pro-solid-svg-icons';
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
@@ -228,7 +223,3 @@ 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,6 +154,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, 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';
@@ -162,7 +163,6 @@ import { AppWrapper } from './components/app-wrapper/AppWrapper';
 import { pushRoute, replaceRoute } from './utils/routing';
 import { ProjectDropdown } from './components/header/ProjectDropdown';
 import { openConfirmModal } from './utils/modal';
-import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
 
 export {
     ProjectDropdown,