es-grid-template 1.1.7 → 1.1.8

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

@@ -10,6 +10,7 @@ const Grid = props => {
   const {
     height,
     style,
+    rowHoverable,
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
@@ -21,7 +22,8 @@ const Grid = props => {
     style: {
       ...style,
       minHeight: height
-    }
+    },
+    rowHoverable: rowHoverable ?? true
   }))));
 };
 export default Grid;

package/es/grid-component/table/GridEdit.js

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { Form } from "antd";
 import { useForm } from 'react-hook-form';
 import { Toaster } from "react-hot-toast";
-import { renderContent } from "../hooks/useColumns";
+import { flatColumns, renderContent } from "../hooks/useColumns";
 import EditableCell from "../EditableCell";
 import { GridStyle } from "../GridStyle";
 import { TableContext } from "../useContext";
@@ -15,7 +15,9 @@ import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
 import { getEditType, isObjEmpty, totalFixedWidth } from "../hooks";
 import Message from "../../Message/Message";
-import Command from "../Command";
+
+// import Command from "../Command";
+
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
 const GridEdit = props => {
@@ -574,175 +576,144 @@ const GridEdit = props => {
       }
     }
   };
-  const addResizeHandlers = (cols, parentPath = []) => {
-    return cols.map((col, colIndex) => {
-      const currentPath = [...parentPath, colIndex];
-      if (!col?.dataIndex && !col.key) {
-        return col;
-      }
-      if (col.children) {
-        return {
-          ...col,
-          children: addResizeHandlers(col.children, currentPath)
-        };
-      }
-      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
-        return {
-          ...col,
-          className: 'rc-ui-cell-editable',
-          render: (value, record, rowIndex) => {
-            return /*#__PURE__*/React.createElement("div", {
-              className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
-                selected: rowsSelected.has(`${rowIndex}-${colIndex}`),
-                focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
-              }),
-              onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
-              onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
-              onClick: () => handleClickRowHeader(rowIndex, colIndex)
-            }, /*#__PURE__*/React.createElement("div", {
-              className: 'ui-rc_content'
-            }, rowIndex + 1));
-          }
-        };
-      }
-      if (col.dataIndex === 'command' || col.field === 'command') {
-        return {
-          ...col,
-          title: col.headerText ?? col.title,
-          ellipsis: col.ellipsis !== false,
-          onCell: () => ({
-            className: 'ui-rc-cell-command'
-          }),
-          // render: (value: any, record: any, rowIndex: number) => {
-          render: () => {
-            return /*#__PURE__*/React.createElement("div", {
-              className: classNames('ui-rc-cell-command__content', {})
-            }, col.commandItems && col.commandItems?.map((item, indexComm) => {
-              if (item.visible !== false) {
-                // return  (
-                //   <span>{item.title}</span>
-                // )
-
-                return /*#__PURE__*/React.createElement(Command, {
-                  key: `command-${indexComm}`,
-                  item: item,
-                  onClick: e => {
-                    e.preventDefault();
-                    // handleCommandClick({command: item, rowData: record, index: rowIndex})
-                  }
-                });
-              }
-            }));
-          }
-        };
-      }
+  const convertColumns = flatColumns(columns).map((column, colIndex) => {
+    if (!column?.field && !column?.key) {
+      return column;
+    }
+    if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
       return {
-        ...col,
-        onCell: (record, rowIndex) => ({
-          onKeyDown: event => {
-            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-              if (!isEditing(record) && record[rowKey] !== editingKey) {
-                handleEdit(record, col, col.editType, event);
-              }
-              if (editingKey && editingKey !== '' && (rowIndex ?? 0) + 1 < dataSource.length && event.key === 'Enter') {
-                handleFocusCell((rowIndex ?? 0) + 1, colIndex, col, 'vertical', event);
-              }
-            }
-            if (event.key === 'Tab') {
-              if (colIndex + 1 !== cols.length) {
-                handleFocusCell(rowIndex, colIndex + 1, col, 'horizontal', event);
-              } else {
-                event.stopPropagation();
-                event.preventDefault();
-              }
-            }
-            if (event.key === 'ArrowRight' && colIndex + 1 !== cols.length) {
-              if (editingKey !== '') {} else {
-                handleFocusCell(rowIndex, colIndex + 1, col, 'horizontal', event);
-              }
-            }
-            if (event.key === 'ArrowLeft' && colIndex > 0) {
-              if (!col.dataIndex && !col.key || col.field === 'index' || col.field === '#' || col.dataIndex === 'index' || col.dataIndex === '#') {
-                event.stopPropagation();
-                event.preventDefault();
-              } else {
-                if (editingKey !== '') {} else {
-                  handleFocusCell(rowIndex, colIndex - 1, col, 'horizontal', event);
-                }
-              }
-            }
-            if (event.key === 'ArrowDown' && (rowIndex ?? 0) + 1 < dataSource.length) {
-              handleFocusCell((rowIndex ?? 0) + 1, colIndex, col, 'vertical', event);
-            }
-            if (event.key === 'ArrowUp' && (rowIndex ?? 0) > 0) {
-              handleFocusCell((rowIndex ?? 0) - 1, colIndex, col, 'vertical', event);
-            }
-          },
-          onPaste: event => {
-            if (editingKey === '') {
-              handlePaste(event, colIndex, rowIndex);
-              event.preventDefault();
-            }
-          },
-          onCopy: e => {
-            if (editingKey === '') {
-              handleCopy(e);
-              e.preventDefault();
-            }
-          },
-          onDoubleClick: event => {
-            if (!isEditing(record) && record[rowKey] !== editingKey) {
-              handleEdit(record, col, col.editType, event);
-            }
-          },
-          // onMouseDown: (event) => {
-          //   handleMouseDown(rowIndex, colIndex, event)
-          // },
-          //
-          // onMouseEnter: () => {
-          //   handleMouseEnter(rowIndex, colIndex)
-          // },
-
-          onClick: () => {
-            if (record[rowKey] !== editingKey && editingKey !== '') {
-              setEditingKey('');
-            }
-          },
-          className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
-          record,
-          column: col,
-          editType: getEditType(col, record),
-          dataIndex: col.dataIndex,
-          title: col.title,
-          'data-col-index': colIndex,
-          'data-row-index': rowIndex,
-          // colIndex: colIndex,
-          indexCol: colIndex,
-          indexRow: rowIndex,
-          editing: isEditing(record),
-          tabIndex: (rowIndex ?? 0) * columns.length + colIndex
-        }),
-        // onHeaderCell: (data) => ({
-        //   ...col.onHeaderCell(),
-        //   onClick: () => {
-        //     handleClickColHeader(data as ColumnTable, colIndex)
-        //   }
-        // }),
+        ...column,
+        className: 'rc-ui-cell-editable',
         render: (value, record, rowIndex) => {
           return /*#__PURE__*/React.createElement("div", {
-            className: classNames('ui-rc_cell-content', {
-              selected: selectedCells.has(`${rowIndex}-${colIndex}`)
+            className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
+              selected: rowsSelected.has(`${rowIndex}-${colIndex}`),
+              focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
             }),
-            onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
-            onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
+            onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
+            onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
+            onClick: () => handleClickRowHeader(rowIndex, colIndex)
           }, /*#__PURE__*/React.createElement("div", {
             className: 'ui-rc_content'
-          }, renderContent(col, value, record, rowIndex, format)));
+          }, rowIndex + 1));
         }
       };
