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

package/src/EditArrayTable/index.tsx

@@ -1,272 +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, useArray, useRecord, SortHandle } from "@hzab/form-render/src/components/ArrayBase";
-
-import SchemaToArrayTable from "../components/Formily/SchemaToArrayTable";
-import { useSlotsComponents } from "../components/Formily/useComponents";
-import TableActions from "../table-render/TableActions";
-
-import "./index.less";
-
-export interface IEditArrayTableProps {
-  topProps: {
-    editMode?: string;
-    fetchOnEdit?: boolean;
-    hasAction?: boolean;
-    hideMessage?: boolean;
-    Slots?: Object;
-  };
-  config?: {
-    isDargTable?: boolean;
-    orderColType?: string;
-    colConf?: {
-      _$actions: Object;
-    };
-    rowSelection: {
-      selectedRowKeys: any[];
-    };
-    tableProps: {
-      rowSelection: {
-        selectedRowKeys: any[];
-      };
-    };
-  };
-  schema: Schema;
-  list: Object[];
-  components: Object[];
-  schemaScope: Object;
-  onDetail;
-  onEdit;
-  onEditByTable;
-  onDel;
-  onSearch;
-  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, tableProps } = config || {};
-
-  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,
-      config: { hasAction, hasIndex: orderColType === "page" || orderColType === "all", ...config },
-      topProps,
-    });
-    return schemaToArrayTable.handleSchema();
-  }, [props.schema]);
-
-  const slotComponents = useSlotsComponents(topProps);
-  const components = useMemo(() => {
-    const coms = {
-      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;
-      },
-      ...slotComponents,
-      TableActions(tProps) {
-        const index = useIndex();
-        const array = useArray();
-        const { onDetail, onEdit, onDel, onSearch, getList } = props;
-        const record = useRecord();
-        const cProps = {
-          ...tProps,
-          record,
-          index,
-          Slots: topProps.Slots,
-          onEdit,
-          onDel() {
-            array.field?.remove?.(index);
-            array.props?.onRemove?.(index);
-            onDel && onDel(record, index);
-          },
-          onDetail,
-          onSearch,
-          // TODO: 编辑删除按钮状态
-          // hasEdit,
-          // hasDel,
-          // onEditByTable,
-          getList,
-          tableConf: props.config,
-          colConf: config?.colConf?._$actions,
-          topProps,
-        };
-        return <TableActions {...cProps} />;
-      },
-    };
-    // HACK: 解决只读无法拖拽的问题
-    coms.ArrayTable.SortHandle = SortHandle;
-    return coms;
-  }, [slotComponents, props.query.pageNum, props.query.pageSize]);
-
-  useImperativeHandle(
-    parentRef,
-    () => ({
-      formRef,
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    if (formRef.current) {
-      setVal(props.list);
-    }
-  }, [props.list]);
-
-  useEffect(() => {
-    // 动态设置 table props 值
-    formRef.current.formRender.setFieldState("arrayTable", (state) => {
-      let rowSelection;
-      if (config.rowSelection || tableProps?.rowSelection) {
-        rowSelection = {
-          ...state.componentProps?.rowSelection,
-          ...tableProps?.rowSelection,
-          ...config.rowSelection,
-          selectedRowKeys: config.rowSelection?.selectedRowKeys || tableProps?.rowSelection?.selectedRowKeys,
-        };
-      }
-      state.componentProps = {
-        ...state.componentProps,
-        ...tableProps,
-        rowSelection,
-      };
-    });
-  }, [config.rowSelection?.selectedRowKeys, tableProps]);
-
-  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,
-          _data: {
-            selectedRowKeys: config?.rowSelection?.selectedRowKeys,
-          },
-        }}
-        initialValues={{}}
-        emptyValue={" "}
-        formOptions={{ readPretty: editMode !== "table-edit-show" }}
-      />
-    </div>
-  );
-});
-
-export default EditArrayTable;

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

@@ -1,158 +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;
-                    }
-                  },
-                  record,
-                  index,
-                },
-                // 外部配置的表单显隐状态，强制为 显示
-                "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,75 +0,0 @@
-import { 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);
-    }
-
-    if (record) {
-      form.setValues(record);
-    }
-    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>
-  );
-};