es-grid-template 1.2.2 → 1.2.4

package/lib/grid-component/hooks/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addRowIdArray = void 0;
 exports.addRows8 = addRows8;
-exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = void 0;
+exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = void 0;
 exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemByKey = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
@@ -17,6 +17,7 @@ var _uuid = require("uuid");
 var _colors = require("@ant-design/colors");
 var _rcMasterUi = require("rc-master-ui");
 var _columns = require("./columns");
+var _useColumns = require("./useColumns");
 const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
@@ -163,9 +164,14 @@ const updateColumns = (columns, includes) => {
       newColumn.children = updateColumns(newColumn.children, includes);
       hasVisibleChild = newColumn.children.some(child => !child.hidden);
     }
-    newColumn.hidden = newColumn.key && !includes.includes(newColumn.key);
+
+    // newColumn.hidden = newColumn.key && !includes.includes(newColumn.key)
+    newColumn.hidden = newColumn.field && !includes.includes(newColumn.field);
+    // newColumn.fixed = newColumn.field && !includes.includes(newColumn.field) ? undefined : newColumn.fixed
+
     if (newColumn.children && newColumn.children.length > 0) {
       newColumn.hidden = !hasVisibleChild;
+      // newColumn.fixed = !hasVisibleChild ? undefined : newColumn.fixed
     }
     return newColumn;
   });
@@ -526,18 +532,6 @@ const getFirstSelectCell = selectCells => {
     col
   };
 };
-
-// export const getLastSelectCell = (selectCells: any): {row: number, col: number} => {
-//
-//   if (selectCells.size === 0) {
-//     return {row: 0, col: 0}
-//   }
-//   const lastValue = [...selectCells].pop();
-//
-//   const [row, col] = lastValue.split("-").map(Number);
-//   return {row, col};
-//
-// }
 exports.getFirstSelectCell = getFirstSelectCell;
 const getRowsPasteIndex = pasteRows => {
   if (!pasteRows) {
@@ -557,8 +551,25 @@ function addRows8(arr, n) {
   const addedRows = [];
 
   // Hàm kiểm tra kiểu date hợp lệ
-  const isValidDate = d => {
-    return !isNaN(Date.parse(d));
+  const isValidDate = item => {
+    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
+    // return !isNaN(Date.parse(d))
+
+    if (typeof item === 'number') {
+      // return 'number'
+      return false;
+    }
+    if (typeof item === 'string') {
+      // Kiểm tra nếu là chuỗi ISO date hợp lệ
+      const date = new Date(item);
+      if (!isNaN(date.getTime()) && item.includes('T')) {
+        // return 'date'
+        return true;
+      }
+      // return 'string'
+      return false;
+    }
+    return !isNaN(Date.parse(item));
   };
 
   // Lấy giá trị mẫu của cột j từ hàng đầu tiên
@@ -768,4 +779,57 @@ const convertFlatColumn = array => {
   });
   return result;
 };
-exports.convertFlatColumn = convertFlatColumn;
+exports.convertFlatColumn = convertFlatColumn;
+const convertColumns = cols => {
+  return cols.map(col => {
+    if (col === _useColumns.SELECTION_COLUMN) {
+      return _useColumns.SELECTION_COLUMN;
+    }
+    const transformedColumn = {
+      ...col,
+      dataIndex: col.field ?? col.dataIndex,
+      key: col.field ?? col.dataIndex ?? col.key,
+      // title: t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title,
+      // title: () => (<span>aaa</span>),
+      // title: () => (<HeaderContent column={{...col} as any} t={t}/>),
+      // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
+      ellipsis: col.ellipsis !== false,
+      align: col.textAlign ?? col.align,
+      fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+    };
+    if (transformedColumn.children && transformedColumn.children?.length) {
+      return {
+        ...transformedColumn,
+        children: convertColumns(transformedColumn.children)
+      };
+    }
+    if (["index", "#"].includes(col.field)) {
+      return {
+        ...transformedColumn,
+        onCell: () => ({
+          className: 'cell-number'
+        }),
+        render: (_, __, rowIndex) => rowIndex + 1
+      };
+    }
+    if (col.key === 'command') {
+      return {
+        ...transformedColumn,
+        onCell: () => ({
+          className: 'cell-number',
+          style: {
+            padding: '2px 8px'
+          }
+        })
+      };
+    }
+    return {
+      ...transformedColumn
+    };
+  });
+};
+exports.convertColumns = convertColumns;
+const checkChild = inputArray => {
+  return inputArray.some(item => item.children && item.children.length > 0);
+};
+exports.checkChild = checkChild;

package/lib/grid-component/styles.scss

@@ -42,6 +42,14 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     //font-weight: 500;
   }
 
+  .ui-rc-table {
+    .#{$prefix}-table-cell {
+      &.#{$prefix}-table-selection-column {
+        //padding: 6px 8px !important;
+        //padding: 6px 8px !important;
+      }
+    }
+  }
 
 
   &.table-none-column-select {
@@ -57,8 +65,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
   }
 
   .#{$prefix}-table {
