@hzab/list-render 1.10.21-alpha.0 → 1.10.21-alpha.2

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

@@ -0,0 +1,257 @@
+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/Template/widthWrap.tsx

@@ -0,0 +1,259 @@
+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()}>
+            <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" }}
+        onDoubleClick={(e) => {
+          console.log(cell,"c222ellcellcellcellcell");
+          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" }}
+              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" }}>{echoValue}</div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return new createBaseCellTemplate();
+};

package/src/components/CellEditTable/index.less

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