@imposium-hub/components 1.58.4 → 1.58.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "1.58.4",
+    "version": "1.58.6",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -54,11 +54,11 @@
         "@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.5",
         "axios": "^0.21.1",
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
         "react": "^17.0.1",
-        "react-autosuggest": "^9.4.3",
         "react-dnd": "^14.0.2",
         "react-dnd-html5-backend": "^14.0.0",
         "react-dom": "^17.0.2",
@@ -80,6 +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.5",
         "@storybook/addon-actions": "^6.4.22",
         "@storybook/addon-docs": "^6.4.22",
         "@storybook/addon-essentials": "^6.4.22",
@@ -110,7 +111,6 @@
         "onchange": "^7.1.0",
         "prettier": "^2.6.2",
         "react": "^17.0.1",
-        "react-autosuggest": "^9.4.3",
         "react-dnd": "^14.0.2",
         "react-dnd-html5-backend": "^14.0.0",
         "react-dom": "^17.0.2",
@@ -122,8 +122,8 @@
         "react-tooltip": "3.11.1",
         "run-sequence": "^2.2.1",
         "sb": "^6.4.22",
-        "storybook-dark-mode": "^1.1.0",
         "smpte-timecode": "^1.2.3",
+        "storybook-dark-mode": "^1.1.0",
         "typescript": "^4.6.3"
     },
     "eslintConfig": {

package/src/components/asset-details/AssetDetails.tsx

@@ -62,6 +62,15 @@ class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsStat
         const nameSubmit = !newAsset ? (e) => this.props.onNameChange(e) : undefined;
         const nameChange = newAsset ? (e) => this.props.onNameChange(e) : undefined;
 
+        const assetIdField = (
+            <TextField
+                readOnly={true}
+                width='25%'
+                showCopy={true}
+                value={asset.id}
+            />
+        );
+
         const nameField = (
             <TextField
                 label={copy.name}
@@ -106,6 +115,7 @@ class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsStat
         return (
             <div className='asset-details'>
                 <h2>{title}</h2>
+                {assetIdField}
                 <div className='header-buttons'>{this.props.headerButtons}</div>
                 <HRule />
                 {nameField}

package/src/components/assets/AssetsTableTagsPivot.tsx

@@ -8,6 +8,7 @@ import { bindActionCreators } from 'redux';
 import { IImposiumAPI } from '../../services/API';
 import Button from '../button/Button';
 import { ICON_TIMES } from '../../constants/icons';
+import { getAssetTagList } from '../../redux/actions/asset-tags';
 
 interface IAssetsTableTagsPivotProps {
     row: any; // React table row wrapper
@@ -15,7 +16,9 @@ interface IAssetsTableTagsPivotProps {
     addAssetTag: (api: any, id: string, tags: string) => any;
     deleteAssetTag: (api: any, id: string, tag: string) => any;
     onClose(e, row): void;
+    getAssetTagList: (api: any, storyId: string) => any;
     assetTags: string[];
+    project: any;
 }
 
 class AssetsTableTagsPivot extends React.PureComponent<IAssetsTableTagsPivotProps> {
@@ -29,7 +32,8 @@ class AssetsTableTagsPivot extends React.PureComponent<IAssetsTableTagsPivotProp
 
     private addTags = (assetId: string, tags: string): void => {
         const {
-            row: { original }
+            row: { original },
+            project: { storyId }
         } = this.props;
 
         let newTags = tags.split(',');
@@ -42,6 +46,7 @@ class AssetsTableTagsPivot extends React.PureComponent<IAssetsTableTagsPivotProp
 
         if (newTags) {
             this.props.addAssetTag(this.props.api, assetId, newTags.join());
+            this.props.getAssetTagList(this.props.api, storyId);
         }
     };
 
@@ -52,6 +57,7 @@ class AssetsTableTagsPivot extends React.PureComponent<IAssetsTableTagsPivotProp
             },
             assetTags
         } = this.props;
+
         const tagsArray = [...new Set(tags)];
         const tagsMarkup: JSX.Element[] = tagsArray.map((tag: string) => (
             <Tag
@@ -91,12 +97,13 @@ class AssetsTableTagsPivot extends React.PureComponent<IAssetsTableTagsPivotProp
 }
 
 const mapDispatchToProps = (dispatch): any => {
-    return bindActionCreators({ addAssetTag, deleteAssetTag }, dispatch);
+    return bindActionCreators({ addAssetTag, deleteAssetTag, getAssetTagList }, dispatch);
 };
 
 const mapStateToProps = (state): any => {
     return {
-        assetTags: state.assetTags
+        assetTags: state.assetTags,
+        project: state.project
     };
 };
 

package/src/components/text-field/TextField.tsx

@@ -12,8 +12,8 @@ import {
     ICON_CLIPBOARD,
     ICON_TIMES
 } from '../../constants/icons';
-
-import Autosuggest from 'react-autosuggest';
+import ReactTextareaAutocomplete from '@imposium-hub/react-textarea-autocomplete';
+import Spinner from '../spinner/Spinner';
 
 interface ITextFieldProps {
     buttons?: any;
@@ -54,19 +54,17 @@ interface ITextFieldState {
 class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     private inputRef: any;
 
+    private textAreaRef: any;
+
     private evtHandlers = {
-        submittable: () => this.forceSubmit(),
+        submittable: (e) => this.forceSubmit(e),
         controlled: (e) => this.toggleEditing(e),
         cancel: () => this.cancelEdit(),
-        clear: () => this.forceSubmit(true),
+        clear: (e) => this.forceSubmit(e, true),
         toggleEditing: (e) => this.toggleEditing(e),
-        forceSubmit: () => this.forceSubmit(),
+        forceSubmit: (e) => this.forceSubmit(e),
         clearValue: () => this.clearValue(),
-        copyToClipboard: (e) => this.copyToClipboard(e),
-        onSuggestionsFetchRequested: (e) => this.onSuggestionsFetchRequested(e),
-        onSuggestionsClearRequested: () => this.onSuggestionsClearRequested(),
-        getSuggestionValue: (e) => this.getSuggestionValue(e),
-        renderSuggestion: (e) => this.renderSuggestion(e)
+        copyToClipboard: (e) => this.copyToClipboard(e)
     };
 
     constructor(props) {
@@ -86,6 +84,8 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
 
         this.inputRef = React.createRef();
 
+        this.textAreaRef = React.createRef();
+
         hotkeys.filter = (e) => filterHotkeys(e);
     }
 
@@ -106,14 +106,23 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     public componentDidUpdate = (prevProps, prevState): void => {
-        if (this.props.controlled || this.props.submittable) {
-            if (prevProps.value !== this.props.value) {
+        const { controlled, submittable, value } = this.props;
+        const { editing, internalValue } = this.state;
+
+        if (controlled || submittable) {
+            this.textAreaRef.onkeydown = (e) => {
+                if (e.key === 'Enter') {
+                    this.props.doSubmit(internalValue);
+                }
+            };
+
+            if (prevProps.value !== value) {
                 this.setState({
-                    internalValue: this.props.value
+                    internalValue: value
                 });
             }
 
-            if (this.props.value === '' && !this.state.editing && prevState.editing) {
+            if (value === '' && !editing && prevState.editing) {
                 this.setState({
                     internalValue: ''
                 });
@@ -197,7 +206,6 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     private onChange(e, v?) {
         const { pattern } = this.props;
         let val = v ? v.newValue : e.target.value;
-
         if (!this.props.controlled && !this.props.submittable) {
             if (pattern) {
                 if (!pattern.test(val)) {
@@ -217,7 +225,7 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
                 () => {
                     if (v) {
                         if (v.method === 'click') {
-                            this.evtHandlers.submittable();
+                            this.evtHandlers.submittable(e);
                         }
                     }
                 }
@@ -225,10 +233,11 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         }
     }
 
-    private forceSubmit = (clear: boolean = false): void => {
+    private forceSubmit = (e, clear: boolean = false): void => {
+        e.preventDefault();
         const { internalValue } = this.state;
 
-        if (!clear) {
+        if (!clear && internalValue !== '') {
             this.props.doSubmit(internalValue);
 
             if (this.props.submittableType === 'add') {
@@ -242,6 +251,14 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         }
     };
 
+    private onClickHandler = (e, value): void => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.props.doSubmit(value);
+        this.setState({ internalValue: '' });
+    };
+
     private toggleEditing(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -257,7 +274,7 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
                 () => {
                     // only fire onSubmit if the value changed
                     if (internalValue !== value) {
-                        let val = this.state.internalValue;
+                        let val = internalValue;
                         if (val === '') {
                             val = null;
                         }
@@ -292,26 +309,6 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         );
     }
 
-    private getSuggestions(value) {
-        const inputValue = value.trim().toLowerCase();
-        const inputLength = inputValue.length;
-
-        return inputLength === 0
-            ? []
-            : this.props.suggestions.filter(
-                  (tag) => tag.toLowerCase().slice(0, inputLength) === inputValue
-              );
-    }
-
-    private getSuggestionValue(suggestion) {
-        return suggestion;
-    }
-
-    // Use your imagination to render suggestions.
-    private renderSuggestion(suggestion) {
-        return <div className='suggestion'>{suggestion}</div>;
-    }
-
     private renderSubmittableIcon = (): JSX.Element => {
         const { submittableType } = this.props;
 
@@ -404,21 +401,8 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         return buttonArray;
     }
 
-    private onSuggestionsFetchRequested = ({ value }) => {
-        this.setState({
-            suggestions: this.getSuggestions(value)
-        });
-    };
-
-    private onSuggestionsClearRequested = () => {
-        this.setState({
-            suggestions: []
-        });
-    };
-
     private renderInput() {
         const { placeholder, controlled, submittable, disabled, readOnly, loading } = this.props;
-        const { suggestions } = this.state;
         const { editing } = this.state;
         const disable = (controlled && !editing) || disabled;
         const inputClass = controlled || submittable ? 'controlled-input' : '';
@@ -431,25 +415,57 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
             readOnly,
             ref: this.inputRef,
             onFocus: (e) => this.focus(e),
-            onBlur: (e) => this.blur(e)
+            onBlur: (e) => this.blur(e),
+            onChange: (e) => this.onChange(e)
         };
 
         if (this.props.suggestions) {
-            inputProps.onChange = (e, v) => this.onChange(e, v);
+            const chars = [];
+            const varsData = [];
+            const trigger = {};
+
+            this.props.suggestions.map((tag) => {
+                chars.push(tag[0]);
+                const obj = {
+                    name: `${tag}`
+                };
+                varsData.push(obj);
+            });
+
+            const variableItem = ({ entity: { name } }) => (
+                <div
+                    className='variable'
+                    onClick={(e) => this.onClickHandler(e, name)}>{`${name}`}</div>
+            );
+            const uniqueChars = [...new Set(chars)];
+
+            for (const char of uniqueChars) {
+                trigger[char] = {
+                    dataProvider: () => {
+                        const filtered = varsData.filter((f) =>
+                            f.name.toLowerCase().startsWith(char)
+                        );
+                        return filtered;
+                    },
+                    component: variableItem,
+                    output: (tag) => `${tag.name}`
+                };
+            }
+
+            const value = this.getValue();
 
             return (
-                <Autosuggest
-                    suggestions={suggestions}
-                    onSuggestionsFetchRequested={this.evtHandlers.onSuggestionsFetchRequested}
-                    onSuggestionsClearRequested={this.evtHandlers.onSuggestionsClearRequested}
-                    getSuggestionValue={this.evtHandlers.getSuggestionValue}
-                    renderSuggestion={this.evtHandlers.renderSuggestion}
-                    inputProps={inputProps}
+                <ReactTextareaAutocomplete
+                    value={value}
+                    loadingComponent={() => <Spinner />}
+                    minChar={0}
+                    textAreaComponent='input'
+                    trigger={trigger}
+                    innerRef={(ref) => (this.textAreaRef = ref)}
+                    {...inputProps}
                 />
             );
         } else {
-            inputProps.onChange = (e) => this.onChange(e);
-
             return (
                 <input
                     className={`${inputClass}`}