react-antd-xform 1.0.5 → 1.0.6

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

@@ -253,6 +253,8 @@ const Hidden = createFormItem({
   }
 });
 function FormItem({ use, component, ...props }) {
+  const formEnv = useFormEnv();
+  const variant = formEnv.variant;
   if (use === false) {
     return null;
   }
@@ -266,13 +268,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,9 @@
-import { FormItemCreationOptions } from '../form/type';
-export declare const ALL_COMPONENTS: FormItemCreationOptions[];
+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";
+    component: any;
+    defaultValue: any;
+    isEmpty: typeof isEmptyValue;
+    hasIntrinsicWidth: false;
+}[];
+export { ALL_COMPONENTS };

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

@@ -1,105 +1,92 @@
-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,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "textArea",
-    component: withValueChangeHandler(Input.TextArea),
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "select",
-    component: Select,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "singleSelect",
-    component: Select,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "multiSelect",
-    component: withInjectedProps({ mode: "multiple" })(Select),
-    defaultValue: [],
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "radio",
-    component: withValueChangeHandler(Radio.Group),
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "checkbox",
-    component: Checkbox.Group,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "inputNumber",
-    component: InputNumber,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "slider",
-    component: Slider,
-    defaultValue: "",
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "switch",
-    component: Switch,
-    defaultValue: false,
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "datePicker",
-    component: withDayjsTransformAntdDate(DatePicker),
-    defaultValue: false,
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "dateRangePicker",
-    component: withDayjsTransformAntdDateRangePicker(DatePicker.RangePicker),
-    defaultValue: false,
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "timePicker",
-    component: withDayjsTransformAntdTime(TimePicker),
-    defaultValue: false,
-    isEmpty: isEmptyValue,
-    hasIntrinsicWidth: false
-  },
-  {
-    name: "timeRangePickerPicker",
-    component: withDayjsTransformAntdTimeRange(TimePicker.RangePicker),
-    defaultValue: false,
+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";
+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 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: "",
+  select: "",
+  singleSelect: "",
+  multiSelect: [],
+  radio: "",
+  checkbox: [],
+  inputNumber: null,
+  slider: null,
+  switch: false,
+  datePicker: null,
+  dateRangePicker: null,
+  timePicker: null,
+  timeRangePicker: null,
+  rate: 0,
+  colorPicker: ""
+};
+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);
+  }
+  return {
+    name,
+    component,
+    defaultValue: DEFAULT_VALUES[name],
     isEmpty: isEmptyValue,
     hasIntrinsicWidth: false
-  }
-];
+  };
+});
 export {
   ALL_COMPONENTS
 };

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

@@ -1,4 +1,4 @@
-import { getDefaultExportFromCjs, commonjsGlobal } from "../../../../../_virtual/_commonjsHelpers.js";
+import { commonjsGlobal, getDefaultExportFromCjs } 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.5",
+  "version": "1.0.6",
   "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表单方案