@imposium-hub/components 2.5.11-16 → 2.5.11-3

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

@@ -29,55 +29,34 @@ const Paginator: React.FC<any> = ({
 }) => {
     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]);
+    }, [pageIndex]);
 
     const onItemsPerPageBlur = () => {
         clearTimeout(textInputTimeout);
-        if (inputItemsPerPage !== '') {
-            onItemsPerPage(inputItemsPerPage);
-        }
+        onItemsPerPage(getItemsPerPage);
     };
 
     const onGoToPageBlur = () => {
         clearTimeout(textInputTimeout);
-        if (inputPageIndex !== '') {
-            gotoPage(inputPageIndex, pageSize);
-        }
+        gotoPage(getPageIndex, pageSize);
     };
 
     const onItemsPerPageKeyDown = (e) => {
-        if (e.key === 'Enter' && inputItemsPerPage !== '') {
+        if (e.key === 'Enter') {
             clearTimeout(textInputTimeout);
-            onItemsPerPage(inputItemsPerPage);
+            onItemsPerPage(getItemsPerPage);
         }
     };
 
     const onGoToPageKeyDown = (e) => {
-        if (e.key === 'Enter' && inputPageIndex !== '') {
+        if (e.key === 'Enter') {
             clearTimeout(textInputTimeout);
-            gotoPage(inputPageIndex, pageSize);
+            gotoPage(getPageIndex, pageSize);
         }
     };
 
@@ -113,14 +92,14 @@ const Paginator: React.FC<any> = ({
                     size='small'
                     tooltip='Go to last page'
                     disabled={!canNextPage}
-                    onClick={() => gotoPage(getPageCount, pageSize)}>
+                    onClick={() => gotoPage(pageCount, pageSize)}>
                     {ICON_ANGLE_DOUBLE_RIGHT}
                 </Button>
                 &nbsp;&nbsp;
                 <span>
                     {copy.table.page}&nbsp;&nbsp;
                     <strong>
-                        {getPageIndex} of {getPageCount}
+                        {getPageIndex} of {pageCount}
                     </strong>
                     &nbsp;&nbsp;
                 </span>
@@ -130,19 +109,18 @@ const Paginator: React.FC<any> = ({
                         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) {
+
+                            if (!input || inputNum < 1 || inputNum > pageCount) {
                                 return;
                             }
 
-                            if (inputNum >= 1 && inputNum <= getPageCount) {
+                            if (inputNum >= 1 && inputNum <= pageCount) {
                                 next = inputNum;
                             }
 
@@ -162,19 +140,19 @@ const Paginator: React.FC<any> = ({
                         className='paginator-input'
                         type='number'
                         placeholder={getItemsPerPage.toString()}
-                        value={inputItemsPerPage}
+                        min={1}
                         onChange={(e) => {
                             const input = e.target.value;
                             const inputNum = Number(input);
 
                             clearTimeout(textInputTimeout);
 
-                            setInputItemsPerPage(input);
-
                             if (!input || inputNum < 1) {
                                 return;
                             }
 
+                            setItemsPerPage(inputNum);
+
                             textInputTimeout = window.setTimeout(
                                 () => onItemsPerPage(inputNum),
                                 1000

package/src/components/header/Header.tsx

@@ -19,8 +19,6 @@ 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;
@@ -40,8 +38,6 @@ export interface IHeaderProps {
     hideDocs?: boolean;
     showFTLogo?: boolean;
     access: any;
-    storyFilter: any;
-    updateStoryFilter(n): any;
 }
 
 export interface IHeaderState {
@@ -176,18 +172,12 @@ 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.closeStoriesDropDown();
+            this.setState({ showStoriesDropdown: false });
         }
     };
 
@@ -300,7 +290,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 Header: 'Name',
                 width: 115,
                 minWidth: 115,
-                Search: () => <StoryTableNameFilter />,
                 disableSortBy: false
             },
             {
@@ -524,10 +513,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     ref={this.storyToggleRef}
                     onClick={() => {
                         this.setState({ showStoriesDropdown: !showStoriesDropdown }, () => {
-                            if (showStoriesDropdown === false) {
-                                this.props.updateStoryFilter({ name: '' });
-                                this.getAccessDataHandler();
-                            }
+                            if (showStoriesDropdown === false) this.getAccessDataHandler();
                         });
                     }}>
                     <div className='story-name'>
@@ -547,31 +533,12 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         ? [{ id: order, desc: orderDirection === 'desc' }]
                         : undefined;
 
-                let sortedStories = _.orderBy(
+                const 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()}
@@ -581,7 +548,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         itemsPerPage={activeOrganizationBlob.stories.length}
                         hidePaginator={true}
                         onRowClick={this.changeStory}
-                        keyboardNav={true}
                     />
                 );
             }
@@ -686,7 +652,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     position='bottomright'
                     show={showStoriesDropdown}
                     toggleRef={this.storyToggleRef}
-                    onOutsideClick={() => this.closeStoriesDropDown()}>
+                    onOutsideClick={() => this.setState({ showStoriesDropdown: false })}>
                     <div className='stories-menu'>{storyMenuInner}</div>
                 </ImposiumDropdown>
 
@@ -706,8 +672,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 const mapDispatchToProps = (dispatch) => {
     return bindActionCreators(
         {
-            setAccessData,
-            updateStoryFilter
+            setAccessData
         },
         dispatch
     );
@@ -717,8 +682,7 @@ const mapStateToProps = (state): any => {
     return {
         auth: state.auth,
         story: state.story,
-        access: state.access,
-        storyFilter: state.storyFilter
+        access: state.access
     };
 };
 

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;
@@ -235,11 +229,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 +396,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/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

@@ -161,9 +161,6 @@ 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,
@@ -222,7 +219,6 @@ export {
     AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
-    StoryTableNameFilter,
     AssetsTableAssetIdFilter,
     AssetsTableAssetIdCell,
     AssetsTableNameCell,
@@ -250,8 +246,6 @@ export {
     storyDeleted,
     updateFilters,
     resetFilters,
-    updateStoryFilter,
-    resetStoryFilter,
     getAssets,
     deleteAssets,
     downloadAssets,
@@ -266,7 +260,6 @@ export {
     deselectAsset,
     resetSelection,
     assetFilters,
-    storyFilter,
     assetList,
     assetUploads,
     selectedAssets,

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

@@ -78,18 +78,22 @@ export const getAssets = (api: IImposiumAPI, storyId: string): any => {
 
 export const deleteAssets = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        return new Promise<boolean>((resolve, reject) => {
-            dispatch(toggleLoading(true));
-            api.deleteAssets(ids)
-                .then(() => {
-                    dispatch(getAssets(api, storyId));
-                    resolve(true);
-                })
-                .catch((errors: Error[]) => {
-                    dispatch(toggleLoading(false));
-                    reject(false);
-                });
-        });
+        if (window.confirm(`Are you sure you want to delete ${ids.length} assets?`)) {
+            return new Promise<boolean>((resolve, reject) => {
+                dispatch(toggleLoading(true));
+                api.deleteAssets(ids)
+                    .then(() => {
+                        dispatch(getAssets(api, storyId));
+                        resolve(true);
+                    })
+                    .catch((errors: Error[]) => {
+                        dispatch(toggleLoading(false));
+                        reject(false);
+                    });
+            });
+        } else {
+            return Promise.resolve(false);
+        }
     };
 };
 
@@ -190,18 +194,20 @@ export const deleteAssetTags = (api: IImposiumAPI, id: string): any => {
 
 export const deleteAssetsTags = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        return new Promise<void>((resolve, reject) => {
-            dispatch(toggleLoading(true));
-            api.deleteAssetsTags(ids)
-                .then(() => {
-                    dispatch(getAssets(api, storyId));
-                    resolve();
-                })
-                .catch((errors: Error[]) => {
-                    dispatch(toggleLoading(false));
-                    reject();
-                });
-        });
+        if (window.confirm(`Are you sure you want to remove all tags from ${ids.length} assets?`)) {
+            return new Promise<void>((resolve, reject) => {
+                dispatch(toggleLoading(true));
+                api.deleteAssetsTags(ids)
+                    .then(() => {
+                        dispatch(getAssets(api, storyId));
+                        resolve();
+                    })
+                    .catch((errors: Error[]) => {
+                        dispatch(toggleLoading(false));
+                        reject();
+                    });
+            });
+        }
     };
 };
 
@@ -239,18 +245,20 @@ export const updateAssetStory = (api: IImposiumAPI, id: string, storyId: string)
 
 export const decoupleAssets = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        return new Promise<void>((resolve, reject) => {
-            dispatch(toggleLoading(true));
-            api.decoupleAssets(ids)
-                .then(() => {
-                    dispatch(getAssets(api, storyId));
-                    resolve();
-                })
-                .catch((errors: Error[]) => {
-                    dispatch(toggleLoading(false));
-                    reject();
-                });
-        });
+        if (window.confirm(`Are you sure you want to decouple ${ids.length} assets?`)) {
+            return new Promise<void>((resolve, reject) => {
+                dispatch(toggleLoading(true));
+                api.decoupleAssets(ids)
+                    .then(() => {
+                        dispatch(getAssets(api, storyId));
+                        resolve();
+                    })
+                    .catch((errors: Error[]) => {
+                        dispatch(toggleLoading(false));
+                        reject();
+                    });
+            });
+        }
     };
 };
 

package/src/components/assets/StoryTableNameFilter.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import TextField from '../text-field/TextField';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { updateStoryFilter } from '../../redux/actions/story-filter';
-
-interface IStoryTableNameFilterProps {
-    storyFilter: any;
-    updateStoryFilter: (filters: any) => any;
-}
-
-class StoryTableNameFilter extends React.PureComponent<IStoryTableNameFilterProps> {
-    public render = (): JSX.Element => {
-        const { storyFilter } = this.props;
-
-        return (
-            <TextField
-                className='story-name'
-                focusOnMount
-                value={storyFilter}
-                onChange={(n) => this.props.updateStoryFilter({ name: n })}
-            />
-        );
-    };
-}
-
-const mapDispatchToProps = (dispatch): any => {
-    return bindActionCreators({ updateStoryFilter }, dispatch);
-};
-
-const mapStateToProps = (state): any => {
-    return { storyFilter: state.storyFilter.name };
-};
-
-const StoryTableNameFilterMemoized = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(React.memo(StoryTableNameFilter));
-
-export default StoryTableNameFilterMemoized;