@nickeylin/antd-mobile-pro 2.0.0

package/dist/es/components/pro-form/pro-form-item-stepper.js

@@ -0,0 +1,69 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["fieldProps", "max", "min", "digits", "formatter", "parser", "step"],
+  _excluded2 = ["fieldProps", "max", "min", "digits", "formatter", "parser", "step"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Stepper } from 'antd-mobile';
+import StepperRange from "../stepper-range";
+import ProFormItem, { ProFormItemValue } from "./pro-form-item";
+import { useReadonly } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ProFormStepper(_ref) {
+  var fieldProps = _ref.fieldProps,
+    max = _ref.max,
+    min = _ref.min,
+    digits = _ref.digits,
+    formatter = _ref.formatter,
+    parser = _ref.parser,
+    step = _ref.step,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var stepperProps = _objectSpread({
+    max: max,
+    min: min,
+    digits: digits,
+    formatter: formatter,
+    parser: parser,
+    step: step
+  }, fieldProps);
+  var readonly = useReadonly(props);
+  return /*#__PURE__*/_jsx(ProFormItem, _objectSpread(_objectSpread({}, props), {}, {
+    children: readonly ? /*#__PURE__*/_jsx(ProFormItemValue, {
+      readonly: true
+    }) : /*#__PURE__*/_jsx(Stepper, _objectSpread({}, stepperProps))
+  }));
+}
+function ProFormStepperRange(_ref2) {
+  var fieldProps = _ref2.fieldProps,
+    max = _ref2.max,
+    min = _ref2.min,
+    digits = _ref2.digits,
+    formatter = _ref2.formatter,
+    parser = _ref2.parser,
+    step = _ref2.step,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var readonly = useReadonly(props);
+  return /*#__PURE__*/_jsx(ProFormItem, _objectSpread(_objectSpread({}, props), {}, {
+    childElementPosition: "normal",
+    children: readonly ? /*#__PURE__*/_jsx(ProFormItemValue, {
+      readonly: true
+    }) : /*#__PURE__*/_jsx(StepperRange, _objectSpread({}, _objectSpread(_objectSpread({
+      max: max,
+      min: min,
+      digits: digits,
+      formatter: formatter,
+      parser: parser,
+      step: step,
+      block: true
+    }, fieldProps), {}, {
+      style: _objectSpread({
+        '--gap-horizontal': '8px'
+      }, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style),
+      stepperStyle: _objectSpread({
+        '--height': '24px'
+      }, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.stepperStyle)
+    })))
+  }));
+}
+ProFormStepper.Range = ProFormStepperRange;
+export default ProFormStepper;

package/dist/es/components/pro-form/pro-form-item-switch.d.ts

@@ -0,0 +1,6 @@
+import { SwitchProps } from 'antd-mobile';
+import { FC } from 'react';
+import { ProFormItemFieldProps } from './pro-form-item';
+export type ProFormSwitchProps = ProFormItemFieldProps<SwitchProps>;
+declare const ProFormSwitch: FC<ProFormSwitchProps>;
+export default ProFormSwitch;

package/dist/es/components/pro-form/pro-form-item-switch.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["fieldProps"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Switch } from 'antd-mobile';
+import ProFormItem from "./pro-form-item";
+import { useReadonly } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ProFormSwitch = function ProFormSwitch(_ref) {
+  var fieldProps = _ref.fieldProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var readonly = useReadonly(props);
+  return /*#__PURE__*/_jsx(ProFormItem, _objectSpread(_objectSpread({}, props), {}, {
+    valuePropName: "checked",
+    children: /*#__PURE__*/_jsx(Switch, _objectSpread({
+      disabled: readonly
+    }, fieldProps))
+  }));
+};
+export default ProFormSwitch;

package/dist/es/components/pro-form/pro-form-item-textarea.d.ts

@@ -0,0 +1,6 @@
+import { TextAreaProps } from 'antd-mobile';
+import { FC } from 'react';
+import { ProFormItemFieldProps } from './pro-form-item';
+export type ProFormTextareaProps = ProFormItemFieldProps<TextAreaProps> & Pick<TextAreaProps, 'placeholder' | 'autoSize'>;
+declare const ProFormTextarea: FC<ProFormTextareaProps>;
+export default ProFormTextarea;

