react-antd-xform 1.0.6 → 1.0.8

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.d.ts

@@ -1,9 +1,10 @@
 import { isEmptyValue } from './common-utils';
 declare const ALL_COMPONENTS: {
-    name: "input" | "textArea" | "radio" | "inputNumber" | "slider" | "switch" | "datePicker" | "dateRangePicker" | "timePicker" | "timeRangePicker" | "colorPicker" | "multiSelect" | "select" | "singleSelect" | "checkbox" | "rate";
+    name: "input" | "textArea" | "select" | "singleSelect" | "multiSelect" | "radio" | "checkbox" | "inputNumber" | "slider" | "switch" | "datePicker" | "dateRangePicker" | "timePicker" | "timeRangePicker" | "rate" | "colorPicker";
     component: any;
     defaultValue: any;
     isEmpty: typeof isEmptyValue;
-    hasIntrinsicWidth: false;
+    hasIntrinsicWidth: boolean;
+    renderPreview: (props: import('../form/type').FormItemComponentProps) => import('react').ReactNode;
 }[];
 export { ALL_COMPONENTS };