@imposium-hub/components 2.5.10-9 → 2.5.10

package/dist/styles.less

@@ -1246,10 +1246,6 @@ body{
         border-top: 0;
         background-color: darken(@background, 1%);
 
-        input[type=number] {
-            -moz-appearance: textfield;
-        }
-        
         .paginator-input {
             .inputMixin;
             width: 60px;
@@ -1379,10 +1375,6 @@ body{
 		padding:4px;
 	}
 
-	input[type=number] {
-		-moz-appearance: textfield;
-	}
-	
 	textarea{
 		height:@inputHeight * 3;
 		resize:none;

package/less/components/data-table.less

@@ -207,10 +207,6 @@
         border-top: 0;
         background-color: darken(@background, 1%);
 
-        input[type=number] {
-            -moz-appearance: textfield;
-        }
-        
         .paginator-input {
             .inputMixin;
             width: 60px;

package/less/components/form-field.less

@@ -55,10 +55,6 @@
 		padding:4px;
 	}
 
-	input[type=number] {
-		-moz-appearance: textfield;
-	}
-	
 	textarea{
 		height:@inputHeight * 3;
 		resize:none;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.5.10-9",
+    "version": "2.5.10",
     "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,6 +8,7 @@ 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;
@@ -84,10 +85,7 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     /*
         Check the auth0 session expiry
      */
-    public componentDidUpdate = (
-        prevProps: Readonly<IAppWrapperProps>,
-        prevState: Readonly<IAppWrapperState>
-    ): void => {
+    public componentDidUpdate = (prevProps): void => {
         const { auth } = this.props;
         let validAccessLevel: boolean;
 
@@ -286,6 +284,7 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
                 id='app'
                 className='app'>
                 {innerContent}
+                <ConfirmModal />
             </div>
         );
     };

package/src/components/assets/AssetsTableNameCell.tsx

@@ -20,7 +20,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
     const {
         cell: {
             row: {
-                original: { name, id, percent: uploadProgress }
+                original: { name, id, percent: uploadProgress, error }
             }
         },
         disabled
@@ -53,7 +53,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
                     text={name}
                 />
             ) : (
-                <span>{copy.uploads.preparePhase}</span>
+                <span>{error ? error : copy.uploads.preparePhase}</span>
             );
         return loader;
     } else {

package/src/components/assets/AssetsTypeIcon.tsx

@@ -15,7 +15,8 @@ import {
     ICON_FILE_CODE,
     ICON_CLAPPERBOARD_PLAY,
     ICON_FILTERS,
-    ICON_FILE_UPLOAD
+    ICON_FILE_UPLOAD,
+    ICON_FILE_ERROR
 } from '../../constants/icons';
 
 interface IAssetsTypeIconProps {
@@ -112,6 +113,8 @@ const AssetsTypeIcon: React.FC<IAssetsTypeIconProps> = (p: IAssetsTypeIconProps)
             );
         case 'upload':
             return <span>{ICON_FILE_UPLOAD}</span>;
+        case 'error':
+            return <span>{ICON_FILE_ERROR}</span>;
         default:
             if (filter === 'multi') {
                 return <span>{ICON_FILTERS}</span>;

package/src/components/card/Card.tsx

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

package/src/components/confirm-modal/ConfirmModal.tsx

@@ -1,24 +1,85 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { useHotkeys } from 'react-hotkeys-hook';
 import Modal from '../modal/Modal';
 import Button from '../button/Button';
 import { confirm as copy } from '../../constants/copy';
 import Section from '../section/Section';
 
-export const ConfirmModal = ({
-    onClose,
-    onYes,
-    onNo,
-    title,
-    onYesLabel,
-    onNoLabel,
-    showCancel
-}) => {
-    useHotkeys('enter', onYes, { enableOnFormTags: true });
-    const { cancel } = copy;
+export interface IConfirmModalProps {
+    onYes: () => void;
+    onNo?: () => void;
+    title: string;
+    yesLabel?: string;
+    noLabel?: string;
+    showCancel?: boolean;
+}
 
-    const modal = (
+export const ConfirmModal = () => {
+    const [props, setProps] = useState<IConfirmModalProps>(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const onOpen = (event) => {
+        setProps({
+            ...event.detail
+        });
+        setIsOpen(true);
+    };
+
+    const onClose = () => setIsOpen(false);
+
+    const onYesHandler = () => {
+        props.onYes();
+        setIsOpen(false);
+    };
+
+    const onNoHandler = () => {
+        props.onNo();
+        setIsOpen(false);
+    };
+
+    const onYes = useCallback(() => onYesHandler(), [isOpen]);
+
+    const onNo = useCallback(() => {
+        if (props.onNo) {
+            onNoHandler();
+        } else {
+            onClose();
+        }
+    }, [isOpen]);
+
+    const onKeyDown = useCallback(
+        (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onYesHandler();
+            }
+        },
+        [isOpen]
+    );
+
+    useEffect(() => {
+        window.addEventListener('openconfirmmodal', onOpen);
+        return () => {
+            window.removeEventListener('openconfirmmodal', onOpen);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keypress', onKeyDown);
+        } else {
+            document.removeEventListener('keypress', onKeyDown);
+        }
+        return () => {
+            document.removeEventListener('keypress', onKeyDown);
+        };
+    }, [isOpen, onKeyDown]);
+
+    const { cancel, yes, no } = copy;
+    const noLabel = props?.noLabel ? props.noLabel : no;
+    const yesLabel = props?.yesLabel ? props.yesLabel : yes;
+
+    const modal = isOpen && (
         <Modal
             onRequestClose={onClose}
             wrapperStyle={{
@@ -27,16 +88,16 @@ export const ConfirmModal = ({
             }}
             style={{
                 width: '400px',
-                height: '12%',
+                height: '14%',
                 top: 'calc(50% - 150px)',
                 left: 'calc((100% - 400px) / 2)'
             }}
             isOpen={true}>
             <Section>
                 <div className='confirm-modal'>
-                    <p>{title}</p>
+                    <p>{props.title}</p>
                     <div className='confirm-buttons'>
-                        {showCancel ? (
+                        {props.showCancel ? (
                             <Button
                                 onClick={onClose}
                                 size='large'
@@ -48,14 +109,14 @@ export const ConfirmModal = ({
                             onClick={onNo}
                             size='large'
                             color='default'>
-                            {onNoLabel}
+                            {noLabel}
                         </Button>
                         <Button
                             onClick={onYes}
                             size='large'
                             style='bold'
                             color='primary'>
-                            {onYesLabel}
+                            {yesLabel}
                         </Button>
                     </div>
                 </div>

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

@@ -26,149 +26,102 @@ const Paginator: React.FC<any> = ({
     setPageSize,
     itemsPerPage,
     onItemsPerPage
-}) => {
-    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'>
+}) => (
+    <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;
             <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;
-                <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>
+                {copy.table.page}&nbsp;&nbsp;
+                <strong>
+                    {pageIndex} of {pageCount}
+                </strong>
                 &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 className='total-assets'>
-                {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+            <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>
-        </section>
-    );
-};
+            &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>
+);
 
 export default Paginator;

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

@@ -12,7 +12,6 @@ interface ISMPTEFieldProps {
     width?: string | number;
     onChange?(e): void;
     onBlur?(e): void;
-    onError?(e): void;
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
@@ -76,7 +75,7 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
 
     private onBlur(e?) {
         const val = e ? e.target.value : this.inputRef.current.value;
-        const isValid = this.SMTPEValidator(val);
+        const isValid = this.smptValidator(val);
 
         if (e && e.key === 'Enter') {
             this.setDuration(isValid, val);
@@ -89,12 +88,10 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
 
     private onChange() {
         const val = this.inputRef.current.value;
-        const isValid = this.SMTPEValidator(val);
+        const isValid = this.smptValidator(val);
 
         if (isValid) {
             this.props.onChange(val);
-        } else {
-            this.props.onError(isValid);
         }
     }
 
@@ -104,13 +101,11 @@ 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 SMTPEValidator(val) {
+    private smptValidator(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,6 +1,11 @@
 import * as React from 'react';
 import { IImposiumAPI } from '../../services/API';
-import { VARIABLE_TYPES, BOOLEAN_DEFAULT_OPTIONS } from '../../constants/variables';
+import {
+    VARIABLE_TYPES,
+    BOOLEAN_DEFAULT_OPTIONS,
+    colorPresets,
+    formatColor
+} from '../../constants/variables';
 import { OUTPUT_TYPES } from '../../constants/previewer';
 import TextField from '../text-field/TextField';
 import Button from '../button/Button';
@@ -23,6 +28,7 @@ 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;
@@ -137,15 +143,14 @@ 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 ? override : this.getVariableValue(inv.previewItem);
+                newInv[inv.id] =
+                    override !== null ? override : this.getVariableValue(inv.previewItem);
             }
         }
-
         return newInv;
     }
 
@@ -230,6 +235,11 @@ 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;
@@ -397,6 +407,20 @@ 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;
                 }
             }
         }