react-antd-xform 1.0.0

package/dist/form/type.d.ts

@@ -0,0 +1,289 @@
+import { ReactNode } from 'react';
+import { Field, FormModel } from './model';
+import { FieldType, ModelType } from './enum';
+type valueOf<T> = T[keyof T];
+export type XName<D> = 0 extends D & 1 ? any : D extends (infer U)[] ? number | `${number}` | `${number}.${XName<U>}` : D extends object ? valueOf<{
+    [K in keyof D & string]: K | `${K}.${XName<D[K]>}`;
+}> : never;
+type IfAny<T, TRUE, FALSE> = 0 extends T & 1 ? TRUE : FALSE;
+export type ResolveXName<D, Path extends string | number> = 0 extends Path & 1 ? any : string extends Path ? IfAny<D, any, unknown> : Path extends number ? D extends Array<infer U> ? U : unknown : Path extends keyof D ? D[Path] : Path extends `${infer K}.${infer R}` ? K extends keyof D ? ResolveXName<D[K], R> : unknown : unknown;
+export type ValueShape = 'array' | 'object';
+export type FieldValidateTrigger = '*' | 'blur' | 'change' | 'mount';
+export interface FieldConfig<D> {
+    htmlId?: string;
+    label?: React.ReactNode;
+    help?: React.ReactNode;
+    tip?: React.ReactNode;
+    asterisk?: boolean;
+    afterChange?(...args: any[]): void;
+    /** 覆盖 FormItem 上的错误信息 */
+    error?: React.ReactNode;
+    /** 在 `<FormItem />` 上设置的 props.value（也可能是 props.checked，取决于组件类型） */
+    valueProp?: any;
+    defaultValue?: any;
+    /** 在 `<FormItem />` 上设置的 props.defaultValue */
+    defaultValueProp?: any;
+    isEmpty?(value: any): boolean;
+    required?: boolean;
+    requiredMessage?: string;
+    writeDefaultValueToModel?: boolean | 'force';
+    autoUnmount?: boolean;
+    validate?(value: any, field: Field<D>, trigger: FieldValidateTrigger): undefined | null | string | Promise<any>;
+    validateOnMount?: boolean;
+    validateOnChange?: boolean;
+    validateOnBlur?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    status?: string;
+}
+export interface CheckConfig<D> {
+    validate(values: D, model: FormModel<D>): undefined | null | string | Promise<any>;
+    validateOnMount?: boolean;
+}
+export interface FieldState {
+    error?: any;
+    validating?: boolean;
+    cancelValidation?(): void;
+    [key: string]: any;
+}
+type FieldCreateCommon = {
+    parent: FormModel;
+    name: string;
+    forkName?: string;
+};
+export type FieldCreateOptions = ({
+    fieldType: FieldType.normal;
+} & FieldCreateCommon) | ({
+    fieldType: FieldType.tuple;
+    tupleParts: string[];
+} & FieldCreateCommon) | ({
+    fieldType: FieldType.readonly;
+    value: any;
+} & FieldCreateCommon);
+export type FormModelCreateOptions = {
+    modelType: ModelType.rootModel;
+} | {
+    modelType: ModelType.subModel;
+    parent: FormModel;
+    name: string;
+};
+export interface FormEnvContextType {
+    /** 提交表单时的回调函数，需配合 <Form.Submit /> 使用 */
+    onSubmit?(submitValues: any, model: FormModel<any>): void;
+    /** 提交表单时的出错回调函数，需配合 <Form.Submit /> 使用 */
+    onError?(errors: any, model: FormModel<any>): void;
+    /** 清空表单时的回调函数，需配合 <Form.Reset /> 使用 */
+    onReset?(model: FormModel<any>): void;
+    /**
+     * 是否为预览态
+     * @default false
+     * */
+    isPreview?: boolean;
+    /**
+     * 组件加载时是否触发校验
+     * @default false
+     * */
+    validateOnMount?: boolean;
+    /**
+     * 值修改时是否触发校验
+     * @default true
+     * */
+    validateOnChange?: boolean;
+    /**
+     * 组件失去焦点时是否触发校验
+     * @default true
+     * */
+    validateOnBlur?: boolean;
+    /**
+     * 是否将 FormItem 上的 defaultValue 回写到 model 中.
+     * 注意只有「不为 undefined」且「通过 FormItem props 设置的」的默认值才会被回写到 model 中.
+     * @default false
+     * */
+    writeDefaultValueToModel?: boolean | 'force';
+    /**
+     * FormItem 卸载时，是否自动将对应数据清除
+     * @default false
+     */
+    autoUnmount?: boolean;
+    /**
+     * 表单内控件的 html id 前缀。
+     *
+     * 表单会以该属性为前缀为各个控件分配 id 属性，使控件与 html label 标签产生对应关系，点击 label 可以聚焦到相应控件上。
+     *
+     * 默认情况下，表单内部会自动生成一个随机字符串作为前缀。
+     * 将该属性设置为 null 可以关闭 label 关联行为；设置为指定字符串则可使用指定前缀。
+     *
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label
+     * */
+    htmlIdPrefix?: string;
+}
+export interface FormLayoutParams {
+    /** 标签位置，可选 'left' 或 'top'  */
+    labelPosition?: 'left' | 'top';
+    /** 标签宽度 */
+    labelWidth?: string | number;
+    /** 控件宽度 */
+    controlWidth?: string | number;
+    /** 两个 form item 之间的间距 */
+    formItemGap?: string | number;
+    /** labelPosition=top 时，是否内联展示 error 消息 */
+    inlineError?: boolean;
+}
+export interface FormProps extends FormEnvContextType {
+    /** 受控用法。 xform 模型对象，一般由上层通过 new FormModel(...) 创建而成 */
+    model?: FormModel;
+    /** 非受控用法。 表单的默认值 */
+    defaultValue?: unknown;
+    /** @category 布局 */
+    style?: React.CSSProperties;
+    /** @category 布局 */
+    className?: string;
+    /**
+     * 透传给最外层 div 的 props
+     * @category 布局
+     * */
+    containerProps?: React.HTMLProps<HTMLDivElement>;
+    /**
+     * 表单布局参数
+     * @category 布局
+     * */
+    layout?: FormLayoutParams;
+    children?: React.ReactNode;
+}
+export interface FormLayoutParams {
+    /** 标签位置，可选 'left' 或 'top'  */
+    labelPosition?: 'left' | 'top';
+    /** 标签宽度 */
+    labelWidth?: string | number;
+    /** 控件宽度 */
+    controlWidth?: string | number;
+    /** 两个 form item 之间的间距 */
+    formItemGap?: string | number;
+    /** labelPosition=top 时，是否内联展示 error 消息 */
+    inlineError?: boolean;
+}
+export interface FormLayoutProps extends Partial<FormLayoutParams> {
+    style?: React.CSSProperties;
+    className?: string;
+    children?: ReactNode;
+    containerProps?: any;
+    defaultLabelTopPosition?: number | string;
+}
+export interface FormItemGroupProps {
+    label?: React.ReactNode;
+    tip?: React.ReactNode;
+    asterisk?: boolean;
+    children?: React.ReactNode;
+    labelWidth?: number | string;
+    labelTopPosition?: number | string;
+    controlWidth?: number | string;
+    className?: string;
+    style?: React.CSSProperties;
+    inline?: boolean;
+}
+export interface FormItemComponentProps {
+    value?: any;
+    onChange?(...args: any[]): void;
+    onFocus?(...args: any[]): void;
+    onBlur?(...args: any[]): void;
+    readOnly?: any;
+    disabled?: any;
+    isPreview?: any;
+    [prop: string]: any;
+}
+export interface FormItemCreationOptions {
+    /** 名称 */
+    name: string;
+    /** 是否为隐藏元素 */
+    hidden?: boolean;
+    /** 是否需要将 field 对象传递给组件 */
+    withField?: boolean;
+    /** 控件对应的 React 组件，例如 `<FormItem component="select" />` 对应 `Select` 组件. */
+    component?: React.ComponentType<FormItemComponentProps>;
+    /** 控件渲染方法，与 component 参数二选一，优先级高于 component */
+    render?(arg: FormItemComponentProps): React.ReactElement;
+    /** 组件值的属性名称，默认为 `'value'` */
+    valuePropName?: string;
+    /** 组件状态值的属性名称，默认为 `'state'` */
+    statusPropName?: string;
+    /** 预览态下组件的渲染方法。如果不设置该方法，预览态下将使用 render/component 作为后备方案. */
+    renderPreview?(props: FormItemComponentProps): React.ReactNode;
+    /** 默认值 */
+    defaultValue?: any;
+    /** 组件类型默认的空值判断方法 */
+    isEmpty?(value: any): boolean;
+    /** 组件是否具有固有宽度，默认为 true。该选项为 true 时，controlWidth 将不对组件产生效果 */
+    hasIntrinsicWidth?: boolean;
+}
+export interface FormItemProps extends Omit<FieldConfig<any>, 'defaultValueProp' | 'valueProp' | 'htmlId'> {
+    use?: boolean;
+    component: string | React.ComponentType<FormItemComponentProps>;
+    componentProps?: any;
+    dataSource?: any;
+    style?: React.CSSProperties;
+    className?: string;
+    name?: string;
+    field?: Field;
+    value?: any;
+    onChange?(nextValue: any): void;
+    onFocus?(): void;
+    onBlur?(): void;
+    renderPreview?(props: FormItemProps): React.ReactNode;
+    labelWidth?: number | string;
+    labelTopPosition?: number | string;
+    controlWidth?: number | string;
+    labelStyle?: React.CSSProperties;
+    controlStyle?: React.CSSProperties;
+    rightNode?: React.ReactNode;
+    isPreview?: boolean;
+}
+export interface FormItemViewProps {
+    /** `<label />` 的 id 属性 */
+    htmlId?: string;
+    /** 标签 */
+    label?: React.ReactNode;
+    /** 帮助文本 */
+    help?: React.ReactNode;
+    /** 提示信息 */
+    tip?: React.ReactNode;
+    /** 是否展示「*」 */
+    asterisk?: boolean;
+    /** 错误信息 */
+    error?: React.ReactNode;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+    /** 标签宽度 */
+    labelWidth?: string | number;
+    /** 标签内联样式 */
+    labelStyle?: React.CSSProperties;
+    /** 控件宽度 */
+    controlWidth?: string | number;
+    /** 控件内联样式 */
+    controlStyle?: React.CSSProperties;
+    /** 在控件右侧添加自定义内容 */
+    rightNode?: React.ReactNode;
+}
+export type SubmitExtraOptions = {
+    valueFilter?: 'mounted' | 'all';
+    mergeDefaultValue?: boolean;
+    scrollToFirstError?: boolean;
+    animateErrorFields?: boolean;
+};
+export type SubmitOptions = Pick<FormEnvContextType, 'onSubmit' | 'onError'> & SubmitExtraOptions;
+export interface FormArrayLayoutInput {
+    /** 数组的表单模型 */
+    arrayModel: FormModel<unknown[]>;
+    /** 数组长度，即 arrayModel.values.length */
+    itemCount: number;
+    /** 获取每个数组元素对应的子表单 */
+    itemContent(itemIndex: number, itemModel: FormModel<any>): React.ReactNode;
+}
+export interface FormArrayProps<T> {
+    use?: boolean;
+    arrayModel?: FormModel<T[]>;
+    name?: string;
+    layout?(input: FormArrayLayoutInput): React.ReactElement;
+    children?: React.ReactNode | ((index: number, model: FormModel<T>) => React.ReactNode);
+}
+export {};

