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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.2.44-2",
+    "version": "2.2.44-3",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -43,7 +43,7 @@
         "js-cookie": "^2.2.1",
         "lodash": "^4.17.21",
         "moment": "^2.29.1",
-        "react-color": "^2.18.0",
+        "@imposium-hub/react-color": "^2.19.4",
         "react-merge-refs": "^1.1.0",
         "react-moveable": "^0.26.1",
         "react-transition-group": "^4.4.5"
@@ -55,7 +55,7 @@
         "@fortawesome/pro-light-svg-icons": "^6.1.1",
         "@fortawesome/pro-solid-svg-icons": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
-        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-1",
+        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-5",
         "axios": "^0.21.1",
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
@@ -80,7 +80,7 @@
         "@fortawesome/react-fontawesome": "^0.1.18",
         "@imposium-hub/eslint-config": "^1.1.0",
         "@imposium-hub/prettier-config": "^2.1.0",
-        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-1",
+        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-5",
         "@storybook/addon-actions": "^6.4.22",
         "@storybook/addon-docs": "^6.4.22",
         "@storybook/addon-essentials": "^6.4.22",

package/src/components/assets/AssetsUploadMenu.tsx

@@ -1,8 +1,12 @@
 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 { cancelAssetUpload } from '../../redux/actions/asset-uploads';
+import {
+    cancelAssetUpload,
+    uploadingAsset,
+    updateUploadTags,
+    cancelNonUploadedAssets
+} from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Button from '../button/Button';
@@ -14,19 +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;
     cancelAssetUpload: (fileName: string, api: IImposiumAPI) => any;
+    cancelNonUploadedAssets: (api: IImposiumAPI) => any;
     updateEditorConfig(c): void;
-    editor: any;
+    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> {
+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) {
@@ -34,6 +77,20 @@ 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;
 
@@ -41,6 +98,8 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
         this.props.updateEditorConfig({
             assetUploads: newState
         });
+
+        this.props.updateUploadTags();
     }
 
     private deleteManualTag(tag) {
@@ -56,10 +115,43 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
         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,
@@ -71,68 +163,96 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
             },
             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.uploadsSetting({ delimiter: 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.deleteManualTag(tag)}
+                removeHandler={() => {
+                    this.deleteManualTag(tag);
+                }}
             />
         ));
+
         const removeTagsBtn =
             tagsArray.length > 0 ? (
                 <Button
                     tooltip='Remove All Tags'
                     style='sublte'
-                    onClick={() => this.uploadsSetting({ manualTags: [] })}>
+                    onClick={() => {
+                        this.uploadsSetting({ manualTags: [] });
+                    }}>
                     <FontAwesomeIcon icon={faEraser} />
                 </Button>
             ) : null;
+
         const tagsColumn = tagManually && (
             <div className='tags-column'>
                 <TextField
@@ -141,46 +261,108 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                     suggestions={assetTags}
                     label={copy.tags.add}
                     width={AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
-                    doSubmit={(t) => this.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.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 })}
-                    />
+            <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>
         );
     }
 }
@@ -188,7 +370,10 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
 const mapDispatchToProps = (dispatch): any => {
     return bindActionCreators(
         {
-            cancelAssetUpload
+            cancelAssetUpload,
+            cancelNonUploadedAssets,
+            uploadingAsset,
+            updateUploadTags
         },
         dispatch
     );

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/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,7 +18,7 @@ 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',