es-grid-template 1.1.7 → 1.2.0

package/lib/grid-component/table/Grid.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { ColumnsTable, GridTableProps } from "../type";
+import type { GetRowKey } from "../type";
 type Props<T> = GridTableProps<T> & {
     tableRef: any;
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
+    getRowKey: GetRowKey<T>;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

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

@@ -13,12 +13,11 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import type {ColumnsTable} from "../type";
 
-// import {renderContent} from "../hooks/useColumns";
-
 const Grid = props => {
   const {
     height,
     style,
+    rowHoverable,
     ...rest
   } = props;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
@@ -30,7 +29,8 @@ const Grid = props => {
     style: {
       ...style,
       minHeight: height
-    }
+    },
+    rowHoverable: rowHoverable ?? true
   }))));
 };
 var _default = exports.default = Grid;

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

@@ -22,9 +22,11 @@ require("dayjs/locale/vi");
 var _TableGrid = _interopRequireDefault(require("../TableGrid"));
 var _hooks = require("../hooks");
 var _Message = _interopRequireDefault(require("../../Message/Message"));
-var _Command = _interopRequireDefault(require("../Command"));
+var _rcMasterUi = require("rc-master-ui");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import Command from "../Command";
+
 _dayjs.default.extend(_customParseFormat.default);
 const toast = 'top-right';
 const GridEdit = props => {
@@ -46,6 +48,7 @@ const GridEdit = props => {
     style,
     getRowKey,
     className,
+    toolbarItems,
     ...rest
   } = props;
 
@@ -56,11 +59,78 @@ const GridEdit = props => {
   const startCell = (0, _react.useRef)(null);
   const isSelectingRow = (0, _react.useRef)(false);
   const rowStart = (0, _react.useRef)(null);
+  const itemsAdd = [{
+    key: '10',
+    label: '10 rows'
+  }, {
+    key: '50',
+    label: '50 rows'
+  }, {
+    key: '100',
+    label: '100 rows'
+  }];
   const [form] = _antd.Form.useForm();
   const [editingKey, setEditingKey] = (0, _react.useState)('');
   const [selectedCells, setSelectedCells] = (0, _react.useState)(new Set());
   const [rowsSelected, setRowsSelected] = (0, _react.useState)(new Set());
   const [selectedCell, setSelectedCell] = (0, _react.useState)(null);
+  const handleAdd = item => {
+    console.log(item);
+    if (item.onClick) {
+      console.log('cccccccccccccccc');
+    } else {
+      console.log('bbbbbbbbbbbbb');
+    }
+  };
+  const handleDuplicate = () => {};
+  const handleInsertBefore = () => {};
+  const handleInsertAfter = () => {};
+  const handleDeleteAll = () => {};
+  const toolbarItemsBottom = (0, _react.useMemo)(() => {
+    return toolbarItems?.filter(it => it.position === 'Bottom').map(item => {
+      return {
+        ...item,
+        template: () => {
+          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            menu: {
+              items: itemsAdd,
+              onClick: () => handleAdd(item)
+            }
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item')), item.key === 'DUPLICATE' && item.visible !== false && editingKey && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleDuplicate,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')), item.key === 'INSERT_BEFORE' && item.visible !== false && editingKey && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleInsertBefore,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')), item.key === 'INSERT_AFTER' && item.visible !== false && editingKey && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleInsertAfter,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')), item.key === 'DELETE' && item.visible !== false && /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            color: "primary",
+            variant: 'outlined',
+            onClick: handleDeleteAll,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item')));
+        }
+      };
+    });
+  }, [toolbarItems]);
   const {
     control,
     handleSubmit,
@@ -92,9 +162,10 @@ const GridEdit = props => {
 
         if (!tableBody.contains(event.target)) {
           setEditingKey('');
-          // isSelecting.current = false;
-          // startCell.current = null;
+          isSelecting.current = false;
+          startCell.current = null;
           setSelectedCells(new Set());
+          setRowsSelected(new Set());
         } else {}
       }
     };