package/dist/form-ui/common-utils.d.ts

@@ -0,0 +1,9 @@
+export declare function isEmptyValue(value: any): boolean;
+/**
+ * antd中某些组件的onChange并不是直接返回value,而是e.target.value
+ */
+export declare const withValueChangeHandler: <T extends {
+    onChange?: (...args: any[]) => void;
+}>(Component: React.ComponentType<T>) => (props: Omit<T, "onChange"> & {
+    onChange?: (value: any) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/form-ui/common-utils.js

@@ -0,0 +1,17 @@
+import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+function isEmptyValue(value) {
+  return value == null || value === "";
+}
+const withValueChangeHandler = (Component) => {
+  return (props) => {
+    const handleChange = (e) => {
+      var _a;
+      (_a = props.onChange) == null ? void 0 : _a.call(props, e.target.value);
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props, onChange: handleChange });
+  };
+};
+export {
+  isEmptyValue,
+  withValueChangeHandler
+};

package/dist/form-ui/default-button.d.ts

@@ -0,0 +1,3 @@
+import { SubmitExtraOptions } from '../form/type';
+import { ButtonProps } from './type';
+export declare function FormSubmit({ type, children, valueFilter, mergeDefaultValue, animateErrorFields, scrollToFirstError, ...props }: ButtonProps & SubmitExtraOptions): import("react/jsx-runtime").JSX.Element;

package/dist/form-ui/default-button.js

@@ -0,0 +1,39 @@
+import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import cx from "../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
+import { Button } from "antd";
+import { modelUtils } from "../form/model-utils.js";
+import { useModel } from "../form/context/modelContext.js";
+import { useFormEnv } from "../form/context/formEnvContext.js";
+function FormSubmit({
+  type = "primary",
+  children = "提交",
+  valueFilter,
+  mergeDefaultValue,
+  animateErrorFields,
+  scrollToFirstError,
+  ...props
+}) {
+  const model = useModel();
+  const { onSubmit, onError } = useFormEnv();
+  const submitOptions = {
+    onSubmit,
+    onError,
+    valueFilter,
+    mergeDefaultValue,
+    animateErrorFields,
+    scrollToFirstError
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Button,
+    {
+      onClick: () => modelUtils.submit(model, submitOptions),
+      type,
+      children,
+      ...props,
+      className: cx("form-submit-button", props.className)
+    }
+  );
+}
+export {
+  FormSubmit
+};

package/dist/form-ui/default-component.d.ts

@@ -0,0 +1,2 @@
+import { FormItemCreationOptions } from '../form/type';
+export declare const ALL_COMPONENTS: FormItemCreationOptions[];

package/dist/form-ui/default-component.js

@@ -0,0 +1,63 @@
+import { Select, Checkbox, InputNumber, Slider, Switch, Input, Radio } from "antd";
+import { isEmptyValue, withValueChangeHandler } from "./common-utils.js";
+const ALL_COMPONENTS = [
+  {
+    name: "input",
+    component: withValueChangeHandler(Input),
+    defaultValue: "",
+    isEmpty: isEmptyValue,
+    hasIntrinsicWidth: false
+  },
+  {
+    name: "textArea",
+    component: withValueChangeHandler(Input.TextArea),
+    defaultValue: "",
+    isEmpty: isEmptyValue,
+    hasIntrinsicWidth: false
+  },
+  {
+    name: "select",
+    component: Select,
+    defaultValue: "",
+    isEmpty: isEmptyValue,
+    hasIntrinsicWidth: false
+  },
+  {
+    name: "radio",
+    component: withValueChangeHandler(Radio.Group),
+    defaultValue: "",
+    isEmpty: isEmptyValue,
+    hasIntrinsicWidth: false
+  },
+  {
+    name: "checkbox",
+    component: Checkbox.Group,
+    defaultValue: "",
+    isEmpty: isEmptyValue,
+    hasIntrinsicWidth: false
+  },
+  {
+    name: "inputNumber",
+    component: InputNumber,
+    defaultValue: "",
+    isEmpty: isEmptyValue,
+    hasIntrinsicWidth: false
+  },
+  {
+    name: "slider",
+    component: Slider,
+    defaultValue: "",
+    isEmpty: isEmptyValue,
+    hasIntrinsicWidth: false
+  },
+  {
+    name: "switch",
+    component: Switch,
+    defaultValue: false,
+    isEmpty: isEmptyValue,
+    hasIntrinsicWidth: false
+  }
+];
+export {
+  ALL_COMPONENTS
+};

package/dist/form-ui/type.d.ts

@@ -0,0 +1,2 @@
+import { Button } from 'antd';
+export type ButtonProps = React.PropsWithChildren<React.ComponentProps<typeof Button>>;

package/dist/helpers/AsyncValue.d.ts

@@ -0,0 +1,38 @@
+export declare class AsyncValue<T> {
+    private _disposers;
+    private _error;
+    private _reaction;
+    private _status;
+    private _current;
+    private _cancelLastGetter;
+    private _atom;
+    private _refreshAtom;
+    private fetcher;
+    private options;
+    name: string;
+    static _globalCount: number;
+    static SKIP: string;
+    static StillLoading: {
+        new (message?: string): {
+            name: string;
+            message: string;
+            stack?: string;
+        };
+        captureStackTrace(targetObject: object, constructorOpt?: Function): void;
+        prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+        stackTraceLimit: number;
+    };
+    constructor(fetcher: () => Promise<T>, initValue: T | null, options?: Record<string, unknown>);
+    get _mobxGlobal(): any;
+    _start: () => void;
+    _stop: () => void;
+    refresh(): void;
+    dispose(): void;
+    get status(): string;
+    get _inner_current(): T | null;
+    get current(): T | null;
+    get error(): any;
+    get isLoading(): boolean;
+    get isReady(): boolean;
+    get isError(): boolean;
+}

package/dist/helpers/AsyncValue.js

@@ -0,0 +1,154 @@
+import { Reaction, runInAction, createAtom, makeObservable, computed, onBecomeObserved, onBecomeUnobserved, _getGlobalState } from "mobx";
+const _AsyncValue = class _AsyncValue {
+  constructor(fetcher, initValue, options = {}) {
+    this._start = () => {
+      if (this._reaction) {
+        return;
+      }
+      this._reaction = new Reaction(`${this.name}#reaction`, () => {
+        if (this._status !== "loading") {
+          this._status = "loading";
+          this._atom.reportChanged();
+        }
+        if (this._reaction) {
+          this._reaction.track(() => {
+            let cancelled = false;
+            this._cancelLastGetter = () => {
+              cancelled = true;
+            };
+            const prevInXFormAsyncValueFetcher = this._mobxGlobal.inXFormAsyncValueFetcher ?? false;
+            this._mobxGlobal.inXFormAsyncValueFetcher = true;
+            this._refreshAtom.reportObserved();
+            let promise;
+            try {
+              promise = this.fetcher();
+            } catch (err) {
+              promise = Promise.reject(err);
+            }
+            Promise.resolve(promise).then((newValue) => {
+              if (cancelled) {
+                return;
+              }
+              runInAction(() => {
+                this._status = "ready";
+                if (newValue !== _AsyncValue.SKIP) {
+                  this._current = newValue;
+                }
+                this._error = null;
+                this._atom.reportChanged();
+              });
+            }).catch((err) => {
+              if (!(err instanceof _AsyncValue.StillLoading)) {
+                runInAction(() => {
+                  this._status = "error";
+                  this._error = err;
+                  this._atom.reportChanged();
+                });
+                throw err;
+              }
+            });
+            this._mobxGlobal.inXFormAsyncValueFetcher = prevInXFormAsyncValueFetcher;
+          });
+        }
+      });
+      this._reaction.schedule_();
+    };
+    this._stop = () => {
+      this._status = "loading";
+      if (this._reaction) {
+        this._reaction.dispose();
+        this._reaction = null;
+      }
+    };
+    this._disposers = [];
+    this._error = null;
+    this._reaction = null;
+    this._status = "loading";
+    this._current = initValue;
+    this._cancelLastGetter = null;
+    this.fetcher = fetcher;
+    this.options = options;
+    this.name = typeof options.name === "string" ? options.name : `AsyncValue_${_AsyncValue._globalCount++}`;
+    this._atom = createAtom(`${this.name}#state`);
+    this._refreshAtom = createAtom(`${this.name}#refresh`);
+    makeObservable(
+      this,
+      {
+        status: computed,
+        error: computed,
+        _inner_current: computed({ name: `${this.name}.inner_current` }),
+        isLoading: computed,
+        isError: computed,
+        isReady: computed
+      },
+      { name: this.name }
+    );
+    this._disposers.push(this._stop);
+    this._disposers.push(onBecomeObserved(this._atom, this._start));
+    this._disposers.push(
+      onBecomeUnobserved(this._atom, () => {
+        if (!this.options.keepAlive) {
+          this._stop();
+        }
+      })
+    );
+    this._disposers.push(() => {
+      this._status = "ready";
+      this._current = null;
+      this._error = null;
+    });
+  }
+  get _mobxGlobal() {
+    return _getGlobalState();
+  }
+  refresh() {
+    this._refreshAtom.reportChanged();
+  }
+  dispose() {
+    for (const fn of this._disposers) {
+      fn();
+    }
+  }
+  get status() {
+    this._atom.reportObserved();
+    return this._status;
+  }
+  get _inner_current() {
+    this._atom.reportObserved();
+    return this._current;
+  }
+  get current() {
+    if (this._mobxGlobal.inXFormAsyncValueFetcher) {
+      this._atom.reportObserved();
+      if (this._status === "loading") {
+        throw new _AsyncValue.StillLoading();
+      } else if (this._status === "error") {
+        throw this._error;
+      } else {
+        return this._current;
+      }
+    }
+    return this._inner_current;
+  }
+  get error() {
+    this._atom.reportObserved();
+    return this._error;
+  }
+  get isLoading() {
+    return this.status === "loading";
+  }
+  get isReady() {
+    return this.status === "ready";
+  }
+  get isError() {
+    return this.status === "error";
+  }
+};
+_AsyncValue._globalCount = 0;
+_AsyncValue.SKIP = "AsyncValue@SKIP";
+_AsyncValue.StillLoading = class StillLoading extends Error {
+};
+let AsyncValue = _AsyncValue;
+export {
+  AsyncValue
+};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { Form } from './form';
+import { useModel } from './form/context/modelContext';
+import { FormEnvProvider, useFormEnv } from './form/context/formEnvContext';
+import { FormItem, createFormItem } from './form/form-item';
+import { FormModel } from './form/model';
+import { arrayHelpers } from './form/array-helper';
+import { AsyncValue } from './helpers/AsyncValue';
+import { modelUtils } from './form/model-utils';
+export { Form, FormEnvProvider, useFormEnv, useModel, FormItem, createFormItem, FormModel, arrayHelpers, AsyncValue, modelUtils, };

package/dist/index.js

@@ -0,0 +1,20 @@
+import { Form } from "./form/index.js";
+import { useModel } from "./form/context/modelContext.js";
+import { FormEnvProvider, useFormEnv } from "./form/context/formEnvContext.js";
+import { FormItem, createFormItem } from "./form/form-item.js";
+import { FormModel } from "./form/model.js";
+import { arrayHelpers } from "./form/array-helper.js";
+import { AsyncValue } from "./helpers/AsyncValue.js";
+import { modelUtils } from "./form/model-utils.js";
+export {
+  AsyncValue,
+  Form,
+  FormEnvProvider,
+  FormItem,
+  FormModel,
+  arrayHelpers,
+  createFormItem,
+  modelUtils,
+  useFormEnv,
+  useModel
+};