@ant-design/pro-components 2.8.9 → 3.0.0-beta.1

package/es/table/components/EditableTable/index.d.ts

@@ -0,0 +1,92 @@
+import type { ButtonProps, FormItemProps } from 'antd';
+import React from 'react';
+import { ProFormInstance } from '../../../form';
+import type { ParamsType } from '../../../provider';
+import type { ProTableProps } from '../../typing';
+export type EditableFormInstance<T = any> = ProFormInstance<T> & {
+    /**
+     * 获取一行数据的
+     * @param rowIndex
+     * @returns T | undefined
+     *
+     * @example getRowData(1)  可以传入第几行的数据
+     * @example getRowData("id")  也可以传入 rowKey，根据你列的唯一key 来获得。
+     */
+    getRowData?: (rowIndex: string | number) => T | undefined;
+    /**
+     * 获取整个 table 的数据
+     * @returns T[] | undefined
+     */
+    getRowsData?: () => T[] | undefined;
+    /**
+     * 设置一行的数据，会将数据进行简单的 merge
+     *
+     * {title:"old", decs:"old",id:"old"} -> set {title:"new"} -> {title:"new", decs:"old",id:"old"}
+     *
+     * @description 只会做最第一层对象的 merge 哦。
+     * {title:"old", decs:{name:"old",key:"old"},id:"old"} -> set {decs:{name:"new"}} -> {title:"old", decs:{name:"new"},id:"old"} -> set {decs:{name:"old"}}
+     *
+     * @param rowIndex
+     * @param data
+     * @returns void
+     *
+     * 根据行号设置
+     * @example setRowData(1, { title:"new" })  可以传入修改第几行
+     *
+     * 根据行 id 设置
+     * @example setRowData("id", { title:"new" })  也可以传入 rowKey，根据你列的唯一 key 来设置。
+     *
+     * 清空原有数据
+     * @example setRowData(1, { title:undefined })
+     *
+     */
+    setRowData?: (rowIndex: string | number, data: Partial<T>) => void;
+};
+export type RecordCreatorProps<DataSourceType> = {
+    record: DataSourceType | ((index: number, dataSource: DataSourceType[]) => DataSourceType);
+    position?: 'top' | 'bottom';
+    /**
+     * 新增一行的类型
+     *
+     * @augments dataSource 将会新增一行数据到 dataSource 中，不支持取消，只能删除
+     * @augments cache 将会把数据放到缓存中，取消后消失
+     */
+    newRecordType?: 'dataSource' | 'cache';
+    /** 要增加到哪个节点下，一般用于多重嵌套表格 */
+    parentKey?: React.Key | ((index: number, dataSource: DataSourceType[]) => React.Key);
+};
+export type EditableProTableProps<T, U extends ParamsType, ValueType = 'text'> = Omit<ProTableProps<T, U, ValueType>, 'onChange'> & {
+    defaultValue?: readonly T[];
+    value?: readonly T[];
+    onChange?: (value: readonly T[]) => void;
+    /** @name 原先的 table OnChange */
+    onTableChange?: ProTableProps<T, U>['onChange'];
+    /**
+     *@name 可编辑表格，列配置的form，可以操作表格里面的数据
+     */
+    editableFormRef?: React.Ref<EditableFormInstance<T> | undefined>;
+    /** @name 新建按钮的设置 */
+    recordCreatorProps?: (RecordCreatorProps<T> & ButtonProps & {
+        creatorButtonText?: React.ReactNode;
+    }) | false;
+    /** 最大行数 */
+    maxLength?: number;
+    /** Table 的值发生改变，为了适应 Form 调整了顺序 */
+    onValuesChange?: (values: T[], record: T) => void;
+    /** 是否受控，如果为 true，每次 value 更新都会重置表单 */
+    controlled?: boolean;
+    /** FormItem 的设置 */
+    formItemProps?: Omit<FormItemProps, 'children' | 'name'>;
+};
+/**
+ * 可以直接放到 Form 中的可编辑表格
+ * A React component that is used to create a table.
+ * @param props
+ */
+declare function FieldEditableTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;
+declare namespace FieldEditableTable {
+    var RecordCreator: <T = Record<string, any>>(props: RecordCreatorProps<T> & {
+        children: JSX.Element;
+    }) => React.FunctionComponentElement<any>;
+}
+export default FieldEditableTable;

package/es/table/components/EditableTable/index.js

