es-grid-template 1.2.3 → 1.2.4

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,9 +65,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
   }
 
   .#{$prefix}-table {
-    line-height: 20px;
+
+    //line-height: 20px;
+
     .#{$prefix}-table-cell {
-      min-height: 35px;
+      //min-height: 35px;
+      //height: 35px;
 
       .#{$prefix}-table-filter-column {
         .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
@@ -324,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 {
@@ -528,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;
       }
     }
 
@@ -620,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');
       }
@@ -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/package.json

@@ -1,106 +1,106 @@
-{
-  "name": "es-grid-template",
-  "version": "1.2.3",
-  "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"
+  }
+}