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

package/es/descriptions/index.js

@@ -0,0 +1,495 @@
+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/descriptions/index.tsx
+import { CheckOutlined, CloseOutlined, EditOutlined } from "@ant-design/icons";
+import { ConfigProvider, Descriptions, Space } from "antd";
+import toArray from "rc-util/lib/Children/toArray";
+import get from "rc-util/lib/utils/get";
+import React, { useContext, useEffect } from "react";
+import ValueTypeToComponent from "../field/ValueTypeToComponent";
+import ProForm, { ProFormField } from "../form";
+import ProConfigContext, { ProConfigProvider, proTheme } from "../provider";
+import ProSkeleton from "../skeleton";
+import {
+  ErrorBoundary,
+  InlineErrorFormItem,
+  LabelIconTip,
+  genCopyable,
+  getFieldPropsOrFormItemProps,
+  stringify,
+  useEditableMap
+} from "../utils";
+import useFetchData from "./useFetchData";
+var getDataFromConfig = (item, entity) => {
+  const { dataIndex } = item;
+  if (dataIndex) {
+    const data = Array.isArray(dataIndex) ? get(entity, dataIndex) : entity[dataIndex];
+    if (data !== void 0 || data !== null) {
+      return data;
+    }
+  }
+  return item.children;
+};
+var FieldRender = (props) => {
+  var _a, _b;
+  const {
+    valueEnum,
+    action,
+    index,
+    text,
+    entity,
+    mode,
+    render,
+    editableUtils,
+    valueType,
+    plain,
+    dataIndex,
+    request,
+    formItemRender,
+    params,
+    emptyText
+  } = props;
+  const form = ProForm.useFormInstance();
+  const { token } = (_b = (_a = proTheme).useToken) == null ? void 0 : _b.call(_a);
+  const fieldConfig = {
+    text,
+    valueEnum,
+    mode: mode || "read",
+    proFieldProps: {
+      emptyText,
+      render: render ? (finText) => {
+        return render == null ? void 0 : render(finText, entity, index, action, __spreadProps(__spreadValues({}, props), {
+          type: "descriptions"
+        }));
+      } : void 0
+    },
+    ignoreFormItem: true,
+    valueType,
+    request,
+    params,
+    plain
+  };
+  if (mode === "read" || !mode || valueType === "option") {
+    const fieldProps = getFieldPropsOrFormItemProps(
+      props.fieldProps,
+      void 0,
+      __spreadProps(__spreadValues({}, props), {
+        rowKey: dataIndex,
+        isEditable: false
+      })
+    );
+    return /* @__PURE__ */ React.createElement(ProFormField, __spreadProps(__spreadValues({ name: dataIndex }, fieldConfig), { fieldProps }));
+  }
+  const renderDom = () => {
+    var _a2;
+    const formItemProps = getFieldPropsOrFormItemProps(
+      props.formItemProps,
+      form,
+      __spreadProps(__spreadValues({}, props), {
+        rowKey: dataIndex,
+        isEditable: true
+      })
+    );
+    const fieldProps = getFieldPropsOrFormItemProps(
+      props.fieldProps,
+      form,
+      __spreadProps(__spreadValues({}, props), {
+        rowKey: dataIndex,
+        isEditable: true
+      })
+    );
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: { display: "flex", gap: token.marginXS, alignItems: "baseline" }
+      },
+      /* @__PURE__ */ React.createElement(
+        InlineErrorFormItem,
+        __spreadProps(__spreadValues({
+          name: dataIndex
+        }, formItemProps), {
+          style: __spreadValues({
+            margin: 0
+          }, (formItemProps == null ? void 0 : formItemProps.style) || {}),
+          initialValue: text || (formItemProps == null ? void 0 : formItemProps.initialValue)
+        }),
+        /* @__PURE__ */ React.createElement(
+          ProFormField,
+          __spreadProps(__spreadValues({}, fieldConfig), {
+            proFieldProps: __spreadValues({}, fieldConfig.proFieldProps),
+            formItemRender: formItemRender ? () => formItemRender == null ? void 0 : formItemRender(
+              __spreadProps(__spreadValues({}, props), {
+                type: "descriptions"
+              }),
+              {
+                isEditable: true,
+                recordKey: dataIndex,
+                record: form.getFieldValue(
+                  [dataIndex].flat(1)
+                ),
+                defaultRender: () => /* @__PURE__ */ React.createElement(
+                  ProFormField,
+                  __spreadProps(__spreadValues({}, fieldConfig), {
+                    fieldProps
+                  })
+                ),
+                type: "descriptions"
+              },
+              form
+            ) : void 0,
+            fieldProps
+          })
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            maxHeight: token.controlHeight,
+            alignItems: "center",
+            gap: token.marginXS
+          }
+        },
+        (_a2 = editableUtils == null ? void 0 : editableUtils.actionRender) == null ? void 0 : _a2.call(editableUtils, dataIndex || index, {
+          cancelText: /* @__PURE__ */ React.createElement(CloseOutlined, null),
+          saveText: /* @__PURE__ */ React.createElement(CheckOutlined, null),
+          deleteText: false
+        })
+      )
+    );
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        marginTop: -5,
+        marginBottom: -5,
+        marginLeft: 0,
+        marginRight: 0
+      }
+    },
+    renderDom()
+  );
+};
+var schemaToDescriptionsItem = (items, entity, action, editableUtils, emptyText) => {
+  var _a;
+  const options = [];
+  const children = (_a = items == null ? void 0 : items.map) == null ? void 0 : _a.call(items, (item, index) => {
+    var _b, _c;
+    if (React.isValidElement(item)) {
+      return {
+        children: item
+      };
+    }
+    const _a2 = item, {
+      valueEnum,
+      render,
+      renderText,
+      mode,
+      plain,
+      dataIndex,
+      request,
+      params,
+      editable
+    } = _a2, restItem = __objRest(_a2, [
+      "valueEnum",
+      "render",
+      "renderText",
+      "mode",
+      "plain",
+      "dataIndex",
+      "request",
+      "params",
+      "editable"
+    ]);
+    const defaultData = (_b = getDataFromConfig(item, entity)) != null ? _b : restItem.children;
+    const text = renderText ? renderText(defaultData, entity, index, action) : defaultData;
+    const title = typeof restItem.title === "function" ? restItem.title(item, "descriptions", null) : restItem.title;
+    const valueType = typeof restItem.valueType === "function" ? restItem.valueType(
+      entity || {},
+      "descriptions"
+    ) : restItem.valueType;
+    const isEditable = editableUtils == null ? void 0 : editableUtils.isEditable(
+      dataIndex || index
+    );
+    const fieldMode = mode || isEditable ? "edit" : "read";
+    const showEditIcon = editableUtils && fieldMode === "read" && editable !== false && (editable == null ? void 0 : editable(text, entity, index)) !== false;
+    const Component = showEditIcon ? Space : React.Fragment;
+    const contentDom = fieldMode === "edit" ? text : genCopyable(text, item, text);
+    const key = restItem.key || ((_c = restItem.label) == null ? void 0 : _c.toString()) || index;
+    const label = (title || restItem.label || restItem.tooltip) && /* @__PURE__ */ React.createElement(
+      LabelIconTip,
+      {
+        label: title || restItem.label,
+        tooltip: restItem.tooltip,
+        ellipsis: item.ellipsis
+      }
+    );
+    const field = valueType !== "option" ? __spreadProps(__spreadValues({}, restItem), {
+      key,
+      label,
+      children: /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(
+        FieldRender,
+        __spreadProps(__spreadValues({}, item), {
+          key: item == null ? void 0 : item.key,
+          dataIndex: item.dataIndex || index,
+          mode: fieldMode,
+          text: contentDom,
+          valueType,
+          entity,
+          index,
+          emptyText,
+          action,
+          editableUtils
+        })
+      ), showEditIcon && /* @__PURE__ */ React.createElement(
+        EditOutlined,
+        {
+          onClick: () => {
+            editableUtils == null ? void 0 : editableUtils.startEditable(
+              dataIndex || index
+            );
+          }
+        }
+      ))
+    }) : /* @__PURE__ */ React.createElement(Descriptions.Item, __spreadProps(__spreadValues({}, restItem), { key, label }), /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(
+      FieldRender,
+      __spreadProps(__spreadValues({}, item), {
+        dataIndex: item.dataIndex || index,
+        mode: fieldMode,
+        text: contentDom,
+        valueType,
+        entity,
+        index,
+        action,
+        editableUtils
+      })
+    ), showEditIcon && valueType !== "option" && /* @__PURE__ */ React.createElement(
+      EditOutlined,
+      {
+        onClick: () => {
+          editableUtils == null ? void 0 : editableUtils.startEditable(
+            dataIndex || index
+          );
+        }
+      }
+    )));
+    if (valueType === "option") {
+      options.push(field);
+      return null;
+    }
+    return field;
+  }).filter((item) => item);
+  return {
+    // 空数组传递还是会被判定为有值
+    options: (options == null ? void 0 : options.length) ? options : null,
+    children
+  };
+};
+var ProDescriptionsItem = (props) => {
+  return /* @__PURE__ */ React.createElement(Descriptions.Item, __spreadValues({}, props), props.children);
+};
+ProDescriptionsItem.displayName = "ProDescriptionsItem";
+var DefaultProDescriptionsDom = (dom) => dom.children;
+var ProDescriptions = (props) => {
+  var _b;
+  const _a = props, {
+    request,
+    columns,
+    params,
+    dataSource,
+    onDataSourceChange,
+    formProps,
+    editable,
+    loading,
+    onLoadingChange,
+    actionRef,
+    onRequestError,
+    emptyText,
+    contentStyle
+  } = _a, rest = __objRest(_a, [
+    "request",
+    "columns",
+    "params",
+    "dataSource",
+    "onDataSourceChange",
+    "formProps",
+    "editable",
+    "loading",
+    "onLoadingChange",
+    "actionRef",
+    "onRequestError",
+    "emptyText",
+    "contentStyle"
+  ]);
+  const proContext = useContext(ProConfigContext);
+  const context = useContext(ConfigProvider.ConfigContext);
+  const action = useFetchData(
+    () => __async(void 0, null, function* () {
+      const data = request ? yield request(params || {}) : { data: {} };
+      return data;
+    }),
+    {
+      onRequestError,
+      effects: [stringify(params)],
+      manual: !request,
+      dataSource,
+      loading,
+      onLoadingChange,
+      onDataSourceChange
+    }
+  );
+  const editableUtils = useEditableMap(__spreadProps(__spreadValues({}, props.editable), {
+    childrenColumnName: void 0,
+    dataSource: action.dataSource,
+    setDataSource: action.setDataSource
+  }));
+  useEffect(() => {
+    if (actionRef) {
+      actionRef.current = __spreadValues({
+        reload: action.reload
+      }, editableUtils);
+    }
+  }, [action, actionRef, editableUtils]);
+  if (action.loading || action.loading === void 0 && request) {
+    return /* @__PURE__ */ React.createElement(ProSkeleton, { type: "descriptions", list: false, pageHeader: false });
+  }
+  const getColumns = () => {
+    const childrenColumns = toArray(props.children).filter(Boolean).map((item) => {
+      var _a2;
+      if (!React.isValidElement(item)) {
+        return item;
+      }
+      const {
+        valueEnum,
+        valueType,
+        dataIndex,
+        ellipsis,
+        copyable,
+        request: itemRequest
+      } = item == null ? void 0 : item.props;
+      if (!valueType && !valueEnum && !dataIndex && !itemRequest && !ellipsis && !copyable && ((_a2 = item.type) == null ? void 0 : _a2.displayName) !== "ProDescriptionsItem") {
+        return item;
+      }
+      return __spreadProps(__spreadValues({}, item == null ? void 0 : item.props), {
+        entity: dataSource
+      });
+    });
+    return [...columns || [], ...childrenColumns].filter((item) => {
+      if (!item)
+        return false;
+      if ((item == null ? void 0 : item.valueType) && ["index", "indexBorder"].includes(item == null ? void 0 : item.valueType)) {
+        return false;
+      }
+      return !(item == null ? void 0 : item.hideInDescriptions);
+    }).sort((a, b) => {
+      if (b.order || a.order) {
+        return (b.order || 0) - (a.order || 0);
+      }
+      return (b.index || 0) - (a.index || 0);
+    });
+  };
+  const { options, children } = schemaToDescriptionsItem(
+    getColumns(),
+    action.dataSource || {},
+    (actionRef == null ? void 0 : actionRef.current) || action,
+    editable ? editableUtils : void 0,
+    props.emptyText
+  );
+  const FormComponent = editable ? ProForm : DefaultProDescriptionsDom;
+  let title = null;
+  if (rest.title || rest.tooltip) {
+    title = /* @__PURE__ */ React.createElement(LabelIconTip, { label: rest.title, tooltip: rest.tooltip });
+  }
+  const className = context.getPrefixCls("pro-descriptions");
+  return /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(
+    ProConfigProvider,
+    {
+      valueTypeMap: __spreadValues(__spreadValues({}, proContext.valueTypeMap), ValueTypeToComponent)
+    },
+    /* @__PURE__ */ React.createElement(
+      FormComponent,
+      __spreadProps(__spreadValues({
+        key: "form",
+        form: (_b = props.editable) == null ? void 0 : _b.form,
+        component: false,
+        submitter: false
+      }, formProps), {
+        onFinish: void 0
+      }),
+      /* @__PURE__ */ React.createElement(
+        Descriptions,
+        __spreadProps(__spreadValues({
+          className
+        }, rest), {
+          styles: {
+            content: __spreadValues({
+              minWidth: 0
+            }, contentStyle || {})
+          },
+          extra: rest.extra ? /* @__PURE__ */ React.createElement(Space, null, options, rest.extra) : options,
+          title,
+          items: children
+        })
+      )
+    )
+  ));
+};
+ProDescriptions.Item = ProDescriptionsItem;
+var descriptions_default = ProDescriptions;
+export {
+  FieldRender,
+  ProDescriptions,
+  descriptions_default as default
+};

