@hzab/list-render 1.10.20-alpha.6 → 1.10.21-alpha.0

package/src/components/Formily/FormilyEditTable/index.tsx

@@ -1,217 +0,0 @@
-import React, { useState, useCallback, useRef } from "react";
-import { Button } from "antd";
-import { createSchemaField } from "@formily/react";
-import { cloneDeep } from "lodash";
-
-import { useSlotsComponents } from "../useComponents";
-
-import { Item } from "./type";
-
-export const useEditTable = (props) => {
-  const { rowFormMapRef, editingInofRef, topProps, idKey, columns, onEditSubmit } = props;
-  const { editMode = "modal", Slots } = topProps || {};
-  const preIdRef = useRef("");
-  const preIdxRef = useRef(null);
-  const preRecordRef = useRef({});
-
-  // 创建 formily 表单相关参数
-  /** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
-  const schemaScopeRef = useRef<{ _$tempData: Object }>();
-  if (props.schemaScope && !schemaScopeRef.current) {
-    schemaScopeRef.current = props.schemaScope;
-  } else if (!schemaScopeRef.current) {
-    schemaScopeRef.current = { _$tempData: {} };
-  }
-  if (!schemaScopeRef.current?._$tempData) {
-    schemaScopeRef.current._$tempData = {};
-  }
-
-  const components = useSlotsComponents(topProps);
-
-  const SchemaField = useCallback(
-    createSchemaField({
-      components,
-      scope: {
-        scenario: "tableRowForm",
-        ...schemaScopeRef.current,
-      },
-    }),
-    [],
-  );
-
-  // 是否可编辑状态逻辑处理
-  const [editingId, setEditingId] = useState("");
-  // 当前编辑的字段
-  const [editingKey, setEditingKey] = useState("");
-  /** 判断当前 行 是否处于编辑状态 */
-  const isEditing = (record: Item) => record[idKey] === editingId;
-  /** 判断当前 单元格 是否处于编辑状态 */
-  const isEditingCell = (key) => key === editingKey;
-  const editingFiledRef = useRef(null);
-
-  //   useEffect(() => {
-  //     if (editingId || editingKey) {
-  //       // HACK: try catch 解决 select 等表单项 focus 报错问题
-  //       try {
-  //         // HACK: setTimeout 解决执行先后顺序导致无法正常获取 dom 问题
-  //         setTimeout(() => {
-  //           editingFiledRef.current?.current?.focus?.();
-  //         }, 0);
-  //       } catch (error) {}
-  //     }
-  //   }, [editingId, editingKey]);
-
-  /**
-   * 点击编辑按钮
-   * @param record
-   */
-  const onEdit = async (record: Partial<Item> & { key: React.Key }, key, opt = { fieldRef: null, index: null }) => {
-    if (editMode == "modal") {
-      return;
-    }
-    const { fieldRef } = opt || {};
-    preRecordRef.current = record;
-    const id = record[idKey];
-    editingInofRef.current.editingRowId = id;
-    editingInofRef.current.editingKey = key;
-    const rowForm = rowFormMapRef.current.get(id);
-    rowForm.readPretty = false;
-    editingFiledRef.current = fieldRef;
-    rowForm.values = record;
-    rowForm?.setValues(record);
-    preIdRef.current = id;
-    preIdxRef.current = opt.index;
-    setEditingId(id);
-    setEditingKey(key);
-  };
-
-  /**
-   * 点击编辑按钮
-   * @param record
-   */
-  const onEditAFetch = async (record: Partial<Item> & { key: React.Key }, key, opt) => {
-    if (editMode == "modal") {
-      return;
-    }
-    const value = await (props.onEdit && props.onEdit(record));
-    preRecordRef.current = value;
-    preIdRef.current = record[idKey];
-    preIdxRef.current = opt.index;
-    onEdit.call(this, value, key, opt);
-  };
-
-  function onCancel() {
-    onReset();
-    setEditingId("");
-    setEditingKey("");
-    preRecordRef.current = {};
-    preIdRef.current = "";
-    editingFiledRef.current = null;
-  }
-
-  function onReset() {
-    const preRowForm = rowFormMapRef.current.get(preIdRef.current);
-    if (preRowForm) {
-      // disabled 后设置会导致 readPretty 设置失效
-      preRowForm.disabled = true;
-      preRowForm.readPretty = true;
-      // 取消数据重置为编辑前数据
-      preRowForm.reset();
-      preRowForm.values = preRecordRef.current;
-      preRecordRef.current = {};
-      editingInofRef.current.editingRowId = "";
-      editingInofRef.current.editingKey = "";
-    }
-  }
-
-  /**
-   * 保存数据
-   * field 当前编辑的项
-   * 当前数据的 id
-   */
-  const onEditSave = async ({ field, id, dataIndex }) => {
-    const rowForm = rowFormMapRef.current.get(id);
-    try {
-      // 点击保存，数据抛出
-      (await rowForm?.validate()) as Item;
-      onEditSubmit && (await onEditSubmit(rowForm.values, { field, id, dataIndex }));
-      // 清除编辑目标
-      setEditingId("");
-      setEditingKey("");
-      rowForm.disabled = true;
-      rowForm.readPretty = true;
-      onReset();
-    } catch (errInfo) {
-      console.error("Validate Failed:", errInfo);
-    }
-  };
-
-  const mergedColumns = cloneDeep(columns)?.map((col) => {
-    const isActions = col.key === "_$actions";
-    if (!col.editable && !isActions) {
-      return col;
-    }
-
-    const resCol = {
-      ...col,
-      onCell: (record: Item, ...args) => {
-        let editing = false;
-        if (editMode === "cell") {
-          editing = isEditing(record) && isEditingCell(col.dataIndex);
-        } else {
-          editing = isEditing(record);
-        }
-        return {
-          ...(col.onCell ? col.onCell(record, ...args) : {}),
-          record,
-          components,
-          SchemaField,
-          // 函数获取解决 cloneDepp 报错问题
-          getField: col.getField,
-          dataIndex: col.dataIndex,
-          title: col.title,
-          editable: col.editable,
-          editing,
-          topProps: props.topProps,
-          onEdit: onEditAFetch,
-          onEditSave,
-          onCancel,
-        };
-      },
-    };
-    // 操作列编辑态改成保存、取消按钮
-    if (isActions) {
-      resCol.render = (record, index) => {
-        // 编辑态操作栏变成保存和取消按钮
-        if (editMode === "line" && record[idKey] === editingId) {
-          return (
-            <div className="edit-table-actions">
-              <Button
-                type="link"
-                onClick={() => {
-                  onEditSave({ field: undefined, dataIndex: undefined, id: record[idKey] });
-                }}
-              >
-                保存
-              </Button>
-              <Button type="text" onClick={onCancel}>
-                取消
-              </Button>
-            </div>
-          );
-        }
-        return col.render(record, index);
-      };
-    }
-    return resCol;
-  });
-
-  return {
-    onEditAFetch,
-    onEdit,
-    onEditSave,
-    onEditCancel: onCancel,
-    SchemaField,
-    mergedColumns,
-  };
-};

