@imposium-hub/components 2.5.10-13 → 2.5.10-15

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,6 +1,5 @@
-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';
@@ -16,29 +15,73 @@ interface IConfirmModalProps {
     showCancel?: boolean;
 }
 
-export const ConfirmModal = (props: IConfirmModalProps) => {
-    useHotkeys('enter', props.onYes, { enableOnFormTags: true });
+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 onKeyDown = useCallback(
+        (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                props.onYes(e);
+            }
+        },
+        [isOpen]
+    );
+
+    useEffect(() => {
+        window.addEventListener('openconfirmmodal', onOpen);
+        window.addEventListener('closeconfirmmodal', onClose);
+        return () => {
+            window.removeEventListener('openconfirmmodal', onOpen);
+            window.removeEventListener('closeconfirmmodal', onClose);
+        };
+    }, []);
+
+    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 = (
+    const modal = isOpen && (
         <Modal
-            onRequestClose={props.onClose}
+            onRequestClose={onClose}
             wrapperStyle={{
                 left: '0px',
                 width: '100%'
             }}
             style={{
                 width: '400px',
-                height: '12%',
+                height: '14%',
                 top: 'calc(50% - 150px)',
                 left: 'calc((100% - 400px) / 2)'
             }}
             isOpen={true}>
             <Section>
-                <div className='confirm-modal'>
+                <div
+                    className='confirm-modal'
+                    onKeyDown={(e) => console.log('onKeyDown', e)}>
                     <p>{props.title}</p>
                     <div className='confirm-buttons'>
                         {props.showCancel ? (

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/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/index.ts

@@ -40,7 +40,6 @@ import AssetField from './components/assets/AssetField';
 import AssetsTableDropzone from './components/assets/AssetsTableDropzone';
 import AssetsTableNameCell from './components/assets/AssetsTableNameCell';
 import AssetsTableNameFilter from './components/assets/AssetsTableNameFilter';
-import AssetsTableAssetIdFilter from './components/assets/AssetsTableAssetIdFilter';
 import AssetsTableSelectCell from './components/assets/AssetsTableSelectCell';
 import AssetsTableSelectFilter from './components/assets/AssetsTableSelectFilter';
 import AssetsTableTagsCell from './components/assets/AssetsTableTagsCell';
@@ -160,7 +159,6 @@ 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 } from './components/confirm-modal/ConfirmModal';
-import AssetsTableAssetIdCell from './components/assets/AssetsTableAssetIdCell';
 
 export {
     AppWrapper,
@@ -219,8 +217,6 @@ export {
     AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
-    AssetsTableAssetIdFilter,
-    AssetsTableAssetIdCell,
     AssetsTableNameCell,
     AssetsTableDurationCell,
     AssetsTableRateCell,

package/src/redux/actions/asset-list.ts

@@ -83,7 +83,6 @@ export const deleteAssets = (api: IImposiumAPI, ids: string[], storyId: string):
             api.deleteAssets(ids)
                 .then(() => {
                     dispatch(getAssets(api, storyId));
-                    dispatch(toggleLoading(false));
                     resolve(true);
                 })
                 .catch((errors: Error[]) => {

package/src/redux/actions/asset-uploads.ts

@@ -7,8 +7,7 @@ const assetUploadsActions: any = {
     UPDATE_UPLOAD: 'assetUploads/UPDATE_UPLOAD',
     UPDATE_PERCENT_UPLOADED: 'assetUploads/UPDATE_PERCENT_UPLOADED',
     ADD_UPLOAD_ASSET_ID: 'assetUploads/ADD_UPLOAD_ASSET_ID',
-    REMOVE_UPLOAD: 'assetUploads/REMOVE_UPLOAD',
-    ERROR: 'assetUploads/ERROR'
+    REMOVE_UPLOAD: 'assetUploads/REMOVE_UPLOAD'
 };
 
 const POLL_INTERVAL: number = 5000;
@@ -242,15 +241,6 @@ const uploadAssetHandler = (api: IImposiumAPI, dispatch, getStore) => {
                         if (axios.isCancel(e) && currentQueue !== queueLength - 1) {
                             currentQueue = currentQueue + 1;
                             createPromise(currentQueue);
-                        } else {
-                            const error: any = { ...e };
-                            const errorMsg = error.response.data.error.split(':')[0];
-                            dispatch({
-                                type: assetUploadsActions.ERROR,
-                                filename: uploadBlobs[activeIndex].filename,
-                                errorMsg
-                            });
-                            doAssetTableHydration(api, storyId);
                         }
                     });
             }

package/src/redux/reducers/asset-uploads.ts

@@ -47,19 +47,6 @@ const assetUploads = (state = initialState, action): any => {
                 ...state,
                 uploads: state.uploads.filter((u: any) => u.filename !== action.filename)
             };
-        case assetUploadsActions.ERROR:
-            const newError = state.uploads.map((u: any) => {
-                if (u.filename === action.filename) {
-                    return { ...u, error: action.errorMsg };
-                }
-
-                return u;
-            });
-
-            return {
-                ...state,
-                uploads: newError
-            };
         default:
             return state;
     }

package/src/services/API.ts

@@ -153,9 +153,6 @@ interface ITTSOptions {
     voice: string;
     service: string;
     model?: string;
-    speed?: string;
-    pause_silences?: boolean;
-    minimum_silence_length?: number;
 }
 
 interface ICancelTokenCache {
@@ -1610,18 +1607,6 @@ export default class API {
             url += `&model=${options.model}`;
         }
 
-        if (options.speed) {
-            url += `&speed=${options.speed}`;
-        }
-
-        if (options.pause_silences) {
-            url += `&pause_silences=${options.pause_silences}`;
-        }
-
-        if (options.minimum_silence_length) {
-            url += `&minimum_silence_length=${options.minimum_silence_length}`;
-        }
-
         return this.doRequest({
             url,
             method: 'GET',

package/src/components/assets/AssetsTableAssetIdCell.tsx

@@ -1,65 +0,0 @@
-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;
-    console.log('AssetsTableAssetIdCell');
-    console.log(id);
-
-    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

@@ -1,40 +0,0 @@
-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;