@imposium-hub/components 2.2.46 → 2.3.1

package/src/components/assets/AssetField.tsx

@@ -28,7 +28,12 @@ interface IAssetFieldProps {
     tooltip: string;
     onChange: (asset: any) => any;
     updateFilters: (filters: any) => any;
-    uploadAssets: (api: any, files: File[], bindToOverlay?: (f: any) => any) => any;
+    uploadAssets: (
+        api: any,
+        files: File[],
+        storyId?: string,
+        bindToOverlay?: (f: any) => any
+    ) => any;
     accepts?: string | string[];
     labelPosition?: string;
     onError?: (message: string) => void;
@@ -103,14 +108,14 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
     }
 
     private onFileDrop = (i: any, monitor: any): void => {
-        const { accepts, api } = this.props;
+        const { accepts, storyId, api } = this.props;
         if (monitor) {
             const { files } = monitor.getItem();
 
             if (mimetypeConformsToOverlay(accepts, files[0])) {
                 this.setState({ assetUploading: true });
 
-                this.props.uploadAssets(api, [files[0]], (f: any) => {
+                this.props.uploadAssets(api, [files[0]], storyId, (f: any) => {
                     this.setState({ assetName: f.name, error: false }, () => {
                         this.setState({ assetUploading: false });
                         this.props.onChange(f);

package/src/components/assets/AssetsTableNameCell.tsx

@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { IImposiumAPI } from '../../services/API';
 import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
-import { assets as copy } from '../../constants/copy';
 
 interface IAssetsTableNameCell {
     cell: any;
@@ -51,7 +50,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
                     text={name}
                 />
             ) : (
-                <span>{copy.uploads.preparePhase}</span>
+                <span>Preparing asset...</span>
             );
         return loader;
     } else {

package/src/components/assets/AssetsTableRateCell.tsx

@@ -1,27 +1,20 @@
 import * as React from 'react';
-import { ASSET_TYPES } from '../../constants/assets';
 
 interface IAssetsTableRateCell {
     cell: any;
 }
+
 const AssetsTableRateCell: React.FC<IAssetsTableRateCell> = (props: IAssetsTableRateCell) => {
     const {
         cell: {
             row: {
-                original: { type, data, rate }
+                original: { rate }
             }
         }
     } = props;
 
-    let framerate = rate !== null && rate !== undefined ? rate : '';
-
-    if (type === ASSET_TYPES.VIDEO_COMPOSITION && data) {
-        const { rate: frame_rate } = JSON.parse(data);
-        framerate = frame_rate;
-    }
-
-    if (framerate !== null && framerate !== undefined && framerate !== '') {
-        return <div className='asset-rate-cell'>{Number(framerate).toFixed(2)}</div>;
+    if (rate !== null && rate !== undefined) {
+        return <div className='asset-rate-cell'>{Number(rate).toFixed(2)}</div>;
     } else {
         return <div className='asset-rate-cell'></div>;
     }

package/src/components/assets/AssetsTableTypeFilter.tsx

@@ -62,14 +62,15 @@ class AssetsTableTypeFilter extends React.PureComponent<
                     buttonRef={this.typeFilterRef}
                     onClick={() => this.setState({ openMenu: !openMenu })}>
                     <AssetsTypeIcon type={type || 'filter'} />
+
+                    <ImposiumDropdown
+                        show={openMenu}
+                        position='bottomleft'
+                        toggleRef={this.typeFilterRef}
+                        onOutsideClick={() => this.setState({ openMenu: false })}>
+                        {filterButtons}
+                    </ImposiumDropdown>
                 </Button>
-                <ImposiumDropdown
-                    show={openMenu}
-                    position='bottomleft'
-                    toggleRef={this.typeFilterRef}
-                    onOutsideClick={() => this.setState({ openMenu: false })}>
-                    {filterButtons}
-                </ImposiumDropdown>
             </div>
         );
     };

package/src/components/assets/AssetsUploadMenu.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { assets as copy } from '../../constants/copy';
 import CheckboxField from '../checkbox-field/CheckboxField';
+import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
 import {
+    toggleAssignToStory,
     cancelAssetUpload,
-    uploadingAsset,
-    updateUploadTags,
-    cancelNonUploadedAssets
+    toggleTagFileName,
+    setDelimiter,
+    toggleTagDelimiter,
+    toggleManualTagging,
+    addManualTag,
+    deleteManualTag,
+    deleteManualTags
 } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -18,58 +24,26 @@ 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 AssetsTableDropzone from './AssetsTableDropzone';
 
 interface IAssetsUploadMenuProps {
-    editor: any;
     assetUploads: any;
     assetTags: string[];
     api: any;
+    toggleAutoTag: (toggle: boolean) => any;
+    toggleTagFileName: (toggle: boolean) => any;
+    toggleAssignToStory: (toggle: boolean) => any;
+    toggleTagDelimiter: (togglle: boolean) => any;
+    setDelimiter: (delimiter: string) => any;
+    toggleManualTagging: (togglle: boolean) => any;
+    addManualTag: (tag: string) => any;
+    deleteManualTag: (tag: string) => any;
+    deleteManualTags: () => void;
     cancelAssetUpload: (fileName: string, api: IImposiumAPI) => any;
-    cancelNonUploadedAssets: (api: IImposiumAPI) => any;
-    updateEditorConfig(c): void;
-    uploadingAsset: (api: IImposiumAPI) => void;
-    updateUploadTags: () => void;
-    onDrop: (i, m) => any;
-    show: boolean;
-    onMenuHover: (o) => void;
-    toggleRef?: any;
-    onOutsideClick: (...args) => any;
-    tableHover: boolean;
 }
 
-interface IAssetsUploadMenuState {
-    assetOver: boolean;
-}
-
-class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAssetsUploadMenuState> {
-    private menuRef: any = null;
-
-    private clickHandler: any = (e) => this.detectOutsideClick(e);
-
+class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
     constructor(props: IAssetsUploadMenuProps) {
         super(props);
-
-        this.state = {
-            assetOver: false
-        };
-
-        this.menuRef = React.createRef();
-    }
-
-    public componentDidUpdate(prevProps: IAssetsUploadMenuProps) {
-        if (this.props.show && !prevProps.show) {
-            window.addEventListener('mousedown', this.clickHandler);
-        }
-
-        if (!this.props.show && prevProps.show) {
-            window.removeEventListener('mousedown', this.clickHandler);
-        }
-    }
-
-    public componentWillUnmount(): void {
-        window.removeEventListener('mousedown', this.clickHandler);
     }
 
     private handleCancelAssetUpload(fileName: string) {
@@ -77,180 +51,81 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
         this.props.cancelAssetUpload(fileName, api);
     }
 
-    private uploadFileHandler() {
-        const { api } = this.props;
-        this.props.uploadingAsset(api);
-        this.props.updateEditorConfig({ showUploadsDropdown: false });
-    }
-
-    private cancelUploadHandler(remove: boolean) {
-        const { api } = this.props;
-        if (!remove) {
-            this.props.cancelNonUploadedAssets(api);
-        }
-        this.props.updateEditorConfig({ showUploadsDropdown: false });
-    }
-
-    private uploadsSetting(state) {
-        const currState = this.props.editor.assetUploads;
-
-        const newState = { ...currState, ...state };
-        this.props.updateEditorConfig({
-            assetUploads: newState
-        });
-        this.props.updateUploadTags();
-    }
-
-    private deleteManualTag(tag) {
-        const { manualTags } = this.props.editor.assetUploads;
-        const updatedManualTags = manualTags.filter((t: string) => t !== tag);
-        this.uploadsSetting({ manualTags: updatedManualTags });
-    }
-
-    private addManualTag(tag) {
-        const { manualTags } = this.props.editor.assetUploads;
-        const updatedManualTags = manualTags ? manualTags : [];
-        updatedManualTags.push(tag);
-        this.uploadsSetting({ manualTags: updatedManualTags });
-    }
-
-    private checkHover(monitor) {
-        const isOver = monitor.isOver();
-        if (isOver !== this.state.assetOver) {
-            this.setState({ assetOver: isOver }, () => this.props.onMenuHover(isOver));
-        }
-    }
-
-    private detectOutsideClick = (e: any): void => {
-        const { toggleRef } = this.props;
-        const { target } = e;
-
-        const isResizing = target.classList.contains('Resizer') ? true : false;
-        const clickInside =
-            this.menuRef.current && this.menuRef.current.contains(target) ? true : false;
-        const clickOnToggle =
-            toggleRef && toggleRef.current && toggleRef.current.contains(target) ? true : false;
-
-        if (!isResizing && !clickInside && !clickOnToggle) {
-            this.cancelRender(true);
-        }
-    };
-
-    private cancelRender = (forced: boolean = false): void => {
-        const { onOutsideClick } = this.props;
-
-        window.removeEventListener('mousedown', this.clickHandler);
-
-        if (forced) {
-            onOutsideClick();
-        }
-    };
-
     public render() {
         const {
-            assetUploads: { uploads },
-            editor: {
-                showUploadsMenu,
-                assetUploads: {
-                    tagByDelimiter,
-                    delimiter,
-                    assignToStory,
-                    tagByFileName,
-                    tagManually,
-                    manualTags
-                }
+            assetUploads: {
+                uploads,
+                assignToStory,
+                tagByFileName,
+                tagByDelimiter,
+                delimiter,
+                tagManually,
+                manualTags
             },
             assetTags
         } = this.props;
-        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;
-
-                if (percent === 0) {
-                    const closeButton = (
-                        <Button
-                            key='btn-cancel'
-                            onClick={() => this.handleCancelAssetUpload(filename)}
-                            style='subtle'
-                            size='small'>
-                            {ICON_TIMES}
-                        </Button>
+                const { filename, percent } = u;
+                const loader =
+                    percent < 100 ? (
+                        <DeterminateLoader progress={u.percent} />
+                    ) : (
+                        <span>{copy.uploads.preparePhase}</span>
                     );
-
-                    const fileTags = 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'>
-                                <input
-                                    className='upload-filename'
-                                    value={filename}
-                                    readOnly
-                                />
-                                <div className='tags-column'>{fileTags}</div>
-                                {closeButton}
-                            </div>
+                const closeButton = percent < 100 && (
+                    <Button
+                        key='btn-cancel'
+                        onClick={() => this.handleCancelAssetUpload(filename)}
+                        style='subtle'
+                        size='small'>
+                        {copy.uploads.cancelButton}
+                    </Button>
+                );
+
+                return (
+                    <div
+                        className='ongoing-upload'
+                        key={filename}>
+                        <div className='ongoing-upload-inner'>
+                            <div className='upload-filename'>{filename}</div>
+                            {closeButton}
                         </div>
-                    );
-                } else {
-                    uploading.push(true);
-                }
+                        {loader}
+                    </div>
+                );
             });
         } else {
             uploadsListInner = <div className='no-ongoing-uploads'>{copy.uploads.noUploads}</div>;
         }
 
-        if (uploading.length === uploads.length) {
-            uploadsListInner = <div className='no-ongoing-uploads'>{copy.uploads.noUploads}</div>;
-        }
-
         const delimiterSelector = tagByDelimiter && (
             <SelectField
                 width='35%'
                 options={DELIMITER_OPTIONS}
                 value={delimiter}
-                onChange={(c) => {
-                    this.uploadsSetting({ delimiter: c });
-                }}
+                onChange={(c) => this.props.setDelimiter(c)}
             />
         );
-
         const tagsArray = [...new Set(manualTags)];
-
         const tagsMarkup = tagsArray.map((tag: string) => (
             <Tag
                 key={tag}
                 copy={tag}
                 colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                removeHandler={() => {
-                    this.deleteManualTag(tag);
-                }}
+                removeHandler={() => this.props.deleteManualTag(tag)}
             />
         ));
-
         const removeTagsBtn =
             tagsArray.length > 0 ? (
                 <Button
                     tooltip='Remove All Tags'
                     style='sublte'
-                    onClick={() => {
-                        this.uploadsSetting({ manualTags: [] });
-                    }}>
+                    onClick={() => this.props.deleteManualTags()}>
                     <FontAwesomeIcon icon={faEraser} />
                 </Button>
             ) : null;
-
         const tagsColumn = tagManually && (
             <div className='tags-column'>
                 <TextField
@@ -259,103 +134,46 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                     suggestions={assetTags}
                     label={copy.tags.add}
                     width={AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
-                    doSubmit={(t) => {
-                        this.addManualTag(t);
-                    }}
+                    doSubmit={(t) => this.props.addManualTag(t)}
                 />
                 {tagsMarkup}
                 {removeTagsBtn}
             </div>
         );
 
-        const modifier = this.state.assetOver ? 'asset-over' : '';
-        const show = this.props.show ? 'show' : '';
-        const tableHover = this.props.tableHover ? 'table-hover' : '';
-        const width = document.getElementsByClassName('assetUploads')[0]?.clientWidth;
-
         return (
-            <AssetsTableDropzone
-                className={`uploads-dropzone ${show} ${tableHover} ${modifier}`}
-                onDrop={(i, m) => {
-                    this.props.onDrop(i, m);
-                }}
-                onExternalCollect={(o) => this.checkHover(o)}>
-                <div className='overlay'>
-                    <p style={{ display: this.state.assetOver ? 'block' : 'none' }}>
-                        {copy.dropAsset}
-                    </p>
+            <div className='uploads-menu'>
+                <div className='uploads-controls'>
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.autoTagDelimiter}
+                        value={tagByDelimiter}
+                        onChange={() => this.props.toggleTagDelimiter(!tagByDelimiter)}
+                    />
+                    {delimiterSelector}
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.manualTagging}
+                        value={tagManually}
+                        onChange={() => this.props.toggleManualTagging(!tagManually)}
+                    />
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.autoTagFilname}
+                        value={tagByFileName}
+                        onChange={() => this.props.toggleTagFileName(!tagByFileName)}
+                    />
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.assignToProjectInput}
+                        info={copy.uploads.assignToProjectInfo}
+                        value={assignToStory}
+                        onChange={() => this.props.toggleAssignToStory(!assignToStory)}
+                    />
                 </div>
-                <div
-                    className='uploads-menu'
-                    style={{ width }}
-                    ref={this.menuRef}>
-                    <div className='uploads-controls'>
-                        <CheckboxField
-                            width='50%'
-                            label={copy.uploads.autoTagDelimiter}
-                            value={tagByDelimiter}
-                            onChange={() =>
-                                this.uploadsSetting({ tagByDelimiter: !tagByDelimiter })
-                            }
-                        />
-                        {delimiterSelector}
-                        <CheckboxField
-                            width='50%'
-                            label={copy.uploads.manualTagging}
-                            value={tagManually}
-                            onChange={() => this.uploadsSetting({ tagManually: !tagManually })}
-                        />
-                        <CheckboxField
-                            width='50%'
-                            label={copy.uploads.autoTagFilname}
-                            value={tagByFileName}
-                            onChange={() => this.uploadsSetting({ tagByFileName: !tagByFileName })}
-                        />
-                        <CheckboxField
-                            width='50%'
-                            label={copy.uploads.assignToProjectInput}
-                            info={copy.uploads.assignToProjectInfo}
-                            value={!assignToStory}
-                            onChange={() => this.uploadsSetting({ assignToStory: !assignToStory })}
-                        />
-                    </div>
-                    {tagsColumn}
-                    <div className='uploads-list'>{uploadsListInner}</div>
-                    <div className='uploads-confirm'>
-                        <CheckboxField
-                            label={`Don't show again`}
-                            value={!showUploadsMenu}
-                            onChange={() =>
-                                this.props.updateEditorConfig({
-                                    showUploadsMenu: !showUploadsMenu
-                                })
-                            }
-                        />
-                        <Button
-                            key='cancel-upload'
-                            onClick={() => this.cancelUploadHandler(disable)}
-                            customStyles={{
-                                color: 'black'
-                            }}
-                            style='bold'
-                            color='secondary'
-                            width='60px'
-                            size='small'>
-                            Cancel
-                        </Button>
-                        <Button
-                            key='upload-file'
-                            disabled={disable}
-                            onClick={() => this.uploadFileHandler()}
-                            style='bold'
-                            color='primary'
-                            width='80px'
-                            size='small'>
-                            Upload {ICON_UPLOAD}
-                        </Button>
-                    </div>
-                </div>
-            </AssetsTableDropzone>
+                {tagsColumn}
+                <div className='uploads-list'>{uploadsListInner}</div>
+            </div>
         );
     }
 }
@@ -363,10 +181,15 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 const mapDispatchToProps = (dispatch): any => {
     return bindActionCreators(
         {
+            toggleAssignToStory,
+            toggleTagFileName,
             cancelAssetUpload,
-            cancelNonUploadedAssets,
-            uploadingAsset,
-            updateUploadTags
+            toggleTagDelimiter,
+            setDelimiter,
+            toggleManualTagging,
+            addManualTag,
+            deleteManualTag,
+            deleteManualTags
         },
         dispatch
     );
@@ -375,8 +198,7 @@ const mapDispatchToProps = (dispatch): any => {
 const mapStateToProps = (state): any => {
     return {
         assetUploads: state.assetUploads,
-        assetTags: state.assetTags,
-        editor: state.editor
+        assetTags: state.assetTags
     };
 };
 

package/src/components/button-group-field/ButtonGroupField.tsx

@@ -12,7 +12,7 @@ interface IButtonGroupOption {
 }
 
 interface IButtonGroupFieldProps {
-    label?: any;
+    label?: string;
     width?: string | number;
     value: string | boolean;
     options: IButtonGroupOption[];

package/src/components/checkbox-field/CheckboxField.tsx

@@ -4,7 +4,7 @@ import { IToolTipConfig } from '../Tooltip';
 import { ICON_CHECK } from '../../constants/icons';
 
 interface ICheckboxFieldProps {
-    label?: any;
+    label?: string;
     value: boolean;
     width?: string | number;
     tooltip?: IToolTipConfig | string;

package/src/components/color-field/ColorField.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
-import { SketchPicker } from '@imposium-hub/react-color';
+import { SketchPicker } from 'react-color';
 
 interface IColorFieldProps {
     buttons?: any;
-    label?: any;
+    label?: string;
     placeholder?: string;
     readOnly?: boolean;
     value: string;
@@ -29,7 +29,7 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
 
     private picker: any;
 
-    private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADBJREFUOE9jPHPmzH8GPMDY2BifNAPjqAHDIgz+//+PNx2cPXsWfzoYNYCBceiHAQD1OVMJc/dYeAAAAABJRU5ErkJggg==") left center`;
+    private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center`;
 
     constructor(props) {
         super(props);

package/src/components/context-menu/ContextMenu.tsx

@@ -19,8 +19,6 @@ const ContextMenu = ({
 }) => {
     const contextMenuEl = useRef(null);
     const [isVisible, setVisible] = useState(false);
-    const [top, setTop] = useState('');
-    const [left, setLeft] = useState('');
     const [clientPosition, setClientPosition] = useState(null);
 
     const showMenu = (e) => {
@@ -109,8 +107,8 @@ const ContextMenu = ({
             if (windowInnerHeight < clientY + elemHeight) newClientY = clientY - elemHeight;
             if (windowInnerWidth < clientX + elemWidth) newClientX = clientX - elemWidth;
 
-            setTop(`${newClientY + 2}px`);
-            setLeft(`${newClientX + 2}px`);
+            contextMenuEl.current.style.top = `${newClientY + 2}px`;
+            contextMenuEl.current.style.left = `${newClientX + 2}px`;
 
             if (onShow) onShow();
         }
@@ -120,18 +118,15 @@ const ContextMenu = ({
         React.cloneElement(child, { id })
     );
 
-    const ContextComponent = () => {
-        return (
-            <div
-                className={`contextmenu`}
-                ref={contextMenuEl}
-                style={{ top, left }}
-                onMouseLeave={handleMouseLeave}
-                {...attributes}>
-                {childrenWithProps}
-            </div>
-        );
-    };
+    const ContextComponent = () => (
+        <div
+            className={`contextmenu`}
+            ref={contextMenuEl}
+            onMouseLeave={handleMouseLeave}
+            {...attributes}>
+            {childrenWithProps}
+        </div>
+    );
 
     const PortalContextComponent = () =>
         ReactDOM.createPortal(<ContextComponent />, document.querySelector(appendTo));