es-grid-template 1.5.0 → 1.5.2

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

@@ -211,6 +211,7 @@ const GridEdit = props => {
     showDefaultContext,
     validate,
     setTooltipContent,
+    onBlur,
     ...rest
   } = props;
   const ref = (0, _react.useRef)(null);
@@ -227,6 +228,8 @@ const GridEdit = props => {
   // quét vùng chọn
   const isDragMouse = (0, _react.useRef)(false);
   const isMouseDown = (0, _react.useRef)(false);
+  const editingKey = (0, _react.useRef)('');
+  const cellEditing = (0, _react.useRef)({});
 
   // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
   // const isPasteDragging = useRef(false);
@@ -372,7 +375,9 @@ const GridEdit = props => {
   // }, [])
 
   const [form] = _antd.Form.useForm();
-  const [editingKey, setEditingKey] = (0, _react.useState)('');
+
+  // const [editingKey, setEditingKey] = useState<string | number>('')
+
   const [dataErrors, setDataErrors] = (0, _react.useState)([]);
   const [isFilter, setIsFilter] = _react.default.useState(false);
   const [rangeCells, setRangeCells] = (0, _react.useState)(new Set());
@@ -381,7 +386,9 @@ const GridEdit = props => {
     type: ''
   });
   const [rowsAdd, setRowsAdd] = (0, _react.useState)(1);
-  const [cellEditing, setCellEditing] = (0, _react.useState)(null);
+
+  // const [cellEditing, setCellEditing] = useState<any>(null)
+
   const [isPasteDragging, setIsPasteDragging] = (0, _react.useState)(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
 
   const [innerExpandedKeys, setInnerExpandedKeys] = _react.default.useState(() => {
@@ -494,10 +501,11 @@ const GridEdit = props => {
     // onRemoveBorderSelectedCell(selectedCells.current, id)
     //
 
-    setTimeout(() => {
-      // onAddBgSelectedCell(selectedCells.current, id)
-      // onAddBorderSelectedCell(selectedCells.current, id)
-    }, 10);
+    // setTimeout(() => {
+    // onAddBgSelectedCell(selectedCells.current, id)
+    // onAddBorderSelectedCell(selectedCells.current, id)
+    // }, 10)
+
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
     // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
 
@@ -685,10 +693,11 @@ const GridEdit = props => {
     }
   }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
   const handleDeleteRows = _react.default.useCallback(item => {
-    setTimeout(() => {
-      // onAddBgSelectedCell(selectedCells.current, id)
-      // onAddBorderSelectedCell(selectedCells.current, id)
-    });
+    // setTimeout(() => {
+    // onAddBgSelectedCell(selectedCells.current, id)
+    // onAddBorderSelectedCell(selectedCells.current, id)
+    // })
+
     if (item.onClick) {
       item.onClick({
         toolbar: item
@@ -720,7 +729,9 @@ const GridEdit = props => {
         const rowIndex = Number(rowIndexStr);
         const colIndex = Number(colIndexStr);
         const field = colIndexToField[colIndex];
-        if (newData[rowIndex] && field && field in newData[rowIndex]) {
+        const column = (0, _columns.flatColumns2)(visibleCols)[colIndex];
+        const rowData = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowIndex];
+        if (newData[rowIndex] && field && field in newData[rowIndex] && (0, _hooks.isEditable)(column, rowData)) {
           // @ts-ignore
           newData[rowIndex][field] = '';
         }
@@ -951,9 +962,13 @@ const GridEdit = props => {
     mode: 'onChange',
     resolver: validate ? (0, _yup.yupResolver)(validate) : undefined
   });
-  const isEditing = _react.default.useCallback(record => {
-    return record[rowKey] === editingKey;
-  }, [editingKey, rowKey]);
+
+  // const isEditing = React.useCallback((record: RecordType) => {
+  //   return record[rowKey as any] === editingKey.current
+  // }, [editingKey, rowKey])
+
+  // console.log('isEditing', isEditing)
+
   _react.default.useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
@@ -980,9 +995,12 @@ const GridEdit = props => {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
 
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
-        // setEditingKey('')
+        if (editingKey.current) {
+          onBlur?.(dataSource);
+        }
         setTimeout(() => {
-          setEditingKey('');
+          // setEditingKey('')
+          editingKey.current = '';
         });
         isSelecting.current = false;
         startCell.current = null;
@@ -1000,13 +1018,14 @@ const GridEdit = props => {
 
     // document.addEventListener('click', handleClickOutside)
     document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
+    // document.addEventListener('touchstart', handleClickOutside)
+
     return () => {
       // document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
+      // document.removeEventListener('touchstart', handleClickOutside)
     };
-  }, [id]);
+  }, [dataSource, id, onBlur]);
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
     const tmpCols = {
@@ -1416,12 +1435,14 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
-    if (editingKey && editingKey === record[rowKey]) {
+    if (editingKey && editingKey.current === record[rowKey]) {
       return;
     }
-    if (record[rowKey] !== editingKey && editingKey !== '') {
+    if (record[rowKey] !== editingKey.current && editingKey.current !== '') {
       setTimeout(() => {
-        setEditingKey('');
+        //   setEditingKey('')
+        editingKey.current = '';
+        onBlur?.(dataSource);
       });
     }
 
@@ -1657,8 +1678,9 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
-    if (editingKey) {
-      setEditingKey('');
+    if (editingKey.current) {
+      editingKey.current = '';
+      // setEditingKey('')
     }
     isSelectingRow.current = true;
     rowStart.current = {
@@ -1874,12 +1896,20 @@ const GridEdit = props => {
   const handleEdit = (record, col, editType, e) => {
     (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
     setTooltipContent('');
+
     // @ts-ignore
-    setEditingKey(record[rowKey]);
-    setCellEditing({
+    // setEditingKey(record[rowKey])
+    editingKey.current = record[rowKey];
+
+    // setCellEditing({
+    //   row: record,
+    //   column: col
+    // })
+
+    cellEditing.current = {
       row: record,
       column: col
-    });
+    };
     reset();
 
     // const formattedRecord = { ...record };
@@ -1953,7 +1983,7 @@ const GridEdit = props => {
     }
   };
   const handleFocusCell = (rowIndex, colIndex, col, scrollType, e, isTimeout) => {
-    const isEdit = editingKey !== '';
+    const isEdit = editingKey.current !== '';
     const cellEdit = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
     const cell = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
     const updateSelection = () => {
@@ -1997,7 +2027,8 @@ const GridEdit = props => {
           scrollToCell(rowIndex, colIndex, editingCell, 'horizontal');
         }
         if (scrollType === 'vertical' && cellEditable) {
-          setEditingKey('');
+          // setEditingKey('')
+          editingKey.current = '';
           updateSelection();
           scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
           if (e?.key !== 'Tab') {
@@ -2046,13 +2077,13 @@ const GridEdit = props => {
           return {
             'data-row-index': rowNumber,
             onPaste: event => {
-              if (editingKey === '') {
+              if (editingKey.current === '') {
                 handlePaste(record, colIndex + 1, rowNumber, event);
                 event.preventDefault();
               }
             },
             onCopy: e => {
-              if (editingKey === '') {
+              if (editingKey.current === '') {
                 handleCopy(e);
                 e.preventDefault();
               }
@@ -2093,7 +2124,7 @@ const GridEdit = props => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key === 'Control' && event.ctrlKey) {} else {
               if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-                if (record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
+                if (record[rowKey] !== editingKey.current && (0, _hooks.isEditable)(column, record)) {
                   // ~~ khi editingKey = ''
                   event.preventDefault();
                   event.stopPropagation();
@@ -2116,7 +2147,7 @@ const GridEdit = props => {
                   if (event.key === 'Enter') {
                     event.preventDefault();
                     event.stopPropagation();
-                    if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
+                    if (editingKey && editingKey.current !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
                       handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                     } else {
                       // // focus cell hiện tại và tắt edit
@@ -2132,7 +2163,7 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'Tab') {
-                if (editingKey) {} else {
+                if (editingKey.current) {} else {
                   if (colIndex + 1 !== visibleCols.length) {
                     handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                   } else {
@@ -2142,7 +2173,7 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
-                if (editingKey !== '') {} else {
+                if (editingKey.current !== '') {} else {
                   handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
               }
@@ -2151,47 +2182,51 @@ const GridEdit = props => {
                   event.stopPropagation();
                   event.preventDefault();
                 } else {
-                  if (editingKey !== '') {} else {
+                  if (editingKey.current !== '') {} else {
                     handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
                   }
                 }
               }
               if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length) {
-                if (isEditing(record) && ((0, _hooks.getEditType)(column, record) === 'treeSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'asyncSelect')) {
+                // if (isEditing(record) && (
+                if (record[rowKey] === editingKey.current && ((0, _hooks.getEditType)(column, record) === 'treeSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'asyncSelect')) {
                   event.stopPropagation();
                 } else {
                   handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                 }
               }
               if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
-                if (isEditing(record) && ((0, _hooks.getEditType)(column, record) === 'asyncSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'treeSelect')) {
+                if (record[rowKey] === editingKey.current && ((0, _hooks.getEditType)(column, record) === 'asyncSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'treeSelect')) {
                   event.stopPropagation();
                 } else {
                   handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
                 }
               }
               if (event.key === 'Delete') {
+                if (!(0, _hooks.isEditable)(column, record)) {}
                 handleDeleteContent();
               }
               if (event.key === 'Escape') {
-                setEditingKey('');
+                // setEditingKey('')
+                editingKey.current = '';
               }
             }
           },
           onPaste: event => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handlePaste(record, colIndex, rowNumber, event);
               event.preventDefault();
             }
           },
           onCopy: e => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handleCopy(e);
               e.preventDefault();
             }
           },
           onDoubleClick: event => {
-            if (!isEditing(record) && record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
+            // if (!isEditing(record) && record[rowKey] !== editingKey.current && isEditable(column as any, record)) {
+            if (!(record[rowKey] === editingKey.current) && record[rowKey] !== editingKey.current && (0, _hooks.isEditable)(column, record)) {
               handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
 
               // onRemoveBgSelectedCell(selectedCells.current, id)
@@ -2216,26 +2251,21 @@ const GridEdit = props => {
             }
           },
           onClick: () => {
-            if (record[rowKey] !== editingKey && editingKey !== '') {
+            if (record[rowKey] !== editingKey.current && editingKey.current !== '') {
               // setEditingKey('')
             } else {
-              if (record[rowKey] !== editingKey) {
+              if (record[rowKey] !== editingKey.current) {
                 (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
               }
-              if (editingKey) {
+              if (editingKey.current) {
                 handleCellClick(rowNumber, record, column);
               }
             }
           },
           // className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column as any, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column as any, record) ? 'disable' : ''}`,
           className: (0, _classnames.default)('rc-ui-cell-editable', {
-            'cell-editing': isEditing(record),
-            'cell-editable': !isEditing(record),
-            // selected: isSelectedCell(rangeCells,rowIndex, colIndex),
-            // 'cell-border-bottom': isRangeCell(rangeCells, 'bottom',rowIndex, colIndex),
-            // 'cell-border-right': isRangeCell(rangeCells, 'right',rowIndex, colIndex),
-            // 'cell-border-top': isRangeCell(rangeCells, 'top',rowIndex, colIndex),
-            // 'cell-border-left': isRangeCell(rangeCells, 'left',rowIndex, colIndex),
+            'cell-editing': record[rowKey] === editingKey.current,
+            'cell-editable': !(record[rowKey] === editingKey.current),
             disable: !(0, _hooks.isEditable)(column, record)
           }),
           record,
@@ -2247,9 +2277,11 @@ const GridEdit = props => {
           title: (0, _columns.getValueCell)(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          'data-tooltip-id': "tooltip-cell-content",
-          editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
-          cellEditing,
+          // 'data-tooltip-id': "tooltip-cell-content",
+          'data-tooltip-id': `${id}-tooltip-cell-content`,
+          // editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column as any, record),
+          editing: record.rowId === editingKey.current && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
+          cellEditing: cellEditing.current,
           t,
           tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
           style: isPasteDragging ? {
@@ -2264,13 +2296,13 @@ const GridEdit = props => {
             handleClickColHeader(column, colIndex);
           },
           onCopy: e => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handleCopy(e);
               e.preventDefault();
             }
           },
           onPaste: event => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handlePaste(dataSource[0], colIndex, 0, event);
               event.preventDefault();
             }
@@ -2286,18 +2318,12 @@ const GridEdit = props => {
         const cellFormat = (0, _hooks.getFormat)(colFormat, format);
         const rowError = dataErrors.find(it => it.index === rowNumber);
         const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
-
-        // const aaa =  dataErrors.find((it) => column?.field && it[column.field].field === column.field && it.index === rowNumber)
-        // const aaa =  column.field && rowError && rowError[column.field]?.field === column?.field
-
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _classnames.default)('ui-rc_cell-content', {
-            // disable: !isEditable(column as any, record)
             isValid: column.field && rowError && rowError[column.field]?.field === column?.field
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: event => {
-            // setTooltipContent(cellError ? cellError.message : renderContent(column as any, value, record, rowIndex, cellFormat))
             setTooltipContent(cellError ? cellError.message : '');
             handleMouseEnter(rowNumber, colIndex, event);
           },
@@ -2308,20 +2334,9 @@ const GridEdit = props => {
               isDragMouse.current = true;
             }
           }
-
-          // onClick={(event) => {
-          //
-          //   handleClickCell(event)
-          //
-          // }}
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat)),
-        // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
-        // getLastSelectCell(selectedCells.current).col === colIndex &&
-        // isEditable(column as any, record) &&
-
-        !isDragMouse.current && /*#__PURE__*/_react.default.createElement("div", {
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat)), !isDragMouse.current && /*#__PURE__*/_react.default.createElement("div", {
           className: 'dragging-point hidden',
           onMouseDown: e => {
             // e.stopPropagation()
@@ -2412,7 +2427,8 @@ const GridEdit = props => {
       items: toolbarItemsBottom ?? [],
       mode: 'scroll',
       onClick: ({}) => {
-        setEditingKey('');
+        editingKey.current = '';
+        // setEditingKey('')
       }
     }));
   };
@@ -2485,6 +2501,7 @@ const GridEdit = props => {
     id: id
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      id: id ?? '',
       rowKey,
       form,
       format,

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

@@ -29,10 +29,12 @@ const Group = props => {
     groupAble,
     expandable,
     dataSource,
+    rowKey,
     getRowKey,
     groupSetting,
     groupColumns,
     triggerGroupColumns,
+    onExpandClick,
     ...rest
   } = props;
   const {
@@ -67,9 +69,16 @@ const Group = props => {
       newExpandedKeys = [...mergedExpandedKeys];
     } else {
       newExpandedKeys = [...mergedExpandedKeys, key];
+      // gọi sự kiện expand
+
+      onExpandClick?.({
+        expandedKeys: newExpandedKeys,
+        key: key,
+        rowData: record
+      });
     }
     setInnerExpandedKeys(newExpandedKeys);
-  }, [getRowKey, mergedExpandedKeys, dataSource]);
+  }, [getRowKey, dataSource, mergedExpandedKeys, onExpandClick]);
   const handleExpandAllGroup = () => {
     setInnerExpandedKeys((0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? []);
   };
@@ -116,6 +125,7 @@ const Group = props => {
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
     t: t,
     id: id,
+    rowKey: rowKey,
     columns: columns,
     style: {
       ...style,

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

@@ -84,6 +84,9 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
+export type LoadOptionsArgs = {
+    rowData?: any;
+};
 export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title' | 'format' | 'commandItems'> & {
     field?: string;
     key?: any;
@@ -195,6 +198,12 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onCellClick?: (args: ICellClick, callback?: any) => void;
     rowEditable?: (rowData: RecordType) => boolean;
     validate?: any;
+    onBlur?: (data: RecordType[]) => void;
+    onExpandClick?: (args: {
+        expandedKeys: string[];
+        key: string;
+        rowData: any;
+    }) => void;
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

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

@@ -19,6 +19,7 @@ export interface IContext<RecordType> {
     getValues?: any;
     handleCellChange?: (args: ContextCellChange<RecordType>) => void;
     getRowKey?: GetRowKey<RecordType>;
+    id: string;
 }
 export type ContextCellChange<RecordType = AnyObject> = {
     key: string | keyof RecordType | GetRowKey<RecordType>;

package/lib/grid-component/useContext.js

@@ -8,5 +8,6 @@ var _react = require("react");
 // import {AnyObject} from "antd/es/_util/type";
 
 const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({
-  rowKey: 'id'
+  rowKey: 'rowId',
+  id: ''
 });