@hzab/list-render 1.10.21-alpha.6 → 1.10.21-alpha.7

package/src/components/CellEditTable/index.tsx

@@ -1,309 +0,0 @@
-import React, { memo, useEffect, useMemo, useRef, useState } from "react";
-import { ReactGrid, Column, Row, CellChange, Cell, CellTemplate } from "@silevis/reactgrid";
-import "@silevis/reactgrid/styles.css";
-import { TextTemplate } from "./Template/TextCellTemplate";
-import { antdComponents, customComponents } from "@hzab/form-render/src/index";
-import { WidthWrapHoc } from "./common/WidthWrapHoc";
-import { NumberTemplate } from "./Template/NumberCellTemplate";
-import { Checkbox, Spin } from "antd";
-import { ExpandListTemplate } from "./Template/ExpandListTemplate";
-import { convertColumnsToRows, flattenColumns } from "./common/utils";
-import { childAntdComponent } from "./common/childAntdComponent";
-import { GetBaseTemplate } from "./Template/GetBaseTemplate";
-import "./index.less";
-
-export default 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>([]);
-  const gridRef = useRef<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",
-          },
-        });
-      }
-      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 || "",
-            style: columnsItem?.type == "rowSelection" ? { display: "flex", justifyContent: "center" } : {},
-            ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
-            ...(columnsItem?.cellProps || {}),
-            setNewDataSource,
-            setExpandKeys,
-            rowKey,
-            expandKeys,
-            Slots,
-            ...newCell,
-          };
-        }),
-      };
-    });
-    setRows([...headerList, ...tempDataSource]);
-  }, [newDataSource, tableColumns]);
-
-  // 单元格编辑回调
-  const handleCellsChanged = (changes) => {
-    if (!Array.isArray(changes) || changes.length === 0) return;
-    /** 批量提交 */
-    let isBatchSubmit = false;
-    if (changes?.length > 1) {
-      isBatchSubmit = true;
-    }
-    setRows((prevRows) => {
-      changes.forEach((change) => {
-        const hasDiff = JSON.stringify((window as any).preCell?.text) != JSON.stringify(change.newCell?.text);
-        if (!hasDiff) return;
-        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;
-          }
-        }
-        if (change?.newCell?.commit == "submit") {
-          onEditSubmit && onEditSubmit(handleArrayToObj(prevRows[changeRowIdx]));
-        }
-        onChange && onChange(prevRows[changeRowIdx]);
-      });
-      return [...prevRows];
-    });
-  };
-  /** 自定义组件注册 */
-  const baseTemplate = useMemo(() => {
-    const mergeTemplate: any = { ...(antdComponents || {}), ...(customComponents || {}), ...childAntdComponent };
-    const newMergeTemplate: any = {};
-    for (let key in mergeTemplate) {
-      const NewCom = (props) => {
-        return <GetBaseTemplate {...props} Com={mergeTemplate[key]} />;
-      };
-      newMergeTemplate[key] = WidthWrapHoc(NewCom);
-    }
-    return newMergeTemplate;
-  }, [antdComponents, customComponents]);
-
-  const ActionDom = (props) => {
-    return (
-      <div onPointerDown={(e) => e.stopPropagation()}>
-        {Slots?.tableActionsSlot && <Slots.tableActionsSlot {...props?.cell} />}
-        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...props?.cell} />}
-        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...props?.cell} />}
-        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...props?.cell} />}
-      </div>
-    );
-  };
-
-  const CheckBoxDom = (props) => {
-    const { record, rowId } = props?.cell;
-    return (
-      <Checkbox
-        {...props?.componentProps}
-        checked={
-          rowSelection?.selectedRowKeys?.includes((record && record[rowKey]) || "") ||
-          (rowSelection?.selectedRowKeys?.length == dataSource?.length && dataSource?.length > 0)
-        }
-        indeterminate={
-          !rowId &&
-          rowSelection?.selectedRowKeys?.length > 0 &&
-          rowSelection?.selectedRowKeys?.length < dataSource?.length
-        }
-        onChange={(e) => {
-          if (e.target.checked && rowId) {
-            const newSelectedRowKeys = [...rowSelection?.selectedRowKeys, record[rowKey]];
-            const rows = dataSource?.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]));
-
-            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]));
-
-            rowSelection?.onChange(
-              dataSource?.map((el) => el[rowKey]),
-              rows,
-            );
-          } else if (!e.target.checked && !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]);
-
-  const customCellTemplates = useMemo(() => {
-    const templatesObj: any = {};
-    for (let key in reactGridProps?.customCellTemplates) {
-      const item = reactGridProps?.customCellTemplates[key];
-      templatesObj[key] = WidthWrapHoc(item);
-    }
-    return templatesObj;
-  }, [reactGridProps?.customCellTemplates]);
-
-  return (
-    <Spin spinning={loading}>
-      <div className={`grid-container ${className}`} style={reactGridStyle}>
-        <ReactGrid
-          ref={gridRef}
-          rows={rows}
-          columns={tableColumns}
-          onCellsChanged={handleCellsChanged}
-          enableFillHandle={true}
-          enableRangeSelection={true}
-          horizontalStickyBreakpoint={120}
-          {...reactGridProps}
-          onFocusLocationChanging={(cell: any) => {
-            const datatypeId = cell?.columnId + cell?.rowId;
-            (window as any).gridEditId = datatypeId;
-            if (["_$actions", "rowSelection"]?.includes(cell?.columnId)) {
-              return false;
-            }
-            if (reactGridProps?.onFocusLocationChanging) {
-              return reactGridProps?.onFocusLocationChanging(cell, rows);
-            }
-            return cell;
-          }}
-          customCellTemplates={{
-            ExpandListTemplate: WidthWrapHoc(ExpandListTemplate),
-            ...baseTemplate,
-            ...customCellTemplates,
-            _$actions: WidthWrapHoc(ActionDom),
-            rowSelection: WidthWrapHoc(CheckBoxDom),
-            Input: TextTemplate,
-            Number: NumberTemplate,
-            // ExpandListTemplate: WidthWrap({ WrapComponent: ExpandListTemplate }, true),
-          }}
-
-          // onSelectionChanged={(newSelection) => {
-          //   console.log("选区发生变化", newSelection[0]);
-          // }}
-        />
-      </div>
-    </Spin>
-  );
-}