es-grid-template 1.2.9 → 1.3.1

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

@@ -34,6 +34,7 @@ _dayjs.default.extend(_customParseFormat.default);
 const toast = 'top-right';
 const GridEdit = props => {
   const {
+    id,
     tableRef,
     t,
     columns,
@@ -68,6 +69,7 @@ const GridEdit = props => {
     // selectedRowKeys,
     // defaultSelectedRowKeys
   } = selectionSettings || {};
+  const ref = (0, _react.useRef)(null);
   const isSelecting = (0, _react.useRef)(false);
   const startCell = (0, _react.useRef)(null);
   const childrenColumnName = 'children';
@@ -502,35 +504,53 @@ const GridEdit = props => {
   (0, _react.useEffect)(() => {
     const handleClickOutside = event => {
       const element = event.target;
-      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
+
+      // const tableId = id ? document.getElementById(id) : undefined
+      // const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const container = document.querySelector(".be-popup-container");
+      const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody`);
       // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
 
       // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
-      const itemContainer = document.querySelector(".ui-rc-toolbar-selection-overflow-item");
+      const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
       const isInsideContainer = element.closest(".be-popup-container") && container;
-      const isInsideToolbar = element.closest(".ui-rc-toolbar-selection-overflow-item") && itemContainer;
+      const isInsideToolbar = element.closest(`#${id} .ui-rc-toolbar-selection-overflow-item`) && itemContainer;
       if (isInsideContainer || isInsideToolbar) {
+        // console.log('ooooooooooooo')
         return;
       }
-      if (tableBodies.length > 0) {
-        const tableBody = tableBodies[0]; // Chọn tbody đầu tiên (nếu có nhiều)
-
-        if (!tableBody.contains(event.target)) {
-          setEditingKey('');
-          isSelecting.current = false;
-          startCell.current = null;
-          setSelectedCells(new Set());
-          setRowsSelected(new Set());
-        } else {}
+
+      // if (ref.current && !ref.current.contains(event.target)) {
+      // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
+      if (ref.current && tableBody && !tableBody.contains(event.target)) {
+        setEditingKey('');
+        isSelecting.current = false;
+        startCell.current = null;
+        setSelectedCells(new Set());
+        setRowsSelected(new Set());
       }
+
+      // if (tableBodies.length > 0) {
+      //   const tableBody = tableBodies[0]; // Chọn tbody đầu tiên (nếu có nhiều)
+      //
+      //   if (!tableBody.contains(event.target as Node)) {
+      //     setEditingKey('')
+      //     isSelecting.current = false;
+      //     startCell.current = null;
+      //     setSelectedCells(new Set())
+      //     setRowsSelected(new Set())
+      //   } else {
+      //
+      //   }
+      // }
     };
     document.addEventListener("click", handleClickOutside);
     return () => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  const handleMouseDown = (record, row, col, e) => {
+  const handleMouseDown = (0, _react.useCallback)((record, row, col, e) => {
+    setEditingKey('');
     if (e.button === 2) {
       e.stopPropagation();
       return;
@@ -567,7 +587,7 @@ const GridEdit = props => {
     //   setSelectedCells(new Set([`${row}-${col}`]));
     //   setRowsSelected(new Set())
     // }
-  };
+  }, []);
 
   // const handlePointEnter = (e: any) => {
   //
@@ -861,7 +881,7 @@ const GridEdit = props => {
     const selectedArray = Array.from(selectedCells).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
-      const columnKey = columns[col].field;
+      const columnKey = (0, _hooks.editAbleColumns)(columns)[col - 1].field;
 
       // @ts-ignore
       return {
@@ -940,16 +960,17 @@ const GridEdit = props => {
             // Không vượt quá số cột
             return;
           }
-
-          // @ts-ignore
-          const columnKey = columns[targetCol].field;
-
-          // @ts-ignore
-          newData[targetRow] = {
-            ...newData[targetRow],
-            [columnKey]: cellValue.trim()
-          };
-          pastedColumns.add(columnKey);
+          if (columns[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = columns[targetCol].field;
+
+            // @ts-ignore
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
+          }
         });
 
         // Lưu dòng được paste
@@ -988,16 +1009,17 @@ const GridEdit = props => {
             // Không vượt quá số cột
             return;
           }
-
-          // @ts-ignore
-          const columnKey = columns[targetCol].field;
-
-          // @ts-ignore
-          childData[targetRow] = {
-            ...childData[targetRow],
-            [columnKey]: cellValue.trim()
-          };
-          pastedColumns.add(columnKey);
+          if (columns[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = columns[targetCol].field;
+
+            // @ts-ignore
+            childData[targetRow] = {
+              ...childData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
+          }
         });
 
         // Lưu dòng được paste
@@ -1296,7 +1318,7 @@ const GridEdit = props => {
             tabIndex: (rowIndex ?? 0) * columns.length + colIndex
           };
         },
-        render: (value, record, rowIndex) => {
+        render: (value, record) => {
           const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/_react.default.createElement("div", {
             className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {
@@ -1305,10 +1327,11 @@ const GridEdit = props => {
             }),
             onMouseDown: event => handleMouseDownColIndex(rowNumber, colIndex, event),
             onMouseEnter: event => handleMouseEnterColIndex(rowNumber, colIndex, event),
-            onClick: () => handleClickRowHeader(rowNumber, colIndex)
+            onClick: () => handleClickRowHeader(rowNumber, colIndex),
+            onMouseUp: handleMouseUp
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: 'ui-rc_content'
-          }, rowIndex + 1));
+          }, (0, _hooks.findItemPath)(dataSource, record, rowKey)));
         }
       };
     }
@@ -1322,6 +1345,10 @@ const GridEdit = props => {
       onCell: (record, rowIndex) => {
         const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
         return {
+          // onKeyPress: () => {
+          //
+          // },
+
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
@@ -1435,14 +1462,15 @@ const GridEdit = props => {
         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}`)
+            selected: selectedCells.has(`${rowNumber}-${colIndex}`),
+            disable: !(0, _hooks.isEditable)(column, record)
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: () => handleMouseEnter(rowNumber, colIndex),
           onMouseUp: handleMouseUp
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && (0, _hooks.getLastSelectCell)(selectedCells).row === rowNumber && (0, _hooks.getLastSelectCell)(selectedCells).col === colIndex && (0, _hooks.isEditable)(column, record) !== false && !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 && (0, _hooks.isEditable)(column, record) && !isSelectDragging &&
         /*#__PURE__*/
         // showDraggingPoint &&
         _react.default.createElement("div", {
@@ -1508,7 +1536,8 @@ const GridEdit = props => {
     style: {
       position: 'relative'
     },
-    onMouseUp: handleMouseUp
+    ref: ref
+    // onMouseUp={handleMouseUp}
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
       rowKey,
@@ -1529,7 +1558,7 @@ const GridEdit = props => {
           rowHoverBg: '#eb461912',
           rowSelectedBg: '#eb4619',
           rowSelectedHoverBg: '#eb4619',
-          cellFontSize: 12,
+          // cellFontSize: 12,
           cellFontSizeSM: 13,
           headerBg: '#ffffff',
           cellPaddingBlockSM: 7
@@ -1542,11 +1571,13 @@ const GridEdit = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
     t: t,
+    id: id,
     tableRef: tableRef,
     dataSource: dataSource,
     components: {
       ...components,
       body: {
+        // wrapper: () => <div></div>,
         cell: _EditableCell.default
         // cell: () =>  <EditableCell  />,
       }
@@ -1559,11 +1590,15 @@ const GridEdit = props => {
       target: 'sorter-icon'
     },
     format: format,
-    toolbarItems: toolbarItems,
+    toolbarItems: toolbarItems
+    // selectionSettings={selectionSettings ? {...selectionSettings, checkboxOnly: true} : undefined}
+    ,
     selectionSettings: selectionSettings ? {
       ...selectionSettings,
       checkboxOnly: true
-    } : undefined,
+    } : {
+      checkboxOnly: true
+    },
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
     expandable: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "description": "es-grid-template",
   "keywords": [
     "react",