react-antd-xform 1.0.10 → 1.0.12-beta.1

package/dist/form/context/formEnvContext.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { FormEnvContextType } from '../type';
+import { FormEnvContextType } from '../types';
 export declare const useFormEnv: () => FormEnvContextType;
 export declare function FormEnvProvider({ children, ...override }: FormEnvContextType & {
     children: React.ReactNode;

package/dist/form/context/modelContext.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
-import { FormModel } from '../model';
+import { FormModel } from '../model/model';
 export declare function useModel<T = any>(): FormModel<T>;
 export declare const ModelProvider: React.Provider<FormModel<any>>;

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

@@ -1,5 +1,5 @@
-import { FormModel } from '../model';
-import { FormArrayLayoutInput } from '../type';
+import { FormModel } from '../model/model';
+import { FormArrayLayoutInput } from '../types';
 export interface FormArrayProps<T> {
     use?: boolean;
     arrayModel?: FormModel<T[]>;

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

@@ -1,8 +1,8 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
 import { useModel, ModelProvider } from "../context/modelContext.js";
-import { range } from "../common-utils.js";
-import { arrayHelpers } from "../array-helper.js";
+import { range } from "../utils/common-utils.js";
+import { arrayHelpers } from "../helpers/array-helper.js";
 import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
 const defaultArrayLayout = ({
   arrayModel,

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

@@ -1,5 +1,5 @@
-import { Check } from '../model';
-import { CheckConfig, Watchable } from '../type';
+import { Check } from '../model/model';
+import { CheckConfig, Watchable } from '../types';
 export interface FormCheckProps<T = any> extends CheckConfig<T> {
     name?: string;
     check?: Check<T>;

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

@@ -3,7 +3,7 @@ import { reaction } from "mobx";
 import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
 import { useModel } from "../context/modelContext.js";
 import { useFormEnv } from "../context/formEnvContext.js";
-import { composeValue, convertWatchableToExpression } from "../common-utils.js";
+import { composeValue, convertWatchableToExpression } from "../utils/common-utils.js";
 import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
 const FormCheck = observer(function FormCheck2({
   name,

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

@@ -1,6 +1,6 @@
 import { IEqualsComparer } from 'mobx';
-import { Watchable } from '../type';
-import { FormModel } from '../model';
+import { Watchable } from '../types';
+import { FormModel } from '../model/model';
 export interface FormEffectProps<T = any> {
     watch: Watchable<T>;
     effect(value: T, detail: {

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

@@ -2,7 +2,7 @@ import { useRef, useEffect } from "react";
 import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
 import { reaction } from "mobx";
 import { useModel } from "../context/modelContext.js";
-import { convertWatchableToExpression } from "../common-utils.js";
+import { convertWatchableToExpression } from "../utils/common-utils.js";
 import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
 const FormEffect = observer(function FormEffect2({
   watch,

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

@@ -1,2 +1,2 @@
-import { FormLayoutProps } from '../type';
+import { FormLayoutProps } from '../types';
 export declare function FormLayout({ children, className, style, labelPosition, labelWidth, formItemGap, controlWidth, defaultLabelTopPosition, inlineError, containerProps, }: FormLayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import cx from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
 import styled from "styled-components";
-import { asCSSLength } from "../common-utils.js";
+import { asCSSLength } from "../utils/common-utils.js";
 const FormLayoutContainer = styled.div`
   --label-width: auto;
   --control-width: auto;

package/dist/form/extend/form-model-consumer.d.ts

@@ -1,4 +1,4 @@
-import { FormModel } from '../model';
+import { FormModel } from '../model/model';
 export declare const FormModelConsumer: (({ children }: React.ConsumerProps<FormModel<any>>) => React.ReactElement) & {
     displayName: string;
 };

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

@@ -1,11 +1,11 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import { action } from "mobx";
-import { modelUtils } from "../model-utils.js";
+import { modelUtils } from "../model/model-utils.js";
 import { useModel } from "../context/modelContext.js";
 import { useFormEnv } from "../context/formEnvContext.js";
 function FormReset({
   ButtonComponent,
-  children = "提交",
+  children = "重置",
   ...props
 }) {
   const model = useModel();

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

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
-import { modelUtils } from "../model-utils.js";
+import { modelUtils } from "../model/model-utils.js";
 import { useModel } from "../context/modelContext.js";
 import { useFormEnv } from "../context/formEnvContext.js";
 function FormSubmit({

package/dist/form/form/index.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { FormProps } from '../types';
+import { FormModel } from '../model/model';
+import { FormItemView } from '../form-item';
+import { FormReset } from '../extend/form-reset';
+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, variant, isPreview, ...restEnvProps }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Form {
+    var Array: (<T extends unknown>({ name, children, layout, arrayModel: arrayModelProp, use, }: import("@/form/extend/form-array").FormArrayProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+        displayName: string;
+    };
+    var Check: (<T = any>({ name, check: checkProp, validate, watch, validateOnMount, renderError, deps, }: import("@/form/extend/form-check").FormCheckProps<T>) => any) & {
+        displayName: string;
+    };
+    var Effect: (<T = any>({ watch, effect, fireImmediately, deps, equals, }: import("@/form/extend/form-effect").FormEffectProps<T>) => React.ReactElement) & {
+        displayName: string;
+    };
+    var Object: (({ name, children, use }: {
+        children: React.ReactNode;
+        name: string;
+        use?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element) & {
+        displayName: string;
+    };
+    var Submit: typeof FormSubmit;
+    var Layout: typeof FormLayout;
+    var ItemView: typeof FormItemView;
+    var ModelProvider: React.Provider<FormModel<any>>;
+    var ModelConsumer: (({ children }: React.ConsumerProps<FormModel<any>>) => React.ReactElement) & {
+        displayName: string;
+    };
+    var Reset: typeof FormReset;
+}

package/dist/form/form/index.js

@@ -0,0 +1,47 @@
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useState } from "react";
+import { FormModel } from "../model/model.js";
+import { FormItemView } from "../form-item/index.js";
+import { ModelProvider } from "../context/modelContext.js";
+import { FormEnvProvider } from "../context/formEnvContext.js";
+import { composeValue, useHtmlIdPrefix } from "../utils/common-utils.js";
+import { FormArray } from "../extend/form-array.js";
+import { FormCheck } from "../extend/form-check.js";
+import { FormReset } from "../extend/form-reset.js";
+import { FormLayout } from "../extend/form-layout.js";
+import { FormSubmit } from "../extend/form-submit.js";
+import { FormEffect } from "../extend/form-effect.js";
+import { FormObject } from "../extend/form-object.js";
+import { FormModelConsumer } from "../extend/form-model-consumer.js";
+function Form({
+  model: modelProp,
+  defaultValue,
+  children,
+  className,
+  style,
+  layout,
+  containerProps,
+  htmlIdPrefix: htmlIdPrefixProp,
+  variant,
+  isPreview,
+  ...restEnvProps
+}) {
+  const [_model] = useState(() => new FormModel(defaultValue));
+  const model = composeValue(modelProp, _model);
+  model.isPreview = isPreview;
+  const htmlIdPrefix = useHtmlIdPrefix(htmlIdPrefixProp);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvProvider, { htmlIdPrefix, variant, ...restEnvProps, isPreview, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { style, className, containerProps, ...layout, children }) }) });
+}
+Form.Array = FormArray;
+Form.Check = FormCheck;
+Form.Effect = FormEffect;
+Form.Object = FormObject;
+Form.Submit = FormSubmit;
+Form.Layout = FormLayout;
+Form.ItemView = FormItemView;
+Form.ModelProvider = ModelProvider;
+Form.ModelConsumer = FormModelConsumer;
+Form.Reset = FormReset;
+export {
+  Form
+};

package/dist/form/{form-item.d.ts → form-item/index.d.ts}

@@ -1,4 +1,4 @@
-import { FormItemCreationOptions, FormItemProps, FormItemViewProps } from './type';
+import { FormItemCreationOptions, FormItemProps, FormItemViewProps } from '../types';
 export declare function FormItemView({ htmlId, label, help, tip, asterisk, error, children, className, style, labelWidth, controlWidth, rightNode, labelStyle, controlStyle, }: FormItemViewProps): import("react/jsx-runtime").JSX.Element;
 export declare function createFormItem(inputOptions: FormItemCreationOptions): {
     ({ defaultValue: defaultValueProp, isEmpty, renderPreview, componentProps: componentPropsProp, name, field: fieldProp, ...props }: Omit<FormItemProps, "component">): import("react/jsx-runtime").JSX.Element;
@@ -13,3 +13,6 @@ export declare const AnonymousFormItem: {
     displayName: string;
 };
 export declare function FormItem({ use, component, ...props }: FormItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormItem {
+    var register: (options: FormItemCreationOptions) => void;
+}

package/dist/form/{form-item.js → form-item/index.js}

@@ -1,16 +1,16 @@
-import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import React, { useLayoutEffect, useEffect } from "react";
-import cx from "../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
-import "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
-import stringifyObject from "../node_modules/.pnpm/stringify-object@5.0.0/node_modules/stringify-object/index.js";
+import cx from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
+import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
+import stringifyObject from "../../node_modules/.pnpm/stringify-object@5.0.0/node_modules/stringify-object/index.js";
 import { toJS, reaction, runInAction } from "mobx";
-import { FieldType } from "./enum.js";
-import { isFalsyOrEmptyArray, composeValue, pick, asCSSLength } from "./common-utils.js";
-import { Field } from "./model.js";
-import { useModel } from "./context/modelContext.js";
-import { useFormEnv } from "./context/formEnvContext.js";
-import { ALL_COMPONENTS } from "../form-ui/default-component.js";
-import { observer } from "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
+import { FieldType } from "../types/enum.js";
+import { isFalsyOrEmptyArray, composeValue, pick, asCSSLength } from "../utils/common-utils.js";
+import { Field } from "../model/model.js";
+import { useModel } from "../context/modelContext.js";
+import { useFormEnv } from "../context/formEnvContext.js";
+import { ALL_COMPONENTS } from "../../form-ui/default-components/index.js";
+import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
 function processCreationOptions(options) {
   const render = options.render ?? ((props) => React.createElement(options.component, props));
   return {
@@ -266,6 +266,9 @@ function FormItem({
     } });
   }
 }
+FormItem.register = (options) => {
+  COMPONENT_DICT[options.name] = createFormItem(options);
+};
 export {
   AnonymousFormItem,
   FormItem,

package/dist/form/{array-helper.d.ts → helpers/array-helper.d.ts}

@@ -1,5 +1,5 @@
-import { FormModel } from './model';
-import { FormArrayLayoutInput } from './type';
+import { FormModel } from '../model/model';
+import { FormArrayLayoutInput } from '../types';
 export declare const arrayHelpers: {
     append: (arrayModel: FormModel<unknown[]>, itemFactory?: any) => void;
     delete: (arrayModel: FormModel<unknown[]>, itemIndex: number) => void;

package/dist/form/{array-helper.js → helpers/array-helper.js}

@@ -1,8 +1,8 @@
-import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import { action } from "mobx";
-import invariant from "../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/browser.js";
-import { Form } from "./index.js";
-import { composeValue } from "./common-utils.js";
+import invariant from "../../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/browser.js";
+import { Form } from "../form/index.js";
+import { composeValue } from "../utils/common-utils.js";
 function invariantArrayShapeIsAutoOrArray(arrayModel) {
   invariant(arrayModel._valueShape === "auto" || arrayModel._valueShape === "array", 'arrayModel._valueShape should be "auto" or "array"');
 }

package/dist/form/index.d.ts

@@ -1,33 +1,9 @@
-import { default as React } from 'react';
-import { FormProps } from './type';
-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, 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;
-    };
-    var Check: (<T = any>({ name, check: checkProp, validate, watch, validateOnMount, renderError, deps, }: import("./extend/form-check").FormCheckProps<T>) => any) & {
-        displayName: string;
-    };
-    var Effect: (<T = any>({ watch, effect, fireImmediately, deps, equals, }: import("./extend/form-effect").FormEffectProps<T>) => React.ReactElement) & {
-        displayName: string;
-    };
-    var Object: (({ name, children, use }: {
-        children: React.ReactNode;
-        name: string;
-        use?: boolean;
-    }) => import("react/jsx-runtime").JSX.Element) & {
-        displayName: string;
-    };
-    var Submit: typeof FormSubmit;
-    var Layout: typeof FormLayout;
-    var ItemView: typeof FormItemView;
-    var ModelProvider: React.Provider<FormModel<any>>;
-    var ModelConsumer: (({ children }: React.ConsumerProps<FormModel<any>>) => React.ReactElement) & {
-        displayName: string;
-    };
-    var FormReset: typeof import("./extend/form-reset").FormReset;
-}
+export { Form } from './form';
+export { useModel } from './context/modelContext';
+export { FormEnvProvider, useFormEnv } from './context/formEnvContext';
+export { FormItem, createFormItem } from './form-item';
+export { FormModel } from './model/model';
+export { arrayHelpers } from './helpers/array-helper';
+export { AsyncValue } from './helpers/AsyncValue';
+export { modelUtils } from './model/model-utils';
+export type { FieldConfig, CheckConfig, FormEnvContextType, FormLayoutParams, FormProps, FormLayoutProps, FormItemComponentProps, FormItemCreationOptions, BaseOptionType, DefaultOptionType, FormItemProps, FormItemViewProps, SubmitExtraOptions, SubmitOptions, FormArrayLayoutInput, Watchable, } from './types';

package/dist/form/{model-utils.d.ts → model/model-utils.d.ts}

@@ -1,5 +1,5 @@
 import { Field, FormModel } from './model';
-import { FieldValidateTrigger, FormEnvContextType, SubmitOptions } from './type';
+import { FieldValidateTrigger, FormEnvContextType, SubmitOptions } from '../types';
 export declare const modelUtils: {
     clearError: <T>(model: FormModel<T>) => void;
     scrollToFirstError(errorFields: Field[]): void;

package/dist/form/{model-utils.js → model/model-utils.js}

@@ -1,6 +1,6 @@
 import { action, runInAction, observable, toJS } from "mobx";
-import { FieldType } from "./enum.js";
-import { observableSetIn } from "./common-utils.js";
+import { FieldType } from "../types/enum.js";
+import { observableSetIn } from "../utils/common-utils.js";
 const modelUtils = {
   clearError: action(function(model) {
     model.iterateFields((field) => {

package/dist/form/{model.d.ts → model/model.d.ts}

@@ -1,5 +1,5 @@
-import { ModelType, FieldType } from './enum';
-import { XName, ResolveXName, ValueShape, FieldConfig, CheckConfig, FieldState, FieldCreateOptions, FieldValidateTrigger, FormModelCreateOptions } from './type';
+import { ModelType, FieldType } from '../types/enum';
+import { XName, ResolveXName, ValueShape, FieldConfig, CheckConfig, FieldState, FieldCreateOptions, FieldValidateTrigger, FormModelCreateOptions } from '../types';
 declare class IdGenerator {
     private _nextId;
     private prefix;
@@ -16,6 +16,7 @@ export declare class FormModel<D extends {
     readonly root: FormModel<any>;
     readonly parent: FormModel<any>;
     name: string;
+    isPreview: boolean;
     /** 当前 Model 的类型，目前只有两种类型： rootModel 和 subModel */
     _modelType: ModelType;
     _values: D;

package/dist/form/{model.js → model/model.js}

@@ -1,7 +1,7 @@
-import invariant from "../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/browser.js";
+import invariant from "../../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/browser.js";
 import { makeObservable, action, computed, observable, toJS } from "mobx";
-import { ModelType, FieldType } from "./enum.js";
-import { composeValue, observableGetIn, keyToValueShape, splitToPath, observableSetIn } from "./common-utils.js";
+import { ModelType, FieldType } from "../types/enum.js";
+import { composeValue, observableGetIn, keyToValueShape, splitToPath, observableSetIn } from "../utils/common-utils.js";
 const EMPTY_PATH = [];
 const ROOT_MODEL_CREATE_OPTIONS = {
   modelType: ModelType.rootModel
@@ -18,6 +18,7 @@ class IdGenerator {
 class FormModel {
   constructor(initValues, options = ROOT_MODEL_CREATE_OPTIONS) {
     this.state = {};
+    this.isPreview = false;
     this._fieldMap = /* @__PURE__ */ new Map();
     this._valueShape = "auto";
     this._checkMap = /* @__PURE__ */ new Map();

package/dist/form/{type.d.ts → types/index.d.ts}

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { Field, FormModel } from './model';
+import { Field, FormModel } from '../model/model';
 import { FieldType, ModelType } from './enum';
-import { AsyncValue } from './helpers/AsyncValue';
+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];

package/dist/form/{common-utils.d.ts → utils/common-utils.d.ts}

@@ -1,5 +1,5 @@
-import { Watchable } from './type';
-import { FormModel } from './model';
+import { Watchable } from '../types';
+import { FormModel } from '../model/model';
 export declare function keyToValueShape(key: string): "array" | "object";
 export declare function splitToPath(name: number | string): string[];
 /** 合并两个值，如果第一个不为 undefined，则使用第一个值，否则使用第二个值 */

package/dist/form/{common-utils.js → utils/common-utils.js}

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import * as mobx from "mobx";
 import { toJS } from "mobx";
-import { Field, FormModel } from "./model.js";
-import { AsyncValue } from "./helpers/AsyncValue.js";
+import { Field, FormModel } from "../model/model.js";
+import { AsyncValue } from "../helpers/AsyncValue.js";
 function isNumericKey(key) {
   return String(Number.parseInt(key)) === key;
 }

package/dist/form-ui/{default-component.d.ts → default-components/index.d.ts}

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

package/dist/form-ui/{default-component.js → default-components/index.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, useSelectToPreview } from "./render-preview.js";
+import { TimePicker, DatePicker, Checkbox, Radio, Input, ColorPicker, Rate, Switch, Slider, InputNumber, Select } from "antd";
+import { withInjectedProps, withDayjsTransformAntdTimeRange, withDayjsTransformAntdTime, withDayjsTransformAntdDateRangePicker, withDayjsTransformAntdDate, withValueChangeHandler, isEmptyValue, withColorPickerHandler } from "./utils/value-change.js";
+import { renderColorPreview, renderRatePreview, renderTimeRangePreview, renderTimePreview, renderDateRangePreview, renderDatePreview, renderBooleanPreview, renderValueToPreview, renderMultiplePreview, renderSelectToPreview } from "./utils/render-preview.js";
 const COMPONENT_MAP = {
   input: Input,
   textArea: Input.TextArea,
@@ -40,82 +40,82 @@ const DEFAULT_VALUES = {
 const COMPONENT_RULES = {
   input: {
     hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: false
   },
   textArea: {
     hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: true
   },
   select: {
     hocs: [],
-    renderPreview: useSelectToPreview,
+    renderPreview: renderSelectToPreview,
     hasIntrinsicWidth: true
   },
   singleSelect: {
     hocs: [],
-    renderPreview: useSelectToPreview,
+    renderPreview: renderSelectToPreview,
     hasIntrinsicWidth: true
   },
   multiSelect: {
     hocs: ["multiSelect"],
-    renderPreview: useSelectToPreview,
+    renderPreview: renderSelectToPreview,
     hasIntrinsicWidth: true
   },
   radio: {
     hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: false
   },
   checkbox: {
     hocs: [],
-    renderPreview: useMultiplePreview,
+    renderPreview: renderMultiplePreview,
     hasIntrinsicWidth: false
   },
   inputNumber: {
     hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: false
   },
   slider: {
-    hocs: ["valueChange"],
-    renderPreview: useValueToPreview,
+    hocs: [],
+    renderPreview: renderValueToPreview,
     hasIntrinsicWidth: false
   },
   switch: {
     hocs: ["valueChange"],
-    renderPreview: useBooleanPreview,
+    renderPreview: renderBooleanPreview,
     hasIntrinsicWidth: false
   },
   datePicker: {
     hocs: ["dayjsDate"],
-    renderPreview: useDatePreview,
+    renderPreview: renderDatePreview,
     hasIntrinsicWidth: true
   },
   dateRangePicker: {
     hocs: ["dayjsDateRange"],
-    renderPreview: useDateRangePreview,
+    renderPreview: renderDateRangePreview,
     hasIntrinsicWidth: true
   },
   timePicker: {
     hocs: ["dayjsTime"],
-    renderPreview: useTimePreview,
+    renderPreview: renderTimePreview,
     hasIntrinsicWidth: true
   },
   timeRangePicker: {
     hocs: ["dayjsTimeRange"],
-    renderPreview: useTimeRangePreview,
+    renderPreview: renderTimeRangePreview,
     hasIntrinsicWidth: true
   },
   rate: {
     hocs: [],
-    renderPreview: useRatePreview,
+    renderPreview: renderRatePreview,
     hasIntrinsicWidth: false
   },
   colorPicker: {
     hocs: ["colorPicker"],
-    renderPreview: useColorPreview,
+    renderPreview: renderColorPreview,
     hasIntrinsicWidth: false
   }
 };