es-grid-template 1.9.64 → 1.9.65

package/es/table-component/InternalTable.js

@@ -165,9 +165,17 @@ const InternalTable = props => {
     selectedRowKeys,
     defaultSelectedRowKeys
   } = selectionSettings ?? {};
-  const [mergedSelectedKeys] = useMergedState(selectedRowKeys || defaultSelectedRowKeys || [], {
-    value: selectedRowKeys
-  });
+
+  // const [mergedSelectedKeys] = useMergedState(
+  //   selectedRowKeys || defaultSelectedRowKeys || [],
+  //   {
+  //     value: selectedRowKeys,
+  //   },
+  // );
+
+  const mergedSelectedKeys = React.useMemo(() => {
+    return selectedRowKeys ?? defaultSelectedRowKeys ?? [];
+  }, [defaultSelectedRowKeys, selectedRowKeys]);
   const mergedData = React.useMemo(() => {
     return filterDataByColumns(convertData, onFilter ? undefined : filterStates ?? defaultFilter, onSorter ? undefined : sorterStates ?? defaultSorter, mergedFilterKeys, ignoreAccents);
   }, [convertData, filterStates, mergedFilterKeys, sorterStates, ignoreAccents, defaultFilter, defaultSorter, onFilter, onSorter]);

package/es/table-component/header/TableHeadCell2.js

@@ -125,9 +125,9 @@ const TableHeadCell2 = props => {
   const doFilter = type => {
     if (type) {
       if (fieldOriginal) {
-        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
       } else {
-        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
       }
 
       // column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)

package/es/table-component/header/renderFilter.js

@@ -316,7 +316,7 @@ export const renderFilter = args => {
         ,
         placeholder: tableLocal?.search ?? `Search`,
         value: selectedKeys[0],
-        onChange: e => setSelectedKeys(e.target.value ? [e.target.value.trim()] : [])
+        onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
         ,
         onPressEnter: () => doFilter?.(true),

package/es/table-component/hook/useColumns.js

@@ -255,7 +255,7 @@ export const toggleRowSelection = props => {
       // đã chọn
 
       // xóa row ra list selected 
-      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      const newRowsSelected = prevSelected.filter(it => it.rowId !== row.id);
       setIsSelectionChange({
         isChange: true,
         type: 'rowSelected',

package/es/table-component/table/Grid.js

@@ -14,7 +14,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import React, { Fragment } from 'react';
 import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
-import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual, revertConvertFilters } from "../hook/utils";
+import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, flattenArray, getAllRowKey, revertConvertFilters } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
 import classNames from 'classnames';
 import { GridStyle } from "../style";
@@ -169,6 +169,25 @@ const Grid = props => {
 
     // debugTable: true
   });
+  React.useEffect(() => {
+    if (!isSelectionChange.isChange) {
+      if (mergedSelectedKeys.length === 0) {
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: []
+        }));
+      } else {
+        const abc = flattenArray(dataSource);
+        const selectedKeySet = new Set(mergedSelectedKeys);
+        const result = abc.filter(row => selectedKeySet.has(row.id));
+        setRowSelection(convertToObjTrue(mergedSelectedKeys));
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: result
+        }));
+      }
+    }
+  }, [mergedSelectedKeys, dataSource]);
   React.useEffect(() => {
     if (defaultFilter) {
       const a = revertConvertFilters(defaultFilter);
@@ -198,20 +217,6 @@ const Grid = props => {
       }
     }
   }, [columnHidden, columnSizingInfo]);