package/src/components/Formily/FormilyEditTable/type.d.ts

@@ -1,6 +0,0 @@
-export interface Item {
-  id: string;
-  key: string;
-}
-
-export type EditMode = "modal" | "line" | "line-cell" | "cell" | "table-edit" | "table-edit-show";

package/src/components/Formily/FormilyEditTable/useTableFormilyContext.ts

@@ -1,17 +0,0 @@
-import { createContext, useContext } from "react";
-
-interface TableFormilyContextType {
-  rowFormMapRef;
-  editingInofRef;
-}
-
-// 创建行上下文
-export const TableFormilyContext = createContext<TableFormilyContextType | null>(null);
-
-export const useTableFormilyContext = () => {
-  const context = useContext(TableFormilyContext);
-  if (!context) {
-    throw new Error("useTableFormilyContext must be used within TableFormilyContext.Provider");
-  }
-  return context;
-};

package/src/components/Formily/SchemaToArrayTable.ts

@@ -1,270 +0,0 @@
-import { cloneDeep } from "lodash";
-import { nanoidNumALetters } from "@hzab/utils/src/nanoid";
-import { Schema } from "@formily/json-schema";
-
-/**
- * 普通的 schema 表单字段转为自增表格的列
- * @returns
- */
-export class SchemaToArrayTable {
-  _schema: {
-    form: {};
-    schema: Schema;
-  };
-  config = {};
-  topProps = {};
-  constructor(params) {
-    const { schema, config, topProps } = params || {};
-    this._schema = cloneDeep(schema);
-    this.config = config || {};
-    this.topProps = topProps || {};
-  }
-  /**
-   * 处理 schema，把普通的 schema 表单字段转为自增表格的列
-   * @returns
-   */
-  handleSchema(schema = this._schema, opt?) {
-    const { isDargTable, hasAction, hasIndex } = opt || this.config;
-    const schemaTpl = this.getSchemaTpl(this.config);
-    const properties: Record<string, any> = {};
-    // schema 布局信息
-    schemaTpl.form = {
-      ...schema.form,
-    };
-
-    // 添加拖拽排序列
-    isDargTable && this.pushItem(properties, this.getSortTpl());
-    // 添加序号
-    hasIndex && this.pushItem(properties, this.getIndexTpl());
-    // 处理表单数据列
-    Object.keys(schema.schema?.properties).forEach((key, i) => {
-      const it = schema.schema?.properties[key];
-      // @ts-ignore
-      if (it.inTable === false) {
-        return;
-      }
-      this.pushItem(properties, this.handleCol(it));
-    });
-    // 添加操作列
-    hasAction !== false && this.pushItem(properties, this.getActionsTpl());
-    // 添加移动排序操作列
-    // isDargTable && this.pushItem(properties, this.getMoveActionsTpl());
-
-    schemaTpl.schema.properties.arrayTable.items.properties = properties;
-
-    return schemaTpl;
-  }
-  /**
-   * 处理列的数据
-   * @param {*} item
-   * @param {*} idx
-   * @returns
-   */
-  handleCol(item, idx = 0) {
-    const id = `${item.name}-${nanoidNumALetters()}`;
-    const _item = cloneDeep(item);
-    _item.title = "";
-    return {
-      type: "void",
-      "x-component": "ArrayTable.Column",
-      "x-component-props": {
-        title: item.title,
-      },
-      "x-designable-id": id,
-      name: id,
-      "x-index": idx,
-      properties: {
-        [item.name]: _item,
-      },
-    };
-  }
-  /**
-   * 在 properties 中指定序号添加一项
-   * @param {*} properties
-   * @param {*} item
-   * @param {*} idx
-   */
-  addItem(properties, item, idx) {
-    // 数组存放实际顺序
-    const arr = [];
-    // 获取当前排序的数组
-    Object.keys(properties).forEach((key) => {
-      const it = properties[key];
-      arr[it["x-index"]] = it;
-    });
-    // 在指定位置添加项
-    arr.splice(idx, 0, item);
-    // 根据数组顺序更新源数据
-    arr.forEach((it) => {
-      properties[it.name] = it;
-    });
-    return properties;
-  }
-  /**
-   * 在 properties 中添加一项
-   * @param {*} properties
-   * @param {*} item
-   */
-  pushItem(properties, item) {
-    properties[item.name] = cloneDeep(item);
-    properties[item.name]["x-index"] = Object.keys(properties).length - 1;
-    return properties;
-  }
-  /**
-   * 获取 schema 模板字符串
-   * @returns
-   */
-  getSchemaTpl(config) {
-    const { onSortStart, onSortEnd } = config || {};
-    return {
-      form: {},
-      schema: {
-        type: "object",
-        properties: {
-          arrayTable: {
-            type: "array",
-            "x-decorator": "FormItem",
-            "x-component": "ArrayTable",
-            "x-validator": [],
-            "x-component-props": {
-              // TODO: ts
-              // @ts-ignore
-              ...this.topProps.tableProps,
-              pagination: false,
-              onSortStart(...args) {
-                onSortStart && onSortStart(...args);
-              },
-              onSortEnd(...args) {
-                onSortEnd && onSortEnd(...args);
-              },
-            },
-            "x-decorator-props": {},
-            "x-designable-id": "arrayTable",
-            "x-index": 0,
-            items: {
-              type: "object",
-              "x-designable-id": "gbmerqeme8g",
-              properties: {
-                // 自增表格列
-              },
-            },
-            // 新增按钮
-            properties: {
-              // cs1marpxdon: {
-              //   type: "void",
-              //   title: "Addition",
-              //   "x-component": "ArrayTable.Addition",
-              //   "x-designable-id": "cs1marpxdon",
-              //   "x-index": 0,
-              // },
-            },
-          },
-        },
-        "x-designable-id": "un3pxnx4ong",
-      },
-    };
-  }
-  /**
-   * 获取排序列模板字符串
-   * @returns
-   */
-  getSortTpl() {
-    return {
-      name: "sort",
-      type: "void",
-      "x-component": "ArrayTable.Column",
-      "x-component-props": {
-        title: "",
-      },
-      "x-designable-id": "l3z7t4ff7zw",
-      "x-index": 0,
-      properties: {
-        g0cxfnsnevh: {
-          type: "void",
-          "x-component": "ArrayTable.SortHandle",
-          "x-designable-id": "g0cxfnsnevh",
-          "x-index": 0,
-        },
-      },
-    };
-  }
-  getIndexTpl() {
-    return {
-      name: "index",
-      type: "void",
-      "x-component": "ArrayTable.Column",
-      "x-component-props": {
-        title: "序号",
-      },
-      "x-designable-id": "4ps6b3ut7ft",
-      properties: {
-        TableIndex: {
-          type: "void",
-          "x-component": "TableIndex",
-          "x-designable-id": "TableIndex",
-          "x-index": 0,
-        },
-      },
-    };
-  }
-  /**
-   * 获取操作列模板字符串
-   * @returns
-   */
-  getActionsTpl() {
-    return {
-      name: "actions",
-      type: "void",
-      "x-component": "ArrayTable.Column",
-      "x-component-props": {
-        title: "操作",
-      },
-      "x-designable-id": "actions",
-      properties: {
-        tableActions: {
-          type: "void",
-          "x-component": "TableActions",
-          "x-designable-id": "tableActions",
-          "x-index": 0,
-        },
-      },
-    };
-  }
-  /**
-   * 获取移动排序操作列模板字符串
-   * @returns
-   */
-  getMoveActionsTpl() {
-    return {
-      name: "move-actions",
-      type: "void",
-      "x-component": "ArrayTable.Column",
-      "x-component-props": {
-        title: "",
-      },
-      "x-designable-id": "move-actions",
-      properties: {
-        xynjkn08lvp: {
-          type: "void",
-          "x-component": "ArrayTable.Remove",
-          "x-designable-id": "xynjkn08lvp",
-          "x-index": 0,
-        },
-        gvl20uo8m8q: {
-          type: "void",
-          "x-component": "ArrayTable.MoveDown",
-          "x-designable-id": "gvl20uo8m8q",
-          "x-index": 1,
-        },
-        "4c8wbndejhy": {
-          type: "void",
-          "x-component": "ArrayTable.MoveUp",
-          "x-designable-id": "4c8wbndejhy",
-          "x-index": 2,
-        },
-      },
-    };
-  }
-}
-
-export default SchemaToArrayTable;

