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

package/src/EditArrayTable/index.tsx

@@ -1,198 +0,0 @@
-import { useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from "react";
-import { Button } from "antd";
-import { cloneDeep } from "lodash";
-import { Schema } from "@formily/json-schema";
-
-import FormRender from "@hzab/form-render";
-import { useIndex } from "@hzab/form-render/src/components/ArrayBase";
-import SchemaToArrayTable from "../components/Formily/SchemaToArrayTable";
-
-import "./index.less";
-
-export interface IEditArrayTableProps {
-  topProps: {
-    editMode?: string;
-    fetchOnEdit?: boolean;
-    hasAction?: boolean;
-    hideMessage?: boolean;
-  };
-  config?: {
-    isDargTable?: boolean;
-    orderColType?: string;
-  };
-  schema: Schema;
-  list: Object[];
-  components: Object[];
-  schemaScope: Object;
-  getList: () => Promise<{ list: any[] }>;
-  onEditSubmit: (val) => void;
-  handleMessage: (msg) => void;
-  query: {
-    pageNum: number;
-    pageSize: number;
-  };
-}
-
-// TODO: 插槽、权限、拖拽、序号、行选择、列显隐、操作列
-export const EditArrayTable = forwardRef(function (props: IEditArrayTableProps, parentRef) {
-  const { topProps, schemaScope, getList, handleMessage, config, query } = props;
-  const { hasAction, editMode } = topProps || {};
-  const { orderColType = "page" } = config || {};
-
-  console.log("config", config, query);
-
-  const [editing, setEditing] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const formRef = useRef(null);
-  const preValRef = useRef(null);
-  const queryRef = useRef(props.query);
-
-  queryRef.current = query;
-
-  const schema = useMemo(() => {
-    const schemaToArrayTable = new SchemaToArrayTable({
-      schema: props.schema,
-      option: { hasAction, ...config },
-    });
-    return schemaToArrayTable.handleSchema();
-  }, [props.schema]);
-
-  const components = useMemo(() => {
-    return {
-      TableActions() {
-        return <div>TableActions</div>;
-      },
-      TableIndex() {
-        const index = useIndex();
-        // 序号列
-        if (orderColType === "page") {
-          return index + 1;
-        } else if (orderColType == "all") {
-          const { pageSize = 10, pageNum = 1 } = queryRef.current || {};
-          // 当前页数减1乘以每一页页数再加当前页序号+1
-          return (pageNum - 1) * pageSize + (index + 1);
-        }
-        return null;
-      },
-      ...props.components,
-    };
-  }, [props.components, props.query.pageNum, props.query.pageSize]);
-
-  useImperativeHandle(
-    parentRef,
-    () => ({
-      formRef,
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    if (formRef.current) {
-      setVal(props.list);
-    }
-  }, [props.list]);
-
-  function getVal() {
-    return cloneDeep(formRef.current.formRender.values.arrayTable);
-  }
-
-  function setVal(val) {
-    // formRef.current.formRender.reset();
-    formRef.current.formRender.setValues({
-      arrayTable: cloneDeep(val),
-    });
-  }
-
-  async function onEdit() {
-    setLoading(true);
-    if (topProps.fetchOnEdit !== false) {
-      // 获取当前列表最新数据
-      return getList()
-        .then((res) => {
-          handleEdit(res?.list);
-          return res;
-        })
-        .catch((err) => {
-          console.error("err", err);
-          handleMessage(err._message);
-          return Promise.reject(err);
-        });
-    } else {
-      const value = getVal();
-      handleEdit(value);
-      return Promise.resolve(value);
-    }
-  }
-
-  async function handleEdit(data) {
-    // cloneDeep 避免受影响
-    preValRef.current = cloneDeep(data);
-    setVal(data);
-    setEditing(true);
-    formRef.current.formRender.fields.arrayTable.readPretty = false;
-    setLoading(false);
-  }
-
-  async function onSubmit() {
-    setLoading(true);
-    try {
-      // 表单校验
-      await formRef.current?.formRender?.validate();
-      try {
-        await (props.onEditSubmit && props.onEditSubmit(getVal()));
-        onClose();
-      } catch (error) {}
-    } catch (error) {
-      console.error("Error validate: ", error);
-      !topProps.hideMessage && handleMessage("输入有误！");
-    }
-    setLoading(false);
-  }
-
-  function onClose() {
-    formRef.current.formRender.fields.arrayTable.readPretty = true;
-    setEditing(false);
-  }
-
-  function onCancel() {
-    onClose();
-    // 未提交，取消恢复原始数据
-    setVal(preValRef.current);
-  }
-
-  return (
-    <div className="edit-array-table">
-      <div className="edit-array-table-head">
-        <div></div>
-        <div className="edit-array-table-actions">
-          {editing ? (
-            <>
-              <Button className="edit-array-table-submit" type="primary" onClick={onSubmit} loading={loading}>
-                提交
-              </Button>
-              <Button className="edit-array-table-cancel" onClick={onCancel} loading={loading}>
-                取消
-              </Button>
-            </>
-          ) : (
-            <Button className="edit-array-table-edit" type="primary" onClick={onEdit} loading={loading}>
-              编辑
-            </Button>
-          )}
-        </div>
-      </div>
-      <FormRender
-        ref={formRef}
-        className="edit-array-table-form"
-        schema={schema}
-        components={components}
-        schemaScope={schemaScope}
-        initialValues={{}}
-        emptyValue={" "}
-        formOptions={{ readPretty: editMode !== "table-edit-show" }}
-      />
-    </div>
-  );
-});
-
-export default EditArrayTable;

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

@@ -1,157 +0,0 @@
-import React, { useRef } from "react";
-import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
-import { useForm } from "@formily/react";
-
-import { Item, EditMode } from "./type";
-
-const submitHideList = ["line"];
-
-export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
-  SchemaField: any;
-  getField: () => {
-    type: string;
-    name: string;
-    component: string;
-  };
-  editing: boolean;
-  dataIndex: string;
-  title: any;
-  inputType: "number" | "text";
-  record: Item;
-  index: number;
-  editable: boolean;
-  onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string, opt: Object) => void;
-  onEditSave: ({ field, id, dataIndex }) => void;
-  onCancel: () => void;
-  topProps: {
-    hasEdit: boolean | Function;
-    tableConf: { canEdit: Function };
-    editMode: EditMode;
-    idKey: "string";
-  };
-  components: any;
-  children: React.ReactNode;
-}
-
-export const EditableCell: React.FC<EditableCellProps> = ({
-  SchemaField,
-  getField,
-  editing,
-  dataIndex,
-  title,
-  inputType,
-  record,
-  index,
-  onEdit,
-  onEditSave,
-  onCancel,
-  editable,
-  topProps,
-  children,
-  components,
-  ...restProps
-}) => {
-  const field = getField && getField();
-  const { idKey = "id", hasEdit, editMode = "modal" } = topProps || {};
-  const { canEdit } = topProps?.tableConf || {};
-
-  // 弹窗编辑模式
-  if (!field || (typeof canEdit === "function" && canEdit(record, { index, field }))) {
-    return <td {...restProps}>{children}</td>;
-  }
-
-  const name = field?.name;
-  const fieldRef = useRef();
-  const fPattern = field?.["x-pattern"];
-  const fDisplay = field?.["x-display"];
-  const display = field?.["x-display"];
-  const disabled = display === "none" || display === "hidden";
-
-  const id = record?.[idKey];
-  // 无编辑权限或禁止编辑
-  const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
-  let _editable =
-    !disabled && _hasEdit && editable && !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none");
-  // 行内单元格编辑按钮
-  const showEditIcon = !editing && _editable && (editMode === "line-cell" || editMode === "cell");
-  const showSubmitIcon = !disabled && editing && !submitHideList.includes(editMode);
-
-  const editOpt = { index, field, fieldRef };
-
-  const form = useForm();
-  if (form.fields[name]) {
-    form.fields[name].pattern = disabled || !editing ? "readPretty" : field?.["x-pattern"] ?? "editable";
-  }
-
-  // 使用 Schema 渲染模式
-  return (
-    <td {...restProps}>
-      <div
-        className="editable-table-cell table-cell"
-        onDoubleClick={(e) => {
-          if (editMode == "modal") {
-            return;
-          }
-          if (editing) {
-            return;
-          }
-          e?.preventDefault();
-          e?.stopPropagation();
-          onEdit(record, dataIndex, editOpt);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault(); // 防止意外的表单提交
-            onEditSave && onEditSave({ field, id, dataIndex });
-          }
-        }}
-      >
-        <SchemaField
-          schema={{
-            type: "object",
-            properties: {
-              [name]: {
-                ...field,
-                title: "",
-                ["x-component-props"]: {
-                  ...field["x-component-props"],
-                  ref: (ref) => {
-                    if (field["x-component-props"] && typeof field["x-component-props"].ref === "function") {
-                      field["x-component-props"].ref(ref);
-                    }
-                    if (ref) {
-                      fieldRef.current = ref;
-                    }
-                  },
-                },
-                // 外部配置的禁用状态
-                "x-pattern": disabled || !editing ? "readPretty" : field?.["x-pattern"] ?? "editable",
-                // 外部配置的表单显隐状态，强制为 显示
-                "x-display": "visible",
-              },
-            },
-          }}
-        />
-        {showEditIcon ? (
-          <EditOutlined
-            className="table-cell-edit-icon"
-            onClick={(e) => {
-              e?.preventDefault();
-              e?.stopPropagation();
-              onEdit(record, dataIndex, editOpt);
-            }}
-          />
-        ) : null}
-        {showSubmitIcon ? (
-          <div className="cell-editing-actions">
-            <CheckOutlined
-              className="table-cell-confirm-icon"
-              onClick={() => onEditSave({ field, id: record[topProps.idKey || "id"], dataIndex })}
-            />
-            <CloseOutlined className="table-cell-cancel-icon" onClick={onCancel} />
-          </div>
-        ) : null}
-      </div>
-    </td>
-  );
-};

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