-    line-height: 20px;
+
+    //line-height: 20px;
+
     .#{$prefix}-table-cell {
+      //min-height: 35px;
+      //height: 35px;
 
       .#{$prefix}-table-filter-column {
         .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
@@ -323,6 +335,13 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
 .#{$prefix}-table-wrapper {
 
+  .#{$prefix}-table.#{$prefix}-table-small {
+    .#{$prefix}-table-selection-column{
+      //padding: 8px 8px;
+      //padding: 6px 8px;
+    }
+  }
+
   &.grid-editable {
 
     .#{$prefix}-table-row {
@@ -527,7 +546,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     .#{$prefix}-table.#{$prefix}-table-small {
       .#{$prefix}-table-selection-column{
         //padding: 8px 8px;
-        padding: 6px 8px;
+        //padding: 6px 8px;
       }
     }
 
@@ -619,7 +638,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
               .#{$prefix}-table-row-expand-icon {
                 position: absolute;
                 //.ui-rc_content {
-                padding-left: $i * 10px;
+                //padding-left: $i * 10px;
                 //}
               }
 

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

@@ -36,7 +36,8 @@ const Grid = props => {
           rowSelectedHoverBg: '#eb4619',
           cellFontSize: 12,
           cellFontSizeSM: 13,
-          headerBg: '#ffffff'
+          headerBg: '#ffffff',
+          cellPaddingBlockSM: 7
         }
       }
     }

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