package/src/components/Formily/useComponents.tsx

@@ -1,82 +0,0 @@
-import { useMemo } from "react";
-import { Card, Slider, Rate } from "antd";
-import { useField, useFieldSchema } from "@formily/react";
-
-import { antdComponents, customComponents } from "@hzab/form-render";
-import { getFormilyGlobalComponents } from "@hzab/utils/src/formily/global-components";
-import { useIndex, useRecord } from "@hzab/form-render/src/components/ArrayBase";
-
-export const useComponents = (props) => {
-  const components = useMemo(
-    () => ({
-      // Upload,
-      Card,
-      Slider,
-      Rate,
-      ...antdComponents,
-      ...customComponents,
-      ...getFormilyGlobalComponents(),
-      ...props.components,
-    }),
-    [props.components],
-  );
-
-  return components;
-};
-
-export const useSlotsComponents = (props) => {
-  const { Slots = {} } = props;
-
-  const components = useComponents(props);
-
-  const slotsComponents = useMemo(() => {
-    const formilyComponents = {
-      ...components,
-    };
-
-    const tComs = {
-      ...formilyComponents,
-    };
-
-    Object.keys(formilyComponents || {}).forEach((key) => {
-      formilyComponents[key] = function (cProps) {
-        const field = useField();
-        // useIndex 适用于 ArrayTable 默认表单从 props 获取
-        const index = useIndex() ?? cProps.index;
-        // useRecord 适用于 ArrayTable 默认表单从 props 获取
-        const record = useRecord() ?? cProps.record;
-
-        const fieldSchema = useFieldSchema();
-        const name = fieldSchema.name;
-        const comName = fieldSchema["x-component"];
-        const OrigCom = tComs[key];
-
-        // HACK: ArrayTable.SortHandle 类似写法问题修复
-        Object.setPrototypeOf(formilyComponents[key], OrigCom);
-
-        // 插槽
-        const SCom = Slots[name];
-        if (key === comName && SCom) {
-          const slotProps = {
-            ...cProps,
-            index,
-            record,
-            text: cProps.value || cProps.text,
-            field: field,
-            fieldSchema: fieldSchema,
-            /** 原始组件 */
-            OrigCom,
-          };
-          return <SCom {...slotProps} />;
-        }
-
-        return <OrigCom {...cProps} />;
-      };
-    });
-    return formilyComponents;
-  }, [components]);
-
-  return slotsComponents;
-};
-
-export default useComponents;

