@imposium-hub/components 2.5.11 → 2.5.12-0

package/src/components/assets/StoryTableNameFilter.tsx

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

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 {
@@ -97,9 +98,7 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
 
         return (
             <div className={`card ${openClass} ${collapsableClass} ${styleClass}`}>
-                <div
-                    className='card-header'
-                    onClick={this.evtHandlers.toggleOpen}>
+                <div className='card-header'>
                     {this.renderTitle(styleClass)}
                     {this.renderButtons()}
                 </div>
@@ -109,21 +108,36 @@ 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>
-            );
+            if (buttonArray && buttonArray.length > 0) {
+                buttonArray.push(toggleBtn);
+            } else {
+                buttonArray = [toggleBtn];
+            }
         }
+
+        return <div className='header-buttons'>{buttonArray}</div>;
     }
 }
 

package/src/components/color-field/ColorField.tsx

@@ -127,18 +127,14 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
             />
         ) : null;
 
-        let swatchStyle;
-        if (value === 'transparent' || value === 'rgba(0,0,0,0)') {
-            swatchStyle = {
-                background: this.transparentBg,
-                border: '1px solid #1d1d1d',
-                boxSizing: 'border-box'
-            };
-        } else {
-            swatchStyle = {
-                backgroundColor: value
-            };
-        }
+        const swatchStyle = {
+            backgroundColor: value
+        };
+
+        const transparentBg = {
+            background: this.transparentBg,
+            height: '20px'
+        };
 
         return (
             <FieldWrapper
@@ -150,11 +146,14 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
                 width={width}>
-                <div
-                    className='swatch'
-                    style={swatchStyle}
-                    onClick={(e) => this.togglePicker(e)}
-                />
+                <div style={transparentBg}>
+                    <div
+                        className='swatch'
+                        style={swatchStyle}
+                        onClick={(e) => this.togglePicker(e)}
+                    />
+                </div>
+
                 <div
                     className={`picker picker-${pickerPos}`}
                     ref={this.picker}>

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

@@ -82,14 +82,16 @@ interface IDataTableProps {
 
     // controlled selection props
     highlightBy?: any;
-    onRowClick?: (row) => void;
-    onRowDoubleClick?: (row) => void;
+    onRowClick?: (row, shiftKey?) => void;
+    onRowDoubleClick?: (row, shiftKey?) => void;
 
     renderPivotComponent?: (row) => JSX.Element;
 
     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], e.shiftKey);
+        }
+    };
+
     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,30 +427,43 @@ 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 = () => {
+                            const onClick = (shift: boolean) => {
                                 if (typeof props.onRowClick === 'function') {
-                                    props.onRowClick(row);
+                                    props.onRowClick(row, shift);
                                 }
                             };
 
                             if (!doubleClickEnabled) {
-                                onClick();
+                                onClick(e.shiftKey);
                             }
 
                             if (e.detail === 1 && doubleClickEnabled) {
-                                doubleClickTimeout = window.setTimeout(onClick, 200);
+                                doubleClickTimeout = window.setTimeout(
+                                    () => onClick(e.shiftKey),
+                                    200
+                                );
                             }
                         };
                         rowProps.onDoubleClick = (e) => {
                             clearTimeout(doubleClickTimeout);
                             if (doubleClickEnabled) {
-                                props.onRowDoubleClick(row);
+                                props.onRowDoubleClick(row, e.shiftKey);
                             }
                         };
 
+                        rowProps.onMouseMove = () => {
+                            setSelectedRowId(i);
+                        };
+
                         const rowContent = row.cells.map((cell) => (
                             <td
                                 {...cell.getCellProps()}
@@ -386,7 +475,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

@@ -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,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: any;
 }
 
 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 && this.props.storyFilter?.name) {
+                    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
     };
 };