react-antd-xform 1.0.8 → 1.0.10

package/README.md

@@ -0,0 +1,17 @@
+## 📦 安装
+
+选择你喜欢的包管理器进行安装：
+
+```bash
+# npm
+npm install react-antd-xform --save
+
+# yarn
+yarn add react-antd-xform
+
+# pnpm
+pnpm add react-antd-xform
+
+```
+
+文档地址：https://jhuazhang.github.io/react-antd-xform 或者访问http://handn.xyz/react-antd-xform 

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

@@ -214,6 +214,17 @@ export interface FormItemCreationOptions {
     /** 组件是否具有固有宽度，默认为 true。该选项为 true 时，controlWidth 将不对组件产生效果 */
     hasIntrinsicWidth?: boolean;
 }
+export interface BaseOptionType {
+    disabled?: boolean;
+    className?: string;
+    title?: string;
+    [name: string]: any;
+}
+export interface DefaultOptionType extends BaseOptionType {
+    label?: React.ReactNode;
+    value?: string | number | null;
+    children?: Omit<DefaultOptionType, 'children'>[];
+}
 export interface FormItemProps extends Omit<FieldConfig<any>, 'defaultValueProp' | 'valueProp' | 'htmlId'> {
     use?: boolean;
     component: string | React.ComponentType<FormItemComponentProps>;
@@ -236,6 +247,7 @@ export interface FormItemProps extends Omit<FieldConfig<any>, 'defaultValueProp'
     rightNode?: React.ReactNode;
     isPreview?: boolean;
     variant?: Variant;
+    options?: DefaultOptionType[];
 }
 export interface FormItemViewProps {
     /** `<label />` 的 id 属性 */

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

@@ -1,12 +1,28 @@
 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) {
+    dayjs.prototype.weekday = function() {
+      return this.day();
+    };
+  }
+  if (!dayjs.prototype.localeData) {
+    dayjs.prototype.localeData = function() {
+      return {
+        firstDayOfWeek: () => 1,
+        // 默认中文环境周一开头
+        weekdaysShort: () => ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+        monthsShort: () => "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_")
+      };
+    };
+  }
+}
 function isEmptyValue(value) {
   return !value && value !== 0 || Array.isArray(value) && value.length === 0;
 }

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 { useColorPreview, useRatePreview, useTimeRangePreview, useTimePreview, useDateRangePreview, useDatePreview, useBooleanPreview, useValueToPreview, useMultiplePreview, useSelectToPreview } from "./render-preview.js";
 const COMPONENT_MAP = {
   input: Input,
   textArea: Input.TextArea,
@@ -50,17 +50,17 @@ const COMPONENT_RULES = {
   },
   select: {
     hocs: [],
-    renderPreview: useValueToPreview,
+    renderPreview: useSelectToPreview,
     hasIntrinsicWidth: true
   },
   singleSelect: {
     hocs: [],
-    renderPreview: useValueToPreview,
+    renderPreview: useSelectToPreview,
     hasIntrinsicWidth: true
   },
   multiSelect: {
     hocs: ["multiSelect"],
-    renderPreview: useMultiplePreview,
+    renderPreview: useSelectToPreview,
     hasIntrinsicWidth: true
   },
   radio: {
@@ -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 useValueToPreview: (props: {
+    value: string;
+}) => React.ReactNode;
+export declare const useSelectToPreview: (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 useDatePreview: (props: {
+    value: any;
+}) => React.ReactNode;
 /** 日期范围预览 */
-export declare const useDateRangePreview: (value: [any, any] | null | undefined) => React.ReactNode;
+export declare const useDateRangePreview: (props: {
+    value: [any, any] | null | undefined;
+}) => React.ReactNode;
 /** 时间预览 */
-export declare const useTimePreview: (value: any) => React.ReactNode;
+export declare const useTimePreview: (props: {
+    value: any;
+}) => React.ReactNode;
 /** 时间范围预览 */
-export declare const useTimeRangePreview: (value: [any, any] | null | undefined) => React.ReactNode;
+export declare const useTimeRangePreview: (props: {
+    value: [any, any] | null | undefined;
+}) => React.ReactNode;
 /** 多选/标签类预览 */
-export declare const useMultiplePreview: (value: any[]) => React.ReactNode;
+export declare const useMultiplePreview: (props: {
+    value: any[];
+}) => React.ReactNode;
 /** 开关类预览 */
-export declare const useBooleanPreview: (value: boolean) => React.ReactNode;
+export declare const useBooleanPreview: (props: {
+    value: boolean;
+}) => React.ReactNode;
 /** 评分预览 */
-export declare const useRatePreview: (value: number) => React.ReactNode;
+export declare const useRatePreview: (props: {
+    value: number;
+}) => React.ReactNode;
 /** 颜色预览（返回色块） */
-export declare const useColorPreview: (value: string) => React.ReactNode;
+export declare const useColorPreview: (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 useValueToPreview: (props: {
+        value: string;
+    }) => React.ReactNode;
+    readonly useDatePreview: (props: {
+        value: any;
+    }) => React.ReactNode;
+    readonly useDateRangePreview: (props: {
+        value: [any, any] | null | undefined;
+    }) => React.ReactNode;
+    readonly useTimePreview: (props: {
+        value: any;
+    }) => React.ReactNode;
+    readonly useTimeRangePreview: (props: {
+        value: [any, any] | null | undefined;
+    }) => React.ReactNode;
+    readonly useMultiplePreview: (props: {
+        value: any[];
+    }) => React.ReactNode;
+    readonly useBooleanPreview: (props: {
+        value: boolean;
+    }) => React.ReactNode;
+    readonly useRatePreview: (props: {
+        value: number;
+    }) => React.ReactNode;
+    readonly useColorPreview: (props: {
+        value: string;
+    }) => React.ReactNode;
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-antd-xform",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "基于mobx的form解决方案",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,13 +15,14 @@
     "dev": "sb dev -p 6006",
     "build-storybook": "sb build",
     "docs:dev": "dumi dev",
-    "docs:build": "dumi build",
-    "docs:serve": "dumi serve"
+    "docs:build-site": "dumi build",
+    "docs:build": "cross-env DUMI_ENV=devbuild dumi 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",
@@ -46,9 +47,12 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.6.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
+    "cross-env": "^10.0.0",
     "dumi": "^2.4.21",
     "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
-};