react-antd-xform 1.0.7 → 1.0.8

package/dist/form/array-helper.js

@@ -4,10 +4,7 @@ import invariant from "../node_modules/.pnpm/invariant@2.2.4/node_modules/invari
 import { Form } from "./index.js";
 import { composeValue } from "./common-utils.js";
 function invariantArrayShapeIsAutoOrArray(arrayModel) {
-  invariant(
-    arrayModel._valueShape === "auto" || arrayModel._valueShape === "array",
-    'arrayModel._valueShape should be "auto" or "array"'
-  );
+  invariant(arrayModel._valueShape === "auto" || arrayModel._valueShape === "array", 'arrayModel._valueShape should be "auto" or "array"');
 }
 function updateSubModelsNames(arrayModel) {
   arrayModel._subModels.forEach((mod, index) => {
@@ -34,10 +31,7 @@ const arrayHelpers = {
     if (arrayModel.values == null) {
       arrayModel.values = [];
     }
-    const value = composeValue(
-      typeof itemFactory === "function" ? itemFactory(arrayModel) : itemFactory,
-      {}
-    );
+    const value = composeValue(typeof itemFactory === "function" ? itemFactory(arrayModel) : itemFactory, {});
     arrayModel.values.push(value);
   }),
   delete: action((arrayModel, itemIndex) => {
@@ -90,18 +84,16 @@ const arrayHelpers = {
       arrayModel._subModels.length = 0;
     }
   }),
-  move: action(
-    (arrayModel, fromIndex, toIndex) => {
-      invariantArrayShapeIsAutoOrArray(arrayModel);
-      if (Array.isArray(arrayModel.values)) {
-        reorderInPlace(arrayModel.values, fromIndex, toIndex);
-      }
-      if (Array.isArray(arrayModel._subModels)) {
-        reorderInPlace(arrayModel._subModels, fromIndex, toIndex);
-        updateSubModelsNames(arrayModel);
-      }
+  move: action((arrayModel, fromIndex, toIndex) => {
+    invariantArrayShapeIsAutoOrArray(arrayModel);
+    if (Array.isArray(arrayModel.values)) {
+      reorderInPlace(arrayModel.values, fromIndex, toIndex);
     }
-  ),
+    if (Array.isArray(arrayModel._subModels)) {
+      reorderInPlace(arrayModel._subModels, fromIndex, toIndex);
+      updateSubModelsNames(arrayModel);
+    }
+  }),
   renderArrayItem(arrayModel, itemIndex, itemContent) {
     const itemModel = arrayModel.getSubModel(itemIndex);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Form.ModelProvider, { value: itemModel, children: itemContent(itemIndex, itemModel) }, itemModel.id);

package/dist/form/common-utils.js

@@ -114,9 +114,7 @@ function convertWatchableToExpression(watch, model) {
         }
       });
     };
-  } else {
-    console.warn("[xform] 无法识别的 watch 参数", watch);
-  }
+  } else ;
 }
 export {
   asCSSLength,

package/dist/form/context/formEnvContext.js

@@ -16,7 +16,10 @@ function FormEnvProvider({
   ...override
 }) {
   const parent = useFormEnv();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvContext.Provider, { value: { ...parent, ...override }, children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvContext.Provider, { value: {
+    ...parent,
+    ...override
+  }, children });
 }
 export {
   FormEnvProvider,

package/dist/form/extend/form-array.js

@@ -4,30 +4,34 @@ import { useModel, ModelProvider } from "../context/modelContext.js";
 import { range } from "../common-utils.js";
 import { arrayHelpers } from "../array-helper.js";
 import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
-const defaultArrayLayout = ({ arrayModel, itemContent, itemCount }) => {
-  return range(itemCount).map(
-    (itemIndex) => arrayHelpers.renderArrayItem(arrayModel, itemIndex, itemContent)
-  );
+const defaultArrayLayout = ({
+  arrayModel,
+  itemContent,
+  itemCount
+}) => {
+  return range(itemCount).map((itemIndex) => arrayHelpers.renderArrayItem(arrayModel, itemIndex, itemContent));
 };
-const FormArray = observer(
-  ({
-    name,
-    children,
-    layout,
-    arrayModel: arrayModelProp,
-    use
-  }) => {
-    var _a;
-    const parent = useModel();
-    if (use === false) {
-      return null;
-    }
-    const arrayModel = arrayModelProp ?? (name === "&" ? parent : parent.getSubModel(name));
-    const itemCount = ((_a = arrayModel.values) == null ? void 0 : _a.length) ?? 0;
-    const itemContent = typeof children === "function" ? children : () => children;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: arrayModel, children: (layout ?? defaultArrayLayout)({ arrayModel, itemCount, itemContent }) });
+const FormArray = observer(({
+  name,
+  children,
+  layout,
+  arrayModel: arrayModelProp,
+  use
+}) => {
+  var _a;
+  const parent = useModel();
+  if (use === false) {
+    return null;
   }
-);
+  const arrayModel = arrayModelProp ?? (name === "&" ? parent : parent.getSubModel(name));
+  const itemCount = ((_a = arrayModel.values) == null ? void 0 : _a.length) ?? 0;
+  const itemContent = typeof children === "function" ? children : () => children;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: arrayModel, children: (layout ?? defaultArrayLayout)({
+    arrayModel,
+    itemCount,
+    itemContent
+  }) });
+});
 export {
   FormArray
 };