@@ -0,0 +1,411 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/table/components/EditableTable/index.tsx
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Form } from "antd";
+import useMergedState from "rc-util/lib/hooks/useMergedState";
+import get from "rc-util/lib/utils/get";
+import set from "rc-util/lib/utils/set";
+import React, {
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef
+} from "react";
+import ProForm, { ProFormDependency } from "../../../form";
+import { useIntl } from "../../../provider";
+import {
+  isDeepEqualReact,
+  runFunction,
+  stringify,
+  useRefFunction
+} from "../../../utils";
+import ProTable from "../../Table";
+var EditableTableActionContext = React.createContext(void 0);
+function RecordCreator(props) {
+  const { children, record, position, newRecordType, parentKey } = props;
+  const actionRef = useContext(EditableTableActionContext);
+  return React.cloneElement(children, __spreadProps(__spreadValues({}, children.props), {
+    onClick: (e) => __async(this, null, function* () {
+      var _a, _b, _c;
+      const isOk = yield (_b = (_a = children.props).onClick) == null ? void 0 : _b.call(_a, e);
+      if (isOk === false)
+        return;
+      (_c = actionRef == null ? void 0 : actionRef.current) == null ? void 0 : _c.addEditRecord(record, {
+        position,
+        newRecordType,
+        parentKey
+      });
+    })
+  }));
+}
+function EditableTable(props) {
+  var _b, _d;
+  const intl = useIntl();
+  const _a = props, {
+    onTableChange,
+    maxLength,
+    formItemProps,
+    recordCreatorProps,
+    rowKey,
+    controlled,
+    defaultValue,
+    onChange,
+    editableFormRef
+  } = _a, rest = __objRest(_a, [
+    "onTableChange",
+    "maxLength",
+    "formItemProps",
+    "recordCreatorProps",
+    "rowKey",
+    "controlled",
+    "defaultValue",
+    "onChange",
+    "editableFormRef"
+  ]);
+  const preData = useRef(void 0);
+  const actionRef = useRef();
+  const formRef = useRef();
+  useImperativeHandle(rest.actionRef, () => actionRef.current, [
+    actionRef.current
+  ]);
+  const [value, setValue] = useMergedState(
+    () => props.value || defaultValue || [],
+    {
+      value: props.value,
+      onChange: props.onChange
+    }
+  );
+  const getRowKey = React.useMemo(() => {
+    if (typeof rowKey === "function") {
+      return rowKey;
+    }
+    return (record2, index) => record2[rowKey] || index;
+  }, [rowKey]);
+  const coverRowKey = useRefFunction(
+    (finlayRowKey) => {
+      if (typeof finlayRowKey === "number" && !props.name) {
+        if (finlayRowKey >= value.length)
+          return finlayRowKey;
+        const rowData = value && value[finlayRowKey];
+        return getRowKey == null ? void 0 : getRowKey(rowData, finlayRowKey);
+      }
+      if ((typeof finlayRowKey === "string" || finlayRowKey >= value.length) && props.name) {
+        const rowIndex = value.findIndex((item, index) => {
+          var _a2;
+          return ((_a2 = getRowKey == null ? void 0 : getRowKey(item, index)) == null ? void 0 : _a2.toString()) === (finlayRowKey == null ? void 0 : finlayRowKey.toString());
+        });
+        if (rowIndex !== -1)
+          return rowIndex;
+      }
+      return finlayRowKey;
+    }
+  );
+  useImperativeHandle(editableFormRef, () => {
+    const getRowData = (rowIndex) => {
+      var _a2, _b2;
+      if (rowIndex == void 0) {
+        throw new Error("rowIndex is required");
+      }
+      const finlayRowKey = coverRowKey(rowIndex);
+      const rowKeyName = [props.name, (_a2 = finlayRowKey == null ? void 0 : finlayRowKey.toString()) != null ? _a2 : ""].flat(1).filter(Boolean);
+      return (_b2 = formRef.current) == null ? void 0 : _b2.getFieldValue(rowKeyName);
+    };
+    const getRowsData = () => {
+      var _a2, _b2;
+      const rowKeyName = [props.name].flat(1).filter(Boolean);
+      if (Array.isArray(rowKeyName) && rowKeyName.length === 0) {
+        const rowData = (_a2 = formRef.current) == null ? void 0 : _a2.getFieldsValue();
+        if (Array.isArray(rowData))
+          return rowData;
+        return Object.keys(rowData).map((key) => {
+          return rowData[key];
+        });
+      }
+      return (_b2 = formRef.current) == null ? void 0 : _b2.getFieldValue(rowKeyName);
+    };
+    return __spreadProps(__spreadValues({}, formRef.current), {
+      getRowData,
+      getRowsData,
+      /**
+       * 设置一行的数据，会将数据进行简单的 merge
+       * @param rowIndex
+       * @param data
+       * @returns void
+       */
+      setRowData: (rowIndex, data) => {
+        var _a2, _b2;
+        if (rowIndex == void 0) {
+          throw new Error("rowIndex is required");
+        }
+        const finlayRowKey = coverRowKey(rowIndex);
+        const rowKeyName = [props.name, (_a2 = finlayRowKey == null ? void 0 : finlayRowKey.toString()) != null ? _a2 : ""].flat(1).filter(Boolean);
+        const newRowData = Object.assign(
+          {},
+          __spreadValues(__spreadValues({}, getRowData(rowIndex)), data || {})
+        );
+        const updateValues = set({}, rowKeyName, newRowData);
+        (_b2 = formRef.current) == null ? void 0 : _b2.setFieldsValue(updateValues);
+        return true;
+      }
+    });
+  }, [coverRowKey, props.name, formRef.current]);
+  useEffect(() => {
+    if (!props.controlled)
+      return;
+    (value || []).forEach((current, index) => {
+      var _a2;
+      (_a2 = formRef.current) == null ? void 0 : _a2.setFieldsValue({
+        [`${getRowKey(current, index)}`]: current
+      });
+    }, {});
+  }, [stringify(value), props.controlled]);
+  useEffect(() => {
+    var _a2;
+    if (props.name) {
+      formRef.current = (_a2 = props == null ? void 0 : props.editable) == null ? void 0 : _a2.form;
+    }
+  }, [(_b = props.editable) == null ? void 0 : _b.form, props.name]);
+  const _c = recordCreatorProps || {}, {
+    record,
+    position,
+    creatorButtonText,
+    newRecordType,
+    parentKey,
+    style
+  } = _c, restButtonProps = __objRest(_c, [
+    "record",
+    "position",
+    "creatorButtonText",
+    "newRecordType",
+    "parentKey",
+    "style"
+  ]);
+  const isTop = position === "top";
+  const creatorButtonDom = useMemo(() => {
+    if (typeof maxLength === "number" && maxLength <= (value == null ? void 0 : value.length)) {
+      return false;
+    }
+    return recordCreatorProps !== false && /* @__PURE__ */ React.createElement(
+      RecordCreator,
+      {
+        record: runFunction(record, value == null ? void 0 : value.length, value) || {},
+        position,
+        parentKey: runFunction(parentKey, value == null ? void 0 : value.length, value),
+        newRecordType
+      },
+      /* @__PURE__ */ React.createElement(
+        Button,
+        __spreadValues({
+          type: "dashed",
+          style: __spreadValues({
+            display: "block",
+            margin: "10px 0",
+            width: "100%"
+          }, style),
+          icon: /* @__PURE__ */ React.createElement(PlusOutlined, null)
+        }, restButtonProps),
+        creatorButtonText || intl.getMessage("editableTable.action.add", "添加一行数据")
+      )
+    );
+  }, [recordCreatorProps, maxLength, value == null ? void 0 : value.length]);
+  const buttonRenderProps = useMemo(() => {
+    if (!creatorButtonDom) {
+      return {};
+    }
+    if (isTop) {
+      return {
+        components: {
+          header: {
+            wrapper: ({
+              className,
+              children
+            }) => {
+              var _a2;
+              return /* @__PURE__ */ React.createElement("thead", { className }, children, /* @__PURE__ */ React.createElement("tr", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement("td", { colSpan: 0, style: { visibility: "hidden" } }, creatorButtonDom), /* @__PURE__ */ React.createElement(
+                "td",
+                {
+                  style: { position: "absolute", left: 0, width: "100%" },
+                  colSpan: (_a2 = rest.columns) == null ? void 0 : _a2.length
+                },
+                creatorButtonDom
+              )));
+            }
+          }
+        }
+      };
+    }
+    return {
+      tableViewRender: (_, dom) => {
+        var _a2, _b2;
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, (_b2 = (_a2 = props.tableViewRender) == null ? void 0 : _a2.call(props, _, dom)) != null ? _b2 : dom, creatorButtonDom);
+      }
+    };
+  }, [isTop, creatorButtonDom]);
+  const editableProps = __spreadValues({}, props.editable);
+  const newOnValueChange = useRefFunction(
+    (r, dataSource) => {
+      var _a2, _b2, _c2, _d2;
+      (_b2 = (_a2 = props.editable) == null ? void 0 : _a2.onValuesChange) == null ? void 0 : _b2.call(_a2, r, dataSource);
+      (_c2 = props.onValuesChange) == null ? void 0 : _c2.call(props, dataSource, r);
+      if (props.controlled) {
+        (_d2 = props == null ? void 0 : props.onChange) == null ? void 0 : _d2.call(props, dataSource);
+      }
+    }
+  );
+  if ((props == null ? void 0 : props.onValuesChange) || ((_d = props.editable) == null ? void 0 : _d.onValuesChange) || // 受控模式需要触发 onchange
+  props.controlled && (props == null ? void 0 : props.onChange)) {
+    editableProps.onValuesChange = newOnValueChange;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditableTableActionContext.Provider, { value: actionRef }, /* @__PURE__ */ React.createElement(
+    ProTable,
+    __spreadProps(__spreadValues(__spreadValues({
+      search: false,
+      options: false,
+      pagination: false,
+      rowKey,
+      revalidateOnFocus: false
+    }, rest), buttonRenderProps), {
+      tableLayout: "fixed",
+      actionRef,
+      onChange: onTableChange,
+      editable: __spreadProps(__spreadValues({}, editableProps), {
+        formProps: __spreadValues({
+          formRef
+        }, editableProps.formProps)
+      }),
+      dataSource: value,
+      onDataSourceChange: (dataSource) => {
+        var _a2;
+        setValue(dataSource);
+        if (props.name && position === "top") {
+          const newValue = set(
+            {},
+            [props.name].flat(1).filter(Boolean),
+            dataSource
+          );
+          (_a2 = formRef.current) == null ? void 0 : _a2.setFieldsValue(newValue);
+        }
+      }
+    })
+  )), props.name ? /* @__PURE__ */ React.createElement(ProFormDependency, { name: [props.name] }, (changeValue) => {
+    var _a2, _b2;
+    if (!preData.current) {
+      preData.current = value;
+      return null;
+    }
+    const list = get(
+      changeValue,
+      [props.name].flat(1)
+    );
+    const changeItem = list == null ? void 0 : list.find((item, index) => {
+      var _a3;
+      return !isDeepEqualReact(item, (_a3 = preData.current) == null ? void 0 : _a3[index]);
+    });
+    preData.current = value;
+    if (!changeItem)
+      return null;
+    (_b2 = (_a2 = props == null ? void 0 : props.editable) == null ? void 0 : _a2.onValuesChange) == null ? void 0 : _b2.call(_a2, changeItem, list);
+    return null;
+  }) : null);
+}
+function FieldEditableTable(props) {
+  const form = ProForm.useFormInstance();
+  if (!props.name)
+    return /* @__PURE__ */ React.createElement(
+      EditableTable,
+      __spreadValues({
+        tableLayout: "fixed",
+        scroll: {
+          x: "max-content"
+        }
+      }, props)
+    );
+  return /* @__PURE__ */ React.createElement(
+    Form.Item,
+    __spreadProps(__spreadValues({
+      style: {
+        maxWidth: "100%"
+      },
+      shouldUpdate: (prev, next) => {
+        const name = [props.name].flat(1);
+        try {
+          return JSON.stringify(get(prev, name)) !== JSON.stringify(get(next, name));
+        } catch (error) {
+          return true;
+        }
+      }
+    }, props == null ? void 0 : props.formItemProps), {
+      name: props.name
+    }),
+    /* @__PURE__ */ React.createElement(
+      EditableTable,
+      __spreadProps(__spreadValues({
+        tableLayout: "fixed",
+        scroll: {
+          x: "max-content"
+        }
+      }, props), {
+        editable: __spreadProps(__spreadValues({}, props.editable), {
+          form
+        })
+      })
+    )
+  );
+}
+FieldEditableTable.RecordCreator = RecordCreator;
+var EditableTable_default = FieldEditableTable;
+export {
+  EditableTable_default as default
+};

