@hzab/list-render 1.11.0 → 1.12.0

package/src/components/CellEditTable/index.tsx

@@ -1,344 +0,0 @@
-import React, { memo, useEffect, useMemo, useState } from "react";
-import { ReactGrid, Column, Row, CellChange, Cell, CellTemplate } from "@silevis/reactgrid";
-import "@silevis/reactgrid/styles.css";
-import _ from "lodash";
-import "./index.less";
-import { TextTemplate } from "./Template/TextCellTemplate";
-import { antdComponents, customComponents } from "@hzab/form-render/src/index";
-import { WidthWrap } from "./Template/widthWrap";
-import { NumberTemplate } from "./Template/NumberCellTemplate";
-import { Checkbox, Spin } from "antd";
-import { ExpandListTemplate } from "./Template/ExpandListTemplate";
-import { convertColumnsToRows, flattenColumns } from "./Template/utils";
-
-export default memo(function CellEditTable(props: any) {
-  const {
-    columns,
-    dataSource,
-    formulaConfig,
-    onChange,
-    reactGridProps = {},
-    onEditSubmit,
-    headerRowHeight,
-    rowHeight,
-    reactGridStyle,
-    className,
-    Slots,
-    rowSelection,
-    rowKey,
-    query,
-    loading,
-  } = props;
-
-  const [headerList, setHeaderList] = useState<any>([]);
-  const [rows, setRows] = useState<any>([]);
-  const [tableColumns, setTableColumns] = useState<any>([]);
-  const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
-  const [newDataSource, setNewDataSource] = useState<any>([]);
-  const [expandKeys, setExpandKeys] = useState<any>([]);
-  useEffect(() => {
-    setNewDataSource(dataSource);
-  }, [dataSource]);
-  /**将数组转为对象 */
-  const handleArrayToObj = (item) => {
-    const record = item?.cells?.[0]?.record;
-    const fieldList = ["_$actions", "rowSelection"];
-    let obj: any = {
-      id: item?.rowId,
-    };
-    item?.cells?.forEach((el) => {
-      if (el?.columnId && !fieldList?.includes(el?.columnId)) {
-        obj[el?.columnId] = el?.text || el?.value || el?.selectedValue || "";
-      }
-    });
-
-    return {
-      ...record,
-      ...obj,
-    };
-  };
-  /** 表头 */
-  useEffect(() => {
-    if (Array.isArray(columns) && columns?.length > 0) {
-      if (rowSelection) {
-        columns.unshift({
-          type: "rowSelection",
-          width: rowSelection?.width || 30,
-          key: "rowSelection",
-          style: rowSelection?.style || {
-            background: "rgba(128, 128, 128, 0.1)",
-            display: "flex",
-            justifyContent: "center",
-          },
-        });
-      }
-      // const cells = columns?.map((item, index) => {
-      //   return {
-      //     type: item?.type == "rowSelection" ? "rowSelection" : "header",
-      //     text:
-      //       typeof item?.title == "function"
-      //         ? isReactElement(item?.title())
-      //           ? item?.title()?.props.children
-      //           : String(item?.title()) || ""
-      //         : String(item?.title) || "",
-      //     style: item?.type == "rowSelection" ? item?.style : {},
-      //     onCell: item?.onCell,
-      //   };
-      // });
-      setHeaderList(convertColumnsToRows(columns, headerRowHeight));
-      const newColumns = flattenColumns(columns);
-      setTableColumns(
-        newColumns?.map((item, index) => ({
-          ...item,
-          columnId: item?.dataIndex || item?.key || "",
-        })),
-      );
-    }
-  }, [columns, rowSelection]);
-
-  /** 数据行 */
-  useEffect(() => {
-    const columnsIds = tableColumns?.map((el) => el?.columnId);
-    const tempDataSource = newDataSource?.map((item, index) => {
-      return {
-        rowId: item[rowKey],
-        height: rowHeight,
-        cells: columnsIds?.map((el, ind) => {
-          let newCell = {};
-          const columnsItem = tableColumns[ind];
-          const cellItem = item[el];
-          let type: any = columnsItem?.type ?? "text";
-          if (!rowSelection && ind == 0) {
-            type = "ExpandListTemplate";
-          }
-          if (rowSelection && ind == 1) {
-            type = "ExpandListTemplate";
-          }
-
-          if (formulaConfig) {
-            for (let key in formulaConfig) {
-              if (key == el) {
-                const it = formulaConfig[key];
-                newCell = {
-                  text: it?.setCellData(item),
-                  value: it?.setCellData(item),
-                  style: it?.setCellStyle(it?.setCellData(item)),
-                };
-              }
-            }
-          }
-
-          return {
-            ...columnsItem,
-            record: item,
-            rowId: item[rowKey] || columnsItem?.type,
-            type: type,
-            nonEditable: columnsItem?.nonEditable,
-            text: String(cellItem || ""),
-            value: cellItem,
-            selectedValue: cellItem || "",
-            // rowspan: item?.extendedConfig?.name == el ? item?.extendedConfig?.rowspan || 0 : 0,
-            // colspan: item?.extendedConfig?.name == el ? item?.extendedConfig?.colspan || 0 : 0,
-            style: columnsItem?.type == "rowSelection" ? { display: "flex", justifyContent: "center" } : {},
-            ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
-            ...(columnsItem?.cellProps || {}),
-            setNewDataSource,
-            setExpandKeys,
-            rowKey,
-            expandKeys,
-            Slots,
-            ...newCell,
-
-            // style:item?.extendedConfig?.name==el?item?.extendedConfig?.style||{}:{}
-            // ...handleType(item[el],tableColumns[ind]),
-          };
-        }),
-      };
-    });
-    setRows(_.uniqBy([...headerList, ...tempDataSource], "rowId"));
-  }, [newDataSource, tableColumns, rowSelection]);
-
-  // 单元格编辑回调
-  const handleCellsChanged = (changes) => {
-    if (!Array.isArray(changes) || changes.length === 0) return;
-    const hasDiff = changes.some((c) => JSON.stringify(c.previousCell) !== JSON.stringify(c.newCell));
-    if (!hasDiff) return;
-    setRows((prevRows) => {
-      changes.forEach((change) => {
-        const changeRowIdx = prevRows.findIndex((el) => el.rowId == change.rowId);
-        const changeColumnIdx = tableColumns.findIndex((el) => el.columnId == change.columnId);
-        prevRows[changeRowIdx].cells[changeColumnIdx] = change.newCell;
-        if (formulaConfig) {
-          for (let key in formulaConfig) {
-            const item = formulaConfig[key];
-            const resultColumnIdx = tableColumns.findIndex((el) => el.columnId == key);
-            const newCell = {
-              ...prevRows[changeRowIdx].cells[resultColumnIdx],
-              text: item?.setCellData(prevRows[changeRowIdx]),
-              value: item?.setCellData(prevRows[changeRowIdx]),
-              style: item?.setCellStyle(item?.setCellData(prevRows[changeRowIdx])),
-            };
-            prevRows[changeRowIdx].cells[resultColumnIdx] = newCell;
-          }
-        }
-        onEditSubmit && onEditSubmit(handleArrayToObj(prevRows[changeRowIdx]));
-        onChange && onChange(prevRows[changeRowIdx]);
-      });
-      return [...prevRows];
-    });
-  };
-
-  /**提取组件内部子组件 */
-  function extractSubComponents(comp, compName): any {
-    if (!comp || typeof comp !== "object") return {};
-
-    return Object.entries(comp).reduce((result, [key, value]) => {
-      // 匹配 antd 规范子组件命名：XXPicker / XX / 驼峰组件名
-      // 排除普通函数、数字、布尔、内部私有属性(带下划线)、原型上的方法
-      const isNativeFunc = ["render", "defaultProps", "propTypes", "displayName", "Group", "$$typeof"].includes(key);
-      // 判定为子组件：值是函数（React组件本质是函数/类），且不是内部方法
-      const isSubComponent = typeof comp == "object" && !isNativeFunc;
-
-      if (isSubComponent) {
-        result[`${compName}.${key}`] = value;
-      }
-      return result;
-    }, {});
-  }
-  /** 自定义组件注册 */
-  const baseTemplate = useMemo(() => {
-    const mergeTemplate: any = { ...(antdComponents || {}), ...(customComponents || {}) };
-    const newMergeTemplate: any = {};
-    for (let key in mergeTemplate) {
-      for (let it in extractSubComponents(mergeTemplate[key], key)) {
-        newMergeTemplate[it] = WidthWrap({ WrapComponent: extractSubComponents(mergeTemplate[key], key)[it] });
-      }
-      newMergeTemplate[key] = WidthWrap({ WrapComponent: mergeTemplate[key] });
-    }
-    return newMergeTemplate;
-  }, [antdComponents, customComponents]);
-
-  const ActionDom = (props) => {
-    return (
-      <div onPointerDown={(e) => e.stopPropagation()}>
-        {Slots?.tableActionsSlot && <Slots.tableActionsSlot {...props} />}
-        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...props} />}
-        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...props} />}
-        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...props} />}
-      </div>
-    );
-  };
-
-  const CheckBoxDom = (props) => {
-    return (
-      <Checkbox
-        {...props}
-        checked={
-          rowSelection?.selectedRowKeys?.includes((props?.record && props?.record[rowKey]) || "") ||
-          (rowSelection?.selectedRowKeys?.length == dataSource?.length && dataSource?.length > 0)
-        }
-        indeterminate={
-          !props?.rowId &&
-          rowSelection?.selectedRowKeys?.length > 0 &&
-          rowSelection?.selectedRowKeys?.length < dataSource?.length
-        }
-        onChange={(e) => {
-          if (e.target.checked && props?.rowId) {
-            const newSelectedRowKeys = [...rowSelection?.selectedRowKeys, props?.record[rowKey]];
-            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
-
-            rowSelection?.onChange(newSelectedRowKeys, rows);
-          } else if (!e.target.checked && props?.rowId) {
-            const newSelectedRowKeys = rowSelection?.selectedRowKeys?.filter((el) => el != props?.record[rowKey]);
-            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
-
-            rowSelection?.onChange(
-              rowSelection?.selectedRowKeys?.filter((el) => el != props?.record[rowKey]),
-              rows,
-            );
-          } else if (e.target.checked && !props?.rowId) {
-            const newSelectedRowKeys = dataSource?.map((el) => el[rowKey]);
-            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
-
-            rowSelection?.onChange(
-              dataSource?.map((el) => el[rowKey]),
-              rows,
-            );
-          } else if (!e.target.checked && !props?.rowId) {
-            rowSelection?.onChange([], []);
-          }
-        }}
-      ></Checkbox>
-    );
-  };
-  useEffect(() => {
-    if (rowSelection) {
-      const rows = dataSource?.filter((el) => selectedRowKeys?.includes(el[rowKey]));
-      rowSelection?.onChange(selectedRowKeys, rows);
-    }
-  }, [selectedRowKeys, dataSource]);
-  useEffect(() => {
-    setSelectedRowKeys([]);
-  }, [query?.pageNum]);
-
-  return (
-    <Spin spinning={loading}>
-      <div className={`grid-container ${className}`} style={reactGridStyle}>
-        <ReactGrid
-          rows={rows}
-          columns={tableColumns}
-          onCellsChanged={handleCellsChanged}
-          enableFillHandle={true}
-          enableRangeSelection={true}
-          horizontalStickyBreakpoint={120}
-          // stickyLeftColumns={1}
-          // onFocusLocationChanging={(location) => {
-          //   return false;
-          // }}
-          {...reactGridProps}
-          onFocusLocationChanging={(cell: any) => {
-            const datatypeId = cell?.columnId + cell?.rowId;
-            window.gridEditId = datatypeId;
-
-            if (["_$actions", "rowSelection"]?.includes(cell?.columnId)) {
-              return false;
-            }
-
-            if (reactGridProps?.onFocusLocationChanging) {
-              return reactGridProps?.onFocusLocationChanging(cell, rows);
-            }
-            return cell;
-          }}
-          customCellTemplates={{
-            ...baseTemplate,
-            ...reactGridProps?.customCellTemplates,
-            _$actions: WidthWrap(
-              {
-                WrapComponent: ActionDom,
-              },
-              true,
-            ),
-            rowSelection: WidthWrap(
-              {
-                WrapComponent: CheckBoxDom,
-              },
-              true,
-            ),
-            Input: TextTemplate,
-            Number: NumberTemplate,
-            ExpandListTemplate: WidthWrap(
-              {
-                WrapComponent: ExpandListTemplate,
-              },
-              true,
-            ),
-          }}
-
-          // onSelectionChanged={(newSelection) => {
-          //   console.log("选区发生变化", newSelection[0]);
-          // }}
-        />
-      </div>
-    </Spin>
-  );
-});