@imposium-hub/components 2.2.44-1 → 2.2.44-3

package/src/components/assets/AssetsUploadMenu.tsx

@@ -1,17 +1,11 @@
 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,
-    toggleTagFileName,
-    setDelimiter,
-    toggleTagDelimiter,
-    toggleManualTagging,
-    addManualTag,
-    deleteManualTag,
-    deleteManualTags
+    uploadingAsset,
+    updateUploadTags,
+    cancelNonUploadedAssets
 } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -24,26 +18,58 @@ 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;
 }
 
-class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
+interface IAssetsUploadMenuState {
+    assetOver: boolean;
+}
+
+class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAssetsUploadMenuState> {
+    private menuRef: any = null;
+
+    private clickHandler: any = (e) => this.detectOutsideClick(e);
+
     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) {
@@ -51,81 +77,182 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
         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,
-                assignToStory,
-                tagByFileName,
-                tagByDelimiter,
-                delimiter,
-                tagManually,
-                manualTags
+            assetUploads: { uploads },
+            editor: {
+                showUploadsMenu,
+                assetUploads: {
+                    tagByDelimiter,
+                    delimiter,
+                    assignToStory,
+                    tagByFileName,
+                    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 } = u;
-                const loader =
-                    percent < 100 ? (
-                        <DeterminateLoader progress={u.percent} />
-                    ) : (
-                        <span>{copy.uploads.preparePhase}</span>
+                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 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}
+
+                    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>
                         </div>
-                        {loader}
-                    </div>
-                );
+                    );
+                } else {
+                    uploading.push(true);
+                }
             });
         } 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.props.setDelimiter(c)}
+                onChange={(c) => {
+                    this.uploadsSetting({ delimiter: c });
+                }}
             />
         );
+
         const tagsArray = [...new Set(manualTags)];
+
         const tagsMarkup = tagsArray.map((tag: string) => (
             <Tag
                 key={tag}
                 copy={tag}
                 colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                removeHandler={() => this.props.deleteManualTag(tag)}
+                removeHandler={() => {
+                    this.deleteManualTag(tag);
+                }}
             />
         ));
+
         const removeTagsBtn =
             tagsArray.length > 0 ? (
                 <Button
                     tooltip='Remove All Tags'
                     style='sublte'
-                    onClick={() => this.props.deleteManualTags()}>
+                    onClick={() => {
+                        this.uploadsSetting({ manualTags: [] });
+                    }}>
                     <FontAwesomeIcon icon={faEraser} />
                 </Button>
             ) : null;
+
         const tagsColumn = tagManually && (
             <div className='tags-column'>
                 <TextField
@@ -134,46 +261,108 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                     suggestions={assetTags}
                     label={copy.tags.add}
                     width={AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
-                    doSubmit={(t) => this.props.addManualTag(t)}
+                    doSubmit={(t) => {
+                        this.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' : '';
         return (
-            <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)}
-                    />
+            <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>
-                {tagsColumn}
-                <div className='uploads-list'>{uploadsListInner}</div>
-            </div>
+                <div className='uploads-menu'>
+                    <div
+                        className='uploads-menu'
+                        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>
+                </div>
+            </AssetsTableDropzone>
         );
     }
 }
@@ -181,15 +370,10 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
 const mapDispatchToProps = (dispatch): any => {
     return bindActionCreators(
         {
-            toggleAssignToStory,
-            toggleTagFileName,
             cancelAssetUpload,
-            toggleTagDelimiter,
-            setDelimiter,
-            toggleManualTagging,
-            addManualTag,
-            deleteManualTag,
-            deleteManualTags
+            cancelNonUploadedAssets,
+            uploadingAsset,
+            updateUploadTags
         },
         dispatch
     );
@@ -198,7 +382,8 @@ const mapDispatchToProps = (dispatch): any => {
 const mapStateToProps = (state): any => {
     return {
         assetUploads: state.assetUploads,
-        assetTags: state.assetTags
+        assetTags: state.assetTags,
+        editor: state.editor
     };
 };
 

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

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

package/src/components/data-table/DataTable.tsx

@@ -265,7 +265,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                                 {...column.getHeaderProps()}
                                                 className={`ip-table-header ${
                                                     column.canSort ? 'ip-sortable' : ''
-                                                }`}>
+                                                } ${column.pin ? 'pin' : ''}`}>
                                                 {!searchable && (
                                                     <div
                                                         {...toggleProps}
@@ -371,7 +371,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                 {...cell.getCellProps()}
                                 className={`ip-table-col ${
                                     cell.column.overflowVisible ? 'overflow-visible' : ''
-                                }`.trim()}>
+                                } ${cell.column.pin ? 'pin' : ''}`.trim()}>
                                 {cell.render('Cell')}
                             </td>
                         ));

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