@@ -92,8 +92,6 @@ const GridEdit = props => {
   const [isSelectDragging, setSelectIsDragging] = (0, _react.useState)(false);
   const [isPasteDragging, setIsPasteDragging] = (0, _react.useState)(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
 
-  // const [showDraggingPoint, setShowDraggingPoint] = useState(false);
-
   const [rowsSelected, setRowsSelected] = (0, _react.useState)(new Set());
   const [startSelectedCells, setStartSelectedCell] = (0, _react.useState)(null);
   const [innerExpandedKeys, setInnerExpandedKeys] = _react.default.useState(() => {
@@ -266,10 +264,54 @@ const GridEdit = props => {
       }
     }
   };
-  const handleDeleteAll = () => {};
+  const handleInsertChild = item => {
+    const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
+    const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const newData = [...dataSource];
+      let newElement = {};
+      if (!record.children || record.children.length === 0) {
+        newElement = {
+          ...record,
+          children: [{
+            ...defaultRowValue,
+            parentId: record.rowId,
+            rowId
+          }]
+        };
+      } else {
+        newElement = {
+          ...record,
+          children: [...record.children, {
+            ...defaultRowValue,
+            parentId: record.rowId,
+            rowId
+          }]
+        };
+      }
+      const newDataSource = (0, _hooks.updateArrayByKey)(newData, newElement, rowKey);
+      triggerChangeData?.(newDataSource, 'INSERT_CHILDREN');
+    }
+    const key = getRowKey(record, dataSource.indexOf(record));
+
+    // let newExpandedKeys: Key[];
+    const hasKey = mergedExpandedKeys.has(key);
+    if (!hasKey) {
+      const newExpandedKeys = [...mergedExpandedKeys, key];
+      setInnerExpandedKeys(newExpandedKeys);
+    }
+  };
+  const handleDeleteAll = () => {
+    triggerChangeData?.([], 'INSERT_BEFORE');
+  };
   const toolbarItemsBottom = (0, _react.useMemo)(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
-      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER').map(item => {
+      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'INSERT_CHILDREN').map(item => {
         if (item.key === 'ADD') {
           return {
             ...item,
@@ -398,6 +440,24 @@ const GridEdit = props => {
           }
         };
       }
+      if (item.key === 'INSERT_CHILDREN') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertChild(item),
+              className: "d-flex toolbar-button"
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')));
+          }
+        };
+      }
       if (item.key === 'DELETE') {
         return {
           ...item,
@@ -958,8 +1018,8 @@ const GridEdit = props => {
       const newData = [...dataSource];
 
       // @ts-ignore
-      const index = newData.findIndex(item => formData[rowKey] === item[rowKey]);
-      const rs = (0, _hooks.updateArrayByKey)(dataSource, row, rowKey);
+      const index = (0, _hooks.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = (0, _hooks.updateArrayByKey)(newData, row, rowKey);
       if (index > -1) {
         triggerChangeData?.(rs, 'onChange');
       }
@@ -1331,7 +1391,7 @@ const GridEdit = props => {
           onMouseUp: handleMouseUp
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, format)), (0, _hooks.getLastSelectCell)(selectedCells).row === rowNumber && (0, _hooks.getLastSelectCell)(selectedCells).col === colIndex && !isSelectDragging &&
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && (0, _hooks.getLastSelectCell)(selectedCells).row === rowNumber && (0, _hooks.getLastSelectCell)(selectedCells).col === colIndex && !isSelectDragging &&
         /*#__PURE__*/
         // showDraggingPoint &&
         _react.default.createElement("div", {
@@ -1420,7 +1480,8 @@ const GridEdit = props => {
           rowSelectedHoverBg: '#eb4619',
           cellFontSize: 12,
           cellFontSizeSM: 13,
-          headerBg: '#ffffff'
+          headerBg: '#ffffff',
+          cellPaddingBlockSM: 7
           // cellPaddingBlock: 0,
           // cellPaddingBlockSM: 0,
           // cellPaddingInlineSM: 0,
@@ -1454,6 +1515,7 @@ const GridEdit = props => {
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
     expandable: {
+      expandIconColumnIndex: (0, _hooks.checkChild)(dataSource) ? 3 : undefined,
       ...expandable,
       expandedRowKeys: innerExpandedKeys,
       expandIcon: args => {
@@ -1488,6 +1550,7 @@ const GridEdit = props => {
         }
       }
     },
+    triggerChangeColumns: triggerChangeColumns,
     rowSelection: columns && columns.length === 0 ? undefined : {
       type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,

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

@@ -178,6 +178,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     onDataChange?: (data: RecordType[]) => void;
     defaultValue?: AnyObject | (() => AnyObject);
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
+    showEmptyText?: boolean;
 }
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;

package/package.json

@@ -1,106 +1,106 @@
-{
-  "name": "es-grid-template",
-  "version": "1.2.2",
-  "description": "es-grid-template",
-  "keywords": [
-    "react",
-    "react-component",
-    "grid",
-    "table"
-  ],
-  "license": "MIT",
-  "main": "lib/index",
-  "module": "es/index",
-  "files": [
-    "lib",
-    "es",
-    "assets/*.css",
-    "assets/*.scss"
-  ],
-  "scripts": {
-    "__compile": "father build && ",
-    "compile": "father build && sass assets/index.scss assets/index.css",
-    "docs:build": "dumi build",
-    "__docs:deploy": "gh-pages -d dist",
-    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
-    "now-build": "npm run docs:build",
-    "prepare": "dumi setup",
-    "prepublishOnly": "npm run compile",
-    "postpublish": "npm run docs:build",
-    "__postpublish": "npm run docs:build && npm run docs:deploy",
-    "start": "dumi dev",
-    "test": "vitest --watch false",
-    "coverage": "vitest run --coverage"
-  },
-  "dependencies": {
-    "@ant-design/colors": "^8.0.0",
-    "@ant-design/cssinjs": "^1.22.0",
-    "@ant-design/cssinjs-utils": "^1.1.1",
-    "@ant-design/icons": "^5.5.2",
-    "@babel/runtime": "^7.11.2",
-    "@core-rc/rc-select": "^0.0.8",
-    "@ctrl/tinycolor": "^3.6.1",
-    "@faker-js/faker": "^9.5.0",
-    "@floating-ui/react": "^0.27.5",
-    "@rc-component/color-picker": "^2.0.1",
-    "@rc-component/father-plugin": "^2.0.1",
-    "@rc-component/trigger": "^2.0.0",
-    "@rc-component/util": "^1.0.1",
-    "@types/react-resizable": "^3.0.8",
-    "@types/styled-components": "^5.1.34",
-    "@vitest/coverage-v8": "^2.0.5",
-    "antd": "^5.24.1",
-    "antd-style": "^3.7.1",
-    "becoxy-icons": "^2.0.1",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.11.13",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "postcss": "^8.4.35",
-    "rc-checkbox": "^3.5.0",
-    "rc-dropdown": "^4.2.1",
-    "rc-field-form": "^2.6.0",
-    "rc-master-ui": "^1.1.21",
-    "rc-select": "^14.16.3",
-    "rc-tooltip": "^6.3.0",
-    "rc-tree": "^5.10.1",
-    "rc-tree-select": "^5.24.5",
-    "react-hook-form": "^7.54.2",
-    "react-hot-toast": "^2.5.2",
-    "react-numeric-component": "^1.0.7",
-    "react-resizable": "^3.0.5",
-    "sass": "^1.81.0",
-    "styled-components": "^6.1.15",
-    "throttle-debounce": "^5.0.2",
-    "vitest": "^2.0.5"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/preset-env": "^7.26.9",
-    "@rc-component/np": "^1.0.3",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/warning": "^3.0.0",
-    "cross-env": "^7.0.0",
-    "dumi": "^2.2.13",
-    "eslint": "^8.56.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "father": "^4.0.0",
-    "gh-pages": "^3.1.0",
-    "less": "^4.1.1",
-    "np": "^7.1.0",
-    "rc-test": "^7.0.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^4.0.5"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  },
-  "umi": {
-    "configFile": "config.ts"
-  }
-}
+{
+  "name": "es-grid-template",
+  "version": "1.2.4",
+  "description": "es-grid-template",
+  "keywords": [
+    "react",
+    "react-component",
+    "grid",
+    "table"
+  ],
+  "license": "MIT",
+  "main": "lib/index",
+  "module": "es/index",
+  "files": [
+    "lib",
+    "es",
+    "assets/*.css",
+    "assets/*.scss"
+  ],
+  "scripts": {
+    "__compile": "father build && ",
+    "compile": "father build && sass assets/index.scss assets/index.css",
+    "docs:build": "dumi build",
+    "__docs:deploy": "gh-pages -d dist",
+    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
+    "now-build": "npm run docs:build",
+    "prepare": "dumi setup",
+    "prepublishOnly": "npm run compile",
+    "postpublish": "npm run docs:build",
+    "__postpublish": "npm run docs:build && npm run docs:deploy",
+    "start": "dumi dev",
+    "test": "vitest --watch false",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@ant-design/colors": "^8.0.0",
+    "@ant-design/cssinjs": "^1.22.0",
+    "@ant-design/cssinjs-utils": "^1.1.1",
+    "@ant-design/icons": "^5.5.2",
+    "@babel/runtime": "^7.11.2",
+    "@core-rc/rc-select": "^0.0.8",
+    "@ctrl/tinycolor": "^3.6.1",
+    "@faker-js/faker": "^9.5.0",
+    "@floating-ui/react": "^0.27.5",
+    "@rc-component/color-picker": "^2.0.1",
+    "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/trigger": "^2.0.0",
+    "@rc-component/util": "^1.0.1",
+    "@types/react-resizable": "^3.0.8",
+    "@types/styled-components": "^5.1.34",
+    "@vitest/coverage-v8": "^2.0.5",
+    "antd": "^5.24.1",
+    "antd-style": "^3.7.1",
+    "becoxy-icons": "^2.0.1",
+    "classnames": "^2.3.1",
+    "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "postcss": "^8.4.35",
+    "rc-checkbox": "^3.5.0",
+    "rc-dropdown": "^4.2.1",
+    "rc-field-form": "^2.6.0",
+    "rc-master-ui": "^1.1.21",
+    "rc-select": "^14.16.3",
+    "rc-tooltip": "^6.3.0",
+    "rc-tree": "^5.10.1",
+    "rc-tree-select": "^5.24.5",
+    "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.5.2",
+    "react-numeric-component": "^1.0.7",
+    "react-resizable": "^3.0.5",
+    "sass": "^1.81.0",
+    "styled-components": "^6.1.15",
+    "throttle-debounce": "^5.0.2",
+    "vitest": "^2.0.5"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/preset-env": "^7.26.9",
+    "@rc-component/np": "^1.0.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/warning": "^3.0.0",
+    "cross-env": "^7.0.0",
+    "dumi": "^2.2.13",
+    "eslint": "^8.56.0",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "father": "^4.0.0",
+    "gh-pages": "^3.1.0",
+    "less": "^4.1.1",
+    "np": "^7.1.0",
+    "rc-test": "^7.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "umi": {
+    "configFile": "config.ts"
+  }
+}