@imposium-hub/components 2.5.11-1 → 2.5.11-11

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

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+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 = () => {
+    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={{
+                left: '0px',
+                width: '100%'
+            }}
+            style={{
+                width: '400px',
+                height: '14%',
+                top: 'calc(50% - 150px)',
+                left: 'calc((100% - 400px) / 2)'
+            }}
+            isOpen={true}>
+            <Section>
+                <div className='confirm-modal'>
+                    <p>{props.title}</p>
+                    <div className='confirm-buttons'>
+                        {props.showCancel ? (
+                            <Button
+                                onClick={onClose}
+                                size='large'
+                                color='default'>
+                                {cancel}
+                            </Button>
+                        ) : null}
+                        <Button
+                            onClick={onNo}
+                            size='large'
+                            color='default'>
+                            {noLabel}
+                        </Button>
+                        <Button
+                            onClick={onYes}
+                            size='large'
+                            style='bold'
+                            color='primary'>
+                            {yesLabel}
+                        </Button>
+                    </div>
+                </div>
+            </Section>
+        </Modal>
+    );
+
+    const PortalContextComponent = () =>
+        ReactDOM.createPortal(modal, document.querySelector('#react-root'));
+
+    return <PortalContextComponent />;
+};

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

@@ -90,6 +90,8 @@ interface IDataTableProps {
     disableKeyScroll?: boolean;
 
     expandTags?: boolean;
+
+    keyboardNav?: boolean;
 }
 
 const processColumnData = (freshColumns): any[] => {
@@ -119,7 +121,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
     const [didMount, setDidMount] = React.useState(false);
     const [data, setData] = React.useState([]);
     const [columns, setColumns] = React.useState([]);
-
+    const [selectedRowId, setSelectedRowId] = React.useState<number>(null);
     const manualPagination: boolean =
         Number.isInteger(props.currentPage) && typeof props.onPage === 'function';
     const manualSortBy: boolean =
@@ -205,6 +207,8 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
     React.useEffect(() => {
         if (Array.isArray(props.data)) {
             setData(props.data);
+            setSelectedRowId(null);
+            scrollToTop();
         }
     }, [props.data]);
 
@@ -226,6 +230,68 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
         }
     }, [sortBy]);
 