package/es/descriptions/useFetchData.d.ts

@@ -0,0 +1,22 @@
+export type RequestData<T = any> = {
+    data?: T;
+    success?: boolean;
+    [key: string]: any;
+} & Record<string, any>;
+export type UseFetchDataAction<T extends RequestData> = {
+    dataSource: T['data'] | T;
+    setDataSource: (value: T['data'] | T) => void;
+    loading?: boolean;
+    reload: () => Promise<void>;
+};
+declare const useFetchData: <T extends RequestData<any>>(getData: () => Promise<T>, options?: {
+    effects?: any[] | undefined;
+    manual: boolean;
+    loading?: boolean | undefined;
+    onLoadingChange?: ((loading?: boolean) => void) | undefined;
+    onRequestError?: ((e: Error) => void) | undefined;
+    dataSource?: T["data"] | undefined;
+    defaultDataSource?: T["data"] | undefined;
+    onDataSourceChange?: ((value: T['data']) => void) | undefined;
+} | undefined) => UseFetchDataAction<T>;
+export default useFetchData;

package/es/descriptions/useFetchData.js

@@ -0,0 +1,87 @@
+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/descriptions/useFetchData.tsx
+import useMergedState from "rc-util/lib/hooks/useMergedState";
+import { useEffect } from "react";
+var useFetchData = (getData, options) => {
+  const {
+    onRequestError,
+    effects,
+    manual,
+    dataSource,
+    defaultDataSource,
+    onDataSourceChange
+  } = options || {};
+  const [entity, setEntity] = useMergedState(defaultDataSource, {
+    value: dataSource,
+    onChange: onDataSourceChange
+  });
+  const [loading, setLoading] = useMergedState(
+    options == null ? void 0 : options.loading,
+    {
+      value: options == null ? void 0 : options.loading,
+      onChange: options == null ? void 0 : options.onLoadingChange
+    }
+  );
+  const updateDataAndLoading = (data) => {
+    setEntity(data);
+    setLoading(false);
+  };
+  const fetchList = () => __async(void 0, null, function* () {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const { data, success } = (yield getData()) || {};
+      if (success !== false) {
+        updateDataAndLoading(data);
+      }
+    } catch (e) {
+      if (onRequestError === void 0)
+        throw new Error(e);
+      else
+        onRequestError(e);
+      setLoading(false);
+    } finally {
+      setLoading(false);
+    }
+  });
+  useEffect(() => {
+    if (manual) {
+      return;
+    }
+    fetchList();
+  }, [...effects || [], manual]);
+  return {
+    dataSource: entity,
+    setDataSource: setEntity,
+    loading,
+    reload: () => {
+      return fetchList();
+    }
+  };
+};
+var useFetchData_default = useFetchData;
+export {
+  useFetchData_default as default
+};

