@hzab/edit-table 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,4 +1,12 @@
-# @hzab/edit-table@0.0.2
+# @hzab/edit-table@0.1.2
+
+fix: checkbox 选择子项时拿到对应行的数据
+
+# @hzab/edit-table@0.1.1
+
+fix: 无数据时取消聚焦框
+
+# @hzab/edit-table@0.1.0
 
 feat: 组件优化，批量提交
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/edit-table",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "main": "src",
   "scripts": {

package/src/index.tsx

@@ -206,11 +206,12 @@ export default function CellEditTable(props: CellEditTableProps) {
         }),
       };
     });
-    if (firstRender.current) {
-      initRowsRef.current = [...headerList, ...tempDataSource];
+    const mergerList = [...headerList, ...tempDataSource];
+    if (firstRender.current && tempDataSource?.length > 0) {
+      initRowsRef.current = mergerList;
       firstRender.current = false;
     }
-    setRows([...headerList, ...tempDataSource]);
+    setRows(mergerList);
   }, [newDataSource, tableColumns, headerList]);
 
   // 单元格编辑回调
@@ -294,41 +295,54 @@ export default function CellEditTable(props: CellEditTableProps) {
       </div>
     );
   };
-
+  function flattenDataSource(arr: any) {
+    const result: any = [];
+    function loop(list: any) {
+      for (const item of list) {
+        result.push(item);
+        if (item.children && item.children.length) {
+          loop(item.children);
+        }
+      }
+    }
+    loop(arr);
+    return result;
+  }
   const CheckBoxDom = (props) => {
     const { record, rowId } = props?.cell;
+    const newDataSource = flattenDataSource(dataSource);
     return (
       <Checkbox
         {...props?.componentProps}
         checked={
           rowSelection?.selectedRowKeys?.includes((record && record[rowKey]) || "") ||
-          (rowSelection?.selectedRowKeys?.length == dataSource?.length && dataSource?.length > 0)
+          (rowSelection?.selectedRowKeys?.length == newDataSource?.length && newDataSource?.length > 0)
         }
         indeterminate={
           !rowId &&
           rowSelection?.selectedRowKeys?.length > 0 &&
-          rowSelection?.selectedRowKeys?.length < dataSource?.length
+          rowSelection?.selectedRowKeys?.length < newDataSource?.length
         }
         onChange={(e) => {
           if (e.target.checked && rowId) {
             const newSelectedRowKeys = [...rowSelection?.selectedRowKeys, record[rowKey]];
-            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
 
             rowSelection?.onChange(newSelectedRowKeys, rows);
           } else if (!e.target.checked && rowId) {
             const newSelectedRowKeys = rowSelection?.selectedRowKeys?.filter((el) => el != record[rowKey]);
-            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
 
             rowSelection?.onChange(
               rowSelection?.selectedRowKeys?.filter((el) => el != record[rowKey]),
               rows,
             );
           } else if (e.target.checked && !rowId) {
-            const newSelectedRowKeys = dataSource?.map((el) => el[rowKey]);
-            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+            const newSelectedRowKeys = newDataSource?.map((el) => el[rowKey]);
+            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
 
             rowSelection?.onChange(
-              dataSource?.map((el) => el[rowKey]),
+              newDataSource?.map((el) => el[rowKey]),
               rows,
             );
           } else if (!e.target.checked && !rowId) {
@@ -340,7 +354,8 @@ export default function CellEditTable(props: CellEditTableProps) {
   };
   useEffect(() => {
     if (rowSelection) {
-      const rows = dataSource?.filter((el) => selectedRowKeys?.includes(el[rowKey]));
+      const newDataSource = flattenDataSource(dataSource);
+      const rows = newDataSource?.filter((el) => selectedRowKeys?.includes(el[rowKey]));
       rowSelection?.onChange(selectedRowKeys, rows);
     }
   }, [selectedRowKeys, dataSource]);
@@ -362,7 +377,8 @@ export default function CellEditTable(props: CellEditTableProps) {
       <div className={`grid-container ${className}`} style={reactGridStyle}>
         <ReactGrid
           ref={gridRef}
-          rows={loading ? initRowsRef.current : rows}
+          rows={rows}
+          key={dataSource?.length == 0 ? 0 : 1}
           columns={tableColumns}
           onCellsChanged={handleCellsChanged}
           enableFillHandle={true}