@@ -25,7 +25,6 @@ import { connect } from 'react-redux';
 interface IPublishWizardProps {
     story: any;
     project: any;
-    updateEditorConfig(c): void;
     editor: any;
     updateScene(d): void;
     editStory(s): void;

package/src/constants/copy.ts

@@ -1,6 +1,7 @@
 export const assets = {
     tooltipFilter: 'Filter by Asset type',
     previewNotAvailable: 'Preview Not Available for this Asset Type',
+    dropAsset: 'Drop file(s) here.',
     iconTypes: {
         filter: 'Filter By Type',
         lut: 'LUT',
@@ -17,15 +18,15 @@ export const assets = {
         after_effects: 'After Effects'
     },
     uploads: {
-        noUploads: 'There are currently no assets uploading...',
+        noUploads: 'No files selected, drag and drop files here to begin.',
         preparePhase: 'Preparing asset...',
         autoTagFilname: 'Tag by file name',
         autoTagDelimiter: 'Tag by Delimiter',
         delimiterOptions: 'Delimiter Options',
         manualTagging: 'Tag Manually',
-        assignToProjectInput: 'Assign to Project',
+        assignToProjectInput: 'Make Global',
         assignToProjectInfo:
-            'If selected, any assets uploaded will only be available to use with the currently selected project.',
+            'If selected, any assets uploaded will be available to use with all projects on the current organization.',
         uploadButton: 'Upload',
         cancelButton: 'Cancel'
     },

package/src/index.ts

@@ -46,6 +46,7 @@ import AssetsTableTagsFilter from './components/assets/AssetsTableTagsFilter';
 import AssetsTableTagsPivot from './components/assets/AssetsTableTagsPivot';
 import AssetsTableComplexTagCell from './components/assets/AssetsTableComplexTagCell';
 import AssetsTableTypeCell from './components/assets/AssetsTableTypeCell';
+import AssetsTableGlobalCell from './components/assets/AssetsTableGlobalCell';
 import AssetsTableStatusCell from './components/assets/AssetsTableStatusCell';
 import AssetsTableTypeFilter from './components/assets/AssetsTableTypeFilter';
 import AssetsTypeIcon from './components/assets/AssetsTypeIcon';
@@ -103,12 +104,7 @@ import {
     updateAssetStory
 } from './redux/actions/asset-list';
 import { getAssetTagList, addAssetTagToList } from './redux/actions/asset-tags';
-import {
-    cancelAssetUpload,
-    toggleTagFileName,
-    uploadAssets,
-    replaceAsset
-} from './redux/actions/asset-uploads';
+import { cancelAssetUpload, uploadAssets, replaceAsset } from './redux/actions/asset-uploads';
 import { selectAsset, deselectAsset, resetSelection } from './redux/actions/selected-assets';
 import assetFilters from './redux/reducers/asset-filters';
 import assetList from './redux/reducers/asset-list';
@@ -216,6 +212,7 @@ export {
     AssetsTableSelectCell,
     AssetsTableTypeFilter,
     AssetsTableTypeCell,
+    AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
     AssetsTableNameCell,
@@ -251,7 +248,6 @@ export {
     updateAssetName,
     updateAssetData,
     doAssetTableHydration,
-    toggleTagFileName,
     uploadAssets,
     replaceAsset,
     selectAsset,