package/es/table/components/Form/FormRender.d.ts

@@ -0,0 +1,31 @@
+import type { FormItemProps } from 'antd';
+import React from 'react';
+import type { BaseQueryFilterProps, ProFormInstance, ProFormProps } from '../../../form';
+import type { ProSchemaComponentTypes } from '../../../utils';
+import type { ActionType, ProColumns, ProTableProps } from '../../typing';
+export type SearchConfig = BaseQueryFilterProps & {
+    filterType?: 'query' | 'light';
+};
+export type TableFormItem<T, U = any> = {
+    onSubmit?: (value: T, firstLoad: boolean) => void;
+    onReset?: (value: T) => void;
+    form?: Omit<ProFormProps, 'form'>;
+    type?: ProSchemaComponentTypes;
+    dateFormatter?: ProTableProps<T, U, any>['dateFormatter'];
+    search?: false | SearchConfig;
+    columns: ProColumns<U, any>[];
+    formRef: React.MutableRefObject<ProFormInstance | undefined>;
+    submitButtonLoading?: boolean;
+    manualRequest?: boolean;
+    bordered?: boolean;
+    action: React.MutableRefObject<ActionType | undefined>;
+    ghost?: boolean;
+} & Omit<FormItemProps, 'children' | 'onReset'>;
+/**
+ * 这里会把 列配置转化为 form 表单
+ *
+ * @param param0
+ * @returns
+ */
+declare const FormRender: <T, U = any>({ onSubmit, formRef, dateFormatter, type, columns, action, ghost, manualRequest, onReset, submitButtonLoading, search: searchConfig, form: formConfig, bordered, }: TableFormItem<T, U>) => import("react/jsx-runtime").JSX.Element;
+export default FormRender;