+    }
+    return {
+      ...column,
+      // editType: getEditType(column, record),
+      onCell: (record, rowIndex) => ({
+        onKeyDown: event => {
+          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
+            if (!isEditing(record) && record[rowKey] !== editingKey) {
+              handleEdit(record, column, column.editType, event);
+            }
+            if (editingKey && editingKey !== '' && (rowIndex ?? 0) + 1 < dataSource.length && event.key === 'Enter') {
+              handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', event);
+            }
+          }
+          if (event.key === 'Tab') {
+            if (colIndex + 1 !== columns.length) {
+              handleFocusCell(rowIndex, colIndex + 1, column, 'horizontal', event);
+            } else {
+              event.stopPropagation();
+              event.preventDefault();
+            }
+          }
+          if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
+            if (editingKey !== '') {} else {
+              handleFocusCell(rowIndex, colIndex + 1, column, 'horizontal', event);
+            }
+          }
+          if (event.key === 'ArrowLeft' && colIndex > 0) {
+            if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
+              event.stopPropagation();
+              event.preventDefault();
+            } else {
+              if (editingKey !== '') {} else {
+                handleFocusCell(rowIndex, colIndex - 1, column, 'horizontal', event);
+              }
+            }
+          }
+          if (event.key === 'ArrowDown' && (rowIndex ?? 0) + 1 < dataSource.length) {
+            handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', event);
+          }
+          if (event.key === 'ArrowUp' && (rowIndex ?? 0) > 0) {
+            handleFocusCell((rowIndex ?? 0) - 1, colIndex, column, 'vertical', event);
+          }
+        },
+        onPaste: event => {
+          if (editingKey === '') {
+            handlePaste(event, colIndex, rowIndex);
+            event.preventDefault();
+          }
+        },
+        onCopy: e => {
+          if (editingKey === '') {
+            handleCopy(e);
+            e.preventDefault();
+          }
+        },
+        onDoubleClick: event => {
+          if (!isEditing(record) && record[rowKey] !== editingKey) {
+            handleEdit(record, column, getEditType(column, record), event);
+          }
+        },
+        onClick: () => {
+          if (record[rowKey] !== editingKey && editingKey !== '') {
+            setEditingKey('');
+          }
+        },
+        className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
+        record,
+        column: column,
+        editType: getEditType(column, record),
+        dataIndex: column.dataIndex,
+        title: column.title,
+        'data-col-index': colIndex,
+        'data-row-index': rowIndex,
+        // colIndex: colIndex,
+        indexCol: colIndex,
+        indexRow: rowIndex,
+        editing: isEditing(record),
+        tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+      }),
+      render: (value, record, rowIndex) => {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classNames('ui-rc_cell-content', {
+            selected: selectedCells.has(`${rowIndex}-${colIndex}`)
+          }),
+          onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
+          onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
+        }, /*#__PURE__*/React.createElement("div", {
+          className: 'ui-rc_content'
+        }, renderContent(column, value, record, rowIndex, format)));
+      }
+    };
+  });
+  const transformColumns = React.useCallback(cols => {
+    // @ts-ignore
+    return cols.map(column => {
+      const find = convertColumns.find(it => it.key === column.key);
+      if (!column?.field && !column?.key) {
+        return column;
+      }
+      if (find) {
+        return {
+          ...find
+        };
+      }
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
+        return {
+          ...column,
+          children: transformColumns(column.children)
+        };
+      }
     });
-  };
-  const resizableColumns = addResizeHandlers(columns);
+  }, [convertColumns]);
+  const mergedColumns = React.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
@@ -774,7 +745,7 @@ const GridEdit = props => {
     },
     className: classNames(className, 'grid-editable'),
     rowKey: rowKey,
