@imposium-hub/components 2.5.10 → 2.5.11-1

package/less/components/form-field.less

@@ -55,6 +55,10 @@
 		padding:4px;
 	}
 
+	input[type=number] {
+		-moz-appearance: textfield;
+	}
+	
 	textarea{
 		height:@inputHeight * 3;
 		resize:none;
@@ -156,15 +160,15 @@
 			padding-top: 1px;
 			box-sizing: border-box;
 			color:darken(@textDefault, 30%);
-
+			background: #373737;
 			&:hover{
 				background:darken(@inputBackground, 5%);
 			}
 
 			&.active{
 				cursor:auto;
-				background:lighten(@inputBackground, 10%);
-				color:@textDefault;
+				background:unset;
+				color:unset;
 			}
 
 			&.disabled svg {

package/less/components/tag.less

@@ -40,4 +40,9 @@
             cursor: pointer;
         }
     }
+}
+
+.imposium-asset-id {
+    cursor: pointer;
+    user-select: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.5.10",
+    "version": "2.5.11-1",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/app-wrapper/AppWrapper.tsx

@@ -8,7 +8,6 @@ import { bindActionCreators } from 'redux';
 import { login, clearCachedAuth } from '../../redux/actions/auth';
 import { validateAccessLevel } from '../../Util';
 import { setAccessData } from '../../redux/actions/access';
-import { ConfirmModal } from '../confirm-modal/ConfirmModal';
 
 export interface IAppWrapperProps {
     children: React.ReactChildren;
@@ -85,7 +84,10 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     /*
         Check the auth0 session expiry
      */
-    public componentDidUpdate = (prevProps): void => {
+    public componentDidUpdate = (
+        prevProps: Readonly<IAppWrapperProps>,
+        prevState: Readonly<IAppWrapperState>
+    ): void => {
         const { auth } = this.props;
         let validAccessLevel: boolean;
 
@@ -284,7 +286,6 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
                 id='app'
                 className='app'>
                 {innerContent}
-                <ConfirmModal />
             </div>
         );
     };

package/src/components/assets/AssetsTableAssetIdCell.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { copying } from '../../constants/copy';
+import { updateFilters } from '../../redux/actions/asset-filters';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+interface IAssetsTableAssetIdCellProps {
+    cell: any;
+    onNotification?: (e) => void;
+    onError?: (e) => void;
+}
+
+const AssetsTableAssetIdCell: React.FC<IAssetsTableAssetIdCellProps> = (
+    props: IAssetsTableAssetIdCellProps
+) => {
+    const {
+        onNotification,
+        onError,
+        cell: {
+            row: {
+                original: { id }
+            }
+        }
+    } = props;
+
+    const copyToClipboard = (e) => {
+        navigator.clipboard.writeText(e.target.textContent).then(
+            () => {
+                if (onNotification) {
+                    onNotification(`${copying.copied}`);
+                }
+            },
+            () => {
+                if (onError) {
+                    onError(`${copying.error}`);
+                }
+            }
+        );
+    };
+
+    return (
+        <div
+            key={id}
+            className='imposium-asset-id'
+            onClick={(e) => copyToClipboard(e)}>
+            {id}
+        </div>
+    );
+};
+
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ updateFilters }, dispatch);
+};
+
+const mapStateToProps = (state): any => {
+    return { assetFilters: state.assetFilters };
+};
+
+const AssetsTableAssetIdCellMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableAssetIdCell));
+
+export default AssetsTableAssetIdCellMemoized;

package/src/components/assets/AssetsTableAssetIdFilter.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import TextField from '../text-field/TextField';
+import { updateFilters } from '../../redux/actions/asset-filters';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+interface IAssetsTableAssetIdFilterProps {
+    assetFilters: any;
+    updateFilters: (filters: any) => any;
+}
+
+class AssetsTableAssetIdFilter extends React.PureComponent<IAssetsTableAssetIdFilterProps> {
+    public render = (): JSX.Element => {
+        const { assetFilters } = this.props;
+
+        return (
+            <TextField
+                className='asset-id'
+                submittable
+                submittableType='search'
+                value={assetFilters.id}
+                doSubmit={(n) => this.props.updateFilters({ id: n })}
+            />
+        );
+    };
+}
+
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ updateFilters }, dispatch);
+};
+
+const mapStateToProps = (state): any => {
+    return { assetFilters: state.assetFilters };
+};
+
+const AssetsTableAssetIdFilterMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableAssetIdFilter));
+
+export default AssetsTableAssetIdFilterMemoized;

package/src/components/assets/AssetsTableGlobalCell.tsx

