@imposium-hub/components 1.45.5 → 1.46.0

package/src/components/controlled-list/ControlledList.tsx

@@ -3,48 +3,48 @@ import Button from '../button/Button';
 import { ICON_TIMES } from '../../constants/icons';
 
 interface IControlledListProps {
-    items? : any[];
-    removable? : boolean;
-    onRemove?(index) : void;
+    items?: any[];
+    removable?: boolean;
+    onRemove?(index): void;
 }
 
 class ControlledList extends React.PureComponent<IControlledListProps> {
-
-    private inputRef : any;
-    private submitHandler : any;
+    private inputRef: any;
+    private submitHandler: any;
 
     public renderRemoveButton(index) {
-
-        const {removable} = this.props;
-
-        if ( removable) {
-            return <div className = 'buttons'>
-                <Button
-                    style = 'subtle'
-                    color = 'danger'
-                    onClick = {() => this.props.onRemove(index)}>
-                    {ICON_TIMES}
-                </Button>
-            </div>;
+        const { removable } = this.props;
+
+        if (removable) {
+            return (
+                <div className='buttons'>
+                    <Button
+                        style='subtle'
+                        color='danger'
+                        onClick={() => this.props.onRemove(index)}>
+                        {ICON_TIMES}
+                    </Button>
+                </div>
+            );
         }
     }
-    public render() {
 
-        const {items} = this.props;
-        let buttons : JSX.Element[];
+    public render() {
+        const { items } = this.props;
+        let buttons: JSX.Element[];
 
         if (items) {
             buttons = items.map((item, i) => {
-                return <div className = 'item' key = {`item-${i}`}>
-                    {item}
-                    { this.renderRemoveButton(i) }
-                </div>;
+                return (
+                    <div className='item' key={`item-${i}`}>
+                        {item}
+                        {this.renderRemoveButton(i)}
+                    </div>
+                );
             });
         }
 
-        return <div className = 'controlled-list'>
-            {buttons}
-        </div>;
+        return <div className='controlled-list'>{buttons}</div>;
     }
 }
 

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

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import Paginator from './Paginator';
 import Spinner from '../spinner/Spinner';
-import { ICON_EXCLAIMATION_TRIANGLE, ICON_CHEVRON_UP, ICON_CHEVRON_DOWN } from '../../constants/icons';
+import {
+    ICON_EXCLAIMATION_TRIANGLE,
+    ICON_CHEVRON_UP,
+    ICON_CHEVRON_DOWN
+} from '../../constants/icons';
 
 import {
     useTable,
@@ -10,83 +14,85 @@ import {
     useSortBy,
     useExpanded,
     useResizeColumns,
-    usePagination,
+    usePagination
 } from 'react-table';
 import DataTableDnDWrapper from '../assets/DataTableDnDWrapper';
 
-const DataTableLoader : React.FC<any> = (p) => (
-    (<div className = 'ip-table-loader'><Spinner /></div>)
+const DataTableLoader: React.FC<any> = (p) => (
+    <div className='ip-table-loader'>
+        <Spinner />
+    </div>
 );
 
 interface INoDataComponentProps {
-    copy : string;
+    copy: string;
 }
 
-const NoDataComponent : React.FC<INoDataComponentProps> = (p : INoDataComponentProps) => {
+const NoDataComponent: React.FC<INoDataComponentProps> = (p: INoDataComponentProps) => {
     return (
-        <div className = 'ip-table-empty'>
-            <span className = 'empty-message'>
+        <div className='ip-table-empty'>
+            <span className='empty-message'>
                 {ICON_EXCLAIMATION_TRIANGLE} {p.copy || 'No Data Found'}
             </span>
         </div>
     );
 };
 
-const preventKeyScroll = (e) : void => {
+const preventKeyScroll = (e): void => {
     if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
         e.preventDefault();
     }
 };
 
 interface IDataTableProps {
-    defaultPageSize? : number;
-    sortState? : any[];
-    noDataText? : string;
-    minRows? : number;
-    simple? : boolean;
-    paginated? : boolean;
-    disableMultisort? : boolean;
-    showInterstitial? : boolean;
-    freezeWhenExpanded? : boolean;
-    customPaginator? : boolean;
-    pages ? : number;
-    tightRows? : boolean;
-    dndType? : string;
-    dndName? : string;
-    dnd? : boolean;
-    onFetchData? : (...args) => any;
+    defaultPageSize?: number;
+    sortState?: any[];
+    noDataText?: string;
+    minRows?: number;
+    simple?: boolean;
+    paginated?: boolean;
+    disableMultisort?: boolean;
+    showInterstitial?: boolean;
+    freezeWhenExpanded?: boolean;
+    customPaginator?: boolean;
+    pages?: number;
+    tightRows?: boolean;
+    dndType?: string;
+    dndName?: string;
+    dnd?: boolean;
+    onFetchData?: (...args) => any;
 
     // organize re-used & new props here
 
     // column configs and list data
-    data : any[];
-    columns : any | any[];
-    hiddenColumns ? : string[];
+    data: any[];
+    columns: any | any[];
+    hiddenColumns?: string[];
 
     // controlled pagination props, using internal paging if not set
-    hidePaginator ? : boolean;
-    currentPage ? : number;
-    totalPages ? : number;
-    itemsPerPage ? : number;
-    totalItems ? : number;
-    onPage ? : (pageIndex : number, pageSize : number) => void;
+    hidePaginator?: boolean;
+    currentPage?: number;
+    totalPages?: number;
+    itemsPerPage?: number;
+    totalItems?: number;
+    onPage?: (pageIndex: number, pageSize: number) => void;
 
     // controlled sorting props, use internal sorting if not set
-    sortBy ? : any[];
-    onSort ? : (sortBy : any[]) => void;
+    sortBy?: any[];
+    onSort?: (sortBy: any[]) => void;
 
     // controlled selection props
-    highlightBy? : any;
-    onRowClick ? : (row) => void;
-    onRowDoubleClick ? : (row) => void;
+    highlightBy?: any;
+    onRowClick?: (row) => void;
+    onRowDoubleClick?: (row) => void;
 
-    renderPivotComponent ? : (row) => JSX.Element;
+    renderPivotComponent?: (row) => JSX.Element;
 
-    disableKeyScroll ? : boolean;
+    disableKeyScroll?: boolean;
 }
 
-const processColumnData = (freshColumns) : any[] => {
-    let colKeys : string[];
+const processColumnData = (freshColumns): any[] => {
+    let colKeys: string[];
 
     if (Array.isArray(freshColumns)) {
         return freshColumns;
@@ -96,7 +102,7 @@ const processColumnData = (freshColumns) : any[] => {
         if (colKeys.length > 0) {
             return colKeys.map((key) => ({
                 ...freshColumns[key],
-                accessor: key,
+                accessor: key
             }));
         }
     }
@@ -104,28 +110,32 @@ const processColumnData = (freshColumns) : any[] => {
     return [];
 };
 
-let doubleClickTimeout : number;
+let doubleClickTimeout: number;
 
-const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
+const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
     const wrapperRef = React.useRef(null);
     const activeRowRef = React.useRef(null);
     const [didMount, setDidMount] = React.useState(false);
     const [data, setData] = React.useState([]);
     const [columns, setColumns] = React.useState([]);
 
-    const hiddenColumns : string[] = (Array.isArray(props.hiddenColumns)) ? props.hiddenColumns : [];
-    const manualPagination : boolean = (Number.isInteger(props.currentPage) && typeof props.onPage === 'function');
-    const manualSortBy : boolean = (typeof props.onSort === 'function' && typeof props.sortBy !== 'undefined');
-    const canPivot : boolean = (typeof props.renderPivotComponent === 'function');
-    const renderPivotComponent : (r) => JSX.Element = (canPivot) ? props.renderPivotComponent : () => null;
-    const doubleClickEnabled : boolean = (typeof props.onRowDoubleClick === 'function');
+    const hiddenColumns: string[] = Array.isArray(props.hiddenColumns) ? props.hiddenColumns : [];
+    const manualPagination: boolean =
+        Number.isInteger(props.currentPage) && typeof props.onPage === 'function';
+    const manualSortBy: boolean =
+        typeof props.onSort === 'function' && typeof props.sortBy !== 'undefined';
+    const canPivot: boolean = typeof props.renderPivotComponent === 'function';
+    const renderPivotComponent: (r) => JSX.Element = canPivot
+        ? props.renderPivotComponent
+        : () => null;
+    const doubleClickEnabled: boolean = typeof props.onRowDoubleClick === 'function';
 
     const initialTableState = {
         hiddenColumns,
-        sortBy: (manualSortBy) ? props.sortBy : [],
-        pageIndex: (manualPagination) ? props.currentPage - 1 : undefined,
+        sortBy: manualSortBy ? props.sortBy : [],
+        pageIndex: manualPagination ? props.currentPage - 1 : undefined,
         pageSize: props.itemsPerPage,
-        autoResetExpanded: false,
+        autoResetExpanded: false
     };
 
     const {
@@ -147,11 +157,7 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
         visibleColumns,
         totalColumnsWidth,
         toggleAllRowsExpanded,
-        state: {
-            pageIndex,
-            pageSize,
-            sortBy,
-        },
+        state: { pageIndex, pageSize, sortBy }
     } = useTable(
         {
             columns,
@@ -164,22 +170,23 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
             autoResetExpanded: false,
             disableSortRemove: manualSortBy,
             pageCount: props.totalPages,
-            pageSize: props.itemsPerPage,
+            pageSize: props.itemsPerPage
         },
         useFlexLayout,
         useFilters,
         useSortBy,
         useExpanded,
         usePagination,
-        useResizeColumns,
+        useResizeColumns
     );
 
-    const rowData = (manualPagination) ? rows : page;
-    const hidePaginatorClass : string = (props.hidePaginator) ? 'hide-paginator' : '';
-    const horizontalScrollClass : string = (wrapperRef.current && totalColumnsWidth > wrapperRef.current.clientWidth)
-        ? 'horizontal-scroll'
-        : '';
-    const rowClass = (props.tightRows) ? 'tight-rows' : '';
+    const rowData = manualPagination ? rows : page;
+    const hidePaginatorClass: string = props.hidePaginator ? 'hide-paginator' : '';
+    const horizontalScrollClass: string =
+        wrapperRef.current && totalColumnsWidth > wrapperRef.current.clientWidth
+            ? 'horizontal-scroll'
+            : '';
+    const rowClass = props.tightRows ? 'tight-rows' : '';
 
     // Set component mounted state
     React.useEffect(() => setDidMount(true), []);
@@ -204,119 +211,121 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
     }, [props.data]);
 
     // Execute when page or itemsPerPage changes
-    React.useEffect(
-        () => {
-            if (didMount && manualPagination) {
-                toggleAllRowsExpanded(false);
-            }
-        },
-        [props.currentPage]
-    );
+    React.useEffect(() => {
+        if (didMount && manualPagination) {
+            toggleAllRowsExpanded(false);
+        }
+    }, [props.currentPage]);
 
     // Execute when sort order or sort key changes
-    React.useEffect(
-        () => {
-            if (didMount && manualSortBy) {
-                props.onSort(sortBy);
-            }
-        },
-        [sortBy]
-    );
+    React.useEffect(() => {
+        if (didMount && manualSortBy) {
+            props.onSort(sortBy);
+        }
+    }, [sortBy]);
 
     return (
         <section
-            ref = {wrapperRef}
-            className = 'ip-table-wrapper'
-            tabIndex = {(props.disableKeyScroll) ? 0 : undefined}
-            onKeyDown = {(props.disableKeyScroll) ? preventKeyScroll : null}
-        >
-            {(props.showInterstitial) && <DataTableLoader />}
-            {(didMount && !props.showInterstitial && data.length === 0) && (<NoDataComponent copy = {props.noDataText} />)}
+            ref={wrapperRef}
+            className='ip-table-wrapper'
+            tabIndex={props.disableKeyScroll ? 0 : undefined}
+            onKeyDown={props.disableKeyScroll ? preventKeyScroll : null}>
+            {props.showInterstitial && <DataTableLoader />}
+            {didMount && !props.showInterstitial && data.length === 0 && (
+                <NoDataComponent copy={props.noDataText} />
+            )}
 
             <table
                 {...getTableProps()}
-                className = {`ip-table ${horizontalScrollClass} ${hidePaginatorClass} ${rowClass}`}
-            >
-                <thead className = 'ip-table-head'>
+                className={`ip-table ${horizontalScrollClass} ${hidePaginatorClass} ${rowClass}`}>
+                <thead className='ip-table-head'>
                     {headerGroups.map((headerGroup) => {
                         return (
-                            <React.Fragment key = 'head-fragment'>
-                                <tr {...headerGroup.getHeaderGroupProps()} className = 'ip-table-head-row'>
+                            <React.Fragment key='head-fragment'>
+                                <tr
+                                    {...headerGroup.getHeaderGroupProps()}
+                                    className='ip-table-head-row'>
                                     {headerGroup.headers.map((column) => {
-                                        const searchable : boolean = (column.hasOwnProperty('Search'));
-                                        const toggleProps : any = column.getSortByToggleProps();
-                                        const sortSpan : JSX.Element = (
-                                            <span className = 'sort-status'>
-                                                {
-                                                    (column.isSorted)
-                                                        ? column.isSortedDesc ? ICON_CHEVRON_DOWN : ICON_CHEVRON_UP
-                                                        : null
-                                                }
+                                        const searchable: boolean = column.hasOwnProperty('Search');
+                                        const toggleProps: any = column.getSortByToggleProps();
+                                        const sortSpan: JSX.Element = (
+                                            <span className='sort-status'>
+                                                {column.isSorted
+                                                    ? column.isSortedDesc
+                                                        ? ICON_CHEVRON_DOWN
+                                                        : ICON_CHEVRON_UP
+                                                    : null}
                                             </span>
                                         );
 
                                         return (
                                             <th
                                                 {...column.getHeaderProps()}
-                                                className = {`ip-table-header ${column.canSort ? 'ip-sortable' : ''}`}
-                                            >
-                                                {(!searchable) && (
+                                                className={`ip-table-header ${
+                                                    column.canSort ? 'ip-sortable' : ''
+                                                }`}>
+                                                {!searchable && (
                                                     <div
                                                         {...toggleProps}
-                                                        className = 'filterable-cell-wrapper'
-                                                    >
+                                                        className='filterable-cell-wrapper'>
                                                         {column.render('Header')}
                                                         {sortSpan}
                                                     </div>
                                                 )}
 
-                                                {(searchable) && (
-                                                    <div className = 'filterable-cell-wrapper'>
+                                                {searchable && (
+                                                    <div className='filterable-cell-wrapper'>
                                                         <span
                                                             {...toggleProps}
-                                                            className = 'searchable-sort-area'
-                                                        >
+                                                            className='searchable-sort-area'>
                                                             {column.render('Header')}
                                                             {sortSpan}
                                                         </span>
-                                                        {column.hasOwnProperty('Search') && column.render('Search')}
+                                                        {column.hasOwnProperty('Search') &&
+                                                            column.render('Search')}
                                                     </div>
                                                 )}
 
                                                 {column.canResize && (
                                                     <div
                                                         {...column.getResizerProps()}
-                                                        className={`ip-table-resizer ${column.isResizing ? 'resizing' : ''}`}
+                                                        className={`ip-table-resizer ${
+                                                            column.isResizing ? 'resizing' : ''
+                                                        }`}
                                                     />
                                                 )}
                                             </th>
                                         );
                                     })}
                                 </tr>
-                                {
-                                    (headerGroup.headers.some((column) => (column.hasOwnProperty('Filter')))) && (
-                                        <tr {...headerGroup.getHeaderGroupProps({key: 'filters-row'})}>
-                                            {headerGroup.headers.map((column, i) => (
-                                                <th
-                                                    {...column.getHeaderProps({key: `filter-${i}`})}
-                                                    key = {`filter-col-${i}`}
-                                                    className = 'ip-table-filter'
-                                                >
-                                                    {column.canFilter && column.Filter ? column.render('Filter') : null}
-                                                </th>
-                                            ))}
-                                        </tr>
-                                    )
-                                }
+                                {headerGroup.headers.some((column) =>
+                                    column.hasOwnProperty('Filter')
+                                ) && (
+                                    <tr
+                                        {...headerGroup.getHeaderGroupProps({
+                                            key: 'filters-row'
+                                        })}>
+                                        {headerGroup.headers.map((column, i) => (
+                                            <th
+                                                {...column.getHeaderProps({ key: `filter-${i}` })}
+                                                key={`filter-col-${i}`}
+                                                className='ip-table-filter'>
+                                                {column.canFilter && column.Filter
+                                                    ? column.render('Filter')
+                                                    : null}
+                                            </th>
+                                        ))}
+                                    </tr>
+                                )}
                             </React.Fragment>
                         );
                     })}
                 </thead>
 
-                <tbody {...getTableBodyProps()} className = 'ip-table-body'>
+                <tbody {...getTableBodyProps()} className='ip-table-body'>
                     {rowData.map((row, i) => {
-                        let selectedClass : string = '';
-                        let activeRef : any;
+                        let selectedClass: string = '';
+                        let activeRef: any;
 
                         if (
                             props.highlightBy &&
@@ -356,62 +365,76 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
                         const rowContent = row.cells.map((cell) => (
                             <td
                                 {...cell.getCellProps()}
-                                className = {`ip-table-col ${(cell.column.overflowVisible) ? 'overflow-visible' : ''}`.trim()}
-                            >
+                                className={`ip-table-col ${
+                                    cell.column.overflowVisible ? 'overflow-visible' : ''
+                                }`.trim()}>
                                 {cell.render('Cell')}
                             </td>
                         ));
 
-                        return <React.Fragment key = {`row-${i}`}>
-
-                            {(props.dnd) && <DataTableDnDWrapper rowProps = {rowProps} rowRef = {activeRef} key = {`row-${i}`} row = {row} dndType = {props.dndType} dndName = {props.dndName}>
-                                {rowContent}
-                            </DataTableDnDWrapper>}
-
-                            {(!props.dnd) && <tr key = {`row-${i}`} ref = {activeRef} {...rowProps}>
-                                {rowContent}
-                            </tr>}
+                        return (
+                            <React.Fragment key={`row-${i}`}>
+                                {props.dnd && (
+                                    <DataTableDnDWrapper
+                                        rowProps={rowProps}
+                                        rowRef={activeRef}
+                                        key={`row-${i}`}
+                                        row={row}
+                                        dndType={props.dndType}
+                                        dndName={props.dndName}>
+                                        {rowContent}
+                                    </DataTableDnDWrapper>
+                                )}
+
+                                {!props.dnd && (
+                                    <tr key={`row-${i}`} ref={activeRef} {...rowProps}>
+                                        {rowContent}
+                                    </tr>
+                                )}
 
-                            {(row.isExpanded) &&
-                                (
+                                {row.isExpanded && (
                                     <tr
-                                        {...row.getRowProps({key: 'pivot-row'})}
-                                        className = 'ip-pivot-row'
-                                    >
+                                        {...row.getRowProps({ key: 'pivot-row' })}
+                                        className='ip-pivot-row'>
                                         <td
-                                            className = {`ip-pivot-col ${selectedClass}`}
-                                            colSpan = {visibleColumns.length}
-                                        >
+                                            className={`ip-pivot-col ${selectedClass}`}
+                                            colSpan={visibleColumns.length}>
                                             {renderPivotComponent(row)}
                                         </td>
                                     </tr>
-                                )
-                            }
-                        </React.Fragment>;
+                                )}
+                            </React.Fragment>
+                        );
                     })}
                 </tbody>
             </table>
 
-            {
-                (!props.hidePaginator) && (
-                    <Paginator
-                        {...{
-                            totalItems: props.totalItems,
-                            pageIndex: (props.currentPage) ? props.currentPage : pageIndex,
-                            manualPagination,
-                            pageSize,
-                            pageCount,
-                            pageOptions,
-                            canNextPage: (manualPagination) ? props.currentPage + 1 <= props.totalPages : canNextPage,
-                            canPreviousPage: (manualPagination) ? props.currentPage - 1 >= 1 : canPreviousPage,
-                            gotoPage: (manualPagination) ? props.onPage : gotoPage,
-                            setPageSize,
-                            nextPage: (manualPagination) ? () => props.onPage(props.currentPage + 1, pageSize) : nextPage,
-                            previousPage: (manualPagination) ? () => props.onPage(props.currentPage - 1, pageSize) : previousPage,
-                        }}
-                    />
-                )
-            }
+            {!props.hidePaginator && (
+                <Paginator
+                    {...{
+                        totalItems: props.totalItems,
+                        pageIndex: props.currentPage ? props.currentPage : pageIndex,
+                        manualPagination,
+                        pageSize,
+                        pageCount,
+                        pageOptions,
+                        canNextPage: manualPagination
+                            ? props.currentPage + 1 <= props.totalPages
+                            : canNextPage,
+                        canPreviousPage: manualPagination
+                            ? props.currentPage - 1 >= 1
+                            : canPreviousPage,
+                        gotoPage: manualPagination ? props.onPage : gotoPage,
+                        setPageSize,
+                        nextPage: manualPagination
+                            ? () => props.onPage(props.currentPage + 1, pageSize)
+                            : nextPage,
+                        previousPage: manualPagination
+                            ? () => props.onPage(props.currentPage - 1, pageSize)
+                            : previousPage
+                    }}
+                />
+            )}
         </section>
     );
 };