react-antd-xform 1.0.6 → 1.0.7

package/dist/form/form-item.js

@@ -88,6 +88,7 @@ function FormItemView({
 }
 function createFormItem(inputOptions) {
   const options = processCreationOptions(inputOptions);
+  console.log(options, "options");
   function FormItemComponent({
     defaultValue: defaultValueProp,
     isEmpty = options.isEmpty,
@@ -99,6 +100,7 @@ function createFormItem(inputOptions) {
   }) {
     const formEnv = useFormEnv();
     const model = useModel();
+    const variant = formEnv.variant;
     const field = resolveField(fieldProp, model, name, props.value);
     const isPreview = composeValue(props.isPreview, formEnv.isPreview);
     const error = composeValue(props.error, field.state.error);
@@ -107,6 +109,7 @@ function createFormItem(inputOptions) {
     const htmlId = Field.getHtmlId(formEnv.htmlIdPrefix, field);
     const componentProps = {
       id: htmlId,
+      variant,
       ...isPreview ? { isPreview: true } : null,
       // dataSource, readOnly, disabled,options 允许直接透传
       ...pick(props, ["dataSource", "readOnly", "disabled", "options"]),
@@ -176,6 +179,7 @@ function createFormItem(inputOptions) {
         return null;
       }
     }
+    console.log(isPreview, "isPreviewisPreviewisPreview");
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       FormItemView,
       {

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 };

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

@@ -1,5 +1,6 @@
 import { ColorPicker, Rate, TimePicker, DatePicker, Switch, Slider, InputNumber, Checkbox, Radio, Select, Input } from "antd";
-import { withInjectedProps, withColorPickerHandler, isEmptyValue, withValueChangeHandler, withDayjsTransformAntdDate, withDayjsTransformAntdDateRangePicker, withDayjsTransformAntdTime, withDayjsTransformAntdTimeRange } from "./common-utils.js";
+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";
 const COMPONENT_MAP = {
   input: Input,
   textArea: Input.TextArea,
@@ -18,26 +19,6 @@ const COMPONENT_MAP = {
   rate: Rate,
   colorPicker: ColorPicker
 };
-const HOC_RULES = {
-  // 需要withValueChangeHandler的组件
-  withValueChangeHandler: [
-    "input",
-    "textArea",
-    "radio",
-    "inputNumber",
-    "slider",
-    "switch"
-  ],
-  // 需要日期转换（Day.js）的组件
-  withDayjsTransformAntdDate: ["datePicker"],
-  withDayjsTransformAntdDateRangePicker: ["dateRangePicker"],
-  withDayjsTransformAntdTime: ["timePicker"],
-  withDayjsTransformAntdTimeRange: ["timeRangePicker"],
-  // 颜色选择处理
-  withColorPickerHandler: ["colorPicker"],
-  // 多选下拉框
-  multiSelect: ["multiSelect"]
-};
 const DEFAULT_VALUES = {
   input: "",
   textArea: "",
@@ -56,35 +37,123 @@ const DEFAULT_VALUES = {
   rate: 0,
   colorPicker: ""
 };
+const COMPONENT_RULES = {
+  input: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: false
+  },
+  textArea: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: true
+  },
+  select: {
+    hocs: [],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: true
+  },
+  singleSelect: {
+    hocs: [],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: true
+  },
+  multiSelect: {
+    hocs: ["multiSelect"],
+    renderPreview: useMultiplePreview,
+    hasIntrinsicWidth: true
+  },
+  radio: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: false
+  },
+  checkbox: {
+    hocs: [],
+    renderPreview: useMultiplePreview,
+    hasIntrinsicWidth: false
+  },
+  inputNumber: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: false
+  },
+  slider: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: false
+  },
+  switch: {
+    hocs: ["valueChange"],
+    renderPreview: useBooleanPreview,
+    hasIntrinsicWidth: false
+  },
+  datePicker: {
+    hocs: ["dayjsDate"],
+    renderPreview: useDatePreview,
+    hasIntrinsicWidth: true
+  },
+  dateRangePicker: {
+    hocs: ["dayjsDateRange"],
+    renderPreview: useDateRangePreview,
+    hasIntrinsicWidth: true
+  },
+  timePicker: {
+    hocs: ["dayjsTime"],
+    renderPreview: useTimePreview,
+    hasIntrinsicWidth: true
+  },
+  timeRangePicker: {
+    hocs: ["dayjsTimeRange"],
+    renderPreview: useTimeRangePreview,
+    hasIntrinsicWidth: true
+  },
+  rate: {
+    hocs: [],
+    renderPreview: useRatePreview,
+    hasIntrinsicWidth: false
+  },
+  colorPicker: {
+    hocs: ["colorPicker"],
+    renderPreview: useColorPreview,
+    hasIntrinsicWidth: false
+  }
+};
 const ALL_COMPONENTS = Object.keys(COMPONENT_MAP).map((name) => {
   let component = COMPONENT_MAP[name];
-  if (HOC_RULES.withValueChangeHandler.includes(name)) {
-    component = withValueChangeHandler(component);
-  }
-  if (HOC_RULES.withDayjsTransformAntdDate.includes(name)) {
-    component = withDayjsTransformAntdDate(component);
-  }
-  if (HOC_RULES.withDayjsTransformAntdDateRangePicker.includes(name)) {
-    component = withDayjsTransformAntdDateRangePicker(component);
-  }
-  if (HOC_RULES.withDayjsTransformAntdTime.includes(name)) {
-    component = withDayjsTransformAntdTime(component);
-  }
-  if (HOC_RULES.withDayjsTransformAntdTimeRange.includes(name)) {
-    component = withDayjsTransformAntdTimeRange(component);
-  }
-  if (HOC_RULES.multiSelect.includes(name)) {
-    component = withInjectedProps({ mode: "multiple" })(component);
-  }
-  if (HOC_RULES.withColorPickerHandler.includes(name)) {
-    component = withColorPickerHandler(component);
-  }
+  const rule = COMPONENT_RULES[name];
+  rule.hocs.forEach((hoc) => {
+    switch (hoc) {
+      case "valueChange":
+        component = withValueChangeHandler(component);
+        break;
+      case "dayjsDate":
+        component = withDayjsTransformAntdDate(component);
+        break;
+      case "dayjsDateRange":
+        component = withDayjsTransformAntdDateRangePicker(component);
+        break;
+      case "dayjsTime":
+        component = withDayjsTransformAntdTime(component);
+        break;
+      case "dayjsTimeRange":
+        component = withDayjsTransformAntdTimeRange(component);
+        break;
+      case "multiSelect":
+        component = withInjectedProps({ mode: "multiple" })(component);
+        break;
+      case "colorPicker":
+        component = withColorPickerHandler(component);
+        break;
+    }
+  });
   return {
     name,
     component,
     defaultValue: DEFAULT_VALUES[name],
     isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
+    hasIntrinsicWidth: rule.hasIntrinsicWidth,
+    renderPreview: (props) => rule.renderPreview(props.value)
   };
 });
 export {

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

@@ -0,0 +1,29 @@
+/** 通用默认预览 */
+export declare const useValueToPreview: (value: any) => React.ReactNode;
+/** 日期预览 */
+export declare const useDatePreview: (value: any) => React.ReactNode;
+/** 日期范围预览 */
+export declare const useDateRangePreview: (value: [any, any] | null | undefined) => React.ReactNode;
+/** 时间预览 */
+export declare const useTimePreview: (value: any) => React.ReactNode;
+/** 时间范围预览 */
+export declare const useTimeRangePreview: (value: [any, any] | null | undefined) => React.ReactNode;
+/** 多选/标签类预览 */
+export declare const useMultiplePreview: (value: any[]) => React.ReactNode;
+/** 开关类预览 */
+export declare const useBooleanPreview: (value: boolean) => React.ReactNode;
+/** 评分预览 */
+export declare const useRatePreview: (value: number) => React.ReactNode;
+/** 颜色预览（返回色块） */
+export declare const useColorPreview: (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;
+};

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

@@ -0,0 +1,55 @@
+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) => {
+  return value != null && value !== "" ? `${value}` : "--";
+};
+const useDatePreview = (value) => {
+  return value ? dayjs(value).format("YYYY-MM-DD") : "--";
+};
+const useDateRangePreview = (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 = (value) => {
+  return value ? dayjs(value).format("HH:mm:ss") : "--";
+};
+const useTimeRangePreview = (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 = (value) => {
+  return Array.isArray(value) && value.length > 0 ? value.join(", ") : "--";
+};
+const useBooleanPreview = (value) => {
+  return typeof value === "boolean" ? value ? "是" : "否" : "--";
+};
+const useRatePreview = (value) => {
+  return typeof value === "number" ? "★".repeat(value) + "☆".repeat(5 - 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
+      }
+    }
+  );
+};
+export {
+  useBooleanPreview,
+  useColorPreview,
+  useDatePreview,
+  useDateRangePreview,
+  useMultiplePreview,
+  useRatePreview,
+  useTimePreview,
+  useTimeRangePreview,
+  useValueToPreview
+};

package/dist/node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js

@@ -1,4 +1,4 @@
-import { commonjsGlobal, getDefaultExportFromCjs } from "../../../../../_virtual/_commonjsHelpers.js";
+import { getDefaultExportFromCjs, commonjsGlobal } from "../../../../../_virtual/_commonjsHelpers.js";
 import { __module as dayjs_min } from "../../../../../_virtual/dayjs.min.js";
 (function(module, exports) {
   !function(t, e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-antd-xform",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "基于mobx的form解决方案",
   "type": "module",
   "main": "./dist/index.js",