@imposium-hub/components 2.5.11 → 2.5.12

package/dist/styles.css

@@ -1077,6 +1077,9 @@ body a {
   border-top: 0;
   background-color: #242424;
 }
+.ip-table-wrapper .ip-table-pagination input[type=number] {
+  -moz-appearance: textfield;
+}
 .ip-table-wrapper .ip-table-pagination .paginator-input {
   display: inline-block;
   background: #1d1d1d;
@@ -1258,6 +1261,9 @@ body a {
 .form-field textarea:disabled:hover {
   background: #1d1d1d;
 }
+.form-field input[type=number] {
+  -moz-appearance: textfield;
+}
 .form-field textarea {
   height: 60px;
   resize: none;
@@ -1393,14 +1399,15 @@ body a {
   padding-top: 1px;
   box-sizing: border-box;
   color: #939393;
+  background: #373737;
 }
 .button-group-field .button-group .button-group-option:hover {
   background: #101010;
 }
 .button-group-field .button-group .button-group-option.active {
   cursor: auto;
-  background: #373737;
-  color: #dfdfdf;
+  background: unset;
+  color: unset;
 }
 .button-group-field .button-group .button-group-option.disabled svg {
   color: gray;
@@ -1893,9 +1900,6 @@ body a {
   cursor: pointer;
   height: 244px;
 }
-.imposium-header .stories-menu .ip-table-body .ip-table-row:hover .ip-table-col {
-  background-color: #393939;
-}
 .imposium-header .orgs-menu {
   width: 240px;
 }
@@ -2848,6 +2852,10 @@ body a {
   margin-top: 2px;
   cursor: pointer;
 }
+.imposium-asset-id {
+  cursor: pointer;
+  user-select: none;
+}
 h1,
 h2,
 h3,

package/dist/styles.less

@@ -1246,6 +1246,10 @@ body{
         border-top: 0;
         background-color: darken(@background, 1%);
 
+        input[type=number] {
+            -moz-appearance: textfield;
+        }
+        
         .paginator-input {
             .inputMixin;
             width: 60px;
@@ -1375,6 +1379,10 @@ body{
 		padding:4px;
 	}
 
+	input[type=number] {
+		-moz-appearance: textfield;
+	}
+	
 	textarea{
 		height:@inputHeight * 3;
 		resize:none;
@@ -1476,15 +1484,15 @@ body{
 			padding-top: 1px;
 			box-sizing: border-box;
 			color:darken(@textDefault, 30%);
-
+			background: #373737;
 			&:hover{
 				background:darken(@inputBackground, 5%);
 			}
 
 			&.active{
 				cursor:auto;
-				background:lighten(@inputBackground, 10%);
-				color:@textDefault;
+				background:unset;
+				color:unset;
 			}
 
 			&.disabled svg {
@@ -1917,11 +1925,6 @@ body{
         .ip-table-body {
             cursor: pointer;
             height: 244px;
-            .ip-table-row:hover{
-                .ip-table-col {
-                  background-color: darken(@backgroundHighlight, 15%);
-                }
-              }
         }
     }
 
@@ -2936,6 +2939,11 @@ body{
         }
     }
 }
+
+.imposium-asset-id {
+    cursor: pointer;
+    user-select: none;
+}
 h1, h2, h3, h4, h5 {
     font-family: 'Oswald', sans-serif;
     color:@headerTextDefault;

package/less/components/data-table.less

@@ -207,6 +207,10 @@
         border-top: 0;
         background-color: darken(@background, 1%);
 
+        input[type=number] {
+            -moz-appearance: textfield;
+        }
+        
         .paginator-input {
             .inputMixin;
             width: 60px;

package/less/components/form-field.less

@@ -55,6 +55,10 @@
 		padding:4px;
 	}
 
+	input[type=number] {
+		-moz-appearance: textfield;
+	}
+	
 	textarea{
 		height:@inputHeight * 3;
 		resize:none;
@@ -156,15 +160,15 @@
 			padding-top: 1px;
 			box-sizing: border-box;
 			color:darken(@textDefault, 30%);
-
+			background: #373737;
 			&:hover{
 				background:darken(@inputBackground, 5%);
 			}
 
 			&.active{
 				cursor:auto;
-				background:lighten(@inputBackground, 10%);
-				color:@textDefault;
+				background:unset;
+				color:unset;
 			}
 
 			&.disabled svg {

package/less/components/header.less

@@ -298,11 +298,6 @@
         .ip-table-body {
             cursor: pointer;
             height: 244px;
-            .ip-table-row:hover{
-                .ip-table-col {
-                  background-color: darken(@backgroundHighlight, 15%);
-                }
-              }
         }
     }
 

package/less/components/tag.less

@@ -40,4 +40,9 @@
             cursor: pointer;
         }
     }
+}
+
+.imposium-asset-id {
+    cursor: pointer;
+    user-select: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.5.11",
+    "version": "2.5.12",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/assets/AssetsTableAssetIdCell.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { copying } from '../../constants/copy';
+import { updateFilters } from '../../redux/actions/asset-filters';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+interface IAssetsTableAssetIdCellProps {
+    cell: any;
+    onNotification?: (e) => void;
+    onError?: (e) => void;
+}
+
+const AssetsTableAssetIdCell: React.FC<IAssetsTableAssetIdCellProps> = (
+    props: IAssetsTableAssetIdCellProps
+) => {
+    const {
+        onNotification,
+        onError,
+        cell: {
+            row: {
+                original: { id }
+            }
+        }
+    } = props;
+
+    const copyToClipboard = (e) => {
+        navigator.clipboard.writeText(e.target.textContent).then(
+            () => {
+                if (onNotification) {
+                    onNotification(`${copying.copied}`);
+                }
+            },
+            () => {
+                if (onError) {
+                    onError(`${copying.error}`);
+                }
+            }
+        );
+    };
+
+    return (
+        <div
+            key={id}
+            className='imposium-asset-id'
+            onClick={(e) => copyToClipboard(e)}>
+            {id}
+        </div>
+    );
+};
+
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ updateFilters }, dispatch);
+};
+
+const mapStateToProps = (state): any => {
+    return { assetFilters: state.assetFilters };
+};
+
+const AssetsTableAssetIdCellMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableAssetIdCell));
+
+export default AssetsTableAssetIdCellMemoized;

package/src/components/assets/AssetsTableAssetIdFilter.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import TextField from '../text-field/TextField';
+import { updateFilters } from '../../redux/actions/asset-filters';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+interface IAssetsTableAssetIdFilterProps {
+    assetFilters: any;
+    updateFilters: (filters: any) => any;
+}
+
+class AssetsTableAssetIdFilter extends React.PureComponent<IAssetsTableAssetIdFilterProps> {
+    public render = (): JSX.Element => {
+        const { assetFilters } = this.props;
+
+        return (
+            <TextField
+                className='asset-id'
+                submittable
+                submittableType='search'
+                value={assetFilters.id}
+                doSubmit={(n) => this.props.updateFilters({ id: n })}
+            />
+        );
+    };
+}
+
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ updateFilters }, dispatch);
+};
+
+const mapStateToProps = (state): any => {
+    return { assetFilters: state.assetFilters };
+};
+
+const AssetsTableAssetIdFilterMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableAssetIdFilter));
+
+export default AssetsTableAssetIdFilterMemoized;

