@ant-design/pro-components 2.8.10 → 3.0.0-beta.2

package/es/form/components/Field/index.js

@@ -0,0 +1,100 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _ref;
+var _excluded = ["fieldProps", "children", "labelCol", "label", "autoFocus", "isDefaultDom", "render", "proFieldProps", "formItemRender", "valueType", "initialValue", "onChange", "valueEnum", "params", "name", "dependenciesValues", "cacheForSwr", "valuePropName"];
+import React, { memo, useContext, useMemo } from 'react';
+import { PureProField } from "../../../field";
+import { isDeepEqualReact, runFunction, useRefFunction } from "../../../utils";
+import { EditOrReadOnlyContext } from "../../BaseForm/EditOrReadOnlyContext";
+import warpField from "../FormItem/warpField";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+var BaseProFormField = function BaseProFormField(props) {
+  var fieldProps = props.fieldProps,
+    children = props.children,
+    labelCol = props.labelCol,
+    label = props.label,
+    autoFocus = props.autoFocus,
+    isDefaultDom = props.isDefaultDom,
+    render = props.render,
+    proFieldProps = props.proFieldProps,
+    formItemRender = props.formItemRender,
+    valueType = props.valueType,
+    initialValue = props.initialValue,
+    _onChange = props.onChange,
+    valueEnum = props.valueEnum,
+    params = props.params,
+    name = props.name,
+    dependenciesValues = props.dependenciesValues,
+    _props$cacheForSwr = props.cacheForSwr,
+    cacheForSwr = _props$cacheForSwr === void 0 ? false : _props$cacheForSwr,
+    _props$valuePropName = props.valuePropName,
+    valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var modeContext = useContext(EditOrReadOnlyContext);
+  var propsParams = useMemo(function () {
+    // 使用dependencies时 dependenciesValues是有值的
+    // 此时如果存在request，注入dependenciesValues
+    return dependenciesValues && restProps.request ? _objectSpread(_objectSpread({}, params), dependenciesValues || {}) : params;
+  }, [dependenciesValues, params, restProps.request]);
+  var memoUnChange = useRefFunction(function () {
+    if (fieldProps !== null && fieldProps !== void 0 && fieldProps.onChange) {
+      var _fieldProps$onChange;
+      for (var _len = arguments.length, restParams = new Array(_len), _key = 0; _key < _len; _key++) {
+        restParams[_key] = arguments[_key];
+      }
+      fieldProps === null || fieldProps === void 0 || (_fieldProps$onChange = fieldProps.onChange) === null || _fieldProps$onChange === void 0 || _fieldProps$onChange.call.apply(_fieldProps$onChange, [fieldProps].concat(restParams));
+      return;
+    }
+  });
+  var memoFieldProps = useMemo(function () {
+    return _objectSpread(_objectSpread({
+      autoFocus: autoFocus
+    }, fieldProps), {}, {
+      onChange: memoUnChange
+    });
+  }, [autoFocus, fieldProps, memoUnChange]);
+  var childrenRender = useMemo(function () {
+    // 防止 formItem 的值被吃掉
+    if (children) {
+      if ( /*#__PURE__*/React.isValidElement(children)) {
+        return /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, restProps), {}, {
+          onChange: function onChange() {
+            for (var _len2 = arguments.length, restParams = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+              restParams[_key2] = arguments[_key2];
+            }
+            if (fieldProps !== null && fieldProps !== void 0 && fieldProps.onChange) {
+              var _fieldProps$onChange2;
+              fieldProps === null || fieldProps === void 0 || (_fieldProps$onChange2 = fieldProps.onChange) === null || _fieldProps$onChange2 === void 0 || _fieldProps$onChange2.call.apply(_fieldProps$onChange2, [fieldProps].concat(restParams));
+              return;
+            }
+            _onChange === null || _onChange === void 0 || _onChange.apply(void 0, restParams);
+          }
+        }, (children === null || children === void 0 ? void 0 : children.props) || {}));
+      }
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: children
+      });
+    }
+    return;
+  }, [children, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.onChange, _onChange, restProps]);
+  if (childrenRender) {
+    return childrenRender;
+  }
+  return /*#__PURE__*/_jsx(PureProField, _objectSpread(_objectSpread(_objectSpread({
+    text: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps[valuePropName],
+    render: render,
+    formItemRender: formItemRender,
+    valueType: valueType || 'text',
+    cacheForSwr: cacheForSwr,
+    fieldProps: memoFieldProps,
+    valueEnum: runFunction(valueEnum)
+  }, proFieldProps), restProps), {}, {
+    mode: (proFieldProps === null || proFieldProps === void 0 ? void 0 : proFieldProps.mode) || modeContext.mode || 'edit',
+    params: propsParams
+  }));
+};
+var ProFormField = (_ref = warpField) === null || _ref === void 0 ? void 0 : _ref( /*#__PURE__*/memo(BaseProFormField, function (prevProps, nextProps) {
+  return isDeepEqualReact(nextProps, prevProps, ['onChange', 'onBlur']);
+}));
+export default ProFormField;