@@ -1,71 +0,0 @@
-import { memo, useMemo } from "react";
-import { Form } from "antd";
-import { createForm, onFormValuesChange, onFieldValueChange, Field } from "@formily/core";
-import { FormProvider, FormConsumer } from "@formily/react";
-import { PreviewText } from "c-formily-antd/lib/preview-text";
-
-import { Item, EditMode } from "./type";
-
-export interface EditableRowProps extends React.HTMLAttributes<HTMLElement> {
-  rowFormMapRef;
-  editingInofRef;
-  record: Item;
-  editable: boolean;
-  disabled: boolean;
-  onEditSave;
-  topProps: {
-    config: { hasEdit: boolean | Function };
-    editMode: EditMode;
-    idKey: "string";
-    onFormValuesChange: (form: any) => void;
-    onFieldValueChange: (field, form: any) => void;
-    formOptions: {
-      effects;
-    };
-    tableConf: {
-      tableEmptyValue;
-    };
-  };
-  children: React.ReactNode;
-}
-
-export const EditTableRow: React.FC<EditableRowProps> = (props: EditableRowProps) => {
-  const { record, rowFormMapRef, editingInofRef, topProps, onEditSave, ...resetProps } = props;
-  const { idKey = "id", editMode } = topProps || {};
-  const rowId = props["data-row-key"];
-  const rowForm = useMemo(() => {
-    if (rowFormMapRef?.current?.get && rowFormMapRef.current.get(rowId)) {
-      // @ts-ignore
-      rowFormMapRef.current.get(rowId).readPretty = true;
-      return rowFormMapRef.current?.get(rowId);
-    }
-    const form = createForm({
-      initialValues: record,
-      // 只读模式，非编辑态默认为只读模式
-      readPretty: editingInofRef?.current?.editingRowId !== rowId,
-      ...(topProps?.formOptions || {}),
-      effects(...args) {
-        topProps?.onFormValuesChange && onFormValuesChange(topProps.onFormValuesChange);
-        onFieldValueChange("*", (field: Field, form) => {
-          topProps.onFieldValueChange && topProps.onFieldValueChange(field, form);
-        });
-        topProps?.formOptions?.effects && topProps.formOptions?.effects(...args);
-      },
-    });
-    if (rowFormMapRef) {
-      rowFormMapRef.current.set(rowId, form);
-    }
-    return form;
-  }, [record]);
-
-  return (
-    <FormProvider form={rowForm}>
-      {/* 传入空值展示的字符串 */}
-      <PreviewText.Placeholder value={topProps?.tableConf?.tableEmptyValue || " "}>
-        <Form layout="vertical" component={false}>
-          <FormConsumer>{() => <tr {...resetProps}>{props.children}</tr>}</FormConsumer>
-        </Form>
-      </PreviewText.Placeholder>
-    </FormProvider>
-  );
-};

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

@@ -1,229 +0,0 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import { Card, Slider, Rate, Button } from "antd";
-import { createSchemaField } from "@formily/react";
-import { cloneDeep } from "lodash";
-
-import { antdComponents, customComponents } from "@hzab/form-render";
-import { getFormilyGlobalComponents } from "@hzab/utils/src/formily/global-components";
-
-import { Item, EditMode } from "./type";
-
-export const useEditTable = (props) => {
-  const { rowFormMapRef, editingInofRef, topProps, idKey, columns, onEditSubmit } = props;
-  const { editMode = "modal" } = 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 = {
-    // Upload,
-    Card,
-    Slider,
-    Rate,
-    ...antdComponents,
-    ...customComponents,
-    ...getFormilyGlobalComponents(),
-    ...props.components,
-  };
-
-  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 === "table-line-show") {
-          editing = true;
-        } else 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-line-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;
-};