-    columns: resizableColumns,
+    columns: mergedColumns,
     showSorterTooltip: {
       target: 'sorter-icon'
     },

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

@@ -104,7 +104,7 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     children?: ColumnType<RecordType>[];
 };
 export type ColumnEditType<RecordType> = Omit<ColumnType<RecordType>, 'children'> & {
-    editType?: EditType | ((rowData?: any) => EditType);
+    editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     isClearable?: boolean;
     maxDate?: any;

package/lib/grid-component/InternalTable.js

@@ -89,8 +89,6 @@ const InternalTable = props => {
   //   },
   // );
 
-  // console.log('mergedColumns', mergedColumns)
-
   const tableRef = (0, _react.useRef)(null);
   const [data, setData] = (0, _react.useState)([]);
   const [columns, setColumns] = (0, _react.useState)([]);
@@ -154,13 +152,17 @@ const InternalTable = props => {
       setSelectedKeys,
       selectedKeys,
       confirm,
-      close,
+      // close,
       setOperatorKey,
       operatorKey,
       visible,
       searchValue,
       setSearchValue
     }) => {
+      const type = (0, _hooks.getTypeFilter)(column);
+      // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
+      // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
+      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           padding: 8,
@@ -170,7 +172,7 @@ const InternalTable = props => {
       }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
-        options: (0, _hooks.translateOption)(_hooks.numberOperator, t),
+        options: (0, _hooks.translateOption)(operatorOptions, t),
         style: {
           width: '100%',
           marginBottom: 8
@@ -201,13 +203,17 @@ const InternalTable = props => {
         style: {
           width: 90
         }
-      }, "Filter"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
         type: "link",
         size: "small",
         onClick: () => {
-          close();
+          // setSearchValue('')
+          setSelectedKeys([]);
+          confirm();
+          // handleSearch()
+          // close()
         }
-      }, "close")));
+      }, t ? t("Clear") : 'Clear')));
     },
     filterIcon: filtered => /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
       fontSize: 12,