package/dist/es/components/pro-form/pro-form-item-textarea.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["fieldProps", "placeholder", "autoSize"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { TextArea } from 'antd-mobile';
+import { useMemo } from 'react';
+import { useConfig } from "../config-provider";
+import ProFormItem, { ProFormItemValue } from "./pro-form-item";
+import { useChildElementPosition, useReadonly } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ProFormTextarea = function ProFormTextarea(p) {
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var fieldProps = p.fieldProps,
+    _p$placeholder = p.placeholder,
+    placeholder = _p$placeholder === void 0 ? locale.common.inputPlaceholder : _p$placeholder,
+    autoSize = p.autoSize,
+    props = _objectWithoutProperties(p, _excluded);
+  var childElementPosition = useChildElementPosition(props);
+  var readonly = useReadonly(props);
+  var inputStyle = useMemo(function () {
+    var style = {};
+    if (childElementPosition === 'right') {
+      style['--text-align'] = 'right';
+    }
+    return style;
+  }, [childElementPosition]);
+  return /*#__PURE__*/_jsx(ProFormItem, _objectSpread(_objectSpread({}, props), {}, {
+    childElementPosition: readonly ? childElementPosition : 'normal',
+    children: readonly ? /*#__PURE__*/_jsx(ProFormItemValue, {
+      readonly: true
+    }) : /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({
+      placeholder: placeholder,
+      autoSize: autoSize,
+      readOnly: readonly
+    }, fieldProps), {}, {
+      style: _objectSpread(_objectSpread({}, inputStyle), fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style)
+    }))
+  }));
+};
+export default ProFormTextarea;

package/dist/es/components/pro-form/pro-form-item-tree-picker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TreeDataNode } from '../tree';
+import { TreePickerProps } from '../tree-picker';
+import { ProFormItemFieldProps } from './pro-form-item';
+export type ProFormTreePickerProps<T extends TreeDataNode<object> = TreeDataNode<object>> = ProFormItemFieldProps<TreePickerProps<T>> & Pick<TreePickerProps<T>, 'rowKey' | 'search' | 'dataSource' | 'params' | 'request'>;
+declare function ProFormTreePicker<T extends TreeDataNode<object> = TreeDataNode<object>>(p: ProFormTreePickerProps<T>): JSX.Element;
+export default ProFormTreePicker;