package/es/field/AllProField.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { BaseProFieldFC, ProFieldFCRenderProps, ProRenderFieldPropsType } from '../provider';
+import { ProFieldRequestData, ProFieldTextType, ProFieldValueObjectType, ProFieldValueType } from '../utils';
+import { ProFieldPropsType } from './PureProField';
+/** 默认的 Field 需要实现的功能 */
+export type ProFieldFC<T = {}> = React.ForwardRefRenderFunction<any, BaseProFieldFC & ProRenderFieldPropsType & T>;
+/** 轻量筛选的field属性 */
+export type ProFieldLightProps = {
+    lightLabel?: React.RefObject<{
+        labelRef: React.RefObject<HTMLElement>;
+        clearRef: React.RefObject<HTMLElement>;
+    }>;
+    labelTrigger?: boolean;
+};
+/** Value type by function */
+export type ProFieldValueTypeFunction<T> = (item: T) => ProFieldValueType | ProFieldValueObjectType;
+type RenderProps = Omit<ProFieldFCRenderProps, 'text' | 'placeholder'> & ProRenderFieldPropsType & {
+    /** 从服务器读取选项 */
+    request?: ProFieldRequestData;
+    emptyText?: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    [key: string]: any;
+};
+/**
+ * 根据不同的类型来转化数值
+ *
+ * @param dataValue
+ * @param valueType
+ */
+export declare const defaultRenderText: (dataValue: ProFieldTextType, valueType: ProFieldValueType | ProFieldValueObjectType, props: RenderProps, valueTypeMap: Record<string, ProRenderFieldPropsType>) => React.ReactNode;
+export declare const ProField: React.ForwardRefRenderFunction<any, ProFieldPropsType>;
+export {};