@@ -6,8 +6,18 @@ interface IAssetsTableGlobalCell {
 }
 
 const AssetsTableGlobalCell: React.FC<IAssetsTableGlobalCell> = (p: IAssetsTableGlobalCell) => {
+    const {
+        cell: {
+            row: {
+                original: { story_id }
+            }
+        }
+    } = p;
+
     return (
-        <div className='asset-global-cell'>{p.cell.row.original.story_id ? null : ICON_GLOBE}</div>
+        <div className='asset-global-cell'>
+            {story_id || story_id === undefined ? null : ICON_GLOBE}
+        </div>
     );
 };
 

package/src/components/assets/AssetsTableNameCell.tsx

@@ -45,6 +45,15 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
         };
     }, [name]);
 
+    const errorField = error ? (
+        <TextField
+            value={error}
+            width={'100%'}
+        />
+    ) : (
+        <span>{copy.uploads.preparePhase}</span>
+    );
+
     if (uploadProgress) {
         const loader: JSX.Element =
             uploadProgress < 100 ? (
@@ -53,7 +62,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
                     text={name}
                 />
             ) : (
-                <span>{error ? error : copy.uploads.preparePhase}</span>
+                errorField
             );
         return loader;
     } else {

package/src/components/card/Card.tsx

@@ -11,6 +11,7 @@ interface ICardProps {
     onOpen?: (e: any) => any;
     onClose?: (e: any) => any;
     onToggle?: (toggle: boolean) => any;
+    buttons?: any[];
 }
 
 interface ICardState {
@@ -97,9 +98,7 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
 
         return (
             <div className={`card ${openClass} ${collapsableClass} ${styleClass}`}>
-                <div
-                    className='card-header'
-                    onClick={this.evtHandlers.toggleOpen}>
+                <div className='card-header'>
                     {this.renderTitle(styleClass)}
                     {this.renderButtons()}
                 </div>
@@ -109,21 +108,36 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
     }
 
     public renderButtons() {
-        const { collapsable } = this.props;
+        const { collapsable, buttons } = this.props;
         const { open } = this.state;
         const buttonIcon = open ? ICON_CARET_UP : ICON_CARET_DOWN;
 
+        let buttonArray: JSX.Element[];
+
+        const toggleBtn = (
+            <Button
+                key='toggleOpen'
+                style='subtle'
+                onClick={(e) => this.toggleOpen(e)}>
+                {buttonIcon}
+            </Button>
+        );
+
+        if (buttons && buttons.length > 0) {
+            buttonArray = buttons.map((button) => {
+                return button;
+            });
+        }
+
         if (collapsable) {
-            return (
-                <div className='header-buttons'>
-                    <Button
-                        style='subtle'
-                        onClick={this.evtHandlers.toggleOpen}>
-                        {buttonIcon}
-                    </Button>
-                </div>
-            );
+            if (buttonArray && buttonArray.length > 0) {
+                buttonArray.push(toggleBtn);
+            } else {
+                buttonArray = [toggleBtn];
+            }
         }
+
+        return <div className='header-buttons'>{buttonArray}</div>;
     }
 }
 

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

@@ -26,102 +26,149 @@ const Paginator: React.FC<any> = ({
     setPageSize,
     itemsPerPage,
     onItemsPerPage
-}) => (
-    <section className='ip-table-pagination'>
-        <span>
-            <Button
-                style='subtle'
-                size='small'
-                tooltip='Go to first page'
-                disabled={!canPreviousPage}
-                onClick={() => gotoPage(1, pageSize)}>
-                {ICON_ANGLE_DOUBLE_LEFT}
-            </Button>
-            <Button
-                style='subtle'
-                size='small'
-                tooltip='Go to previous page'
-                disabled={!canPreviousPage}
-                onClick={() => previousPage()}>
-                {ICON_ANGLE_LEFT}
-            </Button>
-            <Button
-                style='subtle'
-                size='small'
-                tooltip='Go to next page'
-                disabled={!canNextPage}
-                onClick={() => nextPage()}>
-                {ICON_ANGLE_RIGHT}
-            </Button>
-            <Button
-                style='subtle'
-                size='small'
-                tooltip='Go to last page'
-                disabled={!canNextPage}
-                onClick={() => gotoPage(pageCount, pageSize)}>
-                {ICON_ANGLE_DOUBLE_RIGHT}
-            </Button>
-            &nbsp;&nbsp;
+}) => {
+    const [getPageIndex, setPageIndex] = React.useState<number>(pageIndex);
+    const [getItemsPerPage, setItemsPerPage] = React.useState<number>(itemsPerPage);
+
+    React.useEffect(() => {
+        if (pageIndex !== getPageIndex) {
+            setPageIndex(pageIndex);
+        }
+    }, [pageIndex]);
+
+    const onItemsPerPageBlur = () => {
+        clearTimeout(textInputTimeout);
+        onItemsPerPage(getItemsPerPage);
+    };
+
+    const onGoToPageBlur = () => {
+        clearTimeout(textInputTimeout);
+        gotoPage(getPageIndex, pageSize);
+    };
+
+    const onItemsPerPageKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            clearTimeout(textInputTimeout);
+            onItemsPerPage(getItemsPerPage);
+        }
+    };
+
+    const onGoToPageKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            clearTimeout(textInputTimeout);
+            gotoPage(getPageIndex, pageSize);
+        }
+    };
+
+    return (
+        <section className='ip-table-pagination'>
             <span>
-                {copy.table.page}&nbsp;&nbsp;
-                <strong>
-                    {pageIndex} of {pageCount}
-                </strong>
+                <Button
+                    style='subtle'
+                    size='small'
+                    tooltip='Go to first page'
+                    disabled={!canPreviousPage}
+                    onClick={() => gotoPage(1, pageSize)}>
+                    {ICON_ANGLE_DOUBLE_LEFT}
+                </Button>
+                <Button
+                    style='subtle'
+                    size='small'
+                    tooltip='Go to previous page'
+                    disabled={!canPreviousPage}
+                    onClick={() => previousPage()}>
+                    {ICON_ANGLE_LEFT}
+                </Button>
+                <Button
+                    style='subtle'
+                    size='small'
+                    tooltip='Go to next page'
+                    disabled={!canNextPage}
+                    onClick={() => nextPage()}>
+                    {ICON_ANGLE_RIGHT}
+                </Button>
+                <Button
+                    style='subtle'
+                    size='small'
+                    tooltip='Go to last page'
+                    disabled={!canNextPage}
+                    onClick={() => gotoPage(pageCount, pageSize)}>
+                    {ICON_ANGLE_DOUBLE_RIGHT}
+                </Button>
                 &nbsp;&nbsp;
+                <span>
+                    {copy.table.page}&nbsp;&nbsp;
+                    <strong>
+                        {getPageIndex} of {pageCount}
+                    </strong>
+                    &nbsp;&nbsp;
+                </span>
+                <span>
+                    {copy.table.goToPage}&nbsp;&nbsp;
+                    <input
+                        className='paginator-input'
+                        type='number'
+                        placeholder={getPageIndex.toString()}
+                        onChange={(e) => {
+                            const input = e.target.value;
+                            const inputNum = Number(input);
+                            let next: number;
+
+                            clearTimeout(textInputTimeout);
+
+                            if (!input || inputNum < 1 || inputNum > pageCount) {
+                                return;
+                            }
+
+                            if (inputNum >= 1 && inputNum <= pageCount) {
+                                next = inputNum;
+                            }
+
+                            textInputTimeout = window.setTimeout(
+                                () => gotoPage(next, pageSize),
+                                1000
+                            );
+                        }}
+                        onBlur={() => onGoToPageBlur()}
+                        onKeyDown={(e) => onGoToPageKeyDown(e)}
+                    />
+                </span>
+                &nbsp;&nbsp;
+                <span>
+                    {copy.table.itemsPerPage}&nbsp;&nbsp;
+                    <input
+                        className='paginator-input'
+                        type='number'
+                        placeholder={getItemsPerPage.toString()}
+                        min={1}
+                        onChange={(e) => {
+                            const input = e.target.value;
+                            const inputNum = Number(input);
+
+                            clearTimeout(textInputTimeout);
+
+                            if (!input || inputNum < 1) {
+                                return;
+                            }
+
+                            setItemsPerPage(inputNum);
+
+                            textInputTimeout = window.setTimeout(
+                                () => onItemsPerPage(inputNum),
+                                1000
+                            );
+                        }}
+                        onBlur={() => onItemsPerPageBlur()}
+                        onKeyDown={(e) => onItemsPerPageKeyDown(e)}
+                    />
+                </span>
             </span>
-            <span>
-                {copy.table.goToPage}&nbsp;&nbsp;
-                <input
-                    className='paginator-input'
-                    type='number'
-                    placeholder={pageIndex}
-                    onChange={(e) => {
-                        const input = e.target.value;
-                        const inputNum = Number(input);
-                        let next: number;
-
-                        clearTimeout(textInputTimeout);
-
-                        if (!input || inputNum < 1 || inputNum > pageCount) {
-                            return;
-                        }
-
-                        if (inputNum >= 1 && inputNum <= pageCount) {
-                            next = inputNum;
-                        }
-
-                        textInputTimeout = window.setTimeout(() => gotoPage(next, pageSize), 300);
-                    }}
-                />
-            </span>
-            &nbsp;&nbsp;
-            <span>
-                {copy.table.itemsPerPage}&nbsp;&nbsp;
-                <input
-                    className='paginator-input'
-                    type='number'
-                    placeholder={itemsPerPage}
-                    min={1}
-                    onChange={(e) => {
-                        const input = e.target.value;
-                        const inputNum = Number(input);
-
-                        clearTimeout(textInputTimeout);
-
-                        if (!input || inputNum < 1) {
-                            return;
-                        }
-
-                        textInputTimeout = window.setTimeout(() => onItemsPerPage(inputNum), 300);
-                    }}
-                />
-            </span>
-        </span>
 
-        <span className='total-assets'>
-            {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
-        </span>
-    </section>
-);
+            <span className='total-assets'>
+                {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+            </span>
+        </section>
+    );
+};
 
 export default Paginator;

