@imposium-hub/components 2.5.11 → 2.5.12

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

@@ -26,102 +26,171 @@ 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);
+    const [getPageCount, setPageCount] = React.useState<number>(pageCount);
+    const [inputPageIndex, setInputPageIndex] = React.useState<string>('');
+    const [inputItemsPerPage, setInputItemsPerPage] = React.useState<string>('');
+
+    React.useEffect(() => {
+        if (pageCount === 0) {
+            setPageCount(1);
+        } else {
+            setPageCount(pageCount);
+        }
+    }, [pageCount]);
+
+    React.useEffect(() => {
+        if (pageIndex !== getPageIndex) {
+            setPageIndex(pageIndex);
+            setInputPageIndex('');
+        }
+
+        if (itemsPerPage !== getItemsPerPage) {
+            setItemsPerPage(itemsPerPage);
+            setInputItemsPerPage('');
+        }
+    }, [pageIndex, itemsPerPage]);
+
+    const onItemsPerPageBlur = () => {
+        clearTimeout(textInputTimeout);
+        if (inputItemsPerPage !== '') {
+            onItemsPerPage(inputItemsPerPage);
+        }
+    };
+
+    const onGoToPageBlur = () => {
+        clearTimeout(textInputTimeout);
+        if (inputPageIndex !== '') {
+            gotoPage(inputPageIndex, pageSize);
+        }
+    };
+
+    const onItemsPerPageKeyDown = (e) => {
+        if (e.key === 'Enter' && inputItemsPerPage !== '') {
+            clearTimeout(textInputTimeout);
+            onItemsPerPage(inputItemsPerPage);
+        }
+    };
+
+    const onGoToPageKeyDown = (e) => {
+        if (e.key === 'Enter' && inputPageIndex !== '') {
+            clearTimeout(textInputTimeout);
+            gotoPage(inputPageIndex, 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(getPageCount, pageSize)}>
+                    {ICON_ANGLE_DOUBLE_RIGHT}
+                </Button>
                 &nbsp;&nbsp;
+                <span>
+                    {copy.table.page}&nbsp;&nbsp;
+                    <strong>
+                        {getPageIndex} of {getPageCount}
+                    </strong>
+                    &nbsp;&nbsp;
+                </span>
+                <span>
+                    {copy.table.goToPage}&nbsp;&nbsp;
+                    <input
+                        className='paginator-input'
+                        type='number'
+                        placeholder={getPageIndex.toString()}
+                        value={inputPageIndex}
+                        onChange={(e) => {
+                            const input = e.target.value;
+                            const inputNum = Number(input);
+                            let next: number;
+
+                            clearTimeout(textInputTimeout);
+                            setInputPageIndex(input);
+                            if (!input || inputNum < 1 || inputNum > getPageCount) {
+                                return;
+                            }
+
+                            if (inputNum >= 1 && inputNum <= getPageCount) {
+                                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()}
+                        value={inputItemsPerPage}
+                        onChange={(e) => {
+                            const input = e.target.value;
+                            const inputNum = Number(input);
+
+                            clearTimeout(textInputTimeout);
+
+                            setInputItemsPerPage(input);
+
+                            if (!input || inputNum < 1) {
+                                return;
+                            }
+
+                            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/header/Header.tsx

@@ -19,6 +19,8 @@ import Select, { createFilter } from 'react-select';
 import { setAccessData } from '../../redux/actions/access';
 import { bindActionCreators } from 'redux';
 import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
+import StoryTableNameFilter from '../assets/StoryTableNameFilter';
+import { updateStoryFilter } from '../../redux/actions/story-filter';
 
 export interface IHeaderProps {
     email?: string;
@@ -38,6 +40,8 @@ export interface IHeaderProps {
     hideDocs?: boolean;
     showFTLogo?: boolean;
     access: any;
+    storyFilter: any;
+    updateStoryFilter(n): any;
 }
 
 export interface IHeaderState {
@@ -172,12 +176,18 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         });
     };
 
+    private closeStoriesDropDown() {
+        this.setState({ showStoriesDropdown: false }, () =>
+            this.props.updateStoryFilter({ name: '' })
+        );
+    }
+
     private changeStory = (story: any): void => {
         const { onStoryChange } = this.props;
 
         if (typeof onStoryChange === 'function') {
             onStoryChange(story);
-            this.setState({ showStoriesDropdown: false });
+            this.closeStoriesDropDown();
         }
     };
 
@@ -290,6 +300,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 Header: 'Name',
                 width: 115,
                 minWidth: 115,
+                Search: () => <StoryTableNameFilter />,
                 disableSortBy: false
             },
             {
@@ -513,7 +524,10 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     ref={this.storyToggleRef}
                     onClick={() => {
                         this.setState({ showStoriesDropdown: !showStoriesDropdown }, () => {
-                            if (showStoriesDropdown === false) this.getAccessDataHandler();
+                            if (showStoriesDropdown === false) {
+                                this.props.updateStoryFilter({ name: '' });
+                                this.getAccessDataHandler();
+                            }
                         });
                     }}>
                     <div className='story-name'>
@@ -533,12 +547,31 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         ? [{ id: order, desc: orderDirection === 'desc' }]
                         : undefined;
 
-                const sortedStories = _.orderBy(
+                let sortedStories = _.orderBy(
                     activeOrganizationBlob.stories,
                     ['date_modified'],
                     ['desc']
                 );
 
+                if (this.props.storyFilter && this.props.storyFilter?.name) {
+                    const storyFilter = this.props.storyFilter.name.toLowerCase();
+
+                    const sortByName = sortedStories.filter((stories) =>
+                        stories.name.toLowerCase().includes(storyFilter)
+                    );
+
+                    if (sortByName.length > 0) {
+                        sortedStories = sortByName;
+                    } else {
+                        const sortById = sortedStories.filter((stories) =>
+                            stories.id.includes(storyFilter)
+                        );
+                        if (sortById.length > 0) {
+                            sortedStories = sortById;
+                        }
+                    }
+                }
+
                 storyMenuInner = (
                     <DataTable
                         columns={this.getStoriesColumns()}
@@ -548,6 +581,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         itemsPerPage={activeOrganizationBlob.stories.length}
                         hidePaginator={true}
                         onRowClick={this.changeStory}
+                        keyboardNav={true}
                     />
                 );
             }
@@ -652,7 +686,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     position='bottomright'
                     show={showStoriesDropdown}
                     toggleRef={this.storyToggleRef}
-                    onOutsideClick={() => this.setState({ showStoriesDropdown: false })}>
+                    onOutsideClick={() => this.closeStoriesDropDown()}>
                     <div className='stories-menu'>{storyMenuInner}</div>
                 </ImposiumDropdown>
 
@@ -672,7 +706,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 const mapDispatchToProps = (dispatch) => {
     return bindActionCreators(
         {
-            setAccessData
+            setAccessData,
+            updateStoryFilter
         },
         dispatch
     );
@@ -682,7 +717,8 @@ const mapStateToProps = (state): any => {
     return {
         auth: state.auth,
         story: state.story,
-        access: state.access
+        access: state.access,
+        storyFilter: state.storyFilter
     };
 };
 

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

@@ -40,6 +40,7 @@ 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';
@@ -159,6 +160,10 @@ 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 AssetsTableAssetIdCell from './components/assets/AssetsTableAssetIdCell';
+import { resetStoryFilter, updateStoryFilter } from './redux/actions/story-filter';
+import storyFilter from './redux/reducers/story-filter';
+import StoryTableNameFilter from './components/assets/StoryTableNameFilter';
 
 export {
     AppWrapper,
@@ -217,6 +222,9 @@ export {
     AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
+    StoryTableNameFilter,
+    AssetsTableAssetIdFilter,
+    AssetsTableAssetIdCell,
     AssetsTableNameCell,
     AssetsTableDurationCell,
     AssetsTableRateCell,
@@ -242,6 +250,8 @@ export {
     storyDeleted,
     updateFilters,
     resetFilters,
+    updateStoryFilter,
+    resetStoryFilter,
     getAssets,
     deleteAssets,
     downloadAssets,
@@ -256,6 +266,7 @@ export {
     deselectAsset,
     resetSelection,
     assetFilters,
+    storyFilter,
     assetList,
     assetUploads,
     selectedAssets,

package/src/redux/actions/story-filter.ts

@@ -0,0 +1,15 @@
+const storyFilterActions: any = {
+    UPDATE: 'storyFilter/UPDATE',
+    RESET: 'storyFilter/RESET'
+};
+
+export const updateStoryFilter = (newFilters: any): any => ({
+    type: storyFilterActions.UPDATE,
+    newFilters
+});
+
+export const resetStoryFilter = (): any => ({
+    type: storyFilterActions.RESET
+});
+
+export default storyFilterActions;

package/src/redux/reducers/story-filter.ts

@@ -0,0 +1,18 @@
+import storyFilterActions from '../actions/story-filter';
+
+const initialState: any = {
+    name: ''
+};
+
+const storyFilter = (state = initialState, action): any => {
+    switch (action.type) {
+        case storyFilterActions.UPDATE:
+            return { ...state, ...action.newFilters };
+        case storyFilterActions.RESET:
+            return { ...initialState };
+        default:
+            return state;
+    }
+};
+
+export default storyFilter;