@imposium-hub/components 2.3.5-0 → 2.3.6

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,180 @@ 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 +259,103 @@ 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' : '';
+        const width = document.getElementsByClassName('assetUploads')[0]?.clientWidth;
+
         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'
+                    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>
         );
     }
 }
@@ -181,15 +363,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 +375,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/button-group-field/ButtonGroupField.tsx

@@ -12,7 +12,7 @@ interface IButtonGroupOption {
 }
 
 interface IButtonGroupFieldProps {
-    label?: string;
+    label?: any;
     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?: string;
+    label?: any;
     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 'react-color';
+import { SketchPicker } from '@imposium-hub/react-color';
 
 interface IColorFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     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/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center`;
+    private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADBJREFUOE9jPHPmzH8GPMDY2BifNAPjqAHDIgz+//+PNx2cPXsWfzoYNYCBceiHAQD1OVMJc/dYeAAAAABJRU5ErkJggg==") left center`;
 
     constructor(props) {
         super(props);

package/src/components/copy-prop-id-button/CopyPropIdButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ICON_CLIPBOARD } from '../../constants/icons';
+import Button from '../button/Button';
+import { compositions as copy } from '../../constants/copy';
+
+interface ICopyPropIdButtonProps {
+    copyPropId: string;
+    onNotification?(e): void;
+    onError?(e): void;
+}
+
+class CopyPropIdButton extends React.PureComponent<ICopyPropIdButtonProps, undefined> {
+    private clickHandler = () => this.copyPropId();
+
+    private copyPropId() {
+        const { onNotification, onError, copyPropId } = this.props;
+        navigator.clipboard.writeText(copyPropId).then(
+            () => {
+                if (onNotification) {
+                    onNotification(`Property ID copied to clipboard.`);
+                }
+            },
+            () => {
+                if (onError) {
+                    onError('Error copying property ID to clipboard.');
+                }
+            }
+        );
+    }
+
+    public render() {
+        return (
+            <Button
+                tooltip={copy.tooltipPropId}
+                onClick={this.clickHandler}
+                size='small'
+                style='subtle'>
+                {ICON_CLIPBOARD}
+            </Button>
+        );
+    }
+}
+
+export default CopyPropIdButton;

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/list-field/ListField.tsx

@@ -10,7 +10,7 @@ import { ICON_PLUS } from '../../constants/icons';
 interface IListFieldProps {
     buttons?: any;
     disabled?: boolean;
-    label?: string;
+    label?: any;
     options: any;
     placeholder?: string;
     tooltip?: IToolTipConfig | string;

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

@@ -4,7 +4,7 @@ import { IToolTipConfig } from '../Tooltip';
 
 interface INumberFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value: number;

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;
@@ -67,6 +66,7 @@ interface IPublishWizardProps {
     renderBatch: (batchId: string, postRenderActions?: any) => any;
     publishData: any;
     onDeleteBatch?: (batchId: string) => any;
+    onBackBtn?: () => void;
 }
 
 export interface ICredential {
@@ -350,13 +350,20 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     size={'large'}
                     key='btn-back'
                     onClick={() =>
-                        this.setState({
-                            screenIndex: backIndex,
-                            next: false,
-                            nextStep: false,
-                            error: false,
-                            done: false
-                        })
+                        this.setState(
+                            {
+                                screenIndex: backIndex,
+                                next: false,
+                                nextStep: false,
+                                error: false,
+                                done: false
+                            },
+                            () => {
+                                if (this.props.onBackBtn) {
+                                    this.props.onBackBtn();
+                                }
+                            }
+                        )
                     }
                     color='primary'>
                     {copy.publish.btnBack}