@@ -226,117 +232,96 @@ const InternalTable = props => {
       }
     }
   }), [buddhistLocale, dataSourceFilter, onFilterCallback, onFilterClick, t]);
-  const handleResize = indexPath => (e, {
+  const handleResize = column => (e, {
     size
   }) => {
-    const updateColumns = (cols, path) => {
-      const [currentIndex, ...restPath] = path;
-      return cols.map((col, idx) => {
-        if (idx === currentIndex) {
-          if (restPath.length === 0) {
-            // Cập nhật width của cột cuối cùng trong path
-            // return { ...col, width: size.width }
-
-            // Kiểm tra minWidth trước khi cập nhật width
-            if (col.minWidth && size.width < col.minWidth) {
-              e.preventDefault();
-              return col; // Không cập nhật nếu nhỏ hơn minWidth
-            }
-
-            // Kiểm tra minWidth trước khi cập nhật width
-            if (col.maxWidth && size.width > col.maxWidth) {
-              e.preventDefault();
-              return col; // Không cập nhật nếu nhỏ hơn minWidth
-            }
-            return {
-              ...col,
-              width: size.width
-            };
-          } else if (col.children) {
-            // Tiếp tục cập nhật các cấp con
-            return {
-              ...col,
-              children: updateColumns(col.children, restPath)
-            };
-          }
-        }
-        // e.preventDefault()
-        return col;
-      });
+    const newColumn = {
+      ...column,
+      width: size.width
     };
-    setColumns(prevColumns => updateColumns(prevColumns, indexPath));
+    const newColumns = (0, _hooks.updateArrayByKey)(columns, newColumn, 'field');
+    setColumns(newColumns);
   };
-  const transformColumns = _react.default.useCallback((cols, parentPath = []) => {
-    return cols.map((col, index) => {
-      const currentPath = [...parentPath, index];
-      // @ts-ignore
-      if (!col?.dataIndex && !col.key && !col.field) {
-        return col;
-      }
-      const transformedColumn = {
-        ...col,
-        dataIndex: col.field ?? col.dataIndex,
-        key: col.field ?? col.dataIndex ?? col.key,
-        title: t ? t(col.headerText ?? col.title) : col.headerText ?? col.title,
-        ellipsis: col.ellipsis !== false,
-        align: col.textAlign ?? col.align,
-        fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+  const convertColumns = (0, _useColumns.flatColumns2)(columns).map((column, colIndex) => {
+    if (!column?.dataIndex && !column.key && !column.field) {
+      return column;
+    }
+    const transformedColumn = {
+      ...column,
+      dataIndex: column.field ?? column.dataIndex,
+      key: column.field ?? column.dataIndex ?? column.key,
+      title: t ? t(column.headerText ?? column.title) : column.headerText ?? column.title,
+      ellipsis: column.ellipsis !== false,
+      align: column.textAlign ?? column.align,
+      fixed: column.frozen ? column.frozen.toLowerCase() : column.fixed
+    };
+
+    // @ts-ignore
+    if (["index", "#"].includes(transformedColumn.dataIndex)) {
+      return {
+        ...transformedColumn,
+        onCell: () => ({
+          className: 'cell-number'
+        }),
+        render: (_, __, rowIndex) => rowIndex + 1
       };
-      if (col.children) {
-        return {
-          ...transformedColumn,
-          children: transformColumns(col.children, currentPath)
-        };
+    }
+    if (column.field === 'command') {
+      return {
+        ...transformedColumn,
+        onCell: () => ({
+          className: column.field === 'command' ? "ui-rc-cell-command" : ''
+        }),
+        onHeaderCell: () => ({
+          width: column.width,
+          onResize: handleResize(column)
+        })
+      };
+    }
+    return {
+      ...(column.allowFiltering === false ? {} : {
+        ...getColumnSearchProps(column)
+      }),
+      ...transformedColumn,
+      onFilter: value => {
+        return value;
+      },
+      sorter: column.sorter === false ? undefined : {
+        compare: a => a,
+        multiple: sortMultiple ? colIndex : undefined
+      },
+      onHeaderCell: () => ({
+        width: column.width,
+        onResize: handleResize(column)
+      }),
+      render: (value, record, rowIndex) => (0, _useColumns.renderContent)(column, value, record, rowIndex, format)
+    };
+  });
+  const transformColumns = _react.default.useCallback(cols => {
+    // @ts-ignore
+    return cols.map(column => {
+      const find = convertColumns.find(it => it.key === column.field);
+      if (!column?.field && !column?.key) {
+        return column;
       }
-
-      // @ts-ignore
-      if (["index", "#"].includes(transformedColumn.dataIndex)) {
+      if (find) {
         return {
-          ...transformedColumn,
-          onCell: () => ({
-            className: 'cell-number'
-          }),
-          render: (_, __, rowIndex) => rowIndex + 1
+          ...find
         };
       }
-      if (col.field === 'command') {
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
         return {
-          ...transformedColumn,
-          onCell: () => ({
-            className: col.field === 'command' ? "ui-rc-cell-command" : ''
-          }),
-          onHeaderCell: () => ({
-            width: col.width,
-            onResize: handleResize(currentPath)
-          })
+          ...column,
+          children: transformColumns(column.children)
         };
       }
-      return {
-        ...(col.allowFiltering === false ? {} : {
-          ...getColumnSearchProps(col)
-        }),
-        ...transformedColumn,
-        onFilter: value => {
-          return value;
-        },
-        sorter: col.sorter === false ? undefined : {
-          compare: a => a,
-          multiple: sortMultiple ? index : undefined
-        },
-        onHeaderCell: () => ({
-          width: col.width,
-          onResize: handleResize(currentPath)
-        }),
-        render: (value, record, rowIndex) => (0, _useColumns.renderContent)(col, value, record, rowIndex, format)
-      };
     });
-  }, [getColumnSearchProps]);
+  }, [convertColumns]);
   const mergedColumns = _react.default.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
-
-  // console.log('mergedColumns', mergedColumns)
-
   const triggerChangeColumns = newColumns => {
     setColumns(newColumns);
   };

package/lib/grid-component/TableGrid.js

@@ -97,6 +97,7 @@ const TableGrid = props => {
     dataSource,
     locale,
     expandable,
+    rowHoverable,
     // mergedData,
     title,
     format,
@@ -335,7 +336,7 @@ const TableGrid = props => {
     virtual: virtual,
     columns: columns,
     rowKey: rowKey,
-    rowHoverable: true,
+    rowHoverable: rowHoverable,
     size: "small",
     scroll: scroll ? scroll : {
       y: 500
@@ -357,7 +358,9 @@ const TableGrid = props => {
       selectedRowKeys: mergedSelectedKeys,
       defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
-      ...rowSelection,
+      // ...rowSelection,
+      // checkStrictly: false,
+
       hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     },
     onScroll: () => {
@@ -452,7 +455,7 @@ const TableGrid = props => {
         } = args;
 
         // @ts-ignore
-        if (record?.children && record?.children?.length > 0 || record?.isChildren) {
+        if (record?.children?.length > 0 || record?.isChildren) {
           return expanded ? /*#__PURE__*/_react.default.createElement("button", {
             onClick: e => {
               e.preventDefault();