@imposium-hub/components 2.5.10-24 → 2.5.10-4

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/AssetsTableNameCell.tsx

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

package/src/components/assets/AssetsTypeIcon.tsx

@@ -15,8 +15,7 @@ import {
     ICON_FILE_CODE,
     ICON_CLAPPERBOARD_PLAY,
     ICON_FILTERS,
-    ICON_FILE_UPLOAD,
-    ICON_FILE_ERROR
+    ICON_FILE_UPLOAD
 } from '../../constants/icons';
 
 interface IAssetsTypeIconProps {
@@ -113,8 +112,6 @@ 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,6 +11,7 @@ interface ICardProps {
     onOpen?: (e: any) => any;
     onClose?: (e: any) => any;
     onToggle?: (toggle: boolean) => any;
+    buttons?: any[];
 }
 
 interface ICardState {
@@ -109,21 +110,32 @@ 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>
-            );
+            buttonArray.push(toggleBtn);
         }
+
+        return <div className='header-buttons'>{buttonArray}</div>;
     }
 }
 

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

@@ -1,85 +1,24 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React 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 interface IConfirmModalProps {
-    onYes: () => void;
-    onNo?: () => void;
-    title: string;
-    yesLabel?: string;
-    noLabel?: string;
-    showCancel?: boolean;
-}
+export const ConfirmModal = ({
+    onClose,
+    onYes,
+    onNo,
+    title,
+    onYesLabel,
+    onNoLabel,
+    showCancel
+}) => {
+    useHotkeys('enter', onYes, { enableOnFormTags: true });
+    const { cancel } = copy;
 
-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 && (
+    const modal = (
         <Modal
             onRequestClose={onClose}
             wrapperStyle={{
@@ -88,16 +27,16 @@ export const ConfirmModal = () => {
             }}
             style={{
                 width: '400px',
-                height: '14%',
+                height: '12%',
                 top: 'calc(50% - 150px)',
                 left: 'calc((100% - 400px) / 2)'
             }}
             isOpen={true}>
             <Section>
                 <div className='confirm-modal'>
-                    <p>{props.title}</p>
+                    <p>{title}</p>
                     <div className='confirm-buttons'>
-                        {props.showCancel ? (
+                        {showCancel ? (
                             <Button
                                 onClick={onClose}
                                 size='large'
@@ -109,14 +48,14 @@ export const ConfirmModal = () => {
                             onClick={onNo}
                             size='large'
                             color='default'>
-                            {noLabel}
+                            {onNoLabel}
                         </Button>
                         <Button
                             onClick={onYes}
                             size='large'
                             style='bold'
                             color='primary'>
-                            {yesLabel}
+                            {onYesLabel}
                         </Button>
                     </div>
                 </div>

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

@@ -26,102 +26,140 @@ 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 = () => {
+        onItemsPerPage(getItemsPerPage);
+    };
+
+    const onGoToPageBlur = () => {
+        gotoPage(getPageIndex, pageSize);
+    };
+
+    const onItemsPerPageKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            onItemsPerPage(getItemsPerPage);
+        }
+    };
+
+    const onGoToPageKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            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(() => setPageIndex(next), 300);
+                        }}
+                        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;
+                            }
+
+                            textInputTimeout = window.setTimeout(
+                                () => setItemsPerPage(inputNum),
+                                300
+                            );
+                        }}
+                        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/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;
                 }
             }
         }

package/src/constants/copy.ts

@@ -273,7 +273,7 @@ export const copying: any = {
 };
 
 export const confirm: any = {
-    yes: 'Yes',
-    no: 'No',
+    yes: 'Save',
+    no: "Don't Save",
     cancel: 'Cancel'
 };

package/src/constants/icons.tsx

@@ -74,7 +74,6 @@ import {
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
 import { faCloudArrowUp, faFilters } from '@fortawesome/pro-solid-svg-icons';
-import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -221,5 +220,3 @@ export const ICON_CODE = <FontAwesomeIcon icon={faCode} />;
 export const ICON_UP_RIGHT_FROM_SQUARE = <FontAwesomeIcon icon={faUpRightFromSquare} />;
 
 export const ICON_FILE_UPLOAD = <FontAwesomeIcon icon={faCloudArrowUp} />;
-
-export const ICON_FILE_ERROR = <FontAwesomeIcon icon={faCircleExclamation} />;

package/src/constants/variables.ts

@@ -5,8 +5,7 @@ export const VARIABLE_TYPES = {
     ENUM: 'enum',
     IMAGE: 'image',
     VIDEO: 'video',
-    AUDIO: 'audio',
-    COLOR: 'color'
+    AUDIO: 'audio'
 };
 
 export const BOOLEAN_DEFAULT_OPTIONS = [
@@ -19,28 +18,3 @@ export const BOOLEAN_DEFAULT_OPTIONS = [
         label: 'False'
     }
 ];
-
-export const colorPresets = [
-    '#D0021B',
-    '#F5A623',
-    '#F8E71C',
-    '#8B572A',
-    '#7ED321',
-    '#417505',
-    '#BD10E0',
-    '#9013FE',
-    '#4A90E2',
-    '#50E3C2',
-    '#B8E986',
-    '#000000',
-    '#4A4A4A',
-    '#9B9B9B',
-    '#FFFFFF',
-    'transparent'
-];
-
-export const formatColor = (color) => {
-    const { r, g, b, a } = color.rgb;
-    const alpha = color.source === 'hsv' ? 1 : a;
-    return `rgba(${r},${g},${b},${alpha})`;
-};

package/src/index.ts

@@ -158,7 +158,7 @@ import ContextMenuItem from './components/context-menu/ContextMenuItem';
 import ContextMenuTrigger from './components/context-menu/ContextMenuTrigger';
 import CopyPropIdButton from './components/copy-prop-id-button/CopyPropIdButton';
 import Submenu from './components/context-menu/SubMenu';
-import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
+import { ConfirmModal } from './components/confirm-modal/ConfirmModal';
 
 export {
     AppWrapper,
@@ -313,6 +313,5 @@ export {
     ContextMenuTrigger,
     Submenu,
     CopyPropIdButton,
-    ConfirmModal,
-    IConfirmModalProps
+    ConfirmModal
 };