package/es/form/components/FieldSet/index.d.ts

@@ -0,0 +1,20 @@
+import type { SpaceProps } from 'antd';
+import type { GroupProps } from 'antd/lib/input';
+import React from 'react';
+import type { LightWrapperProps } from '../../BaseForm';
+import type { ProFormItemProps } from '../FormItem';
+export type ProFormFieldSetProps<T = any> = {
+    value?: T[];
+    onChange?: (value: T[]) => void;
+    space?: SpaceProps | GroupProps;
+    valuePropName?: string;
+    type?: 'space' | 'group';
+    fieldProps?: any;
+    convertValue?: ProFormItemProps['convertValue'];
+    transform?: ProFormItemProps['transform'];
+    children?: ((value: T[], props: ProFormFieldSetProps) => React.ReactNode) | React.ReactNode;
+    lightProps?: LightWrapperProps;
+};
+export declare function defaultGetValueFromEvent(valuePropName: string, ...args: any): any;
+declare const _default: React.FC<Omit<ProFormItemProps, "children"> & ProFormFieldSetProps<any>>;
+export default _default;

package/es/form/components/FieldSet/index.js

@@ -0,0 +1,123 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _ref3;
+var _excluded = ["children", "value", "valuePropName", "onChange", "fieldProps", "space", "type", "transform", "convertValue", "lightProps"],
+  _excluded2 = ["children", "space", "valuePropName"];
+import { Space } from 'antd';
+import toArray from 'rc-util/lib/Children/toArray';
+import React, { useCallback, useImperativeHandle } from 'react';
+import { runFunction, useRefFunction } from "../../../utils";
+import { useGridHelpers } from "../../helpers";
+import warpField from "../FormItem/warpField";
+import { jsx as _jsx } from "react/jsx-runtime";
+var FieldSetType = {
+  space: Space,
+  group: Space.Compact
+};
+export function defaultGetValueFromEvent(valuePropName) {
+  var event = arguments.length <= 1 ? undefined : arguments[1];
+  if (event && event.target && valuePropName in event.target) {
+    // @ts-ignore
+    return event.target[valuePropName];
+  }
+  return event;
+}
+var FieldSet = function FieldSet(props) {
+  var children = props.children,
+    _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    valuePropName = props.valuePropName,
+    onChange = props.onChange,
+    fieldProps = props.fieldProps,
+    space = props.space,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'space' : _props$type,
+    transform = props.transform,
+    convertValue = props.convertValue,
+    lightProps = props.lightProps,
+    rest = _objectWithoutProperties(props, _excluded);
+  /**
+   * 使用方法的引用防止闭包
+   *
+   * @param fileValue
+   * @param index
+   */
+  var fieldSetOnChange = useRefFunction(function (fileValue, index) {
+    var _fieldProps$onChange;
+    var newValues = _toConsumableArray(value);
+    newValues[index] = defaultGetValueFromEvent(valuePropName || 'value', fileValue);
+    onChange === null || onChange === void 0 || onChange(newValues);
+    fieldProps === null || fieldProps === void 0 || (_fieldProps$onChange = fieldProps.onChange) === null || _fieldProps$onChange === void 0 || _fieldProps$onChange.call(fieldProps, newValues);
+  });
+  var itemIndex = -1;
+  var list = toArray(runFunction(children, value, props)).map(function (item) {
+    if ( /*#__PURE__*/React.isValidElement(item)) {
+      var _item$type, _item$props, _item$props2;
+      itemIndex += 1;
+      var index = itemIndex;
+      var isProFromItem =
+      // @ts-ignore
+      (item === null || item === void 0 || (_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName) === 'ProFormComponent' || (item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.readonly);
+      var forkProps = isProFromItem ? _objectSpread(_objectSpread({
+        key: index,
+        ignoreFormItem: true
+      }, item.props || {}), {}, {
+        // 如果不是我们自定义的组件 fieldProps 无法识别
+        fieldProps: _objectSpread(_objectSpread({}, item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.fieldProps), {}, {
+          onChange: function onChange() {
+            fieldSetOnChange(arguments.length <= 0 ? undefined : arguments[0], index);
+          }
+        }),
+        value: value === null || value === void 0 ? void 0 : value[index],
+        onChange: undefined
+      }) : _objectSpread(_objectSpread({
+        key: index
+      }, item.props || {}), {}, {
+        value: value === null || value === void 0 ? void 0 : value[index],
+        onChange: function onChange(itemValue) {
+          var _props$onChange, _props;
+          fieldSetOnChange(itemValue, index);
+          (_props$onChange = (_props = item.props).onChange) === null || _props$onChange === void 0 || _props$onChange.call(_props, itemValue);
+        }
+      });
+      return /*#__PURE__*/React.cloneElement(item, forkProps);
+    }
+    return item;
+  });
+  var Components = FieldSetType[type];
+  var _useGridHelpers = useGridHelpers(rest),
+    RowWrapper = _useGridHelpers.RowWrapper;
+  var Wrapper = useCallback(function (_ref) {
+    var dom = _ref.children;
+    return /*#__PURE__*/_jsx(Components, _objectSpread(_objectSpread({}, space), {}, {
+      align: "start",
+      wrap: true,
+      children: dom
+    }));
+  }, [Components, space]);
+  return /*#__PURE__*/_jsx(RowWrapper, {
+    Wrapper: Wrapper,
+    children: list
+  });
+};
+var BaseProFormFieldSet = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    space = _ref2.space,
+    valuePropName = _ref2.valuePropName,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  useImperativeHandle(ref, function () {
+    return {};
+  });
+  return /*#__PURE__*/_jsx(FieldSet, _objectSpread(_objectSpread(_objectSpread({
+    space: space,
+    valuePropName: valuePropName
+  }, rest.fieldProps), {}, {
+    // 把 fieldProps 里的重置掉
+    onChange: undefined
+  }, rest), {}, {
+    children: children
+  }));
+});
+var ProFormFieldSet = (_ref3 = warpField) === null || _ref3 === void 0 ? void 0 : _ref3(BaseProFormFieldSet);
+export default ProFormFieldSet;

