react-antd-xform 1.0.5 → 1.0.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 knowledge is limitless
+Copyright (c) JHuaZhang
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/form/context/formEnvContext.js

@@ -6,7 +6,8 @@ const FormEnvContext = createContext({
   validateOnBlur: true,
   validateOnChange: true,
   writeDefaultValueToModel: false,
-  autoUnmount: false
+  autoUnmount: false,
+  variant: "outlined"
 });
 FormEnvContext.displayName = "FormEnvContext";
 const useFormEnv = () => useContext(FormEnvContext);

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

@@ -1,4 +1,2 @@
-import { FormLayoutProps, FormItemGroupProps } from '../type';
+import { FormLayoutProps } from '../type';
 export declare function FormLayout({ children, className, style, labelPosition, labelWidth, formItemGap, controlWidth, defaultLabelTopPosition, inlineError, containerProps, }: FormLayoutProps): import("react/jsx-runtime").JSX.Element;
-/** @deprecated 请使用 Form.ItemView 代替 ItemGroup */
-export declare const FormItemGroup: ({ label, asterisk, tip, children, labelWidth, controlWidth, className, style, inline, }: FormItemGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -165,16 +165,6 @@ function FormLayout({
     }
   );
 }
-styled.div`
-  ${FormLayoutContainer}.horizontal & {
-    display: flex;
-  }
-  &.inline {
-    .form-item-group-content {
-      display: flex;
-    }
-  }
-`;
 export {
   FormLayout
 };

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,
       {
@@ -253,6 +257,8 @@ const Hidden = createFormItem({
   }
 });
 function FormItem({ use, component, ...props }) {
+  const formEnv = useFormEnv();
+  const variant = formEnv.variant;
   if (use === false) {
     return null;
   }
@@ -266,13 +272,16 @@ function FormItem({ use, component, ...props }) {
     if (Comp == null) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: { $Component: component } });
     }
-    return React.createElement(Comp, props);
+    return React.createElement(Comp, {
+      ...props,
+      componentProps: { ...props.componentProps, variant }
+    });
   } else {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       AnonymousFormItem,
       {
         ...props,
-        componentProps: { ...props.componentProps, $Component: component }
+        componentProps: { ...props.componentProps, variant, $Component: component }
       }
     );
   }

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, ...restEnvProps }: FormProps): import("react/jsx-runtime").JSX.Element;
+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 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

