@hzab/list-render 1.11.0 → 1.12.1

package/src/components/CellEditTable/Template/widthWrap.tsx

@@ -1,263 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-
-import {
-  Cell,
-  CellTemplate,
-  Compatible,
-  getCellProperty,
-  getCharFromKey,
-  isAlphaNumericKey,
-  keyCodes,
-  Uncertain,
-  UncertainCompatible,
-} from "@silevis/reactgrid";
-import { getVal } from "../../../common/utils";
-
-export type OptionType = {
-  label: string;
-  value: string | number;
-  isDisabled?: boolean;
-};
-
-export interface BaseCell extends Cell {
-  selectedValue?: string;
-  value: string | number;
-  values: OptionType[];
-  isDisabled?: boolean;
-  isOpen?: boolean;
-  inputValue?: string;
-}
-interface DIProps {
-  onCellChanged: (...args: any[]) => void;
-  cell: Record<string, any>;
-  isInEditMode?: boolean;
-}
-
-export const WidthWrap = (opt: any, edit = false) => {
-  const { WrapComponent, ReadWrapComponent } = opt;
-
-  class createBaseCellTemplate implements CellTemplate<BaseCell> {
-    getCompatibleCell(uncertainCell: Uncertain<BaseCell>): Compatible<BaseCell> {
-      let selectedValue: string | undefined;
-      try {
-        selectedValue = getCellProperty(uncertainCell, "selectedValue", "number");
-      } catch {
-        selectedValue = undefined;
-      }
-      if (!selectedValue) {
-        try {
-          selectedValue = getCellProperty(uncertainCell, "selectedValue", "string");
-        } catch {
-          selectedValue = undefined;
-        }
-      }
-
-      let values: any;
-      try {
-        values = getCellProperty(uncertainCell, "values", "object");
-      } catch {
-        values = [];
-      }
-
-      const value = selectedValue ? parseFloat(selectedValue) : NaN;
-
-      let isDisabled = true;
-      try {
-        isDisabled = getCellProperty(uncertainCell, "isDisabled", "boolean");
-      } catch {
-        isDisabled = false;
-      }
-
-      let inputValue: string | undefined;
-      try {
-        inputValue = getCellProperty(uncertainCell, "inputValue", "string");
-      } catch {
-        inputValue = undefined;
-      }
-
-      const text = selectedValue || "";
-
-      return { ...uncertainCell, selectedValue, text, value, values, isDisabled, inputValue };
-    }
-
-    update(cell: Compatible<BaseCell>, cellToMerge: UncertainCompatible<BaseCell>): Compatible<BaseCell> {
-      const selectedValueFromText = cell.values.some((val: any) => val.value === cellToMerge.text)
-        ? cellToMerge.text
-        : undefined;
-      return this.getCompatibleCell({
-        ...cell,
-        selectedValue: selectedValueFromText,
-        isOpen: cellToMerge?.isOpen,
-        inputValue: cellToMerge.inputValue,
-      });
-    }
-
-    getClassName(cell: Compatible<BaseCell>, isInEditMode: boolean): string {
-      const isOpen = cell.isOpen ? "open" : "closed";
-      return `${cell.className ? cell.className : ""}${isOpen}`;
-    }
-
-    // handleKeyDown(
-    //   cell: Compatible<BaseCell>,
-    //   keyCode: number,
-    //   ctrl: boolean,
-    //   shift: boolean,
-    //   alt: boolean,
-    //   key: string,
-    //   capsLock: boolean,
-    // ): { cell: Compatible<BaseCell>; enableEditMode: boolean } {
-    //   if ((keyCode === keyCodes.SPACE || keyCode === keyCodes.ENTER) && !shift) {
-    //     return {
-    //       cell: this.getCompatibleCell({
-    //         ...cell,
-    //         isOpen: !cell.isOpen,
-    //       }),
-    //       enableEditMode: false,
-    //     };
-    //   }
-
-    //   const char = getCharFromKey(key, shift, capsLock);
-
-    //   if (!ctrl && !alt && isAlphaNumericKey(keyCode) && !(shift && keyCode === keyCodes.SPACE))
-    //     return {
-    //       cell: this.getCompatibleCell({
-    //         ...cell,
-    //         inputValue: char,
-    //         isOpen: !cell.isOpen,
-    //       }),
-    //       enableEditMode: false,
-    //     };
-
-    //   return { cell, enableEditMode: false };
-    // }
-
-    handleCompositionEnd(
-      cell: Compatible<BaseCell>,
-      eventData: any,
-    ): { cell: Compatible<BaseCell>; enableEditMode: boolean } {
-      return {
-        cell: {
-          ...cell,
-          inputValue: eventData,
-          isOpen: !cell.isOpen,
-        },
-        enableEditMode: false,
-      };
-    }
-
-    render(
-      cell: Compatible<BaseCell>,
-      isInEditMode: boolean,
-      onCellChanged: (cell: Compatible<BaseCell>, commit: boolean) => void,
-    ): React.ReactNode {
-      if (edit) {
-        return (
-          <div
-            onPointerDown={(e) => e.stopPropagation()}
-            style={{ display: "flex", justifyContent: "center", alignItems: "center" }}
-          >
-            <WrapComponent record={cell?.record} rowId={cell?.rowId} item={cell}></WrapComponent>
-          </div>
-        );
-      }
-      return (
-        <BaseTemplate
-          onCellChanged={(cell) => onCellChanged(this.getCompatibleCell(cell), true)}
-          cell={cell}
-          isInEditMode={isInEditMode}
-        />
-      );
-    }
-  }
-
-  const BaseTemplate: React.FC<DIProps> = ({ onCellChanged, cell, isInEditMode }) => {
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const datatypeId = cell?.columnId + cell?.rowId;
-    useEffect(() => {
-      // 处理下拉选项弹层失焦逻辑
-      function onClick() {
-        if (window.gridEditId != datatypeId) {
-          setIsOpen(false);
-        }
-      }
-      document.addEventListener("click", onClick);
-      return () => {
-        document.removeEventListener("click", onClick);
-      };
-    }, []);
-
-    const _value = useMemo(() => {
-      let str = "selectedValue";
-      if (cell?.type.includes("DatePicker")) {
-        str = "inputValue";
-      }
-      return str;
-    }, [cell]);
-
-    const echoValue = useMemo(() => {
-      if (!cell?.getField) {
-        return;
-      }
-      return getVal(
-        { ...(cell?.getField && cell?.getField()), enum: cell?.getField()?.enum || cell?.values },
-        { [cell?.getField && cell?.getField().name]: cell[_value] },
-      );
-    }, [cell, _value]);
-
-    return (
-      <div
-        style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}
-        onDoubleClick={(e) => {
-          if (cell?.nonEditable) {
-            return;
-          }
-          setIsOpen(true);
-        }}
-      >
-        {isOpen ? (
-          <div onPointerDown={(e) => e.stopPropagation()} style={{ width: "100%" }}>
-            <WrapComponent
-              key={cell?.id}
-              ref={(input) => {
-                if (input) {
-                  input?.focus();
-                }
-              }}
-              open={isOpen}
-              style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}
-              value={cell[_value]}
-              options={cell.values}
-              onChange={(e) => {
-                setIsOpen(false);
-                if (cell?.type.includes("DatePicker")) {
-                  onCellChanged({ ...cell, inputValue: e?.target?.value || e });
-                  return;
-                }
-                onCellChanged({ ...cell, selectedValue: e?.target?.value || e });
-              }}
-              {...((cell?.getField && cell?.getField()["x-component-props"]) || {})}
-            ></WrapComponent>
-          </div>
-        ) : (
-          <div>
-            {ReadWrapComponent ? (
-              <ReadWrapComponent
-                key={cell?.id}
-                value={echoValue}
-                record={cell?.record}
-                rowId={cell?.rowId}
-                item={cell}
-              />
-            ) : (
-              <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
-                {echoValue}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  return new createBaseCellTemplate();
-};

package/src/components/CellEditTable/index.less

@@ -1,11 +0,0 @@
-.grid-container {
-  overflow: auto;
-  position: relative;
-  max-height: 80vh;
-
-
-
-  .ant-select {
-    width: 100% !important;
-  }
-}

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>
-  );
-});