+    const getRowElem = () => {
+        return document.getElementsByClassName('ip-table-row selected keyboardNav')[0];
+    };
+
+    const getBodyEle = () => {
+        return document.querySelector('tbody.ip-table-body.keyboardNav');
+    };
+
+    const scrollIntoView = () => {
+        getRowElem().scrollIntoView({ behavior: 'smooth', block: 'center' });
+    };
+
+    const scrollToTop = () => {
+        if (getBodyEle()) {
+            getBodyEle().scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    };
+
+    const scrollToBottom = () => {
+        const y = getRowElem().scrollHeight * rowData.length;
+        getBodyEle().scrollTo({ top: y, behavior: 'smooth' });
+    };
+
+    const rowSelector = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        let rowId = 0;
+        const maxRowId = rowData.length - 1;
+        if (e.code === 'ArrowUp') {
+            if (selectedRowId === 0 || selectedRowId === null) {
+                setSelectedRowId(maxRowId);
+                scrollToBottom();
+            }
+            if (selectedRowId !== 0 && selectedRowId !== null) {
+                setSelectedRowId(selectedRowId - 1);
+                scrollIntoView();
+            }
+        }
+
+        if (e.code === 'ArrowDown') {
+            if (selectedRowId === null) {
+                setSelectedRowId(0);
+            } else {
+                rowId = selectedRowId === maxRowId ? 0 : selectedRowId + 1;
+                setSelectedRowId(rowId);
+                if (rowId === 0) {
+                    scrollToTop();
+                } else {
+                    scrollIntoView();
+                }
+            }
+        }
+
+        if (
+            e.code === 'Enter' &&
+            typeof props.onRowClick === 'function' &&
+            selectedRowId !== null
+        ) {
+            props.onRowClick(rows[selectedRowId]);
+        }
+    };
+
     return (
         <section
             ref={wrapperRef}
@@ -246,7 +312,17 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                             <React.Fragment key='head-fragment'>
                                 <tr
                                     {...headerGroup.getHeaderGroupProps()}
-                                    className='ip-table-head-row'>
+                                    className='ip-table-head-row'
+                                    onKeyDown={(e) => {
+                                        if (
+                                            (e.code === 'ArrowUp' ||
+                                                e.code === 'ArrowDown' ||
+                                                e.code === 'Enter') &&
+                                            props.keyboardNav
+                                        ) {
+                                            rowSelector(e);
+                                        }
+                                    }}>
                                     {headerGroup.headers.map((column) => {
                                         const searchable: boolean = column.hasOwnProperty('Search');
                                         const toggleProps: any = column.getSortByToggleProps();
@@ -326,7 +402,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
 
                 <tbody
                     {...getTableBodyProps()}
-                    className='ip-table-body'>
+                    className={`ip-table-body ${props.keyboardNav ? 'keyboardNav' : ''}`}>
                     {rowData.map((row, i) => {
                         let selectedClass: string = '';
                         let activeRef: any;
@@ -351,8 +427,14 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
 
                         prepareRow(row);
 
+                        if (i === selectedRowId) {
+                            selectedClass = 'selected';
+                        }
+
                         const rowProps = row.getRowProps();
-                        rowProps.className = `ip-table-row ${selectedClass}`;
+                        rowProps.className = `ip-table-row ${selectedClass} ${
+                            props.keyboardNav ? 'keyboardNav' : ''
+                        }`;
                         rowProps.onClick = (e) => {
                             const onClick = () => {
                                 if (typeof props.onRowClick === 'function') {
@@ -375,6 +457,10 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                             }
                         };
 
+                        rowProps.onMouseMove = () => {
+                            setSelectedRowId(i);
+                        };
+
                         const rowContent = row.cells.map((cell) => (
                             <td
                                 {...cell.getCellProps()}
@@ -386,7 +472,6 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                         ));
                         const rowId = row?.original?.id || i;
                         const rowKey = `row-${rowId}`;
-
                         const expanded = props.expandTags ? props.expandTags : row.isExpanded;
                         return (
                             <React.Fragment key={rowKey}>

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

@@ -29,34 +29,55 @@ 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]);
+    }, [pageIndex, itemsPerPage]);
 
     const onItemsPerPageBlur = () => {
         clearTimeout(textInputTimeout);
-        onItemsPerPage(getItemsPerPage);
+        if (inputItemsPerPage !== '') {
+            onItemsPerPage(inputItemsPerPage);
+        }
     };
 
     const onGoToPageBlur = () => {
         clearTimeout(textInputTimeout);
-        gotoPage(getPageIndex, pageSize);
+        if (inputPageIndex !== '') {
+            gotoPage(inputPageIndex, pageSize);
+        }
     };
 
     const onItemsPerPageKeyDown = (e) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && inputItemsPerPage !== '') {
             clearTimeout(textInputTimeout);
-            onItemsPerPage(getItemsPerPage);
+            onItemsPerPage(inputItemsPerPage);
         }
     };
 
     const onGoToPageKeyDown = (e) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && inputPageIndex !== '') {
             clearTimeout(textInputTimeout);
-            gotoPage(getPageIndex, pageSize);
+            gotoPage(inputPageIndex, pageSize);
         }
     };
 
@@ -92,14 +113,14 @@ const Paginator: React.FC<any> = ({
                     size='small'
                     tooltip='Go to last page'
                     disabled={!canNextPage}
-                    onClick={() => gotoPage(pageCount, pageSize)}>
+                    onClick={() => gotoPage(getPageCount, pageSize)}>
                     {ICON_ANGLE_DOUBLE_RIGHT}
                 </Button>
                 &nbsp;&nbsp;
                 <span>
                     {copy.table.page}&nbsp;&nbsp;
                     <strong>
-                        {getPageIndex} of {pageCount}
+                        {getPageIndex} of {getPageCount}
                     </strong>
                     &nbsp;&nbsp;
                 </span>
@@ -109,18 +130,19 @@ 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);
-
-                            if (!input || inputNum < 1 || inputNum > pageCount) {
+                            setInputPageIndex(input);
+                            if (!input || inputNum < 1 || inputNum > getPageCount) {
                                 return;
                             }
 
-                            if (inputNum >= 1 && inputNum <= pageCount) {
+                            if (inputNum >= 1 && inputNum <= getPageCount) {
                                 next = inputNum;
                             }
 
@@ -140,19 +162,19 @@ const Paginator: React.FC<any> = ({
                         className='paginator-input'
                         type='number'
                         placeholder={getItemsPerPage.toString()}
-                        min={1}
+                        value={inputItemsPerPage}
                         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,6 +19,7 @@ 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';
 
 export interface IHeaderProps {
     email?: string;
@@ -38,6 +39,7 @@ export interface IHeaderProps {
     hideDocs?: boolean;
     showFTLogo?: boolean;
     access: any;
+    storyFilter: string;
 }
 
 export interface IHeaderState {
@@ -290,6 +292,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 Header: 'Name',
                 width: 115,
                 minWidth: 115,
+                Search: () => <StoryTableNameFilter />,
                 disableSortBy: false
             },
             {
@@ -533,12 +536,30 @@ 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) {
+                    const storyFilter = this.props.storyFilter.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 +569,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         itemsPerPage={activeOrganizationBlob.stories.length}
                         hidePaginator={true}
                         onRowClick={this.changeStory}
+                        keyboardNav={true}
                     />
                 );
             }
@@ -682,7 +704,8 @@ const mapStateToProps = (state): any => {
     return {
         auth: state.auth,
         story: state.story,
-        access: state.access
+        access: state.access,
+        storyFilter: state.storyFilter.name
     };
 };
 

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;
                 }
             }
         }

package/src/constants/variables.ts

@@ -5,7 +5,8 @@ export const VARIABLE_TYPES = {
     ENUM: 'enum',
     IMAGE: 'image',
     VIDEO: 'video',
-    AUDIO: 'audio'
+    AUDIO: 'audio',
+    COLOR: 'color'
 };
 
 export const BOOLEAN_DEFAULT_OPTIONS = [
@@ -18,3 +19,28 @@ 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

@@ -159,7 +159,11 @@ 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 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,
@@ -218,6 +222,7 @@ export {
     AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
+    StoryTableNameFilter,
     AssetsTableAssetIdFilter,
     AssetsTableAssetIdCell,
     AssetsTableNameCell,
@@ -245,6 +250,8 @@ export {
     storyDeleted,
     updateFilters,
     resetFilters,
+    updateStoryFilter,
+    resetStoryFilter,
     getAssets,
     deleteAssets,
     downloadAssets,
@@ -259,6 +266,7 @@ export {
     deselectAsset,
     resetSelection,
     assetFilters,
+    storyFilter,
     assetList,
     assetUploads,
     selectedAssets,
@@ -315,5 +323,7 @@ export {
     ContextMenuItem,
     ContextMenuTrigger,
     Submenu,
-    CopyPropIdButton
+    CopyPropIdButton,
+    ConfirmModal,
+    IConfirmModalProps
 };