package/src/components/smpte-field/SMPTEField.tsx

@@ -12,6 +12,7 @@ interface ISMPTEFieldProps {
     width?: string | number;
     onChange?(e): void;
     onBlur?(e): void;
+    onError?(e): void;
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
@@ -75,7 +76,7 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
 
     private onBlur(e?) {
         const val = e ? e.target.value : this.inputRef.current.value;
-        const isValid = this.smptValidator(val);
+        const isValid = this.SMTPEValidator(val);
 
         if (e && e.key === 'Enter') {
             this.setDuration(isValid, val);
@@ -88,10 +89,12 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
 
     private onChange() {
         const val = this.inputRef.current.value;
-        const isValid = this.smptValidator(val);
+        const isValid = this.SMTPEValidator(val);
 
         if (isValid) {
             this.props.onChange(val);
+        } else {
+            this.props.onError(isValid);
         }
     }
 
@@ -101,11 +104,13 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
             const smpte = getSMPTE(frameRate, val);
             if (smpte && this.props.onBlur) {
                 this.props.onBlur(smpte);
+            } else {
+                this.props.onError(isValid);
             }
         }
     }
 
-    private smptValidator(val) {
+    private SMTPEValidator(val) {
         const isValidSMPTETimeCode = new RegExp(this.regex);
         const isValid = isValidSMPTETimeCode.test(val);
         const errorMsg = isValid ? null : TIMECODE.ERROR;

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { IImposiumAPI } from '../../services/API';
-import {
-    VARIABLE_TYPES,
-    BOOLEAN_DEFAULT_OPTIONS,
-    colorPresets,
-    formatColor
-} from '../../constants/variables';
+import { VARIABLE_TYPES, BOOLEAN_DEFAULT_OPTIONS } from '../../constants/variables';
 import { OUTPUT_TYPES } from '../../constants/previewer';
 import TextField from '../text-field/TextField';
 import Button from '../button/Button';
@@ -28,7 +23,6 @@ import LogViewer from '../log-viewer/LogViewer';
 import { connect } from 'react-redux';
 import { ICON_DOWNLOAD, ICON_CLIPBOARD } from '../../constants/icons';
 import AudioPlayer from '../players/AudioPlayer';
-import ColorField from '../color-field/ColorField';
 
 interface IStoryPreviewerProps {
     api: IImposiumAPI;
@@ -143,14 +137,15 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         const { variables } = this.props;
         const inventoryOverrides = this.props.editor?.inventoryOverrides;
         const newInv = {};
+
         for (const i in variables) {
             if (variables.hasOwnProperty(i)) {
                 const override = inventoryOverrides ? inventoryOverrides[i] : null;
                 const inv = variables[i];
-                newInv[inv.id] =
-                    override !== null ? override : this.getVariableValue(inv.previewItem);
+                newInv[inv.id] = override ? override : this.getVariableValue(inv.previewItem);
             }
         }
+
         return newInv;
     }
 
@@ -235,11 +230,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         }
     }
 
-    private colorInputChanged(key, value) {
-        const color = formatColor(value);
-        this.variableInputChanged(key, color);
-    }
-
     private variableInputChanged(key, value) {
         const inventory = { ...this.state.inventory };
         inventory[key] = value;
@@ -407,20 +397,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                             </FieldWrapper>
                         );
                         break;
-                    case VARIABLE_TYPES.COLOR:
-                        const value = inventory[inv.id] ? inventory[inv.id] : 'rgba(0,0,0,1)';
-                        fields.push(
-                            <ColorField
-                                label={inv.name}
-                                labelPosition='top'
-                                enableAlpha={true}
-                                presetColors={colorPresets}
-                                value={value}
-                                pickerPosition='bottom'
-                                onChange={(v) => this.colorInputChanged(inv.id, v)}
-                            />
-                        );
-                        break;
                 }
             }
         }