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

package/src/components/CellEditTable/common/WidthWrapHoc.tsx

@@ -1,215 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-
-import {
-  Cell,
-  CellTemplate,
-  Compatible,
-  getCellProperty,
-  getCharFromKey,
-  isAlphaNumericKey,
-  isNavigationKey,
-  keyCodes,
-  Uncertain,
-  UncertainCompatible,
-} from "@silevis/reactgrid";
-import { getVal } from "@hzab/list-render/src/common/utils";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { Popover } from "antd";
-
-export type OptionType = {
-  label: string;
-  value: string | number;
-  isDisabled?: boolean;
-};
-
-export interface BaseCell extends Cell {
-  selectedValue?: string;
-  value: string | number;
-  values: OptionType[];
-  isDisabled?: boolean;
-  commit?: string;
-}
-interface DIProps {
-  onCellChanged: (...args: any[]) => void;
-  cell: Record<string, any>;
-  isInEditMode?: boolean;
-}
-
-export const WidthWrapHoc = (WrapComponent: any) => {
-  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 commit: string;
-
-      try {
-        commit = getCellProperty(uncertainCell, "commit", "string");
-      } catch {
-        commit = "submit";
-      }
-
-      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;
-      }
-      const text = selectedValue || "";
-      return { ...uncertainCell, selectedValue, text, value, values, isDisabled, commit };
-    }
-
-    update(cell: Compatible<BaseCell>, cellToMerge: UncertainCompatible<BaseCell>): Compatible<BaseCell> {
-      const selectedValueFromText = cell.values.some((val: any) => val.value == cellToMerge.text)
-        ? cellToMerge.text
-        : cellToMerge?.text || undefined;
-
-      return this.getCompatibleCell({
-        ...cell,
-        selectedValue: selectedValueFromText,
-        commit: cellToMerge?.commit,
-      });
-    }
-
-    getClassName(cell: Compatible<BaseCell>, isInEditMode: boolean): string {
-      return "";
-    }
-    /** enableEditMode为true 时输入中文会报错 */
-    handleCompositionEnd(
-      cell: Compatible<BaseCell>,
-      eventData: any,
-    ): { cell: Compatible<BaseCell>; enableEditMode: boolean } {
-      return {
-        cell: {
-          ...cell,
-        },
-        enableEditMode: false,
-      };
-    }
-    /** render 不能抽出来组件，否则点击会失效 */
-    render(cell: any, isInEditMode: boolean, onCellChanged: (cell: any, commit: boolean) => void): React.ReactNode {
-      const [isOpen, setIsOpen] = useState<boolean>(false);
-      const datatypeId = cell?.columnId + cell?.rowId;
-      const [comValue, setComValue] = useState(cell?.text);
-      useEffect(() => {
-        // 处理下拉选项弹层失焦逻辑
-        function onClick() {
-          if ((window as any).gridEditId != datatypeId) {
-            setIsOpen(false);
-          }
-        }
-        document.addEventListener("click", onClick);
-        return () => {
-          document.removeEventListener("click", onClick);
-        };
-      }, []);
-      const echoValue = useMemo(() => {
-        if (!cell?.getField) {
-          return;
-        }
-        return getVal(
-          { ...cell?.getField(), enum: cell?.getField()?.enum || cell?.values },
-          { [cell?.getField().name]: cell.text },
-        );
-      }, [cell]);
-
-      const isValidator = useMemo(() => {
-        let flag = false;
-        let isVerify = false;
-        for (let it of cell?.validatorList || []) {
-          if (it?.pattern?.test(cell.text)) {
-            flag = true;
-          }
-          break;
-        }
-        isVerify = !flag && cell?.validatorList?.length > 0;
-
-        return isVerify;
-      }, [cell?.validatorList, cell.text]);
-
-      return (
-        <div
-          className="base-hoc"
-          onDoubleClick={(e) => {
-            if (cell?.nonEditable) {
-              return;
-            }
-            (window as any).preCell = cell;
-            setIsOpen(true);
-          }}
-        >
-          <WrapComponent
-            componentProps={{
-              style: { width: "100%", display: "flex", alignItems: "center" },
-              value: comValue,
-              options: cell.values,
-              onChange: (e) => {
-                cell["commit"] = "change";
-                const targetValue = e?.target?.value ?? e;
-                setComValue(targetValue);
-                onCellChanged(
-                  this.getCompatibleCell({
-                    ...cell,
-                    text: targetValue,
-                    selectedValue: targetValue,
-                  }),
-                  true,
-                );
-              },
-              onBlur: (e) => {
-                cell["commit"] = "submit";
-                if (isValidator) {
-                  cell["commit"] = "verify";
-                }
-                const targetValue = cell?.text;
-                onCellChanged(
-                  this.getCompatibleCell({
-                    ...cell,
-                    text: targetValue,
-                    selectedValue: targetValue,
-                  }),
-                  true,
-                );
-                setIsOpen(false);
-              },
-
-              onPointerDown: (e) => {
-                e.stopPropagation();
-              },
-              onKeyDown: (e) => {
-                if (isAlphaNumericKey(e.keyCode) || isNavigationKey(e.keyCode)) e.stopPropagation();
-              },
-              ...((cell?.getField && cell?.getField()["x-component-props"]) || {}),
-            }}
-            pattern={isOpen ? "" : "readPretty"}
-            cell={cell}
-          ></WrapComponent>
-          {isValidator && (
-            <Popover content="该字段不合法">
-              <InfoCircleOutlined style={{ cursor: "pointer" }} />
-            </Popover>
-          )}
-        </div>
-      );
-    }
-  }
-
-  return new createBaseCellTemplate();
-};

