react-antd-xform 1.0.6 → 1.0.8

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,125 @@ 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,50 @@
+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.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",