react-antd-xform 1.0.9 → 1.0.11

package/dist/form/extend/form-reset.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 type FormSubmitProps<T extends object = {}> = {
-    /** 必须传入的按钮组件 */
+    /** 传入的按钮组件 */
     ButtonComponent: ComponentType<T>;
     /** 按钮内容 */
     children: React.ReactNode;

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

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

package/dist/form/extend/form-submit.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 type FormSubmitProps<T extends object = {}> = {
-    /** 必须传入的按钮组件 */
+    /** 传入的按钮组件 */
     ButtonComponent: ComponentType<T>;
     /** 按钮内容 */
     children: React.ReactNode;

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

@@ -16,7 +16,11 @@ function FormSubmit({
     onSubmit,
     onError
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonComponent, { ...props, onClick: () => modelUtils.submit(model, submitOptions), children, ...props });
+  if (ButtonComponent) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonComponent, { ...props, onClick: () => modelUtils.submit(model, submitOptions), children, ...props });
+  } else {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { ...props, onClick: () => modelUtils.submit(model, submitOptions), children, ...props });
+  }
 }
 export {
   FormSubmit

package/dist/form/index.d.ts

@@ -4,7 +4,7 @@ import { FormModel } from './model';
 import { FormItemView } from './form-item';
 import { FormLayout } from './extend/form-layout';
 import { FormSubmit } from './extend/form-submit';
-export declare function Form({ model: modelProp, defaultValue, children, className, style, layout, containerProps, htmlIdPrefix: htmlIdPrefixProp, variant, ...restEnvProps }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare function Form({ model: modelProp, defaultValue, children, className, style, layout, containerProps, htmlIdPrefix: htmlIdPrefixProp, variant, isPreview, ...restEnvProps }: FormProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Form {
     var Array: (<T extends unknown>({ name, children, layout, arrayModel: arrayModelProp, use, }: import("./extend/form-array").FormArrayProps<T>) => import("react/jsx-runtime").JSX.Element) & {
         displayName: string;

package/dist/form/index.js

@@ -4,7 +4,7 @@ import { FormModel } from "./model.js";
 import { FormItemView } from "./form-item.js";
 import { ModelProvider } from "./context/modelContext.js";
 import { FormEnvProvider } from "./context/formEnvContext.js";
-import { useHtmlIdPrefix, composeValue } from "./common-utils.js";
+import { composeValue, useHtmlIdPrefix } from "./common-utils.js";
 import { FormArray } from "./extend/form-array.js";
 import { FormCheck } from "./extend/form-check.js";
 import { FormReset } from "./extend/form-reset.js";
@@ -23,12 +23,14 @@ function Form({
   containerProps,
   htmlIdPrefix: htmlIdPrefixProp,
   variant,
+  isPreview,
   ...restEnvProps
 }) {
   const [_model] = useState(() => new FormModel(defaultValue));
   const model = composeValue(modelProp, _model);
+  model.isPreview = isPreview;
   const htmlIdPrefix = useHtmlIdPrefix(htmlIdPrefixProp);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvProvider, { htmlIdPrefix, variant, ...restEnvProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { style, className, containerProps, ...layout, children }) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvProvider, { htmlIdPrefix, variant, ...restEnvProps, isPreview, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { style, className, containerProps, ...layout, children }) }) });
 }
 Form.Array = FormArray;
 Form.Check = FormCheck;

package/dist/form/model.d.ts

@@ -16,6 +16,7 @@ export declare class FormModel<D extends {
     readonly root: FormModel<any>;
     readonly parent: FormModel<any>;
     name: string;
+    isPreview: boolean;
     /** 当前 Model 的类型，目前只有两种类型： rootModel 和 subModel */
     _modelType: ModelType;
     _values: D;

package/dist/form/model.js

@@ -18,6 +18,7 @@ class IdGenerator {
 class FormModel {
   constructor(initValues, options = ROOT_MODEL_CREATE_OPTIONS) {
     this.state = {};
+    this.isPreview = false;
     this._fieldMap = /* @__PURE__ */ new Map();
     this._valueShape = "auto";
     this._checkMap = /* @__PURE__ */ new Map();

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

@@ -1,12 +1,10 @@
 import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import React, { useMemo, useCallback } from "react";
 import dayjs from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js";
-import isoweek from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/isoWeek.js";
 import weekYear from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekYear.js";
 import weekOfYear from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekOfYear.js";
 dayjs.extend(weekOfYear);
 dayjs.extend(weekYear);
-dayjs.extend(isoweek);
 if (!dayjs.__patchedForAntd__) {
   dayjs.__patchedForAntd__ = true;
   if (!dayjs.prototype.weekday) {

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

@@ -1,6 +1,6 @@
 import { ColorPicker, Rate, TimePicker, DatePicker, Switch, Slider, InputNumber, Checkbox, Radio, Select, Input } from "antd";
 import { withInjectedProps, withDayjsTransformAntdTimeRange, withDayjsTransformAntdTime, withDayjsTransformAntdDateRangePicker, withDayjsTransformAntdDate, withValueChangeHandler, isEmptyValue, withColorPickerHandler } from "./common-utils.js";
-import { useColorPreview, useRatePreview, useTimeRangePreview, useTimePreview, useDateRangePreview, useDatePreview, useBooleanPreview, useValueToPreview, useMultiplePreview } from "./render-preview.js";
+import { renderColorPreview, renderRatePreview, renderTimeRangePreview, renderTimePreview, renderDateRangePreview, renderDatePreview, renderBooleanPreview, renderValueToPreview, renderMultiplePreview, renderSelectToPreview } from "./render-preview.js";
 const COMPONENT_MAP = {
   input: Input,
   textArea: Input.TextArea,
@@ -40,82 +40,82 @@ const DEFAULT_VALUES = {
 const COMPONENT_RULES = {
   input: {
     hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: false
   },
   textArea: {
     hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: true
   },
   select: {
     hocs: [],
-    renderPreview: useValueToPreview,
+    renderPreview: renderSelectToPreview,
     hasIntrinsicWidth: true
   },
   singleSelect: {
     hocs: [],
-    renderPreview: useValueToPreview,
+    renderPreview: renderSelectToPreview,
     hasIntrinsicWidth: true
   },
   multiSelect: {
     hocs: ["multiSelect"],
-    renderPreview: useMultiplePreview,
+    renderPreview: renderSelectToPreview,
     hasIntrinsicWidth: true
   },
   radio: {
     hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: false
   },
   checkbox: {
     hocs: [],
-    renderPreview: useMultiplePreview,
+    renderPreview: renderMultiplePreview,
     hasIntrinsicWidth: false
   },
   inputNumber: {
     hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: false
   },
   slider: {
     hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: false
   },
   switch: {
     hocs: ["valueChange"],
-    renderPreview: useBooleanPreview,
+    renderPreview: renderBooleanPreview,
     hasIntrinsicWidth: false
   },
   datePicker: {
     hocs: ["dayjsDate"],
-    renderPreview: useDatePreview,
+    renderPreview: renderDatePreview,
     hasIntrinsicWidth: true
   },
   dateRangePicker: {
     hocs: ["dayjsDateRange"],
-    renderPreview: useDateRangePreview,
+    renderPreview: renderDateRangePreview,
     hasIntrinsicWidth: true
   },
   timePicker: {
     hocs: ["dayjsTime"],
-    renderPreview: useTimePreview,
+    renderPreview: renderTimePreview,
     hasIntrinsicWidth: true
   },
   timeRangePicker: {
     hocs: ["dayjsTimeRange"],
-    renderPreview: useTimeRangePreview,
+    renderPreview: renderTimeRangePreview,
     hasIntrinsicWidth: true
   },
   rate: {
     hocs: [],
-    renderPreview: useRatePreview,
+    renderPreview: renderRatePreview,
     hasIntrinsicWidth: false
   },
   colorPicker: {
     hocs: ["colorPicker"],
-    renderPreview: useColorPreview,
+    renderPreview: renderColorPreview,
     hasIntrinsicWidth: false
   }
 };
@@ -155,7 +155,7 @@ const ALL_COMPONENTS = Object.keys(COMPONENT_MAP).map((name) => {
     defaultValue: DEFAULT_VALUES[name],
     isEmpty: isEmptyValue,
     hasIntrinsicWidth: rule.hasIntrinsicWidth,
-    renderPreview: (props) => rule.renderPreview(props.value)
+    renderPreview: (props) => rule.renderPreview(props)
   };
 });
 export {

package/dist/form-ui/render-preview.d.ts

@@ -1,29 +1,72 @@
-/** 通用默认预览 */
-export declare const useValueToPreview: (value: any) => React.ReactNode;
+/** 通用默认预览,直接使用value进行设置 */
+export declare const renderValueToPreview: (props: {
+    value: string;
+}) => React.ReactNode;
+export declare const renderSelectToPreview: (props: {
+    value: string | number | (string | number)[] | null | undefined;
+    options: {
+        label: string;
+        value: string | number;
+    }[];
+}) => React.ReactNode;
 /** 日期预览 */
-export declare const useDatePreview: (value: any) => React.ReactNode;
+export declare const renderDatePreview: (props: {
+    value: any;
+}) => React.ReactNode;
 /** 日期范围预览 */
-export declare const useDateRangePreview: (value: [any, any] | null | undefined) => React.ReactNode;
+export declare const renderDateRangePreview: (props: {
+    value: [any, any] | null | undefined;
+}) => React.ReactNode;
 /** 时间预览 */
-export declare const useTimePreview: (value: any) => React.ReactNode;
+export declare const renderTimePreview: (props: {
+    value: any;
+}) => React.ReactNode;
 /** 时间范围预览 */
-export declare const useTimeRangePreview: (value: [any, any] | null | undefined) => React.ReactNode;
+export declare const renderTimeRangePreview: (props: {
+    value: [any, any] | null | undefined;
+}) => React.ReactNode;
 /** 多选/标签类预览 */
-export declare const useMultiplePreview: (value: any[]) => React.ReactNode;
+export declare const renderMultiplePreview: (props: {
+    value: any[];
+}) => React.ReactNode;
 /** 开关类预览 */
-export declare const useBooleanPreview: (value: boolean) => React.ReactNode;
+export declare const renderBooleanPreview: (props: {
+    value: boolean;
+}) => React.ReactNode;
 /** 评分预览 */
-export declare const useRatePreview: (value: number) => React.ReactNode;
+export declare const renderRatePreview: (props: {
+    value: number;
+}) => React.ReactNode;
 /** 颜色预览（返回色块） */
-export declare const useColorPreview: (value: string) => React.ReactNode;
+export declare const renderColorPreview: (props: {
+    value: string;
+}) => React.ReactNode;
 export declare const PREVIEW_RENDERERS: {
-    readonly useValueToPreview: (value: any) => React.ReactNode;
-    readonly useDatePreview: (value: any) => React.ReactNode;
-    readonly useDateRangePreview: (value: [any, any] | null | undefined) => React.ReactNode;
-    readonly useTimePreview: (value: any) => React.ReactNode;
-    readonly useTimeRangePreview: (value: [any, any] | null | undefined) => React.ReactNode;
-    readonly useMultiplePreview: (value: any[]) => React.ReactNode;
-    readonly useBooleanPreview: (value: boolean) => React.ReactNode;
-    readonly useRatePreview: (value: number) => React.ReactNode;
-    readonly useColorPreview: (value: string) => React.ReactNode;
+    readonly renderValueToPreview: (props: {
+        value: string;
+    }) => React.ReactNode;
+    readonly renderDatePreview: (props: {
+        value: any;
+    }) => React.ReactNode;
+    readonly renderDateRangePreview: (props: {
+        value: [any, any] | null | undefined;
+    }) => React.ReactNode;
+    readonly renderTimePreview: (props: {
+        value: any;
+    }) => React.ReactNode;
+    readonly renderTimeRangePreview: (props: {
+        value: [any, any] | null | undefined;
+    }) => React.ReactNode;
+    readonly renderMultiplePreview: (props: {
+        value: any[];
+    }) => React.ReactNode;
+    readonly renderBooleanPreview: (props: {
+        value: boolean;
+    }) => React.ReactNode;
+    readonly renderRatePreview: (props: {
+        value: number;
+    }) => React.ReactNode;
+    readonly renderColorPreview: (props: {
+        value: string;
+    }) => React.ReactNode;
 };

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

@@ -1,32 +1,78 @@
 import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import dayjs from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js";
-const useValueToPreview = (value) => {
+const renderValueToPreview = (props) => {
+  const {
+    value
+  } = props;
   return value != null && value !== "" ? `${value}` : "--";
 };
-const useDatePreview = (value) => {
+const renderSelectToPreview = (props) => {
+  const {
+    value,
+    options
+  } = props;
+  if (value === null || value === void 0) {
+    return "--";
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "--";
+    const labels = value.map((val) => {
+      const matched = options.find((item) => item.value === val);
+      return matched ? matched.label : null;
+    }).filter(Boolean);
+    return labels.length > 0 ? labels.join("、") : "--";
+  }
+  const matchedOption = options.find((item) => item.value === value);
+  return matchedOption ? matchedOption.label : "--";
+};
+const renderDatePreview = (props) => {
+  const {
+    value
+  } = props;
   return value ? dayjs(value).format("YYYY-MM-DD") : "--";
 };
-const useDateRangePreview = (value) => {
+const renderDateRangePreview = (props) => {
+  const {
+    value
+  } = props;
   if (!Array.isArray(value) || !value[0] || !value[1]) return "--";
   return `${dayjs(value[0]).format("YYYY-MM-DD")} ~ ${dayjs(value[1]).format("YYYY-MM-DD")}`;
 };
-const useTimePreview = (value) => {
+const renderTimePreview = (props) => {
+  const {
+    value
+  } = props;
   return value ? dayjs(value).format("HH:mm:ss") : "--";
 };
-const useTimeRangePreview = (value) => {
+const renderTimeRangePreview = (props) => {
+  const {
+    value
+  } = props;
   if (!Array.isArray(value) || !value[0] || !value[1]) return "--";
   return `${dayjs(value[0]).format("HH:mm")} ~ ${dayjs(value[1]).format("HH:mm")}`;
 };
-const useMultiplePreview = (value) => {
+const renderMultiplePreview = (props) => {
+  const {
+    value
+  } = props;
   return Array.isArray(value) && value.length > 0 ? value.join(", ") : "--";
 };
-const useBooleanPreview = (value) => {
+const renderBooleanPreview = (props) => {
+  const {
+    value
+  } = props;
   return typeof value === "boolean" ? value ? "是" : "否" : "--";
 };
-const useRatePreview = (value) => {
+const renderRatePreview = (props) => {
+  const {
+    value
+  } = props;
   return typeof value === "number" ? "★".repeat(value) + "☆".repeat(5 - value) : "--";
 };
-const useColorPreview = (value) => {
+const renderColorPreview = (props) => {
+  const {
+    value
+  } = props;
   if (!value) return "--";
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: {
     display: "inline-block",
@@ -38,13 +84,14 @@ const useColorPreview = (value) => {
   } });
 };
 export {
-  useBooleanPreview,
-  useColorPreview,
-  useDatePreview,
-  useDateRangePreview,
-  useMultiplePreview,
-  useRatePreview,
-  useTimePreview,
-  useTimeRangePreview,
-  useValueToPreview
+  renderBooleanPreview,
+  renderColorPreview,
+  renderDatePreview,
+  renderDateRangePreview,
+  renderMultiplePreview,
+  renderRatePreview,
+  renderSelectToPreview,
+  renderTimePreview,
+  renderTimeRangePreview,
+  renderValueToPreview
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-antd-xform",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "基于mobx的form解决方案",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,14 +17,12 @@
     "docs:dev": "dumi dev",
     "docs:build-site": "dumi build",
     "docs:build": "cross-env DUMI_ENV=devbuild dumi build",
-    "docs:serve": "dumi serve",
-    "predeploy": "npm run docs:build",
+    "predeploy": "npm run docs:build-site",
     "deploy": "gh-pages -d docs-dist -b gh-pages"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "packageManager": "pnpm@10.12.1",
   "dependencies": {
     "@types/invariant": "^2.2.37",
     "@types/stringify-object": "^4.0.5",
@@ -54,6 +52,7 @@
     "dumi-theme-antd": "^0.4.4",
     "gh-pages": "^6.3.0",
     "react": "^18.2.0",
+    "react-antd-xform": "^1.0.9",
     "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",
     "vite": "^5.2.0",

package/dist/_virtual/isoWeek.js

@@ -1,4 +0,0 @@
-var isoWeek = { exports: {} };
-export {
-  isoWeek as __module
-};

package/dist/node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/isoWeek.js

@@ -1,33 +0,0 @@
-import { commonjsGlobal, getDefaultExportFromCjs } from "../../../../../../_virtual/_commonjsHelpers.js";
-import { __module as isoWeek } from "../../../../../../_virtual/isoWeek.js";
-(function(module, exports) {
-  !function(e, t) {
-    module.exports = t();
-  }(commonjsGlobal, function() {
-    var e = "day";
-    return function(t, i, s) {
-      var a = function(t2) {
-        return t2.add(4 - t2.isoWeekday(), e);
-      }, d = i.prototype;
-      d.isoWeekYear = function() {
-        return a(this).year();
-      }, d.isoWeek = function(t2) {
-        if (!this.$utils().u(t2)) return this.add(7 * (t2 - this.isoWeek()), e);
-        var i2, d2, n2, o, r = a(this), u = (i2 = this.isoWeekYear(), d2 = this.$u, n2 = (d2 ? s.utc : s)().year(i2).startOf("year"), o = 4 - n2.isoWeekday(), n2.isoWeekday() > 4 && (o += 7), n2.add(o, e));
-        return r.diff(u, "week") + 1;
-      }, d.isoWeekday = function(e2) {
-        return this.$utils().u(e2) ? this.day() || 7 : this.day(this.day() % 7 ? e2 : e2 - 7);
-      };
-      var n = d.startOf;
-      d.startOf = function(e2, t2) {
-        var i2 = this.$utils(), s2 = !!i2.u(t2) || t2;
-        return "isoweek" === i2.p(e2) ? s2 ? this.date(this.date() - (this.isoWeekday() - 1)).startOf("day") : this.date(this.date() - 1 - (this.isoWeekday() - 1) + 7).endOf("day") : n.bind(this)(e2, t2);
-      };
-    };
-  });
-})(isoWeek);
-var isoWeekExports = isoWeek.exports;
-const isoweek = /* @__PURE__ */ getDefaultExportFromCjs(isoWeekExports);
-export {
-  isoweek as default
-};