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

package/src/table-render/index.jsx

@@ -17,7 +17,7 @@ import { getVal, getFieldList } from "../common/utils";
 import { handleReactions } from "../common/handleReactions";
 
 import { useEditTable, EditableCell } from "../components/Formily/FormilyEditTable";
-import CellEditTable from "../components/CellEditTable"
+import CellEditTable from "@hzab/edit-table"
 import "./index.less";
 
 const scenario = "table-render";
@@ -99,12 +99,133 @@ const TableRender = forwardRef(function (props, tableRef) {
     topProps: props.topProps,
   });
 
+  /** 处理childrn */
+  const handleChildColumns = (childColumns) => {
+    const fieldSchemas = formilyRef.current?.fields;
+    const { Slots = {} } = props;
+    return childColumns?.map((item, colIndex) => {
+      if (!(item.inTable !== false)) return
+
+      const { name, title } = item;
+      const comName = item["x-component"];
+      let _colConf = {};
+      if (props.config?.colConf && props.config?.colConf[item?.name]) {
+        _colConf = props.config?.colConf[item?.name];
+      }
+
+      let colRender = undefined;
+      if (Slots && Slots[item?.name]) {
+        colRender = function (text, record, index) {
+          const Slot = Slots[item?.name];
+          const slotProps = {
+            text,
+            record,
+            index,
+            field: { ...item, ...fieldSchemas?.[item?.name] },
+            fieldSchema: fieldSchemas?.[item?.name],
+          };
+          return <Slot {...slotProps} />;
+        };
+      } else {
+        colRender = function (text, record, index, ...args) {
+          const { width, ellipsis, emptyValue, showTags, showPrefixNode, showMode, enumRenderProps } = _colConf || {};
+          const schemaDefaultValue = fieldSchemas[item?.name]?.componentProps?.emptyValue;
+          const defaultValue = emptyValue ?? schemaDefaultValue ?? tableEmptyValue ?? "";
+
+          let val = getVal({ ...item, ...fieldSchemas[item?.name] }, record, {
+            fieldSchema: fieldSchemas?.[item?.name],
+          });
+
+          if (val === "" || val === undefined || val === null) {
+            val = defaultValue;
+          }
+
+          const content = (
+            <span className="inline-block-max-w" style={{ width }} title={ellipsis?.showTitle ? val : ""}>
+              {val}
+            </span>
+          );
+          if (ellipsis === true || (ellipsis && ellipsis?.showTitle != true)) {
+            return (
+              <Tooltip className="table-cell-ellipsis" {...ellipsis} title={val}>
+                {content}
+              </Tooltip>
+            );
+          }
+
+          if (showMode || showTags || showPrefixNode || (showPrefixNode !== false && comName === "Switch")) {
+            // field 通过 fieldSchemas 获取最新的 field 数据
+            let _showMode = showMode;
+            if (showTags) {
+              _showMode = SHOW_MODE_TYPES.tags;
+            } else if (showPrefixNode) {
+              _showMode = SHOW_MODE_TYPES.prefixNode;
+            }
+
+            return (
+              <EnumRender
+                showMode={_showMode}
+                value={_.get(record, item?.name)}
+                field={{ ...field, ...fieldSchemas?.[item?.name] }}
+                {...enumRenderProps}
+              />
+            );
+          }
+
+          return content;
+        };
+      }
+
+
+      let _title = isFunction(title) ? title() : title;
+      if (_colConf?.title) {
+        _title = isFunction(_colConf?.title) ? _colConf?.title() : _colConf?.title;
+      }
+      const decoratorProps = item["x-decorator-props"] || {};
+      if (decoratorProps.tooltip) {
+        _title = (
+          <span className="col-title-tooltip-wrap inline-block-max-w">
+            {_title}
+            <Tooltip className="col-title-tooltip" title={decoratorProps.tooltip}>
+              <QuestionCircleOutlined className="col-title-tooltip-icon" />
+            </Tooltip>
+          </span>
+        );
+      }
+      const childSelectList = fieldSchemas?.[item?.name]?.dataSource?.map((el) => ({
+        ...el,
+        label: el?.[item?.["x-component-props"]?.["fieldNames"]?.["label"]] || el?.label,
+        value: el?.[item?.["x-component-props"]?.["fieldNames"]?.["value"]] || el?.value,
+      }))
+      return {
+        getField: () => item,
+        editable: true,
+        ..._colConf,
+        onCell: (record, rowIndex, ci) =>
+          _colConf?.onCell?.({ ...record, _field: { ...item, ...(fieldSchemas?.[item?.name] || {}) } }, rowIndex, ci) || {},
+        // 函数式传入，解决 title ReactNode 传入报错问题（table 组件内部对 columns 进行 lodash.deepClone 导致 ReactNode 变成对象无法正常渲染） Uncaught TypeError: this.queryFeedbacks is not a function
+        title: () => _title,
+        key: item?.name,
+        dataIndex: item?.name,
+        type: item["x-validator"] == "number" ? "Number" : comName,
+        validatorList: item["x-validator"] || [],
+        nonEditable: editMode != "cell",
+        values: item?.enum || childSelectList || [],
+        cellProps: item.cellProps,
+        children: handleChildColumns(item?.children),
+        render: getColRender(colRender),
+      }
+
+    })
+
+
+  }
   useEffect(() => {
     if (!(props.schema && props.schema.properties)) {
       return;
     }
     const fieldList = getFieldList(props.schema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
-    const columns = [];
+    let columns = [];
 
     // 序号列
     if (orderColType === "page") {
@@ -130,123 +251,7 @@ const TableRender = forwardRef(function (props, tableRef) {
       scope: props.schemaScope,
       formilyRef,
     });
-
-    _fieldList.forEach((field, colIndex) => {
-      const fieldSchemas = formilyRef.current?.fields;
-      if (field.inTable !== false) {
-        const { name, title } = field;
-        const comName = field["x-component"];
-
-        let _colConf = {};
-
-        if (props.config?.colConf && props.config?.colConf[name]) {
-          _colConf = props.config?.colConf[name];
-        }
-
-        let colRender = undefined;
-        if (Slots && Slots[name]) {
-          colRender = function (text, record, index) {
-            const Slot = Slots[name];
-            const slotProps = {
-              text,
-              record,
-              index,
-              field: { ...field, ...fieldSchemas?.[name] },
-              fieldSchema: fieldSchemas?.[name],
-            };
-            return <Slot {...slotProps} />;
-          };
-        } else {
-          colRender = function (text, record, index, ...args) {
-            const { width, ellipsis, emptyValue, showTags, showPrefixNode, showMode, enumRenderProps } = _colConf || {};
-            const schemaDefaultValue = fieldSchemas[name]?.componentProps?.emptyValue;
-            const defaultValue = emptyValue ?? schemaDefaultValue ?? tableEmptyValue ?? "";
-
-            let val = getVal({ ...field, ...fieldSchemas[name] }, record, {
-              fieldSchema: fieldSchemas?.[name],
-            });
-
-            if (val === "" || val === undefined || val === null) {
-              val = defaultValue;
-            }
-
-            const content = (
-              <span className="inline-block-max-w" style={{ width }} title={ellipsis?.showTitle ? val : ""}>
-                {val}
-              </span>
-            );
-            if (ellipsis === true || (ellipsis && ellipsis?.showTitle != true)) {
-              return (
-                <Tooltip className="table-cell-ellipsis" {...ellipsis} title={val}>
-                  {content}
-                </Tooltip>
-              );
-            }
-
-            if (showMode || showTags || showPrefixNode || (showPrefixNode !== false && comName === "Switch")) {
-              // field 通过 fieldSchemas 获取最新的 field 数据
-              let _showMode = showMode;
-              if (showTags) {
-                _showMode = SHOW_MODE_TYPES.tags;
-              } else if (showPrefixNode) {
-                _showMode = SHOW_MODE_TYPES.prefixNode;
-              }
-
-              return (
-                <EnumRender
-                  showMode={_showMode}
-                  value={_.get(record, name)}
-                  field={{ ...field, ...fieldSchemas?.[name] }}
-                  {...enumRenderProps}
-                />
-              );
-            }
-
-            return content;
-          };
-        }
-
-        let _title = isFunction(title) ? title() : title;
-        if (_colConf?.title) {
-          _title = isFunction(_colConf?.title) ? _colConf?.title() : _colConf?.title;
-        }
-        const decoratorProps = field["x-decorator-props"] || {};
-        if (decoratorProps.tooltip) {
-          _title = (
-            <span className="col-title-tooltip-wrap inline-block-max-w">
-              {_title}
-              <Tooltip className="col-title-tooltip" title={decoratorProps.tooltip}>
-                <QuestionCircleOutlined className="col-title-tooltip-icon" />
-              </Tooltip>
-            </span>
-          );
-        }
-        const selectList = fieldSchemas?.[name]?.dataSource?.map((el) => ({
-          ...el,
-          label: el?.[field?.["x-component-props"]?.["fieldNames"]?.["label"]] || el?.label,
-          value: el?.[field?.["x-component-props"]?.["fieldNames"]?.["value"]] || el?.value,
-        }))
-
-        columns.push({
-          // field, // HACK: 直接传入 field 在 title 传入 ReactNode，内部深克隆导致页面报错白屏。使用函数获取解决
-          getField: () => field,
-          editable: true,
-          ..._colConf,
-          onCell: (record, rowIndex, ci) =>
-            _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex, ci) || {},
-          // 函数式传入，解决 title ReactNode 传入报错问题（table 组件内部对 columns 进行 lodash.deepClone 导致 ReactNode 变成对象无法正常渲染） Uncaught TypeError: this.queryFeedbacks is not a function
-          title: () => _title,
-          key: name,
-          dataIndex: name,
-          type: field["x-validator"] == "number" ? "Number" : comName,
-          nonEditable: editMode != "cell",
-          values: field?.enum || selectList || [],
-          cellProps: field.cellProps,
-          children: field?.children,
-          render: getColRender(colRender),
-        });
-      }
-    });
+    columns = columns.concat(handleChildColumns(_fieldList))
 
     if (props.hasAction !== false) {
       const { hasEdit, hasDel, hasDelTips, hasDetail = false } = props.config || {};

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

@@ -1,202 +0,0 @@
-// import * as React from "react";
-
-// import {
-//   Cell,
-//   CellTemplate,
-//   Compatible,
-//   getCellProperty,
-//   getCharFromKey,
-//   isAlphaNumericKey,
-//   keyCodes,
-//   Uncertain,
-//   UncertainCompatible,
-// } from "@silevis/reactgrid";
-// import { getVal } from "../../../common/utils";
-
-// import { Select } from "antd";
-// import { WidthWrap } from "./widthWrap";
-
-// export type OptionType = {
-//   label: string;
-//   value: string;
-//   isDisabled?: boolean;
-// };
-
-// export interface SelectCell extends Cell {
-//   type: "Select";
-//   selectedValue?: string;
-//   value: string | number;
-//   values: OptionType[];
-//   isDisabled?: boolean;
-//   isOpen?: boolean;
-//   inputValue?: string;
-// }
-
-// export class createSelectCellTemplate implements CellTemplate<SelectCell> {
-//   getCompatibleCell(uncertainCell: Uncertain<SelectCell>): Compatible<SelectCell> {
-//     let selectedValue: string | undefined;
-//     try {
-//       selectedValue = getCellProperty(uncertainCell, "selectedValue", "number");
-//     } catch {
-//       selectedValue = undefined;
-//     }
-//     const values = getCellProperty(uncertainCell, "values", "object");
-//     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;
-//     }
-
-//     let isOpen: boolean;
-//     try {
-//       isOpen = getCellProperty(uncertainCell, "isOpen", "boolean");
-//     } catch {
-//       isOpen = false;
-//     }
-
-//     const text = selectedValue || "";
-
-//     return { ...uncertainCell, selectedValue, text, value, isOpen, values, isDisabled, inputValue };
-//   }
-
-//   update(cell: Compatible<SelectCell>, cellToMerge: UncertainCompatible<SelectCell>): Compatible<SelectCell> {
-//     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<SelectCell>, isInEditMode: boolean): string {
-//     const isOpen = cell.isOpen ? "open" : "closed";
-//     return `${cell.className ? cell.className : ""}${isOpen}`;
-//   }
-
-//   handleKeyDown(
-//     cell: Compatible<SelectCell>,
-//     keyCode: number,
-//     ctrl: boolean,
-//     shift: boolean,
-//     alt: boolean,
-//     key: string,
-//     capsLock: boolean,
-//   ): { cell: Compatible<SelectCell>; 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<SelectCell>,
-//     eventData: any,
-//   ): { cell: Compatible<SelectCell>; enableEditMode: boolean } {
-//     return {
-//       cell: {
-//         ...cell,
-//         inputValue: eventData,
-//         isOpen: !cell.isOpen,
-//       },
-//       enableEditMode: false,
-//     };
-//   }
-
-//   render(
-//     cell: Compatible<SelectCell>,
-//     isInEditMode: boolean,
-//     onCellChanged: (cell: Compatible<SelectCell>, commit: boolean) => void,
-//   ): React.ReactNode {
-//     return (
-//       <SelectInput
-//         onCellChanged={(cell) => onCellChanged(this.getCompatibleCell(cell), true)}
-//         cell={cell}
-//         isInEditMode={isInEditMode}
-//       />
-//     );
-//   }
-// }
-
-// interface DIProps {
-//   onCellChanged: (...args: any[]) => void;
-//   cell: Record<string, any>;
-//   isInEditMode?: boolean;
-// }
-
-// const SelectInput: React.FC<DIProps> = ({ onCellChanged, cell, isInEditMode }) => {
-//   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-//   const datatypeId = cell?.columnId + cell?.rowId;
-//   React.useEffect(() => {
-//     // 处理下拉选项弹层失焦逻辑
-//     function onClick() {
-//       if (window.gridEditId != datatypeId) {
-//         setIsOpen(false);
-//       }
-//     }
-//     document.addEventListener("click", onClick);
-//     return () => {
-//       document.removeEventListener("click", onClick);
-//     };
-//   }, []);
-
-//   return (
-//     <div
-//       style={{ width: "100%", height: "100%" }}
-//       onDoubleClick={(e) => {
-//         setIsOpen(true);
-//       }}
-//     >
-//       {isOpen ? (
-//         <div onPointerDown={(e) => e.stopPropagation()}>
-//           <Select
-//             open={isOpen}
-//             style={{ width: "100%" }}
-//             value={cell?.selectedValue}
-//             options={cell.values}
-//             onChange={(e) => {
-//               onCellChanged({ ...cell, selectedValue: e });
-//             }}
-//           ></Select>
-//         </div>
-//       ) : (
-//         <div style={{ height: "100%" }}>
-//           {getVal(cell?.getField(), { [cell?.getField().name]: cell?.selectedValue })}
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-
-// export const SelectTemplate = WidthWrap(Select);