package/dist/es/components/pro-form/pro-form-item-tree-picker.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["fieldProps", "rowKey", "search", "dataSource", "params", "request", "onClick", "placeholder"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useConfig } from "../config-provider";
+import TreePicker from "../tree-picker";
+import ProFormItem, { ProFormItemValue } from "./pro-form-item";
+import { useReadonly } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ProFormTreePicker(p) {
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var fieldProps = p.fieldProps,
+    rowKey = p.rowKey,
+    search = p.search,
+    dataSource = p.dataSource,
+    params = p.params,
+    request = p.request,
+    _onClick = p.onClick,
+    _p$placeholder = p.placeholder,
+    placeholder = _p$placeholder === void 0 ? locale.common.selectPlaceholder : _p$placeholder,
+    props = _objectWithoutProperties(p, _excluded);
+  var readonly = useReadonly(props);
+  return /*#__PURE__*/_jsx(ProFormItem, _objectSpread(_objectSpread({}, props), {}, {
+    trigger: "onConfirm",
+    onClick: function onClick(e, pickerRef) {
+      var _pickerRef$current;
+      (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || _pickerRef$current.open();
+      _onClick === null || _onClick === void 0 || _onClick(e, pickerRef);
+    },
+    children: /*#__PURE__*/_jsx(TreePicker, _objectSpread(_objectSpread({
+      rowKey: rowKey,
+      search: search,
+      dataSource: dataSource,
+      params: params,
+      request: request
+    }, fieldProps), {}, {
+      children: function children(value, text) {
+        return /*#__PURE__*/_jsx(ProFormItemValue, {
+          value: text,
+          placeholder: placeholder,
+          readonly: readonly
+        });
+      }
+    }))
+  }));
+}
+export default ProFormTreePicker;

package/dist/es/components/pro-form/pro-form-item.d.ts

@@ -0,0 +1,47 @@
+import { FormItemProps } from 'antd-mobile';
+import { NamePath } from 'antd-mobile/es/components/form';
+import { FC, ReactNode } from 'react';
+import { TransformKeyFn } from './utils';
+type SearchConvertKeyFn = (value: any, field: NamePath) => string | boolean | Record<string, any>;
+export type ProFormItemProps = FormItemProps & {
+    readonly?: boolean;
+    placeholder?: string;
+    /**
+     * @name 获取时转化值，一般用于将数据格式化为组件接收的格式
+     * @param value 字段的值。注意：值可能已经转换过，所以这里的`value`可能时转换前的，也可能时转换后的，使用时需进行判断
+     * @param namePath 字段的name
+     * @returns 字段新的值
+     *
+     *
+     * @example a,b => [a,b]     convertValue: (value,namePath)=> Array.isArray(value)?value: value.split(",")
+     * @example string => json   convertValue: (value,namePath)=> typeof value === 'string'?JSON.parse(value):value
+     * @example number => date   convertValue: (value,namePath)=> typeof value === 'number'?Dayjs(value):value
+     * @example YYYY-MM-DD => date   convertValue: (value,namePath)=> Dayjs(value,"YYYY-MM-DD")
+     * @example  string => object   convertValue: (value,namePath)=> { return {value,label:value} }
+     */
+    convertValue?: SearchConvertKeyFn;
+    /**
+     * 提交时转化值，一般用于将值转化为提交的数据
+     * @param value 字段的值。注意：由于可能提交过表单，值可能已经转换过，所以这里的`value`可能时转换前的，也可能时转换后的，使用时需进行判断
+     * @param namePath 字段的name
+     * @param allValues 所有的字段
+     * @returns 字段新的值，如果返回对象，会和所有值 merge 一次
+     *
+     * @example {name:[a,b] => {name:a,b }    transform: (value,namePath,allValues)=> Array.isArray(value)?value.join(","):value
+     * @example {name:dayjs} => {name:string} transform: (value,namePath,allValues)=> typeof value === 'string'?value: value.format("YYYY-MM-DD")
+     * @example {name:dayjs}=> {name:时间戳} transform: (value,namePath,allValues)=> typeof value === 'number' ? value: value.valueOf()
+     * @example {name:{value,label}} => { name:string} transform: (value,namePath,allValues)=> value.value
+     * @example {name:{value,label}} => { valueName,labelName  } transform: (value,namePath,allValues)=> { valueName:value.value, labelName:value.name }
+     */
+    transform?: TransformKeyFn;
+};
+export interface ProFormItemFieldProps<FieldProps> extends ProFormItemProps {
+    fieldProps?: FieldProps;
+}
+declare const ProFormItem: FC<ProFormItemProps>;
+export default ProFormItem;
+export declare const ProFormItemValue: FC<{
+    value?: ReactNode;
+    placeholder?: string;
+    readonly?: boolean;
+}>;

package/dist/es/components/pro-form/pro-form-item.js

@@ -0,0 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["convertValue", "transform", "getValueProps", "className", "childElementPosition", "style", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Form } from 'antd-mobile';
+import { FormContext } from 'antd-mobile/es/components/form/context';
+import classNames from 'classnames';
+import { useContext, useEffect, useMemo } from 'react';
+import { cn } from "../../utils/bem";
+import ProFieldContext from "./pro-field-context";
+import ProFormContext from "./pro-form-context";
+import { useReadonly } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var formItemBem = cn('pro-form-item');
+var ProFormItem = function ProFormItem(_ref) {
+  var convertValue = _ref.convertValue,
+    transform = _ref.transform,
+    getValueProps = _ref.getValueProps,
+    className = _ref.className,
+    childElementPositionProp = _ref.childElementPosition,
+    style = _ref.style,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(ProFieldContext),
+    setFieldValueType = _useContext.setFieldValueType;
+  var readonly = useReadonly(props);
+  var _useContext2 = useContext(ProFormContext),
+    childElementPositionCtx = _useContext2.childElementPosition;
+  var _useContext3 = useContext(FormContext),
+    layout = _useContext3.layout;
+  var getValuePropsFunc = useMemo(function () {
+    if (!convertValue && !getValueProps) return undefined;
+    return function (value) {
+      var _convertValue;
+      var newValue = (_convertValue = convertValue === null || convertValue === void 0 ? void 0 : convertValue(value, props.name)) !== null && _convertValue !== void 0 ? _convertValue : value;
+      if (getValueProps) return getValueProps(newValue);
+      return _defineProperty({}, props.valuePropName || 'value', newValue);
+    };
+  }, [convertValue, getValueProps, props.name, props.valuePropName]);
+  useEffect(function () {
+    // 如果 setFieldValueType 和 props.name 不存在不存入
+    if (!setFieldValueType || !props.name) {
+      return;
+    }
+
+    // TODO: FormItemArray 支持
+    setFieldValueType([props.name].flat(1), transform);
+  }, [props.name, setFieldValueType, transform]);
+  return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({}, props), {}, {
+    style: _objectSpread({
+      '--align-items': layout === 'horizontal' ? 'center' : 'stretch'
+    }, style),
+    childElementPosition: childElementPositionProp || childElementPositionCtx,
+    className: classNames(formItemBem(), className),
+    getValueProps: getValuePropsFunc
+  }, readonly ? {} : {
+    onClick: onClick
+  }));
+};
+export default ProFormItem;
+var bem = cn('pro-form-value');
+export var ProFormItemValue = function ProFormItemValue(_ref3) {
+  var valueProp = _ref3.value,
+    placeholder = _ref3.placeholder,
+    readonly = _ref3.readonly;
+  var value = readonly ? valueProp || '-' : valueProp;
+  return /*#__PURE__*/_jsx("span", {
+    className: bem({
+      placeholder: !value
+    }),
+    children: value || placeholder
+  });
+};