package/es/form/components/FormItem/FormItemRender/index.d.ts

@@ -0,0 +1,145 @@
+import { Form } from 'antd';
+import React from 'react';
+interface ControlPropsType {
+    id: string;
+    value: any;
+    onChange: (value: any, ...args: any[]) => void;
+}
+export type WithControlPropsType<T = object> = T & Partial<ControlPropsType>;
+interface ControlModelType {
+    value: any;
+    onChange: (value: any) => void;
+}
+interface FormControlProps {
+    valuePropName?: string;
+    trigger?: string;
+}
+interface FormControlMultiProps extends FormControlProps {
+    name: string;
+}
+type GetArrayFieldType<T extends readonly {
+    name: string;
+}[]> = T[number]['name'];
+export declare function useControlModel<T extends FormControlProps>({ value, onChange, id }: WithControlPropsType, model?: T): ControlModelType;
+export declare function useControlModel<const T extends readonly string[]>({ value, onChange, id }: WithControlPropsType, model?: T): {
+    [P in T[number]]: ControlModelType;
+};
+export declare function useControlModel<const T extends readonly FormControlMultiProps[]>({ value, onChange, id }: WithControlPropsType, model?: T): {
+    [P in GetArrayFieldType<T>]: ControlModelType;
+};
+export type FormControlFC<P> = (props: WithControlPropsType<P>) => React.ReactNode;
+type FormControlInjectProps = ReturnType<typeof Form.Item.useStatus> & {
+    id: string;
+    value: any;
+    onChange: (value: any) => void;
+    [x: string]: any;
+};
+/**
+ * 用在 ProForm.Item 或 Form.Item 于 表单项之间的，用于劫持渲染的函数
+ * ``` tsx
+ * <Form.Item name='name' label='名称'>
+ *   <FormControlRender>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <span>prefix</span>
+ *         <Input {...formItemProps} />
+ *       </div>
+ *     )
+ *   }
+ *   </FormControlRender>
+ * </Form.Item>
+ * ```
+ */
+export declare function FormControlRender(props: WithControlPropsType<{
+    children: (props: FormControlInjectProps) => React.ReactElement;
+}>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+/**
+ * 提取props中的 value 和 onChange 属性
+ */
+export declare function pickControlProps(props: FormControlInjectProps): {
+    value: any;
+    onChange: (value: any) => void;
+};
+/**
+ * 提取props中的 value、onChange 和 id 属性
+ */
+export declare function pickControlPropsWithId(props: FormControlInjectProps): {
+    id: string;
+    value: any;
+    onChange: (value: any) => void;
+};
+/**
+ * 用于包裹ProForm.Item Form.Item，使其可以使用render props的形式
+ * @description 用法
+ * const FormItem = withFormItemRender(用于包裹ProForm.Item)
+ * ``` tsx
+ * <FormItem name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <span>prefix</span>
+ *         <Input {...formItemProps} />
+ *       </div>
+ *     )
+ *   }
+ * </FormItem>
+ * ```
+ */
+export declare function withFormItemRender<T extends React.FC<any>>(Comp: T): React.FC<Omit<React.ComponentProps<T>, 'children'> & {
+    children: (formItemProps: FormControlInjectProps) => React.ReactNode;
+}>;
+/**
+ * 用 withFormItemRender 加工Form.Item，使其拥有render props能力，同时暴露出 status 属性方便自定义组件校验使用
+ *
+ * ``` tsx
+ *   <FormItemRender name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <h3>prefix</h3>
+ *         <textarea {...formItemProps} style={{ borderColor: formItemProps.status === 'error' ? 'red' : undefined }} />
+ *       </div>
+ *     )
+ *   }
+ *   </FormItemRender>
+ * ```
+ */
+export declare const FormItemRender: React.FC<Omit<import("antd").FormItemProps<unknown>, "children"> & {
+    children: (formItemProps: FormControlInjectProps) => React.ReactNode;
+}>;
+/**
+ * 用 withFormItemRender 加工 ProForm.Item，使其拥有render props能力，同时暴露出 status 属性方便自定义组件校验使用
+ * ``` tsx
+ *   <ProFormItemRender name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <h3>prefix</h3>
+ *         <textarea {...formItemProps} style={{ borderColor: formItemProps.status === 'error' ? 'red' : undefined }} />
+ *       </div>
+ *     )
+ *   }
+ *   </ProFormItemRender>
+ * ```
+ */
+export declare const ProFormItemRender: React.FC<Omit<import("antd").FormItemProps<any> & {
+    ignoreFormItem?: boolean | undefined;
+    valueType?: import("src/utils").ProFieldValueType | undefined;
+    transform?: import("src/utils").SearchTransformKeyFn | undefined;
+    dataFormat?: string | undefined;
+    lightProps?: import("src/form").LightWrapperProps | undefined;
+    proFormFieldKey?: any;
+} & {
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    addonWarpStyle?: React.CSSProperties | undefined;
+    convertValue?: import("src/utils").SearchConvertKeyFn | undefined;
+    help?: React.ReactNode | ((params: {
+        errors: React.ReactNode[];
+        warnings: React.ReactNode[];
+    }) => React.ReactNode);
+}, "children"> & {
+    children: (formItemProps: FormControlInjectProps) => React.ReactNode;
+}>;
+export {};

package/es/form/components/FormItem/FormItemRender/index.js

@@ -0,0 +1,153 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["children"],
+  _excluded2 = ["children"];
+import { Form } from 'antd';
+import React from 'react';
+import ProFormItem from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+function getControlConfigProps() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var valuePropName = props.valuePropName || 'value';
+  var trigger = props.trigger || 'onChange';
+  var name = props.name;
+  return {
+    valuePropName: valuePropName,
+    trigger: trigger,
+    name: name
+  };
+}
+export function useControlModel(_ref, model) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  if (!Array.isArray(model)) {
+    var p = getControlConfigProps(model);
+    return _defineProperty(_defineProperty({}, p.valuePropName, value), p.trigger, function (e) {
+      onChange === null || onChange === void 0 || onChange(e !== null && e !== void 0 && e.target ? e.target[p.valuePropName] : e);
+    });
+  }
+  return model.reduce(function (acc, k) {
+    var p = getControlConfigProps(k);
+    var name = p.name || k;
+    acc[name] = _defineProperty(_defineProperty({}, p.valuePropName, value === null || value === void 0 ? void 0 : value[name]), p.trigger, function (v) {
+      onChange === null || onChange === void 0 || onChange(_objectSpread(_objectSpread({}, value), {}, _defineProperty({}, name, v !== null && v !== void 0 && v.target ? v.target[p.valuePropName] : v)));
+    });
+    return acc;
+  }, {});
+}
+/**
+ * 用在 ProForm.Item 或 Form.Item 于 表单项之间的，用于劫持渲染的函数
+ * ``` tsx
+ * <Form.Item name='name' label='名称'>
+ *   <FormControlRender>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <span>prefix</span>
+ *         <Input {...formItemProps} />
+ *       </div>
+ *     )
+ *   }
+ *   </FormControlRender>
+ * </Form.Item>
+ * ```
+ */
+export function FormControlRender(props) {
+  var children = props.children,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _Form$Item$useStatus = Form.Item.useStatus(),
+    status = _Form$Item$useStatus.status,
+    errors = _Form$Item$useStatus.errors,
+    warnings = _Form$Item$useStatus.warnings;
+  return children(_objectSpread({
+    status: status,
+    errors: errors,
+    warnings: warnings
+  }, restProps));
+}
+
+/**
+ * 提取props中的 value 和 onChange 属性
+ */
+export function pickControlProps(props) {
+  return {
+    value: props.value,
+    onChange: function onChange(value) {
+      return props.onChange(value !== null && value !== void 0 && value.target ? value.target.value : value);
+    }
+  };
+}
+
+/**
+ * 提取props中的 value、onChange 和 id 属性
+ */
+export function pickControlPropsWithId(props) {
+  return _objectSpread(_objectSpread({}, pickControlProps(props)), {}, {
+    id: props.id
+  });
+}
+
+/**
+ * 用于包裹ProForm.Item Form.Item，使其可以使用render props的形式
+ * @description 用法
+ * const FormItem = withFormItemRender(用于包裹ProForm.Item)
+ * ``` tsx
+ * <FormItem name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <span>prefix</span>
+ *         <Input {...formItemProps} />
+ *       </div>
+ *     )
+ *   }
+ * </FormItem>
+ * ```
+ */
+export function withFormItemRender(Comp) {
+  return function (props) {
+    var children = props.children,
+      restProps = _objectWithoutProperties(props, _excluded2);
+    return /*#__PURE__*/_jsx(Comp, _objectSpread(_objectSpread({}, restProps), {}, {
+      children: /*#__PURE__*/_jsx(FormControlRender, {
+        children: children
+      })
+    }));
+  };
+}
+
+/**
+ * 用 withFormItemRender 加工Form.Item，使其拥有render props能力，同时暴露出 status 属性方便自定义组件校验使用
+ *
+ * ``` tsx
+ *   <FormItemRender name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <h3>prefix</h3>
+ *         <textarea {...formItemProps} style={{ borderColor: formItemProps.status === 'error' ? 'red' : undefined }} />
+ *       </div>
+ *     )
+ *   }
+ *   </FormItemRender>
+ * ```
+ */
+export var FormItemRender = withFormItemRender(Form.Item);
+
+/**
+ * 用 withFormItemRender 加工 ProForm.Item，使其拥有render props能力，同时暴露出 status 属性方便自定义组件校验使用
+ * ``` tsx
+ *   <ProFormItemRender name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <h3>prefix</h3>
+ *         <textarea {...formItemProps} style={{ borderColor: formItemProps.status === 'error' ? 'red' : undefined }} />
+ *       </div>
+ *     )
+ *   }
+ *   </ProFormItemRender>
+ * ```
+ */
+export var ProFormItemRender = withFormItemRender(ProFormItem);

package/es/form/components/FormItem/Group/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProFormGroupProps } from '../../../typing';
+declare const Group: React.FC<ProFormGroupProps>;
+export default Group;