@@ -583,175 +654,166 @@ 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.default.createElement("div", {
-              className: (0, _classnames.default)('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.default.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.default.createElement("div", {
-              className: (0, _classnames.default)('ui-rc-cell-command__content', {})
-            }, col.commandItems && col.commandItems?.map((item, indexComm) => {
-              if (item.visible !== false) {
-                // return  (
-                //   <span>{item.title}</span>
-                // )
-
-                return /*#__PURE__*/_react.default.createElement(_Command.default, {
-                  key: `command-${indexComm}`,
-                  item: item,
-                  onClick: e => {
-                    e.preventDefault();
-                    // handleCommandClick({command: item, rowData: record, index: rowIndex})
-                  }
-                });
-              }
-            }));
-          }
-        };
-      }
+  const convertColumns = (0, _useColumns.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: (0, _hooks.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) => {
+          const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/_react.default.createElement("div", {
-            className: (0, _classnames.default)('ui-rc_cell-content', {
-              selected: selectedCells.has(`${rowIndex}-${colIndex}`)
+            className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {
+              selected: rowsSelected.has(`${rowNumber}-${colIndex}`),
+              focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowNumber}-`))
             }),
-            onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
-            onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
+            onMouseDown: event => handleMouseDownColIndex(rowNumber, colIndex, event),
+            onMouseEnter: event => handleMouseEnterColIndex(rowNumber, colIndex, event),
+            onClick: () => handleClickRowHeader(rowNumber, colIndex)
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: 'ui-rc_content'
-          }, (0, _useColumns.renderContent)(col, value, record, rowIndex, format)));
+          }, rowIndex + 1));
         }
       };
+    }
+    if ((column.key || column.field) === 'command') {
+      return {
+        ...column
+      };
+    }
+    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, (0, _hooks.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: (0, _hooks.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) => {
+        const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)('ui-rc_cell-content', {
+            // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
+            selected: selectedCells.has(`${rowNumber}-${colIndex}`)
+          }),
+          onMouseDown: event => handleMouseDown(rowNumber, colIndex, event)
+          // onMouseEnter={() => handleMouseEnter(record[rowKey], colIndex)}
+          ,
+          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex)
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'ui-rc_content'
+        }, (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.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)
+        };
+      }
     });
+  }, [convertColumns]);
+  const mergedColumns = _react.default.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
+  const bottomToolbar = () => {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+      style: {
+        width: '100%'
+      },
+      items: toolbarItemsBottom ?? [],
+      mode: 'scroll'
+      // onClick={({  item }) => {
+      //   console.log('item', item)
+      // }}
+    }));
   };
-  const resizableColumns = addResizeHandlers(columns);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     heightTable: height,
     style: {
@@ -783,11 +845,12 @@ const GridEdit = props => {
     },
     className: (0, _classnames.default)(className, 'grid-editable'),
     rowKey: rowKey,
-    columns: resizableColumns,
+    columns: mergedColumns,
     showSorterTooltip: {
       target: 'sorter-icon'
     },
     format: format,
+    toolbarItems: toolbarItems,
     selectionSettings: selectionSettings ? {
       ...selectionSettings,
       checkboxOnly: true
@@ -796,7 +859,8 @@ const GridEdit = props => {
       ...style,
       minHeight: height
     },
-    rowHoverable: false
+    rowHoverable: false,
+    bottomToolbar: bottomToolbar
   }))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
     position: toast,
     toastOptions: {

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

@@ -3,12 +3,16 @@ import type React from "react";
 import type { IOperator } from "./hooks";
 import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
 import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/interface";
-import type { ToolbarItem } from "rc-master-ui/es/toolbar";
+import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
+export type ToolbarItem = Omit<RcToolbarItem, 'position'> & {
+    position?: 'Top' | 'Bottom';
+    onClick?: (args: any) => void;
+};
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
@@ -104,7 +108,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;