package/dist/es/components/pro-form/pro-form.d.ts

@@ -0,0 +1,29 @@
+import { FormProps } from 'antd-mobile';
+import { FormProps as RcFormProps } from 'rc-field-form';
+import { ForwardedRef } from 'react';
+import { SubmitterProps } from './default-submitter';
+import { ProFormContextType } from './pro-form-context';
+import { ProFormInstance } from './types';
+import { useFormInstace } from './use-form-instance';
+export type ProFormProps<Values extends object = any> = Omit<FormProps, 'onFinish' | 'onValuesChange' | 'onFinishFailed'> & Pick<RcFormProps<Values>, 'form' | 'onValuesChange' | 'onFinishFailed'> & ProFormContextType & {
+    onFinish?(values: Values): Promise<void>;
+    params?: any;
+    request?(params: any): Promise<Partial<Values>>;
+    formRef?: ForwardedRef<ProFormInstance<Values>>;
+    /**
+     * 提交栏配置，默认会提供默认的提交按钮
+     */
+    submitter?: false | SubmitterProps;
+};
+declare function ProForm<Values extends object = any>({ onFinish, params, request, initialValues, disabled, form: formProp, formRef, submitter, layout, className, childElementPosition, readonly, ...props }: ProFormProps<Values>): JSX.Element;
+declare namespace ProForm {
+    var useForm;
+    var useWatch;
+    var Header: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    var Item: import("react").FC<import("./pro-form-item").ProFormItemProps>;
+    var Subscribe: import("react").FC<import("antd-mobile/es/components/form").FormSubscribeProps>;
+    var useFormInstance: typeof useFormInstace;
+}
+export default ProForm;

package/dist/es/components/pro-form/pro-form.js

