@imposium-hub/components 1.33.4 → 1.34.1

package/components/assets/AssetsTableDateCell.tsx

@@ -6,7 +6,7 @@ interface IAssetsTableDateCell {
 }
 
 const AssetsTableDateCell : React.FC<IAssetsTableDateCell> = (p : IAssetsTableDateCell) => (
-    <>{formatDateDefault(p.cell.row.values.date_created)}</>
+    <div>{formatDateDefault(p.cell.row.values.date_created)}</div>
 );
 
 const AssetsTableDateCellMemoized = React.memo(AssetsTableDateCell);

package/components/assets/AssetsTableNameCell.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {useEffect, useState} from 'react';
 import TextField from '../text-field/TextField';
 import { updateAssetName } from '../../redux/actions/asset-list';
 import { connect } from 'react-redux';
@@ -8,22 +9,38 @@ import { IImposiumAPI } from '../../services/API';
 interface IAssetsTableNameCell {
     cell : any;
     api : IImposiumAPI;
-    updateAssetName : (api : any, id : string, name : string) => any;
+    updateAssetName : (api : any, id : string, name : string, delay? : boolean) => any;
 }
 
+let updateTimeout : any;
 const AssetsTableNameCell : React.FC<IAssetsTableNameCell> = (props : IAssetsTableNameCell) => {
 
         const {cell: {row: {original: {name, id}}}} = props;
+        const [ localName, setLocalName ]  = useState('');
+
+        const onUpdate = (n) => {
+            setLocalName(n);
+            clearTimeout(updateTimeout);
+            updateTimeout = setTimeout(() => setName(n), 1000);
+        };
+
+        const setName = (n) => {
+            props.updateAssetName(props.api, id, n);
+        };
+
+        useEffect(() => {
+            setLocalName(name);
+            return () => {
+                clearTimeout(updateTimeout);
+            };
+        }, [name]);
 
         return (
-            <div>
-                <TextField
-                    controlled = {true}
-                    value ={name}
-                    width = {'100%'}
-                    onSubmit = {(t) => props.updateAssetName(props.api, id, t)}
-                />
-            </div>
+            <TextField
+                value ={localName}
+                width = {'100%'}
+                onChange = {(n) => onUpdate(n)}
+            />
         );
 };
 

package/components/assets/AssetsTableSelectCell.tsx

@@ -35,14 +35,12 @@ class AssetsTableSelectCell extends React.PureComponent<IAssetsTableSelectCell,
         };
 
         return (
-            <div className = 'select-cell'>
-                <CheckboxField
-                    label = ''
-                    width = 'auto'
-                    value = {isSelected}
-                    onChange = {(v, e) => selectionHandler(v, e)}
-                />
-            </div>
+            <CheckboxField
+                label = ''
+                width = 'auto'
+                value = {isSelected}
+                onChange = {(v, e) => selectionHandler(v, e)}
+            />
         );
     }
 }

package/components/data-table/DataTable.tsx

@@ -50,6 +50,7 @@ interface IDataTableProps {
     freezeWhenExpanded? : boolean;
     customPaginator? : boolean;
     pages ? : number;
+    tightRows : boolean;
     dndType : string;
     dndName : string;
     dnd : boolean;
@@ -179,6 +180,7 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
     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), []);
@@ -254,7 +256,7 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
 
             <table
                 {...getTableProps()}
-                className = {`ip-table ${horizontalScrollClass} ${hidePaginatorClass}`}
+                className = {`ip-table ${horizontalScrollClass} ${hidePaginatorClass} ${rowClass}`}
             >
                 <thead className = 'ip-table-head'>
                     {headerGroups.map((headerGroup) => {