package/src/components/assets/AssetsTableGlobalCell.tsx

@@ -6,8 +6,18 @@ interface IAssetsTableGlobalCell {
 }
 
 const AssetsTableGlobalCell: React.FC<IAssetsTableGlobalCell> = (p: IAssetsTableGlobalCell) => {
+    const {
+        cell: {
+            row: {
+                original: { story_id }
+            }
+        }
+    } = p;
+
     return (
-        <div className='asset-global-cell'>{p.cell.row.original.story_id ? null : ICON_GLOBE}</div>
+        <div className='asset-global-cell'>
+            {story_id || story_id === undefined ? null : ICON_GLOBE}
+        </div>
     );
 };
 

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,64 @@ 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.key === 'ArrowUp') {
+            if (selectedRowId === 0 || selectedRowId === null) {
+                setSelectedRowId(maxRowId);
+                scrollToBottom();
+            }
+            if (selectedRowId !== 0 && selectedRowId !== null) {
+                setSelectedRowId(selectedRowId - 1);
+                scrollIntoView();
+            }
+        }
+
+        if (e.key === 'ArrowDown') {
+            if (selectedRowId === null) {
+                setSelectedRowId(0);
+            } else {
+                rowId = selectedRowId === maxRowId ? 0 : selectedRowId + 1;
+                setSelectedRowId(rowId);
+                if (rowId === 0) {
+                    scrollToTop();
+                } else {
+                    scrollIntoView();
+                }
+            }
+        }
+
+        if (e.key === 'Enter' && typeof props.onRowClick === 'function' && selectedRowId !== null) {
+            props.onRowClick(rows[selectedRowId], e.shiftKey);
+        }
+    };
+
     return (
         <section
             ref={wrapperRef}
@@ -246,7 +308,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.key === 'ArrowUp' ||
+                                                e.key === 'ArrowDown' ||
+                                                e.key === 'Enter') &&
+                                            props.keyboardNav
+                                        ) {
+                                            rowSelector(e);
+                                        }
+                                    }}>
                                     {headerGroup.headers.map((column) => {
                                         const searchable: boolean = column.hasOwnProperty('Search');
                                         const toggleProps: any = column.getSortByToggleProps();
@@ -326,7 +398,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 +423,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 +471,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}>