package/src/table-render/TableActions.tsx

@@ -1,95 +0,0 @@
-import { Form, Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
-
-/**
- * 编辑按钮隐藏
- */
-export const editModeHideList = ["cell", "line-cell"];
-
-export function TableActions(props) {
-  const {
-    text,
-    record,
-    index,
-    topProps,
-    tableConf,
-    colConf,
-    onEditByTable,
-    onDetail,
-    onEdit,
-    onDel,
-    onSearch,
-    getList,
-  } = props;
-  const { idKey = "id", i18n, Slots, editMode = "modal" } = topProps || {};
-  const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
-
-  const slotProps = { text, record, index, onEdit: onEdit, onDel: onDel, onSearch, getList };
-
-  if (Slots?.tableActionsSlot) {
-    return <Slots.tableActionsSlot {...slotProps} />;
-  }
-
-  const { hasEdit, hasDel, hasDelTips, hasDetail = false } = tableConf || {};
-
-  // 编辑按钮权限
-  const _hasEdit =
-    !editModeHideList.includes(editMode) &&
-    (hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false);
-
-  // 详情按钮权限
-  const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
-
-  // 删除按钮权限
-  const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
-
-  // 删除按钮提示
-  const delTips =
-    hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
-
-  return (
-    <div style={{ width: colConf?.width, maxWidth: "100%" }}>
-      {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
-      {_hasDetail ? (
-        <Button
-          type="link"
-          onClick={() => {
-            onDetail && onDetail(record, index);
-          }}
-        >
-          {tableDetail}
-        </Button>
-      ) : null}
-      {_hasEdit ? (
-        <Button
-          type="link"
-          onClick={() => {
-            onEdit && onEdit(record, index);
-            if (editMode == "line") {
-              // 整行编辑，编辑按钮在操作列的模式下表单数据回填
-              return onEditByTable(record, record[idKey]);
-            }
-          }}
-        >
-          {tableEdit}
-        </Button>
-      ) : null}
-      {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
-      {_hasDel ? (
-        <Popconfirm
-          placement="topRight"
-          title={delTips}
-          onConfirm={() => {
-            onDel && onDel(record, index);
-          }}
-        >
-          <Button type="link" danger>
-            {tableDel}
-          </Button>
-        </Popconfirm>
-      ) : null}
-      {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
-    </div>
-  );
-}
-
-export default TableActions;