-  React.useEffect(() => {
-    const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection);
-    if (!isEqual) {
-      setRowSelection(convertToObjTrue(mergedSelectedKeys));
-      // table.setRowSelection(convertToObjTrue(mergedSelectedKeys))
-
-      if (mergedSelectedKeys.length === 0) {
-        setIsSelectionChange(prev => ({
-          ...prev,
-          rowsData: []
-        }));
-      }
-    }
-  }, [mergedSelectedKeys]);
   React.useEffect(() => {
     if (isSelectionChange.isChange) {
       const aa = table.getState().rowSelection;
@@ -220,11 +225,12 @@ const Grid = props => {
       // const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
       const ssss = filterByIds(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
 
-      const rs = ssss.map(it => it.original);
+      // const rs = ssss.map(it => it.original)
+
       rowSelected?.({
         type: isSelectionChange.type,
         rowData: isSelectionChange.rowData,
-        selected: rs
+        selected: ssss
       });
     }
   }, [isSelectionChange, rowSelection, table.getState().rowSelection]);

package/lib/table-component/InternalTable.js

@@ -170,9 +170,17 @@ const InternalTable = props => {
     selectedRowKeys,
     defaultSelectedRowKeys
   } = selectionSettings ?? {};
-  const [mergedSelectedKeys] = (0, _useMergedState.default)(selectedRowKeys || defaultSelectedRowKeys || [], {
-    value: selectedRowKeys
-  });
+
+  // const [mergedSelectedKeys] = useMergedState(
+  //   selectedRowKeys || defaultSelectedRowKeys || [],
+  //   {
+  //     value: selectedRowKeys,
+  //   },
+  // );
+
+  const mergedSelectedKeys = _react.default.useMemo(() => {
+    return selectedRowKeys ?? defaultSelectedRowKeys ?? [];
+  }, [defaultSelectedRowKeys, selectedRowKeys]);
   const mergedData = _react.default.useMemo(() => {
     return (0, _utils.filterDataByColumns)(convertData, onFilter ? undefined : filterStates ?? defaultFilter, onSorter ? undefined : sorterStates ?? defaultSorter, mergedFilterKeys, ignoreAccents);
   }, [convertData, filterStates, mergedFilterKeys, sorterStates, ignoreAccents, defaultFilter, defaultSorter, onFilter, onSorter]);

package/lib/table-component/header/TableHeadCell2.js

@@ -133,9 +133,9 @@ const TableHeadCell2 = props => {
   const doFilter = type => {
     if (type) {
       if (fieldOriginal) {
-        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
       } else {
-        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
       }
 
       // column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)

package/lib/table-component/header/renderFilter.js

@@ -325,7 +325,7 @@ const renderFilter = args => {
         ,
         placeholder: tableLocal?.search ?? `Search`,
         value: selectedKeys[0],
-        onChange: e => setSelectedKeys(e.target.value ? [e.target.value.trim()] : [])
+        onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
         ,
         onPressEnter: () => doFilter?.(true),

package/lib/table-component/hook/useColumns.js

@@ -267,7 +267,7 @@ const toggleRowSelection = props => {
       // đã chọn
 
       // xóa row ra list selected 
-      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      const newRowsSelected = prevSelected.filter(it => it.rowId !== row.id);
       setIsSelectionChange({
         isChange: true,
         type: 'rowSelected',

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

@@ -174,6 +174,25 @@ const Grid = props => {
 
     // debugTable: true
   });
+  _react.default.useEffect(() => {
+    if (!isSelectionChange.isChange) {
+      if (mergedSelectedKeys.length === 0) {
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: []
+        }));
+      } else {
+        const abc = (0, _utils.flattenArray)(dataSource);
+        const selectedKeySet = new Set(mergedSelectedKeys);
+        const result = abc.filter(row => selectedKeySet.has(row.id));
+        setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: result
+        }));
+      }
+    }
+  }, [mergedSelectedKeys, dataSource]);
   _react.default.useEffect(() => {
     if (defaultFilter) {
       const a = (0, _utils.revertConvertFilters)(defaultFilter);
@@ -203,20 +222,6 @@ const Grid = props => {
       }
     }
   }, [columnHidden, columnSizingInfo]);
-  _react.default.useEffect(() => {
-    const isEqual = (0, _utils.isObjEqual)((0, _utils.convertToObjTrue)(mergedSelectedKeys), rowSelection);
-    if (!isEqual) {
-      setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
-      // table.setRowSelection(convertToObjTrue(mergedSelectedKeys))
-
-      if (mergedSelectedKeys.length === 0) {
-        setIsSelectionChange(prev => ({
-          ...prev,
-          rowsData: []
-        }));
-      }
-    }
-  }, [mergedSelectedKeys]);
   _react.default.useEffect(() => {
     if (isSelectionChange.isChange) {
       const aa = table.getState().rowSelection;
@@ -225,11 +230,12 @@ const Grid = props => {
       // const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
       const ssss = (0, _utils.filterByIds)(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
 
-      const rs = ssss.map(it => it.original);
+      // const rs = ssss.map(it => it.original)
+
       rowSelected?.({
         type: isSelectionChange.type,
         rowData: isSelectionChange.rowData,
-        selected: rs
+        selected: ssss
       });
     }
   }, [isSelectionChange, rowSelection, table.getState().rowSelection]);

package/package.json

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