package/dist/form/extend/form-check.js

@@ -23,13 +23,11 @@ const FormCheck = observer(function FormCheck2({
   };
   useLayoutEffect(() => check._track(checkConfig));
   useEffect(() => {
-    return reaction(
-      convertWatchableToExpression(watch, model),
-      () => {
-        check.validate();
-      },
-      { fireImmediately: checkConfig.validateOnMount }
-    );
+    return reaction(convertWatchableToExpression(watch, model), () => {
+      check.validate();
+    }, {
+      fireImmediately: checkConfig.validateOnMount
+    });
   }, [check, model, ...deps]);
   if (renderError === true) {
     return check.error;

package/dist/form/extend/form-effect.js

@@ -17,13 +17,16 @@ const FormEffect = observer(function FormEffect2({
     effectRef.current = effect;
   });
   useEffect(() => {
-    return reaction(
-      convertWatchableToExpression(watch, model),
-      (next, prev) => {
-        effectRef.current(next, { model, prev, next });
-      },
-      { fireImmediately, equals }
-    );
+    return reaction(convertWatchableToExpression(watch, model), (next, prev) => {
+      effectRef.current(next, {
+        model,
+        prev,
+        next
+      });
+    }, {
+      fireImmediately,
+      equals
+    });
   }, deps);
   return null;
 });

package/dist/form/extend/form-layout.js

@@ -141,29 +141,17 @@ function FormLayout({
   inlineError,
   containerProps
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    FormLayoutContainer,
-    {
-      style: {
-        "--label-width": asCSSLength(labelWidth),
-        "--control-width": asCSSLength(controlWidth),
-        "--form-item-gap": asCSSLength(formItemGap),
-        "--form-item-label-top-position": asCSSLength(defaultLabelTopPosition),
-        ...style
-      },
-      className: cx(
-        "xform-container",
-        {
-          horizontal: labelPosition === "left",
-          vertical: labelPosition === "top",
-          "inline-error": labelPosition === "top" && inlineError
-        },
-        className
-      ),
-      ...containerProps,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayoutContainer, { style: {
+    "--label-width": asCSSLength(labelWidth),
+    "--control-width": asCSSLength(controlWidth),
+    "--form-item-gap": asCSSLength(formItemGap),
+    "--form-item-label-top-position": asCSSLength(defaultLabelTopPosition),
+    ...style
+  }, className: cx("xform-container", {
+    horizontal: labelPosition === "left",
+    vertical: labelPosition === "top",
+    "inline-error": labelPosition === "top" && inlineError
+  }, className), ...containerProps, children });
 }
 export {
   FormLayout

package/dist/form/extend/form-model-consumer.js

@@ -1,7 +1,9 @@
 import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
 import { useModel } from "../context/modelContext.js";
 import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
-const FormModelConsumer = observer(({ children }) => {
+const FormModelConsumer = observer(({
+  children
+}) => {
   const model = useModel();
   return children(model);
 });

package/dist/form/extend/form-object.js

@@ -2,16 +2,18 @@ import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/no
 import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
 import { useModel, ModelProvider } from "../context/modelContext.js";
 import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
-const FormObject = observer(
-  ({ name, children, use }) => {
-    const parent = useModel();
-    if (use === false) {
-      return null;
-    }
-    const model = name === "&" ? parent : parent.getSubModel(name);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children });
+const FormObject = observer(({
+  name,
+  children,
+  use
+}) => {
+  const parent = useModel();
+  if (use === false) {
+    return null;
   }
-);
+  const model = name === "&" ? parent : parent.getSubModel(name);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children });
+});
 export {
   FormObject
 };

package/dist/form/extend/form-reset.js

@@ -10,15 +10,7 @@ function FormReset({
 }) {
   const model = useModel();
   const formEnv = useFormEnv();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    ButtonComponent,
-    {
-      ...props,
-      onClick: action(() => modelUtils.reset(model, formEnv)),
-      children,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonComponent, { ...props, onClick: action(() => modelUtils.reset(model, formEnv)), children, ...props });
 }
 export {
   FormReset

package/dist/form/extend/form-submit.js

@@ -8,20 +8,15 @@ function FormSubmit({
   ...props
 }) {
   const model = useModel();
-  const { onSubmit, onError } = useFormEnv();
+  const {
+    onSubmit,
+    onError
+  } = useFormEnv();
   const submitOptions = {
     onSubmit,
     onError
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    ButtonComponent,
-    {
-      ...props,
-      onClick: () => modelUtils.submit(model, submitOptions),
-      children,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonComponent, { ...props, onClick: () => modelUtils.submit(model, submitOptions), children, ...props });
 }
 export {
   FormSubmit

package/dist/form/form-item.js

@@ -61,34 +61,25 @@ function FormItemView({
   labelStyle,
   controlStyle
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      "data-xform-id": htmlId,
-      className: cx("form-item", className),
-      style: {
-        "--label-width": asCSSLength(labelWidth),
-        "--control-width": asCSSLength(controlWidth),
-        ...style
-      },
-      children: [
-        label == null && tip == null ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "form-item-label", htmlFor: htmlId, style: labelStyle, children: [
-          asterisk && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "required-indicator" }),
-          label && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "form-item-label-text", children: label })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "form-item-control", style: controlStyle, children: [
-          children,
-          help && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "help", children: help }),
-          error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "error-message", children: error })
-        ] }),
-        rightNode
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-xform-id": htmlId, className: cx("form-item", className), style: {
+    "--label-width": asCSSLength(labelWidth),
+    "--control-width": asCSSLength(controlWidth),
+    ...style
+  }, children: [
+    label == null && tip == null ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "form-item-label", htmlFor: htmlId, style: labelStyle, children: [
+      asterisk && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "required-indicator" }),
+      label && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "form-item-label-text", children: label })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "form-item-control", style: controlStyle, children: [
+      children,
+      help && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "help", children: help }),
+      error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "error-message", children: error })
+    ] }),
+    rightNode
+  ] });
 }
 function createFormItem(inputOptions) {
   const options = processCreationOptions(inputOptions);
-  console.log(options, "options");
   function FormItemComponent({
     defaultValue: defaultValueProp,
     isEmpty = options.isEmpty,
@@ -110,15 +101,14 @@ function createFormItem(inputOptions) {
     const componentProps = {
       id: htmlId,
       variant,
-      ...isPreview ? { isPreview: true } : null,
+      ...isPreview ? {
+        isPreview: true
+      } : null,
       // dataSource, readOnly, disabled,options 允许直接透传
       ...pick(props, ["dataSource", "readOnly", "disabled", "options"]),
       ...componentPropsProp,
       // status 优先用 prop 中的值，然后再根据 error 自动判断
-      [options.statusPropName]: composeValue(
-        componentPropsProp == null ? void 0 : componentPropsProp[options.statusPropName],
-        composeValue(props[options.statusPropName], error ? "error" : void 0)
-      ),
+      [options.statusPropName]: composeValue(componentPropsProp == null ? void 0 : componentPropsProp[options.statusPropName], composeValue(props[options.statusPropName], error ? "error" : void 0)),
       [options.valuePropName]: composeValue(props[options.valuePropName], value),
       onChange: composeValue(props.onChange, field.handleChange),
       onFocus: composeValue(props.onFocus, field.handleFocus),
@@ -143,15 +133,13 @@ function createFormItem(inputOptions) {
     useLayoutEffect(() => field._track(fieldConfig));
     useLayoutEffect(() => {
       if (fieldConfig.writeDefaultValueToModel === "force") {
-        return reaction(
-          () => field.value,
-          () => {
-            if (field.value === void 0 && fieldConfig.defaultValueProp !== void 0) {
-              field.value = fieldConfig.defaultValueProp;
-            }
-          },
-          { fireImmediately: true }
-        );
+        return reaction(() => field.value, () => {
+          if (field.value === void 0 && fieldConfig.defaultValueProp !== void 0) {
+            field.value = fieldConfig.defaultValueProp;
+          }
+        }, {
+          fireImmediately: true
+        });
       } else if (fieldConfig.writeDefaultValueToModel) {
         if (field.value === void 0 && fieldConfig.defaultValueProp !== void 0) {
           runInAction(() => {
@@ -179,30 +167,11 @@ function createFormItem(inputOptions) {
         return null;
       }
     }
-    console.log(isPreview, "isPreviewisPreviewisPreview");
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      FormItemView,
-      {
-        htmlId,
-        label: props.label,
-        help: props.help,
-        asterisk: props.asterisk ?? props.required,
-        error,
-        tip: props.tip,
-        style: props.style,
-        className: cx(props.className, {
-          "form-item-hidden": options.hidden,
-          "form-item-preview": isPreview,
-          "auto-control-width": options.hasIntrinsicWidth
-        }),
-        labelWidth: props.labelWidth,
-        labelStyle: props.labelStyle,
-        controlWidth: props.controlWidth,
-        controlStyle: props.controlStyle,
-        rightNode: props.rightNode,
-        children: isPreview ? renderPreview(componentProps) : options.render(componentProps)
-      }
-    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FormItemView, { htmlId, label: props.label, help: props.help, asterisk: props.asterisk ?? props.required, error, tip: props.tip, style: props.style, className: cx(props.className, {
+      "form-item-hidden": options.hidden,
+      "form-item-preview": isPreview,
+      "auto-control-width": options.hasIntrinsicWidth
+    }), labelWidth: props.labelWidth, labelStyle: props.labelStyle, controlWidth: props.controlWidth, controlStyle: props.controlStyle, rightNode: props.rightNode, children: isPreview ? renderPreview(componentProps) : options.render(componentProps) });
   }
   FormItemComponent.displayName = `FormItem__${options.name}`;
   return observer(FormItemComponent);
@@ -214,34 +183,33 @@ for (const config of ALL_COMPONENTS) {
 }
 const AnonymousFormItem = createFormItem({
   name: "anonymous",
-  render({ $Component: Component, ...props }) {
+  render({
+    $Component: Component,
+    ...props
+  }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props });
   }
 });
 const NotFound = createFormItem({
   name: "notFound",
   isEmpty: () => false,
-  render({ $Component }) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        style: {
-          border: "1px dashed red",
-          fontSize: 14,
-          padding: 4,
-          color: "red"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("code", { children: [
-            "<FormItem component='",
-            $Component,
-            "' />"
-          ] }),
-          " ",
-          "没有找到对应组件，请检查组件名称是否拼写正确"
-        ]
-      }
-    );
+  render({
+    $Component
+  }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+      border: "1px dashed red",
+      fontSize: 14,
+      padding: 4,
+      color: "red"
+    }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("code", { children: [
+        "<FormItem component='",
+        $Component,
+        "' />"
+      ] }),
+      " ",
+      "没有找到对应组件，请检查组件名称是否拼写正确"
+    ] });
   }
 });
 const Hidden = createFormItem({
@@ -252,38 +220,50 @@ const Hidden = createFormItem({
   isEmpty() {
     return false;
   },
-  render({ id, value }) {
+  render({
+    id,
+    value
+  }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", value: stringifyObject(value), id });
   }
 });
-function FormItem({ use, component, ...props }) {
+function FormItem({
+  use,
+  component,
+  ...props
+}) {
   const formEnv = useFormEnv();
   const variant = formEnv.variant;
   if (use === false) {
     return null;
   }
   if (component == null) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: { $Component: String(component) } });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: {
+      $Component: String(component)
+    } });
   } else if (typeof component === "string") {
     if (component === "hidden") {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Hidden, { ...props });
     }
     const Comp = COMPONENT_DICT[component];
     if (Comp == null) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: { $Component: component } });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: {
+        $Component: component
+      } });
     }
     return React.createElement(Comp, {
       ...props,
-      componentProps: { ...props.componentProps, variant }
+      componentProps: {
+        ...props.componentProps,
+        variant
+      }
     });
   } else {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      AnonymousFormItem,
-      {
-        ...props,
-        componentProps: { ...props.componentProps, variant, $Component: component }
-      }
-    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(AnonymousFormItem, { ...props, componentProps: {
+      ...props.componentProps,
+      variant,
+      $Component: component
+    } });
   }
 }
 export {

package/dist/form/helpers/AsyncValue.js

@@ -71,27 +71,25 @@ const _AsyncValue = class _AsyncValue {
     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 }
-    );
+    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(onBecomeUnobserved(this._atom, () => {
+      if (!this.options.keepAlive) {
+        this._stop();
+      }
+    }));
     this._disposers.push(() => {
       this._status = "ready";
       this._current = null;

package/dist/form/model-utils.js

@@ -16,16 +16,16 @@ const modelUtils = {
       if (!((_a = field.config) == null ? void 0 : _a.htmlId)) {
         continue;
       }
-      const div = document.querySelector(
-        `*[data-xform-id="${field.config.htmlId}"]`
-      );
+      const div = document.querySelector(`*[data-xform-id="${field.config.htmlId}"]`);
       if (!div) {
         continue;
       }
       if (typeof div.scrollIntoViewIfNeeded === "function") {
         div.scrollIntoViewIfNeeded();
       } else {
-        div.scrollIntoView({ block: "nearest" });
+        div.scrollIntoView({
+          block: "nearest"
+        });
       }
       return;
     }
@@ -36,23 +36,31 @@ const modelUtils = {
       if (!((_a = field.config) == null ? void 0 : _a.htmlId)) {
         continue;
       }
-      const div = document.querySelector(
-        `*[data-xform-id="${field.config.htmlId}"]`
-      );
+      const div = document.querySelector(`*[data-xform-id="${field.config.htmlId}"]`);
       if (!div) {
         continue;
       }
-      div.animate(
-        [
-          { offset: 0, transform: "translateX(0)" },
-          { offset: 0.065, transform: "translateX(-6px) rotateY(-9deg)" },
-          { offset: 0.185, transform: "translateX(5px) rotateY(7deg)" },
-          { offset: 0.315, transform: "translateX(-3px) rotateY(-5deg)" },
-          { offset: 0.435, transform: "translateX(2px) rotateY(3deg)" },
-          { offset: 0.5, transform: "translateX(0)" }
-        ],
-        { duration: 750 }
-      );
+      div.animate([{
+        offset: 0,
+        transform: "translateX(0)"
+      }, {
+        offset: 0.065,
+        transform: "translateX(-6px) rotateY(-9deg)"
+      }, {
+        offset: 0.185,
+        transform: "translateX(5px) rotateY(7deg)"
+      }, {
+        offset: 0.315,
+        transform: "translateX(-3px) rotateY(-5deg)"
+      }, {
+        offset: 0.435,
+        transform: "translateX(2px) rotateY(3deg)"
+      }, {
+        offset: 0.5,
+        transform: "translateX(0)"
+      }], {
+        duration: 750
+      });
     }
   },
   validateAll: action(function(model, trigger = "*") {
@@ -64,29 +72,21 @@ const modelUtils = {
       if (!field.isMounted) {
         return;
       }
-      promises.push(
-        field.validate(trigger).then(
-          action((error) => {
-            if (error) {
-              hasError = true;
-              observableSetIn(errors, field.path, error);
-              errorFields.push(field);
-            }
-          })
-        )
-      );
+      promises.push(field.validate(trigger).then(action((error) => {
+        if (error) {
+          hasError = true;
+          observableSetIn(errors, field.path, error);
+          errorFields.push(field);
+        }
+      })));
     });
     model.iterateChecks((check) => {
-      promises.push(
-        check.validate().then(
-          action((error) => {
-            if (error) {
-              hasError = true;
-              observableSetIn(errors, check.path, error);
-            }
-          })
-        )
-      );
+      promises.push(check.validate().then(action((error) => {
+        if (error) {
+          hasError = true;
+          observableSetIn(errors, check.path, error);
+        }
+      })));
     });
     return Promise.all(promises).then(() => ({
       hasError,
@@ -103,7 +103,11 @@ const modelUtils = {
       animateErrorFields = false,
       scrollToFirstError = true
     } = options;
-    const { hasError, errors, errorFields } = await modelUtils.validateAll(model);
+    const {
+      hasError,
+      errors,
+      errorFields
+    } = await modelUtils.validateAll(model);
     if (hasError) {
       if (scrollToFirstError) {
         modelUtils.scrollToFirstError(errorFields);
@@ -114,15 +118,17 @@ const modelUtils = {
       onError == null ? void 0 : onError(errors, model);
     } else if (typeof onSubmit === "function") {
       runInAction(() => {
-        const result = observable(
-          valueFilter === "all" ? toJS(model.values) : model._valueShape === "array" ? [] : {}
-        );
-        _mergeValuesFromViewToTarget(result, model, { mergeDefaultValue });
+        const result = observable(valueFilter === "all" ? toJS(model.values) : model._valueShape === "array" ? [] : {});
+        _mergeValuesFromViewToTarget(result, model, {
+          mergeDefaultValue
+        });
         onSubmit(toJS(result), model);
       });
     }
   }),
-  reset: action(function(model, { onReset } = {}) {
+  reset: action(function(model, {
+    onReset
+  } = {}) {
     model.values = {};
     modelUtils.clearError(model);
     onReset == null ? void 0 : onReset(model);
@@ -132,7 +138,9 @@ const modelUtils = {
   }),
   mergeValuesFromViewToView: _mergeValuesFromViewToTarget
 };
-function _mergeValuesFromViewToTarget(target, model, { mergeDefaultValue = true } = {}) {
+function _mergeValuesFromViewToTarget(target, model, {
+  mergeDefaultValue = true
+} = {}) {
   model.iterateFields((field) => {
     if (!field.isMounted) {
       return;

package/dist/form/model.js

@@ -37,27 +37,23 @@ class FormModel {
       this._fieldIdGenerator = new IdGenerator("Field");
       this.id = this._modelIdGenerator.getNextId();
       this._values = composeValue(initValues, {});
-      if (this._values == null) {
-        console.warn("[xform] FormModel 根节点的初始 values 不能为 null");
-      }
+      if (this._values == null) ;
     }
-    makeObservable(
-      this,
-      {
-        // root model 才会使用 this._values
-        _values: this._modelType === ModelType.rootModel ? observable : false,
-        values: computed,
-        state: observable,
-        setValue: action,
-        // 注意 name 是可以变化的；在数组元素调换位置的情况下 name 会进行变更
-        name: observable.ref,
-        path: computed,
-        _selfDeleted: observable.ref,
-        isDeleted: computed,
-        _markDeleted: action
-      },
-      { name: `${this.id}(${this.name})` }
-    );
+    makeObservable(this, {
+      // root model 才会使用 this._values
+      _values: this._modelType === ModelType.rootModel ? observable : false,
+      values: computed,
+      state: observable,
+      setValue: action,
+      // 注意 name 是可以变化的；在数组元素调换位置的情况下 name 会进行变更
+      name: observable.ref,
+      path: computed,
+      _selfDeleted: observable.ref,
+      isDeleted: computed,
+      _markDeleted: action
+    }, {
+      name: `${this.id}(${this.name})`
+    });
   }
   get values() {
     if (this._modelType === ModelType.rootModel) {
@@ -68,15 +64,9 @@ class FormModel {
   }
   set values(nextValues) {
     if (this.isDeleted) {
-      console.warn(
-        "[xform] 对已删除的 Model 进行赋值将被忽略。请不要对已删除的 Model/Field 进行操作。"
-      );
       return;
     }
     if (this._modelType === ModelType.rootModel) {
-      if (nextValues == null) {
-        console.warn("[xform] FormModel 根节点的 values 不能设置为 null/undefined");
-      }
       this._values = nextValues;
     } else {
       this.parent.setValue(this.name, nextValues);
@@ -94,9 +84,6 @@ class FormModel {
   }
   setValue(name, value) {
     if (this.isDeleted) {
-      console.warn(
-        "[xform] 对已删除的 Model 进行赋值将被忽略。请不要对已删除的 Model/Field 进行操作。"
-      );
       return;
     }
     if (this._modelType === ModelType.subModel && this.values == null) {
@@ -159,10 +146,7 @@ class FormModel {
       this._valueShape = valueShape;
       this._subModels = valueShape === "object" ? {} : [];
     } else {
-      invariant(
-        this._valueShape === valueShape,
-        "[xform] FormModel 的结构需要在使用过程中保持一致，一个数据索引对应的结构不能从数组变为对象，也不能从对象变为数组"
-      );
+      invariant(this._valueShape === valueShape, "[xform] FormModel 的结构需要在使用过程中保持一致，一个数据索引对应的结构不能从数组变为对象，也不能从对象变为数组");
     }
   }
   /** 递归前序遍历该 model 下所有的 model 对象（包含 model 本身） */
@@ -244,7 +228,6 @@ class Check {
   }
   _track(config) {
     if (this.isMounted) {
-      console.warn(`[xform] check \`${this.path.join(".")}\` 已在视图中被加载。`);
       return;
     }
     this.config = config;
@@ -259,7 +242,9 @@ class Check {
     if (!this.isMounted) {
       return;
     }
-    const { validate } = this.config;
+    const {
+      validate
+    } = this.config;
     let cancelled = false;
     (_a = this.cancelValidation) == null ? void 0 : _a.call(this);
     this.validating = true;
@@ -299,9 +284,6 @@ const _Field = class _Field {
     this.handleChange = (nextValue, ...rest) => {
       var _a, _b, _c;
       if (nextValue === void 0 && ((_a = this.config) == null ? void 0 : _a.defaultValue) !== void 0) {
-        console.warn(
-          "[xform] xform 中所有组件均为受控用法，不支持 onChange(undefined)，该调用将自动变为 onChange(null)"
-        );
         nextValue = null;
       }
       this.value = nextValue;
@@ -339,22 +321,18 @@ const _Field = class _Field {
     }
     const name = this.name;
     const forkName = this._forkName;
-    makeObservable(
-      this,
-      {
-        state: observable,
-        value: computed,
-        path: computed,
-        validate: action,
-        handleBlur: action,
-        handleChange: action,
-        clear: action,
-        isDeleted: computed
-      },
-      {
-        name: `${this.id}(${name}${forkName === _Field.ORIGINAL ? "" : "#" + forkName})`
-      }
-    );
+    makeObservable(this, {
+      state: observable,
+      value: computed,
+      path: computed,
+      validate: action,
+      handleBlur: action,
+      handleChange: action,
+      clear: action,
+      isDeleted: computed
+    }, {
+      name: `${this.id}(${name}${forkName === _Field.ORIGINAL ? "" : "#" + forkName})`
+    });
     if (forkName === _Field.ORIGINAL) {
       this._forkMap = /* @__PURE__ */ new Map();
     } else {
@@ -382,9 +360,6 @@ const _Field = class _Field {
   }
   set value(value) {
     if (this.isDeleted) {
-      console.warn(
-        "[xform] 对已删除的 Field 进行赋值将被忽略。请不要对已删除的 Model/Field 进行操作。"
-      );
       return;
     }
     if (this.fieldType === FieldType.normal) {
@@ -393,22 +368,13 @@ const _Field = class _Field {
       this._tupleParts.forEach((part, index) => {
         this.parent.setValue(part, value == null ? value : value[index]);
       });
-    } else if (this.fieldType === FieldType.readonly) {
-      console.warn(
-        "[xform] 对只读 Field 进行赋值将被忽略，请检查是否为 FormItem 设置了 props.name 或 props.field."
-      );
-    }
+    } else if (this.fieldType === FieldType.readonly) ;
   }
   get path() {
     return this.parent.path.concat([this.name]);
   }
   _track(config) {
     if (this.isMounted) {
-      console.warn(
-        `[xform] field \`${this.path.join(
-          "."
-        )}\` 已在视图中被加载，你需要 fork 该字段来进行多次加载.`
-      );
       return;
     }
     this.config = config;
@@ -422,9 +388,16 @@ const _Field = class _Field {
     if (this._forkMap.has(forkName)) {
       return this._forkMap.get(forkName);
     } else {
-      const common = { parent: this.parent, name: this.name, forkName };
+      const common = {
+        parent: this.parent,
+        name: this.name,
+        forkName
+      };
       if (this.fieldType === FieldType.normal) {
-        return new _Field({ fieldType: FieldType.normal, ...common });
+        return new _Field({
+          fieldType: FieldType.normal,
+          ...common
+        });
       } else if (this.fieldType === FieldType.tuple) {
         return new _Field({
           fieldType: FieldType.tuple,

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

@@ -32,7 +32,12 @@ const withValueChangeHandler = (Component) => {
 };
 const withDayjsTransformAntdDate = (Component) => {
   return (props) => {
-    const { value, onChange, picker, ...restProps } = props;
+    const {
+      value,
+      onChange,
+      picker,
+      ...restProps
+    } = props;
     const parsedValue = useMemo(() => {
       if (!value) return void 0;
       if (picker === "week") {
@@ -52,36 +57,39 @@ const withDayjsTransformAntdDate = (Component) => {
       }
       return void 0;
     }, [value, picker]);
-    const handleChange = useCallback(
-      (dayjsDate, dateString) => {
-        if (!dayjsDate || !dayjsDate.isValid()) {
-          onChange == null ? void 0 : onChange(null);
-          return;
-        }
-        let formattedValue;
-        if (picker === "week") {
-          const year = dayjsDate.year();
-          const week = dayjsDate.week();
-          formattedValue = `${year}-${week}`;
-        } else if (picker === "month") {
-          formattedValue = dayjsDate.format("YYYY-MM");
-        } else if (picker === "quarter") {
-          formattedValue = dayjsDate.format("YYYY-Q");
-        } else if (picker === "year") {
-          formattedValue = dayjsDate.format("YYYY");
-        } else {
-          formattedValue = dayjsDate.format("YYYY-MM-DD");
-        }
-        onChange == null ? void 0 : onChange(formattedValue);
-      },
-      [onChange, picker]
-    );
+    const handleChange = useCallback((dayjsDate, dateString) => {
+      if (!dayjsDate || !dayjsDate.isValid()) {
+        onChange == null ? void 0 : onChange(null);
+        return;
+      }
+      let formattedValue;
+      if (picker === "week") {
+        const year = dayjsDate.year();
+        const week = dayjsDate.week();
+        formattedValue = `${year}-${week}`;
+      } else if (picker === "month") {
+        formattedValue = dayjsDate.format("YYYY-MM");
+      } else if (picker === "quarter") {
+        formattedValue = dayjsDate.format("YYYY-Q");
+      } else if (picker === "year") {
+        formattedValue = dayjsDate.format("YYYY");
+      } else {
+        formattedValue = dayjsDate.format("YYYY-MM-DD");
+      }
+      onChange == null ? void 0 : onChange(formattedValue);
+    }, [onChange, picker]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...restProps, picker, value: parsedValue, onChange: handleChange });
   };
 };
 const withDayjsTransformAntdDateRangePicker = (Component) => {
   return (props) => {
-    const { value, onChange, format, picker = "date", ...restProps } = props;
+    const {
+      value,
+      onChange,
+      format,
+      picker = "date",
+      ...restProps
+    } = props;
     const resolvedFormat = format || DEFAULT_FORMATS[picker] || DEFAULT_FORMATS.date;
     const parsedValue = useMemo(() => {
       if (isEmptyDateValue(value)) {
@@ -130,57 +138,49 @@ const withDayjsTransformAntdDateRangePicker = (Component) => {
       }
       return [isValidStart ? start : null, isValidEnd ? end : null];
     }, [value, picker, resolvedFormat]);
-    const handleChange = useCallback(
-      (dates, dateStrings) => {
-        if (!dates || !dates[0] && !dates[1]) {
-          onChange == null ? void 0 : onChange(null);
-          return;
-        }
-        const [start, end] = dates;
-        const formatValue = (dayjsObj, type) => {
-          if (!dayjsObj || !dayjsObj.isValid()) return "";
-          switch (type) {
-            case "week":
-              return `${dayjsObj.year()}-W${dayjsObj.week()}`;
-            case "month":
-              return dayjsObj.format("YYYY-MM");
-            case "quarter": {
-              const year = dayjsObj.year();
-              const quarter = Math.floor(dayjsObj.month() / 3) + 1;
-              return `${year}-Q${quarter}`;
-            }
-            case "year":
-              return dayjsObj.format("YYYY");
-            case "date":
-            default:
-              return dayjsObj.format(resolvedFormat);
+    const handleChange = useCallback((dates, dateStrings) => {
+      if (!dates || !dates[0] && !dates[1]) {
+        onChange == null ? void 0 : onChange(null);
+        return;
+      }
+      const [start, end] = dates;
+      const formatValue = (dayjsObj, type) => {
+        if (!dayjsObj || !dayjsObj.isValid()) return "";
+        switch (type) {
+          case "week":
+            return `${dayjsObj.year()}-W${dayjsObj.week()}`;
+          case "month":
+            return dayjsObj.format("YYYY-MM");
+          case "quarter": {
+            const year = dayjsObj.year();
+            const quarter = Math.floor(dayjsObj.month() / 3) + 1;
+            return `${year}-Q${quarter}`;
           }
-        };
-        const formatted = [formatValue(start, picker), formatValue(end, picker)];
-        if (!formatted[0] && !formatted[1]) {
-          onChange == null ? void 0 : onChange(null);
-        } else {
-          onChange == null ? void 0 : onChange(formatted);
+          case "year":
+            return dayjsObj.format("YYYY");
+          case "date":
+          default:
+            return dayjsObj.format(resolvedFormat);
         }
-      },
-      [onChange, picker, resolvedFormat]
-    );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Component,
-      {
-        ...restProps,
-        picker,
-        format: resolvedFormat,
-        value: parsedValue,
-        onChange: handleChange,
-        allowClear: restProps.allowClear ?? true
+      };
+      const formatted = [formatValue(start, picker), formatValue(end, picker)];
+      if (!formatted[0] && !formatted[1]) {
+        onChange == null ? void 0 : onChange(null);
+      } else {
+        onChange == null ? void 0 : onChange(formatted);
       }
-    );
+    }, [onChange, picker, resolvedFormat]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...restProps, picker, format: resolvedFormat, value: parsedValue, onChange: handleChange, allowClear: restProps.allowClear ?? true });
   };
 };
 const withDayjsTransformAntdTime = (Component) => {
   return (props) => {
-    const { value, onChange, format = DEFAULT_FORMAT_TIME, ...restProps } = props;
+    const {
+      value,
+      onChange,
+      format = DEFAULT_FORMAT_TIME,
+      ...restProps
+    } = props;
     const parsedValue = useMemo(() => {
       if (!value) return void 0;
       const stringValue = String(value).trim();
@@ -188,23 +188,25 @@ const withDayjsTransformAntdTime = (Component) => {
       const parsed = dayjs(stringValue, format, true);
       return parsed.isValid() ? parsed : void 0;
     }, [value, format]);
-    const handleChange = useCallback(
-      (time, timeString) => {
-        if (!time || !time.isValid()) {
-          onChange == null ? void 0 : onChange(null);
-          return;
-        }
-        const formatted = time.format(format);
-        onChange == null ? void 0 : onChange(formatted);
-      },
-      [onChange, format]
-    );
+    const handleChange = useCallback((time, timeString) => {
+      if (!time || !time.isValid()) {
+        onChange == null ? void 0 : onChange(null);
+        return;
+      }
+      const formatted = time.format(format);
+      onChange == null ? void 0 : onChange(formatted);
+    }, [onChange, format]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...restProps, format, value: parsedValue, onChange: handleChange });
   };
 };
 const withDayjsTransformAntdTimeRange = (Component) => {
   return (props) => {
-    const { value, onChange, format = DEFAULT_FORMAT_TIME, ...restProps } = props;
+    const {
+      value,
+      onChange,
+      format = DEFAULT_FORMAT_TIME,
+      ...restProps
+    } = props;
     const parsedValue = useMemo(() => {
       if (!value || !Array.isArray(value)) return void 0;
       const [startStr, endStr] = value;
@@ -216,32 +218,29 @@ const withDayjsTransformAntdTimeRange = (Component) => {
       if (!isValidStart && !isValidEnd) return void 0;
       return [isValidStart ? start : null, isValidEnd ? end : null];
     }, [value, format]);
-    const handleChange = useCallback(
-      (times, timeStrings) => {
-        if (!times) {
-          onChange == null ? void 0 : onChange(null);
-          return;
-        }
-        const [start, end] = times;
-        const formatted = [
-          (start == null ? void 0 : start.isValid()) ? start.format(format) : "",
-          (end == null ? void 0 : end.isValid()) ? end.format(format) : ""
-        ];
-        if (!formatted[0] && !formatted[1]) {
-          onChange == null ? void 0 : onChange(null);
-        } else {
-          onChange == null ? void 0 : onChange(formatted);
-        }
-      },
-      [onChange, format]
-    );
+    const handleChange = useCallback((times, timeStrings) => {
+      if (!times) {
+        onChange == null ? void 0 : onChange(null);
+        return;
+      }
+      const [start, end] = times;
+      const formatted = [(start == null ? void 0 : start.isValid()) ? start.format(format) : "", (end == null ? void 0 : end.isValid()) ? end.format(format) : ""];
+      if (!formatted[0] && !formatted[1]) {
+        onChange == null ? void 0 : onChange(null);
+      } else {
+        onChange == null ? void 0 : onChange(formatted);
+      }
+    }, [onChange, format]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...restProps, format, value: parsedValue, onChange: handleChange });
   };
 };
 const withInjectedProps = (injectedProps) => {
   return (Component) => {
     const WrappedComponent = React.forwardRef((props, ref) => {
-      const mergedProps = { ...injectedProps, ...props };
+      const mergedProps = {
+        ...injectedProps,
+        ...props
+      };
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ref, ...mergedProps });
     });
     WrappedComponent.displayName = `WithInjectedProps(${Component.displayName || Component.name})`;

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

@@ -140,7 +140,9 @@ const ALL_COMPONENTS = Object.keys(COMPONENT_MAP).map((name) => {
         component = withDayjsTransformAntdTimeRange(component);
         break;
       case "multiSelect":
-        component = withInjectedProps({ mode: "multiple" })(component);
+        component = withInjectedProps({
+          mode: "multiple"
+        })(component);
         break;
       case "colorPicker":
         component = withColorPickerHandler(component);

package/dist/form-ui/render-preview.js

@@ -28,19 +28,14 @@ const useRatePreview = (value) => {
 };
 const useColorPreview = (value) => {
   if (!value) return "--";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "span",
-    {
-      style: {
-        display: "inline-block",
-        width: 16,
-        height: 16,
-        border: "1px solid #ddd",
-        backgroundColor: value,
-        borderRadius: 3
-      }
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: {
+    display: "inline-block",
+    width: 16,
+    height: 16,
+    border: "1px solid #ddd",
+    backgroundColor: value,
+    borderRadius: 3
+  } });
 };
 export {
   useBooleanPreview,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-antd-xform",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "基于mobx的form解决方案",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,7 +45,9 @@
     "@types/react-dom": "^18.2.22",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.6.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "dumi": "^2.4.21",
+    "dumi-theme-antd": "^0.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",