@@ -22,12 +22,13 @@ function Form({
   layout,
   containerProps,
   htmlIdPrefix: htmlIdPrefixProp,
+  variant,
   ...restEnvProps
 }) {
   const [_model] = useState(() => new FormModel(defaultValue));
   const model = composeValue(modelProp, _model);
   const htmlIdPrefix = useHtmlIdPrefix(htmlIdPrefixProp);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvProvider, { htmlIdPrefix, ...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, 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/type.d.ts

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { Field, FormModel } from './model';
 import { FieldType, ModelType } from './enum';
 import { AsyncValue } from './helpers/AsyncValue';
+export declare const Variants: readonly ["outlined", "borderless", "filled", "underlined"];
+export type Variant = (typeof Variants)[number];
 type valueOf<T> = T[keyof T];
 export type XName<D> = 0 extends D & 1 ? any : D extends (infer U)[] ? number | `${number}` | `${number}.${XName<U>}` : D extends object ? valueOf<{
     [K in keyof D & string]: K | `${K}.${XName<D[K]>}`;
@@ -117,6 +119,10 @@ export interface FormEnvContextType {
      * @see https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label
      * */
     htmlIdPrefix?: string;
+    /**
+     * 表单样式参数 from antd
+     * */
+    variant?: Variant;
 }
 export interface FormLayoutParams {
     /** 标签位置，可选 'left' 或 'top'  */
@@ -150,6 +156,10 @@ export interface FormProps extends FormEnvContextType {
      * */
     layout?: FormLayoutParams;
     children?: React.ReactNode;
+    /**
+     * 表单样式参数 from antd
+     * */
+    variant?: Variant;
 }
 export interface FormLayoutParams {
     /** 标签位置，可选 'left' 或 'top'  */
@@ -170,18 +180,6 @@ export interface FormLayoutProps extends Partial<FormLayoutParams> {
     containerProps?: any;
     defaultLabelTopPosition?: number | string;
 }
-export interface FormItemGroupProps {
-    label?: React.ReactNode;
-    tip?: React.ReactNode;
-    asterisk?: boolean;
-    children?: React.ReactNode;
-    labelWidth?: number | string;
-    labelTopPosition?: number | string;
-    controlWidth?: number | string;
-    className?: string;
-    style?: React.CSSProperties;
-    inline?: boolean;
-}
 export interface FormItemComponentProps {
     value?: any;
     onChange?(...args: any[]): void;
@@ -237,6 +235,7 @@ export interface FormItemProps extends Omit<FieldConfig<any>, 'defaultValueProp'
     controlStyle?: React.CSSProperties;
     rightNode?: React.ReactNode;
     isPreview?: boolean;
+    variant?: Variant;
 }
 export interface FormItemViewProps {
     /** `<label />` 的 id 属性 */

package/dist/form-ui/common-utils.d.ts

@@ -1,4 +1,6 @@
 import { default as React } from 'react';
+import { ColorPicker } from 'antd';
+import { ColorPickerProps } from 'antd/es/color-picker';
 export declare function isEmptyValue(value: any): boolean;
 /**
  * antd中某些组件的onChange并不是直接返回value,而是e.target.value
@@ -28,3 +30,14 @@ export declare const withDayjsTransformAntdTimeRange: (Component: React.Componen
  * 向组件中注入props
  */
 export declare const withInjectedProps: (injectedProps: Record<string, any>) => (Component: React.ComponentType<any>) => React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+/**
+ * 用于处理Antd ColorPicker的onChange返回值格式
+ * 根据 returnType 返回指定格式的值（如 hex、rgb、hsb）
+ */
+type ColorReturnType = 'hex' | 'rgb' | 'hsv';
+interface ColorPickerWrapperProps extends Omit<ColorPickerProps, 'onChange'> {
+    onChange?: (value: string) => void;
+    returnType?: ColorReturnType;
+}
+export declare const withColorPickerHandler: (Component: typeof ColorPicker) => ({ onChange, returnType, ...props }: ColorPickerWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,9 +1,9 @@
 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 weekOfYear from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekOfYear.js";
-import weekYear from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekYear.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);
@@ -248,8 +248,37 @@ const withInjectedProps = (injectedProps) => {
     return WrappedComponent;
   };
 };
+const withColorPickerHandler = (Component) => {
+  return ({
+    onChange,
+    returnType = "hex",
+    ...props
+  }) => {
+    const handleChange = (color) => {
+      if (!onChange) return;
+      let value;
+      switch (returnType) {
+        case "hex":
+          value = color.toHexString();
+          break;
+        case "rgb":
+          value = color.toRgbString();
+          break;
+        case "hsv":
+          const hsv = color.toHsb();
+          value = `hsv(${hsv.h}, ${hsv.s * 100}%, ${hsv.b * 100}%)`;
+          break;
+        default:
+          value = color.toHexString();
+      }
+      onChange(value);
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props, onChange: handleChange });
+  };
+};
 export {
   isEmptyValue,
+  withColorPickerHandler,
   withDayjsTransformAntdDate,
   withDayjsTransformAntdDateRangePicker,
   withDayjsTransformAntdTime,

package/dist/form-ui/default-component.d.ts

@@ -1,2 +1,10 @@
-import { FormItemCreationOptions } from '../form/type';
-export declare const ALL_COMPONENTS: FormItemCreationOptions[];
+import { isEmptyValue } from './common-utils';
+declare const ALL_COMPONENTS: {
+    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: boolean;
+    renderPreview: (props: import('../form/type').FormItemComponentProps) => import('react').ReactNode;
+}[];
+export { ALL_COMPONENTS };

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

@@ -1,105 +1,161 @@
-import { Select, Checkbox, InputNumber, Slider, Switch, Input, Radio, DatePicker, TimePicker } from "antd";
-import { isEmptyValue, withValueChangeHandler, withInjectedProps, withDayjsTransformAntdDate, withDayjsTransformAntdDateRangePicker, withDayjsTransformAntdTime, withDayjsTransformAntdTimeRange } from "./common-utils.js";
-const ALL_COMPONENTS = [
-  {
-    name: "input",
-    component: withValueChangeHandler(Input),
-    defaultValue: "",
-    isEmpty: isEmptyValue,
+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";
+const COMPONENT_MAP = {
+  input: Input,
+  textArea: Input.TextArea,
+  select: Select,
+  singleSelect: Select,
+  multiSelect: Select,
+  radio: Radio.Group,
+  checkbox: Checkbox.Group,
+  inputNumber: InputNumber,
+  slider: Slider,
+  switch: Switch,
+  datePicker: DatePicker,
+  dateRangePicker: DatePicker.RangePicker,
+  timePicker: TimePicker,
+  timeRangePicker: TimePicker.RangePicker,
+  rate: Rate,
+  colorPicker: ColorPicker
+};
+const DEFAULT_VALUES = {
+  input: "",
+  textArea: "",
+  select: "",
+  singleSelect: "",
+  multiSelect: [],
+  radio: "",
+  checkbox: [],
+  inputNumber: null,
+  slider: null,
+  switch: false,
+  datePicker: null,
+  dateRangePicker: null,
+  timePicker: null,
+  timeRangePicker: null,
+  rate: 0,
+  colorPicker: ""
+};
+const COMPONENT_RULES = {
+  input: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
     hasIntrinsicWidth: false
   },
-  {
-    name: "textArea",
-    component: withValueChangeHandler(Input.TextArea),
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
+  textArea: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: true
   },
-  {
-    name: "select",
-    component: Select,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
+  select: {
+    hocs: [],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: true
   },
-  {
-    name: "singleSelect",
-    component: Select,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
+  singleSelect: {
+    hocs: [],
+    renderPreview: useValueToPreview,
+    hasIntrinsicWidth: true
   },
-  {
-    name: "multiSelect",
-    component: withInjectedProps({ mode: "multiple" })(Select),
-    defaultValue: [],
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
+  multiSelect: {
+    hocs: ["multiSelect"],
+    renderPreview: useMultiplePreview,
+    hasIntrinsicWidth: true
   },
-  {
-    name: "radio",
-    component: withValueChangeHandler(Radio.Group),
-    defaultValue: "",
-    isEmpty: isEmptyValue,
+  radio: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
     hasIntrinsicWidth: false
   },
-  {
-    name: "checkbox",
-    component: Checkbox.Group,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
+  checkbox: {
+    hocs: [],
+    renderPreview: useMultiplePreview,
     hasIntrinsicWidth: false
   },
-  {
-    name: "inputNumber",
-    component: InputNumber,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
+  inputNumber: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
     hasIntrinsicWidth: false
   },
-  {
-    name: "slider",
-    component: Slider,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
+  slider: {
+    hocs: ["valueChange"],
+    renderPreview: useValueToPreview,
     hasIntrinsicWidth: false
   },
-  {
-    name: "switch",
-    component: Switch,
-    defaultValue: false,
-    isEmpty: isEmptyValue,
+  switch: {
+    hocs: ["valueChange"],
+    renderPreview: useBooleanPreview,
     hasIntrinsicWidth: false
   },
-  {
-    name: "datePicker",
-    component: withDayjsTransformAntdDate(DatePicker),
-    defaultValue: false,
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
+  datePicker: {
+    hocs: ["dayjsDate"],
+    renderPreview: useDatePreview,
+    hasIntrinsicWidth: true
   },
-  {
-    name: "dateRangePicker",
-    component: withDayjsTransformAntdDateRangePicker(DatePicker.RangePicker),
-    defaultValue: false,
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
+  dateRangePicker: {
+    hocs: ["dayjsDateRange"],
+    renderPreview: useDateRangePreview,
+    hasIntrinsicWidth: true
   },
-  {
-    name: "timePicker",
-    component: withDayjsTransformAntdTime(TimePicker),
-    defaultValue: false,
-    isEmpty: isEmptyValue,
+  timePicker: {
+    hocs: ["dayjsTime"],
+    renderPreview: useTimePreview,
+    hasIntrinsicWidth: true
+  },
+  timeRangePicker: {
+    hocs: ["dayjsTimeRange"],
+    renderPreview: useTimeRangePreview,
+    hasIntrinsicWidth: true
+  },
+  rate: {
+    hocs: [],
+    renderPreview: useRatePreview,
     hasIntrinsicWidth: false
   },
-  {
-    name: "timeRangePickerPicker",
-    component: withDayjsTransformAntdTimeRange(TimePicker.RangePicker),
-    defaultValue: false,
-    isEmpty: isEmptyValue,
+  colorPicker: {
+    hocs: ["colorPicker"],
+    renderPreview: useColorPreview,
     hasIntrinsicWidth: false
   }
-];
+};
+const ALL_COMPONENTS = Object.keys(COMPONENT_MAP).map((name) => {
+  let component = COMPONENT_MAP[name];
+  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: rule.hasIntrinsicWidth,
+    renderPreview: (props) => rule.renderPreview(props.value)
+  };
+});
 export {
   ALL_COMPONENTS
 };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-antd-xform",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "基于mobx的form解决方案",
   "type": "module",
   "main": "./dist/index.js",
@@ -13,24 +13,21 @@
   "scripts": {
     "build": "vite build",
     "dev": "sb dev -p 6006",
-    "build-storybook": "sb build"
+    "build-storybook": "sb build",
+    "docs:dev": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:serve": "dumi serve"
   },
-  "keywords": [
-    "form",
-    "antd",
-    "react",
-    "mobx",
-    "react-antd-xform"
-  ],
+  "keywords": [],
   "author": "",
-  "license": "MIT",
+  "license": "ISC",
   "packageManager": "pnpm@10.12.1",
   "dependencies": {
     "@types/invariant": "^2.2.37",
     "@types/stringify-object": "^4.0.5",
     "antd": "^5.26.2",
     "classnames": "^2.5.1",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.15",
     "invariant": "^2.2.4",
     "mobx": "^6.13.7",
     "mobx-react-lite": "^4.1.0",
@@ -48,10 +45,10 @@
     "@types/react-dom": "^18.2.22",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.6.0",
+    "dumi": "^2.4.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",
-    "react-syntax-highlighter": "^15.6.1",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^4.5.4"
   },

package/README.md

@@ -1,2 +0,0 @@
-# react-antd-xform
-基于react + mobx实现的antd表单方案