package/src/components/CellEditTable/common/childAntdComponent.ts

@@ -1,14 +0,0 @@
-import { DatePicker, Input, TimePicker } from "antd";
-
-export const childAntdComponent = {
-  "DatePicker.MonthPicker": DatePicker.MonthPicker,
-  "DatePicker.QuarterPicker": DatePicker.QuarterPicker,
-  "DatePicker.RangePicker": DatePicker.RangePicker,
-  "DatePicker.TimePicker": DatePicker.TimePicker,
-  "DatePicker.WeekPicker": DatePicker.WeekPicker,
-  "DatePicker.YearPicker": DatePicker.YearPicker,
-  "Input.Password": Input.Password,
-  "Input.Search": Input.Search,
-  "Input.TextArea": Input.TextArea,
-  "TimePicker.RangePicker": TimePicker.RangePicker,
-}

package/src/components/CellEditTable/common/utils.ts

@@ -1,257 +0,0 @@
-export const getNavigatorLanguage = (): string => navigator.language || "en-US";
-
-function getLocaleSeparators(locale: string) {
-  const testNumber = 123456.789;
-  const localeFormattedNumber = Intl.NumberFormat(locale).format(testNumber);
-
-  // Get the thousands separator of the locale
-  const thousandsSeparator = localeFormattedNumber.split("123")[1][0];
-
-  // Get the decimal separator of the locale
-  const decimalSeparator = localeFormattedNumber.split("123")[1][4];
-  return { thousandsSeparator, decimalSeparator };
-}
-export function parseLocaleNumber(stringNumber: string, locale = getNavigatorLanguage()): number {
-  if (!stringNumber.trim()) return NaN;
-  const { thousandsSeparator, decimalSeparator } = getLocaleSeparators(locale);
-  const normalizedStringNumber = stringNumber.replace(/\u00A0/g, " "); // Replace non-breaking space with normal space
-  const numberString = normalizedStringNumber
-    .replace(new RegExp(`[${thousandsSeparator}\\s]`, "g"), "") // Replace thousands separator and white-space
-    .replace(new RegExp(`\\${decimalSeparator}`, "g"), "."); // Replace decimal separator
-
-  const trimmedNumberString = numberString.replace(/^(?!-)\D+|\D+$/g, ""); // Remove characters before first and after last number, but keep negative sign
-  if (trimmedNumberString === null || trimmedNumberString.trim().length === 0) {
-    return NaN;
-  }
-  return Number(trimmedNumberString);
-}
-
-
-function isReactElement(value) {
-  return value !== null && typeof value === "object";
-}
-const getTitle = (item) => {
-  return typeof item?.title == "function"
-    ? isReactElement(item?.title())
-      ? item?.title()?.props.children
-      : String(item?.title()) || ""
-    : String(item?.title) || ""
-}
-
-export function convertColumnsToRows(columns, headerRowHeight = 40) {
-  // 获取所有叶子节点
-  const getLeaves = (cols) => {
-    return cols.reduce((acc, col) => {
-      if (col.children?.length) {
-        return [...acc, ...getLeaves(col.children)];
-      }
-      return [...acc, col];
-    }, []);
-  };
-
-  // 计算最大深度
-  const getDepth = (cols, depth = 1) => {
-    return cols.reduce((max, col) => {
-      if (col.children?.length) {
-        return Math.max(max, getDepth(col.children, depth + 1));
-      }
-      return Math.max(max, depth);
-    }, depth);
-  };
-
-  const leafColumns = getLeaves(columns);
-  const totalDepth = getDepth(columns);
-  const totalCols = leafColumns.length;
-
-  // 构建表头树
-  const buildTree = (cols, depth = 0) => {
-    return cols.map((col) => {
-      const hasChildren = col.children?.length > 0;
-      if (!hasChildren) {
-        return {
-          ...col,
-          rowspan: totalDepth - depth,
-          colspan: 1,
-          _depth: depth,
-          _isLeaf: true,
-        };
-      }
-      const leafCount = getLeaves(col.children).length;
-      return {
-        ...col,
-        rowspan: 1,
-        colspan: leafCount,
-        _depth: depth,
-        _isLeaf: false,
-        children: buildTree(col.children, depth + 1),
-      };
-    });
-  };
-
-  const tree = buildTree(columns, 0);
-
-  // 初始化行
-  const rows: any = Array.from({ length: totalDepth }, (_, i) => ({
-    rowId: `header-${i}`,
-    height: headerRowHeight,
-    cells: [],
-  }));
-
-
-  // 递归填充行
-  const fillRow = (nodes, rowIndex = 0) => {
-    nodes.forEach((node) => {
-      if (node._isLeaf) {
-        const cell = {
-          ...node,
-          type: node?.type == "rowSelection" ? "rowSelection" : "header",
-          text: getTitle(node),
-          dataIndex: node.dataIndex,
-          width: node.width,
-          rowspan: node.rowspan,
-          style: node?.type == "rowSelection" ? node?.style : {},
-        };
-        if (node.sorter) cell.sorter = node.sorter;
-        if (node.key) cell.key = node.key;
-        rows[rowIndex].cells.push(cell);
-      } else {
-        // 父节点：添加colspan
-        rows[rowIndex].cells.push({
-          ...node,
-          type: node?.type == "rowSelection" ? "rowSelection" : "header",
-          text: getTitle(node),
-          colspan: node.colspan,
-        });
-        if (node.children) {
-          fillRow(node.children, rowIndex + 1);
-        }
-      }
-    });
-  };
-
-  fillRow(tree, 0);
-
-  // 补全每一行的cell，使长度一致
-  rows.forEach((row, rowIndex) => {
-    const newCells = [];
-    let colIndex = 0;
-    let cellIndex = 0;
-
-    while (colIndex < totalCols) {
-      const currentCell = row.cells[cellIndex];
-
-      if (!currentCell) {
-        // 如果当前行没有足够的cell，从叶子节点补充
-        const leaf = leafColumns[colIndex];
-        newCells.push({
-          ...leaf,
-          type: leaf?.type == "rowSelection" ? "rowSelection" : "header",
-          text: getTitle(leaf),
-          dataIndex: leaf.dataIndex,
-          width: leaf.width,
-          rowspan: rowIndex === totalDepth - 1 ? 1 : undefined,
-        });
-        colIndex++;
-        cellIndex++;
-        continue;
-      }
-
-      const colspan = currentCell.colspan || 1;
-      const rowspan = currentCell.rowspan || 1;
-
-      // 检查当前cell是否应该出现在这一行
-      // 如果rowspan > 1，表示它跨多行，但只在第一行出现
-      if (rowspan > 1 && rowIndex > 0) {
-        // 这个cell不应该出现在当前行，跳过
-        colIndex += colspan;
-        cellIndex++;
-        continue;
-      }
-
-      // 如果当前cell有colspan，需要补全后面的空cell
-      newCells.push(currentCell);
-      colIndex += colspan;
-      cellIndex++;
-
-      // 如果colspan > 1，后面补充空cell
-      for (let i = 1; i < colspan; i++) {
-        newCells.push({
-          type: "header",
-          text: "",
-        });
-      }
-    }
-
-    row.cells = newCells;
-  });
-
-  // 最后一行的特殊处理：确保所有叶子节点都有对应的cell
-  const lastRow = rows[totalDepth - 1];
-  const lastRowCells = [];
-  let leafIndex = 0;
-
-  // 遍历所有叶子节点
-  leafColumns.forEach((leaf, index) => {
-    // 检查是否已经在lastRow中有对应的cell
-    const existingCell = lastRow.cells.find((cell) => cell.dataIndex === leaf.dataIndex && cell.text === leaf.title);
-
-    if (existingCell) {
-      lastRowCells.push(existingCell);
-    } else {
-      // 创建新的cell
-      lastRowCells.push({
-        ...leaf,
-        type: leaf?.type == "rowSelection" ? "rowSelection" : "header",
-        text: getTitle(leaf),
-        dataIndex: leaf.dataIndex,
-        width: leaf.width,
-        rowspan: 1,
-      });
-    }
-  });
-
-  lastRow.cells = lastRowCells;
-
-  // 确保所有行的cell数量等于totalCols
-  rows.forEach((row) => {
-    // 如果cell数量少于totalCols，补充空cell
-    while (row.cells.length < totalCols) {
-      row.cells.push({
-        type: "header",
-        text: "",
-      });
-    }
-  });
-
-  return rows;
-}
-
-
-export function flattenColumns(columns: any[]) {
-  const result: any[] = [];
-
-  function traverse(cols) {
-    cols.forEach((col) => {
-      if (col.children && col.children.length > 0) {
-        traverse(col.children);
-      } else {
-        // 创建新对象，只保留需要的属性
-        const { title, dataIndex, key, width, sorter, k, ...rest } = col;
-        result.push({
-          type: "Input",
-          dataIndex,
-          title,
-          ...(key && { key }),
-          ...(width && { width }),
-          ...(sorter && { sorter }),
-          ...(k && { k }),
-          // 如果需要保留其他属性
-          ...rest,
-        });
-      }
-    });
-  }
-
-  traverse(columns);
-  return result;
-}

package/src/components/CellEditTable/index.less

@@ -1,28 +0,0 @@
-.grid-container {
-  overflow: auto;
-  position: relative;
-  max-height: 80vh;
-
-
-
-  .ant-select {
-    width: 100% !important;
-  }
-
-
-  .reactgrid-content .rg-pane .rg-cell {
-    padding: 0;
-
-    >div:nth-child(1) {
-      padding: 0 4px;
-    }
-  }
-}
-
-.base-hoc {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}