react-antd-xform 1.0.10 → 1.0.11

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/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, useSelectToPreview } 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: useSelectToPreview,
+    renderPreview: renderSelectToPreview,
     hasIntrinsicWidth: true
   },
   singleSelect: {
     hocs: [],
-    renderPreview: useSelectToPreview,
+    renderPreview: renderSelectToPreview,
     hasIntrinsicWidth: true
   },
   multiSelect: {
     hocs: ["multiSelect"],
-    renderPreview: useSelectToPreview,
+    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
   }
 };

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

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

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

@@ -1,116 +1,97 @@
 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";
-import { useMemo } from "react";
-const useValueToPreview = (props) => {
+const renderValueToPreview = (props) => {
   const {
     value
   } = props;
   return value != null && value !== "" ? `${value}` : "--";
 };
-const useSelectToPreview = (props) => {
+const renderSelectToPreview = (props) => {
   const {
     value,
     options
   } = props;
-  return useMemo(() => {
-    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 : "--";
-  }, [value, options]);
+  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 useDatePreview = (props) => {
+const renderDatePreview = (props) => {
   const {
     value
   } = props;
-  return useMemo(() => {
-    return value ? dayjs(value).format("YYYY-MM-DD") : "--";
-  }, [value]);
+  return value ? dayjs(value).format("YYYY-MM-DD") : "--";
 };
-const useDateRangePreview = (props) => {
+const renderDateRangePreview = (props) => {
   const {
     value
   } = props;
-  return useMemo(() => {
-    if (!Array.isArray(value) || !value[0] || !value[1]) return "--";
-    return `${dayjs(value[0]).format("YYYY-MM-DD")} ~ ${dayjs(value[1]).format("YYYY-MM-DD")}`;
-  }, [value]);
+  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 = (props) => {
+const renderTimePreview = (props) => {
   const {
     value
   } = props;
-  return useMemo(() => {
-    return value ? dayjs(value).format("HH:mm:ss") : "--";
-  }, [value]);
+  return value ? dayjs(value).format("HH:mm:ss") : "--";
 };
-const useTimeRangePreview = (props) => {
+const renderTimeRangePreview = (props) => {
   const {
     value
   } = props;
-  return useMemo(() => {
-    if (!Array.isArray(value) || !value[0] || !value[1]) return "--";
-    return `${dayjs(value[0]).format("HH:mm")} ~ ${dayjs(value[1]).format("HH:mm")}`;
-  }, [value]);
+  if (!Array.isArray(value) || !value[0] || !value[1]) return "--";
+  return `${dayjs(value[0]).format("HH:mm")} ~ ${dayjs(value[1]).format("HH:mm")}`;
 };
-const useMultiplePreview = (props) => {
+const renderMultiplePreview = (props) => {
   const {
     value
   } = props;
-  return useMemo(() => {
-    return Array.isArray(value) && value.length > 0 ? value.join(", ") : "--";
-  }, [value]);
+  return Array.isArray(value) && value.length > 0 ? value.join(", ") : "--";
 };
-const useBooleanPreview = (props) => {
+const renderBooleanPreview = (props) => {
   const {
     value
   } = props;
-  return useMemo(() => {
-    return typeof value === "boolean" ? value ? "是" : "否" : "--";
-  }, [value]);
+  return typeof value === "boolean" ? value ? "是" : "否" : "--";
 };
-const useRatePreview = (props) => {
+const renderRatePreview = (props) => {
   const {
     value
   } = props;
-  return useMemo(() => {
-    return typeof value === "number" ? "★".repeat(value) + "☆".repeat(5 - value) : "--";
-  }, [value]);
+  return typeof value === "number" ? "★".repeat(value) + "☆".repeat(5 - value) : "--";
 };
-const useColorPreview = (props) => {
+const renderColorPreview = (props) => {
   const {
     value
   } = props;
-  return useMemo(() => {
-    if (!value) return "--";
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: {
-      display: "inline-block",
-      width: 16,
-      height: 16,
-      border: "1px solid #ddd",
-      backgroundColor: value,
-      borderRadius: 3
-    } });
-  }, [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
+  } });
 };
 export {
-  useBooleanPreview,
-  useColorPreview,
-  useDatePreview,
-  useDateRangePreview,
-  useMultiplePreview,
-  useRatePreview,
-  useSelectToPreview,
-  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.10",
+  "version": "1.0.11",
   "description": "基于mobx的form解决方案",
   "type": "module",
   "main": "./dist/index.js",