@@ -0,0 +1,234 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onFinish", "params", "request", "initialValues", "disabled", "form", "formRef", "submitter", "layout", "className", "childElementPosition", "readonly"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { Form, SpinLoading } from 'antd-mobile';
+import { useRequest } from 'ahooks';
+import classNames from 'classnames';
+import { set } from 'rc-util';
+import { useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cn } from "../../utils/bem";
+import DefaultSubmitter from "./default-submitter";
+import ProFieldContext from "./pro-field-context";
+import ProFormContext from "./pro-form-context";
+import ProFormItem from "./pro-form-item";
+import { useFormInstace } from "./use-form-instance";
+import { transformKey } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var covertFormName = function covertFormName(name) {
+  if (!name) return name;
+  if (Array.isArray(name)) return name;
+  return [name];
+};
+var bem = cn('pro-form');
+function ProForm(_ref) {
+  var onFinish = _ref.onFinish,
+    params = _ref.params,
+    request = _ref.request,
+    initialValues = _ref.initialValues,
+    disabled = _ref.disabled,
+    formProp = _ref.form,
+    formRef = _ref.formRef,
+    submitter = _ref.submitter,
+    layout = _ref.layout,
+    className = _ref.className,
+    childElementPosition = _ref.childElementPosition,
+    readonly = _ref.readonly,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    submitting = _useState2[0],
+    setSubmitting = _useState2[1];
+  var _useRequest = useRequest( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _yield$request;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return request === null || request === void 0 ? void 0 : request(params);
+          case 2:
+            _context.t1 = _yield$request = _context.sent;
+            _context.t0 = _context.t1 !== null;
+            if (!_context.t0) {
+              _context.next = 6;
+              break;
+            }
+            _context.t0 = _yield$request !== void 0;
+          case 6:
+            if (!_context.t0) {
+              _context.next = 10;
+              break;
+            }
+            _context.t2 = _yield$request;
+            _context.next = 11;
+            break;
+          case 10:
+            _context.t2 = {};
+          case 11:
+            return _context.abrupt("return", _context.t2);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })), {
+      refreshDeps: []
+    }),
+    initialData = _useRequest.data;
+  var _Form$useForm = Form.useForm(formProp),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var transformRefs = useRef({});
+  var formValues = useMemo(function () {
+    return {
+      getFieldsFormatValue: function getFieldsFormatValue(nameList, omitNil) {
+        return transformKey(!nameList ? form.getFieldsValue() : form.getFieldsValue(nameList), transformRefs.current, {
+          omitNil: omitNil
+        });
+      },
+      getFieldFormatValue: function getFieldFormatValue(paramsNameList, omitNil) {
+        var nameList = covertFormName(paramsNameList);
+        if (!nameList) throw new Error('nameList is require');
+        var value = form.getFieldValue(nameList);
+        var obj = nameList ? set({}, nameList, value) : value;
+        return transformKey(obj, transformRefs.current, {
+          omitNil: omitNil,
+          keyPath: nameList
+        });
+      },
+      getFieldFormatValueObject: function getFieldFormatValueObject(paramsNameList, omitNil) {
+        var nameList = covertFormName(paramsNameList);
+        if (!nameList) throw new Error('nameList is require');
+        var value = form.getFieldValue(nameList);
+        var obj = nameList ? set({}, nameList, value) : value;
+        return transformKey(obj, transformRefs.current, {
+          keyPath: nameList,
+          omitNil: omitNil
+        });
+      },
+      validateFieldsReturnFormatValue: function validateFieldsReturnFormatValue(nameList) {
+        return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          var values, transformedKey;
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!(!Array.isArray(nameList) && nameList)) {
+                  _context2.next = 2;
+                  break;
+                }
+                throw new Error('nameList must be array');
+              case 2:
+                _context2.next = 4;
+                return form.validateFields(nameList);
+              case 4:
+                values = _context2.sent;
+                transformedKey = transformKey(values, transformRefs.current);
+                return _context2.abrupt("return", transformedKey ? transformedKey : {});
+              case 7:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }))();
+      }
+    };
+  }, [form]);
+  var childElementPositionValue = useMemo(function () {
+    return childElementPosition || (layout === 'horizontal' ? 'right' : undefined);
+  }, [childElementPosition, layout]);
+  useImperativeHandle(formRef, function () {
+    return _objectSpread(_objectSpread({}, form), formValues);
+  });
+  return !initialData && request ? /*#__PURE__*/_jsx("div", {
+    style: {
+      paddingTop: 50,
+      paddingBottom: 50,
+      textAlign: 'center'
+    },
+    children: /*#__PURE__*/_jsx(SpinLoading, {
+      style: {
+        margin: 'auto'
+      }
+    })
+  }) : /*#__PURE__*/_jsx(ProFieldContext.Provider, {
+    value: {
+      setFieldValueType: function setFieldValueType(name, transform) {
+        var nameStr = Array.isArray(name) ? name.join('.') : name;
+        if (!nameStr) return;
+        if (!transform) delete transformRefs.current[nameStr];else transformRefs.current[nameStr] = transform;
+      }
+    },
+    children: /*#__PURE__*/_jsx(ProFormContext.Provider, {
+      value: {
+        childElementPosition: childElementPositionValue,
+        readonly: readonly
+      },
+      children: /*#__PURE__*/_jsx(Form, _objectSpread({
+        initialValues: _objectSpread(_objectSpread({}, initialValues), initialData),
+        disabled: disabled,
+        form: form,
+        layout: layout,
+        className: classNames(bem({
+          child: childElementPositionValue
+        }), className),
+        onFinish: ( /*#__PURE__*/function () {
+          var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(values) {
+            var nextValues;
+            return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+              while (1) switch (_context3.prev = _context3.next) {
+                case 0:
+                  if (onFinish) {
+                    _context3.next = 2;
+                    break;
+                  }
+                  return _context3.abrupt("return");
+                case 2:
+                  if (!submitting) {
+                    _context3.next = 4;
+                    break;
+                  }
+                  return _context3.abrupt("return");
+                case 4:
+                  setSubmitting(true);
+                  _context3.prev = 5;
+                  nextValues = transformKey(values, transformRefs.current);
+                  _context3.next = 9;
+                  return onFinish === null || onFinish === void 0 ? void 0 : onFinish(nextValues);
+                case 9:
+                  _context3.next = 14;
+                  break;
+                case 11:
+                  _context3.prev = 11;
+                  _context3.t0 = _context3["catch"](5);
+                  console.log(_context3.t0);
+                case 14:
+                  setSubmitting(false);
+                case 15:
+                case "end":
+                  return _context3.stop();
+              }
+            }, _callee3, null, [[5, 11]]);
+          }));
+          return function (_x) {
+            return _ref3.apply(this, arguments);
+          };
+        }()),
+        footer: submitter !== false && !readonly && /*#__PURE__*/_jsx(DefaultSubmitter, _objectSpread(_objectSpread({}, submitter), {}, {
+          loading: submitting,
+          disabled: disabled
+        }))
+      }, props))
+    })
+  });
+}
+ProForm.useForm = Form.useForm;
+ProForm.useWatch = Form.useWatch;
+ProForm.Header = Form.Header;
+ProForm.Item = ProFormItem;
+ProForm.Subscribe = Form.Subscribe;
+ProForm.useFormInstance = useFormInstace;
+export default ProForm;

package/dist/es/components/pro-form/style.less

@@ -0,0 +1,26 @@
+@class-prefix-form: ~'suid-pro-form';
+
+.@{class-prefix-form} {
+  &--child--right {
+    .adm-form-item-feedback-error {
+      text-align: right;
+    }
+  }
+  &-value {
+    --placeholder-color: var(--adm-color-light);
+
+    &--placeholder {
+      color: var(--placeholder-color);
+    }
+  }
+  .adm-list-item-content-main {
+    overflow: hidden;
+  }
+  .adm-form-item-child.adm-form-item-child-position-right {
+    overflow: hidden;
+    & > .adm-form-item-child-inner {
+      max-width: 100%;
+      word-break: break-all;
+    }
+  }
+}