es-grid-template 1.8.54 → 1.8.56

package/es/table-component/table/Grid.js

@@ -21,8 +21,10 @@ import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
 import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
+import classNames from 'classnames';
 const Grid = props => {
   const {
+    theme = 'light',
     t,
     id,
     prefix,
@@ -68,7 +70,7 @@ const Grid = props => {
   // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
 
   // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(convertToObjTrue(selectionSettings?.selectedRowKeys ?? []))
-  const [rowSelection, setRowSelection] = React.useState(convertToObjTrue(mergedSelectedKeys));
+  const [rowSelection, setRowSelection] = React.useState({});
   // const [rowsSelected, setRowsSelected] = React.useState<RecordType[]>([])
 
   const [grouping, setGrouping] = React.useState([]);
@@ -122,6 +124,9 @@ const Grid = props => {
       }
       return true;
     },
+    initialState: {
+      rowSelection: {}
+    },
     onRowSelectionChange: setRowSelection,
     // RowSelection
 
@@ -169,49 +174,21 @@ const Grid = props => {
       }
     }
   }, [columnHidden, columnSizingInfo]);
-
-  // React.useEffect(() => {
-  //   if (columnSizingInfo.isResizingColumn === false) {
-
-  //     const aa =  updateColumnWidthsRecursive(propsColumns, columnSizing)
-
-  //     setColumns(aa)
-
-  //   }
-
-  // }, [columnSizingInfo])
-
   React.useEffect(() => {
-    // if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys) && !isSelectionChange.isChange) {
-    //   setRowSelection(convertToObjTrue(mergedSelectedKeys))
-
-    // }
-
     const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection);
     if (!isEqual) {
-      // setIsSelectionChange((prev) => ({
-      //   ...prev,
-      //   isChange: false
-      // }))
-      // setRowSelection(convertToObjTrue(mergedSelectedKeys))
+      setRowSelection(convertToObjTrue(mergedSelectedKeys));
     }
   }, [mergedSelectedKeys]);
   React.useEffect(() => {
     if (isSelectionChange.isChange) {
-      // setManualUpdate(true)
       const aa = table.getState().rowSelection;
-
-      // const dataTable = table.getRowModel().flatRows
-
       const ids = Object.keys(aa);
 
       // const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
       const ssss = filterByIds(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
-      // const ssss = (isSelectionChange.rowsData ?? []) as any[] // lấy rowsData của trang hiện tại
 
       const rs = ssss.map(it => it.original);
-      // const rs = allRows.map(it => it.original)
-
       rowSelected?.({
         type: isSelectionChange.type,
         rowData: isSelectionChange.rowData,
@@ -279,7 +256,10 @@ const Grid = props => {
   const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
   const ContainerComponent = editAble ? TableContainerEdit : TableContainer;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}-grid`,
+    className: classNames(`${prefix}-grid`, {
+      [`${prefix}-grid-light`]: theme === 'light',
+      [`${prefix}-grid-dark`]: theme === 'dark'
+    }),
     style: {
       minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined
@@ -352,7 +332,10 @@ const Grid = props => {
       paddingTop: 40
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}-grid`,
+    className: classNames(`${prefix}-grid`, {
+      [`${prefix}-grid-light`]: theme === 'light',
+      [`${prefix}-grid-dark`]: theme === 'dark'
+    }),
     style: {
       // minHeight: minHeight ?? undefined,
       maxHeight: windowSize.innerHeight - 70

package/es/table-component/type.d.ts

@@ -188,6 +188,7 @@ export type Locale = TableLocale & {
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type TableProps<RecordType = AnyObject> = {
+    theme?: 'dark' | 'light';
     title?: ReactNode | ((data: RecordType) => ReactNode);
     editAble?: boolean;
     infiniteScroll?: boolean;

package/lib/table-component/TableContainer.js

@@ -103,6 +103,15 @@ const TableContainer = props => {
       settableHeight(totalHeight - topHeight - bottomHeight);
     }
   }, [id, height, editAble, minHeight]);
+  _react.default.useEffect(() => {
+    const handleClickOutside = () => {
+      setFocusedCell(undefined);
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   const visibleColumns = table.getVisibleLeafColumns();
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];

package/lib/table-component/TableContainerEdit.js

@@ -1931,14 +1931,15 @@ const TableContainerEdit = props => {
   }))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'ui-rc-toolbar-bottom'
+    className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
+      'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
+    })
     // style={{ border: '0 1px 1px 1px solid #e0e0e0' }}
-    ,
-    style: {
-      borderBottom: '1px solid #e0e0e0',
-      borderRight: '1px solid #e0e0e0',
-      borderLeft: '1px solid #e0e0e0'
-    }
+    // style={{
+    //   borderBottom: '1px solid #e0e0e0',
+    //   borderRight: '1px solid #e0e0e0',
+    //   borderLeft: '1px solid #e0e0e0'
+    // }}
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     style: {
       width: '100%'
@@ -1948,9 +1949,7 @@ const TableContainerEdit = props => {
     onClick: ({}) => {
       setEditingKey('');
     }
-  })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default
-  // style={{padding: '0.75rem 1rem'}}
-  , (0, _extends2.default)({}, pagination, {
+  })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({}, pagination, {
     rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,

package/lib/table-component/body/TableBodyCell.js

@@ -437,57 +437,65 @@ const TableBodyCell = props => {
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
+        (0, _useColumns.toggleRowSelection)({
+          e,
+          cell,
+          setIsSelectionChange,
+          isSelectionChange,
+          selectionSettings
+        });
         cell.row.getToggleSelectedHandler()(e);
 
-        // setIsSelectionChange({
-        //   isChange: true,
-        //   type: 'rowSelected',
-        //   rowData: record,
-        //   rowsData: []
-        // })
+        // if (cell.row.getIsSelected()) { // nếu đã chọn
 
-        if (cell.row.getIsSelected()) {
-          // nếu đã chọn
+        //   const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== cell.row.id)
 
-          const aaa = isSelectionChange?.rowsData.filter(it => it.id !== cell.row.id);
-          setIsSelectionChange({
-            isChange: true,
-            type: 'rowSelected',
-            rowData: cell.row.original,
-            rowsData: aaa ?? []
-          });
-        } else {
-          const {
-            rowsData
-          } = isSelectionChange ?? {};
-          const abc = rowsData && rowsData.length > 0 ? [...rowsData] : [];
-          abc.push(cell.row);
-          setIsSelectionChange({
-            isChange: true,
-            type: 'rowSelected',
-            rowData: cell.row.original,
-            rowsData: abc
-          });
-        }
+        //   setIsSelectionChange({
+        //     isChange: true,
+        //     type: 'rowSelected',
+        //     rowData: cell.row.original,
+        //     rowsData: aaa ?? []
+        //   })
+
+        // } else {
+
+        //   const { rowsData } = isSelectionChange ?? {}
+
+        //   const abc = rowsData && rowsData.length > 0 ? [...rowsData] : []
+
+        //   abc.push(cell.row)
+
+        //   setIsSelectionChange({
+        //     isChange: true,
+        //     type: 'rowSelected',
+        //     rowData: cell.row.original,
+        //     rowsData: abc
+        //   })
+        // }
       }
-    }
+    },
+    onKeyUp: () => {}
 
     // onDoubleClick={() => { }}
     ,
 
     onClick: e => {
-      if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
-        (0, _useColumns.toggleRowSelection)({
-          e,
-          cell,
-          setIsSelectionChange,
-          isSelectionChange,
-          selectionSettings
-        });
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: cell.row.id
-        });
+      const selection = window.getSelection();
+      const text = selection ? selection.toString() : "";
+      if (text.length > 0) {} else {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          (0, _useColumns.toggleRowSelection)({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: cell.row.id
+          });
+        }
       }
     }
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/table-component/body/TableBodyCellEdit.js

@@ -248,12 +248,18 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
+
+  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
   // const hasValue = html.trim().length > 0;
 
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
+  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+    value: cell.getValue(),
+    record
+  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
   const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -435,7 +441,10 @@ const TableBodyCellEdit = props => {
     const rs = (0, _utils.unFlattenData)(rsFilterData);
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
-  function handleMouseEnter(rowId, colId) {
+  function handleMouseEnter(e, rowId, colId) {
+    if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+      setIsOpenTooltip(true);
+    }
     if (isSelecting) {
       setEndCell?.({
         rowId,
@@ -1050,12 +1059,8 @@ const TableBodyCellEdit = props => {
     "data-col-key": cell.column.id,
     "data-row-key": cell.row.id,
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-delay-show": 500
-    // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
-    // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
-    // data-tooltip-content={isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
-    ,
-    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent)),
+    "data-tooltip-delay-show": 500,
+    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent)),
     className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -1105,7 +1110,7 @@ const TableBodyCellEdit = props => {
         }
       }
     },
-    onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
+    onMouseEnter: e => handleMouseEnter(e, cell.row.id, cell.column.id),
     onMouseUp: e => handleMouseUp(e),
     onKeyDown: e => {
       if (!isEditing) {

package/lib/table-component/footer/TableFooterCell.js

@@ -73,8 +73,8 @@ const TableFooterCell = ({
       display: 'flex',
       ...(0, _utils.getCommonPinningStyles)(column),
       // width: column?.getSize() ?? column.getSize(),
-      minWidth: column?.getSize(),
-      backgroundColor: "#fafafa"
+      minWidth: column?.getSize()
+      // backgroundColor: "#fafafa",
     }
   }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
 };

package/lib/table-component/footer/TableFooterRow.js

@@ -37,11 +37,12 @@ const TableFooterRow = ({
     style: {
       display: "grid",
       width: "100%",
-      borderBottom: "1px solid #e0e0e0",
-      borderTop: "1px solid #e0e0e0",
+      // borderBottom: "1px solid #e0e0e0",
+      // borderTop: "1px solid #e0e0e0",
       height: 37,
       gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
-    }
+    },
+    className: "ui-rc-grid-footer-row"
   }, visibleColumns.map(header => {
     return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
       key: header.id

package/lib/table-component/hook/useColumns.js

@@ -281,7 +281,12 @@ const toggleRowSelection = props => {
       } else {
         // chỉ thêm vào row hiện tại
 
-        checkedRows = [...prevSelected, row];
+        const isInclude = prevSelected.find(it => it.id === cell.row.id);
+        if (isInclude) {
+          checkedRows = [...prevSelected];
+        } else {
+          checkedRows = [...prevSelected, row];
+        }
       }
       setIsSelectionChange({
         isChange: true,