@fairys/valtio-form-basic 0.0.12 → 1.0.0

package/src/form/form.item.tsx

@@ -1,15 +1,17 @@
 /**表单项*/
 
-import { MObject } from 'interface';
+import { MObject } from 'common/interface';
 import React, { useEffect, useMemo } from 'react';
 import clsx from 'clsx';
-import { useFairysValtioFormInstanceContextState, FairysValtioFormInstance } from './instance';
+import { useFairysValtioFormInstanceContextState, FairysValtioFormInstance } from 'common/instance';
 import { useFairysValtioFormLayoutContext, FairysValtioFormLayoutContextOptions } from './layout';
-import { FairysValtioFormParentAttrs, useFairysValtioFormAttrsName } from './hooks';
-import { get } from './utils';
+import { FairysValtioFormParentAttrs, useFairysValtioFormAttrsName, useId } from 'common/hooks';
+import { formatePath, get } from 'common/utils';
 import { RuleItem } from 'async-validator';
 
-export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<string, any>> {
+  /**平台*/
+  platform?: 'pc' | 'rn' | 'taro';
   /**
    * 表单项名称 ，字段需要和存储的字段路径一致
    *
@@ -26,6 +28,8 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
   label?: string;
   /**传递组件字段*/
   valuePropName?: string;
+  /**取值字段(默认 valuePropName字段值)*/
+  getValuePath?: string;
   /**自定义获取值*/
   getValueFromEvent?: (event: any, form: FairysValtioFormInstance<T>) => any;
   /**值格式化*/
@@ -77,6 +81,11 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
   isJoinParentField?: boolean;
   /**校验规则*/
   rules?: RuleItem[];
+
+  /**卸载移除数据值
+   * @default true
+   */
+  isRemoveValueOnUnmount?: boolean;
 }
 
 /**
@@ -122,7 +131,9 @@ export const FormItem = (props: FormItemProps) => {
  * ```
  * 
 */
-export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>) {
+export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<string, any>>(
+  props: FairysValtioFormItemAttrsProps<T>,
+) {
   const [layoutAttrs] = useFairysValtioFormLayoutContext();
   const colCount = layoutAttrs.colCount || 1;
   const parent_borderedType = layoutAttrs.itemBorderType || 'bottom';
@@ -138,10 +149,12 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   const parent_isInvalidBorderRed = layoutAttrs.isInvalidBorderRed;
   const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
   const parent_showColon = layoutAttrs.showColon;
+  const parent_platform = layoutAttrs.platform;
 
   const {
     name,
     valuePropName = 'value',
+    getValuePath = valuePropName,
     getValueFromEvent,
     formatValue,
     onAfterUpdate,
@@ -166,6 +179,8 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     isInvalidTextRed = parent_isInvalidTextRed,
     isJoinParentField = true,
     rules,
+    platform = parent_platform,
+    isRemoveValueOnUnmount = true,
   } = props;
 
   const {
@@ -179,39 +194,50 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   const error = errorState[_name];
   // 使用从 Form 中设置的规则
   const _formItemRules = formInstance.rules?.[_name];
-
+  const id = useId(_name);
   formInstance.nameToPaths[_name] = paths;
-  /**挂载校验规则*/
-  if (Array.isArray(rules) && rules.length) {
-    formInstance.mountRules[_name] = rules;
-  }
   useEffect(() => {
+    if (Array.isArray(rules) && rules.length) {
+      formInstance.mountRules[_name] = rules;
+    }
     return () => {
       formInstance.removeRules(_name);
     };
-  }, [_name]);
+  }, [_name, rules]);
 
   const onValueChange = (event: any) => {
-    let value = event;
+    let _value = event;
     const target = event?.detail || event?.target;
     if (typeof getValueFromEvent === 'function') {
-      value = getValueFromEvent(event, formInstance);
-    } else if (event && target && typeof target === 'object' && valuePropName in target) {
-      value = target.valuePropName;
+      _value = getValueFromEvent(event, formInstance);
+    } else if (event && target && typeof target === 'object' && getValuePath in target) {
+      _value = get(target, formatePath(getValuePath));
     }
     if (typeof formatValue === 'function') {
-      value = formatValue(value, formInstance, event);
+      _value = formatValue(_value, formInstance, event);
     }
-    formInstance.updatedValueByPaths(_name, value);
+    // 校验值是否有变化
+    if (value === _value) return;
+
+    formInstance.updatedValueByPaths(_name, _value);
     if (typeof onAfterUpdate === 'function') {
-      onAfterUpdate(value, formInstance, event);
+      onAfterUpdate(_value, formInstance, event);
     }
   };
 
+  useEffect(() => {
+    return () => {
+      if (isRemoveValueOnUnmount) {
+        formInstance.removeValueByPaths(_name);
+      }
+    };
+  }, []);
+
   /**基础组件参数*/
   const baseControl = {
     ...attrs,
     name,
+    id,
     [valuePropName]: value,
     [trigger]: onValueChange,
   };
@@ -288,11 +314,10 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   const itemBody_cls = useMemo(() => {
     // 默认两端显示
     return clsx(
-      'fairys-valtio-form-item-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__relative fairystaroform__flex-1 fairystaroform__flex fairystaroform__box-border',
+      'fairys-valtio-form-item-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__relative fairystaroform__flex-1 fairystaroform__flex fairystaroform__box-border fairystaroform__items-start',
       {
         'fairystaroform__flex-row fairystaroform__justify-start': labelMode === 'left',
         'fairystaroform__flex-row fairystaroform__justify-end': labelMode === 'between' || labelMode === 'top',
-        'fairystaroform__flex-row': labelMode === 'top',
         'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 ':
           itemBorderType === 'body',
         'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && itemBorderType === 'body',
@@ -333,20 +358,25 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
       'fairys-valtio-form-item-body-error fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__w-full fairystaroform__flex fairystaroform__flex-row fairystaroform__box-border fairystaroform__text-red fairystaroform__absolute fairystaroform__text-[10px] fairystaroform__z-10',
       {
         'fairystaroform__bottom-[-14px] fairystaroform__left-0 fairystaroform__justify-start':
-          errorLayout === 'bottom-left',
+          errorLayout === 'bottom-left' && platform !== 'pc',
+        'fairystaroform__bottom-[-10px] fairystaroform__left-0 fairystaroform__justify-start':
+          errorLayout === 'bottom-left' && platform === 'pc',
         'fairystaroform__bottom-[-14px] fairystaroform__right-0 fairystaroform__justify-end':
-          errorLayout === 'bottom-right',
+          errorLayout === 'bottom-right' && platform !== 'pc',
+        'fairystaroform__bottom-[-10px] fairystaroform__right-0 fairystaroform__justify-end':
+          errorLayout === 'bottom-right' && platform === 'pc',
         'fairystaroform__top-[-4px]  fairystaroform__right-0 fairystaroform__justify-end': errorLayout === 'top-right',
         'fairystaroform__top-[-4px] fairystaroform__left-0 fairystaroform__justify-start': errorLayout === 'top-left',
         /**边框底部提示*/
-        'fairystaroform__left-0  fairystaroform__bottom-[-2px] fairystaroform__justify-start':
+        'fairystaroform__left-0 fairystaroform__bottom-[-2px] fairystaroform__justify-start':
           errorLayout === 'left-border-top',
         /**边框顶部提示*/
-        'fairystaroform__right-0  fairystaroform__bottom-[-2px] fairystaroform__justify-end':
+        'fairystaroform__right-0 fairystaroform__bottom-[-2px] fairystaroform__justify-end':
           errorLayout === 'right-border-top',
+        'fairystaroform__px-[4px]': platform === 'pc',
       },
     );
-  }, [errorLayout]);
+  }, [errorLayout, platform]);
 
   const styleBase = useMemo(() => {
     const css: React.CSSProperties = {};
@@ -377,6 +407,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     error,
     _name,
     name,
+    id,
     paths,
     parentName,
     formAttrsNameInstance,
@@ -405,7 +436,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   } as FairysValtioFormItemAttrsReturn<T>;
 }
 
-export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = Record<string, any>> {
   /**表单项值*/
   value?: any;
   /**是否校验错误*/
@@ -438,6 +469,8 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
   _name?: string;
   /**表单项名称*/
   name?: string;
+  /**表单项ID*/
+  id?: string;
   /**表单项路径*/
   paths?: (string | number)[];
   /**父级字段名*/
@@ -490,12 +523,13 @@ export const FormItem = (props: FormItemProps) => {
 }
  * ```
 */
-export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(
+export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(
   props: FairysValtioFormItemAttrsProps<T>,
 ) {
   const {
     name,
     valuePropName = 'value',
+    getValuePath = valuePropName,
     getValueFromEvent,
     formatValue,
     onAfterUpdate,
@@ -504,6 +538,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
     attrs = {},
     isJoinParentField = true,
     rules,
+    isRemoveValueOnUnmount = true,
   } = props;
   const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
   const {
@@ -512,40 +547,51 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
     parentName,
     formAttrsNameInstance,
   } = useFairysValtioFormAttrsName({ name, isJoinParentField });
+  const id = useId(_name);
   const value = useMemo(() => get(state, paths), [state, paths]);
   const error = errorState[_name];
   formInstance.nameToPaths[_name] = paths;
-  /**挂载校验规则*/
-  if (Array.isArray(rules) && rules.length) {
-    formInstance.mountRules[_name] = rules;
-  }
 
   useEffect(() => {
+    if (Array.isArray(rules) && rules.length) {
+      formInstance.mountRules[_name] = rules;
+    }
     return () => {
       formInstance.removeRules(_name);
     };
-  }, [_name]);
+  }, [_name, rules]);
 
   const onValueChange = (event: any) => {
-    let value = event;
+    let _value = event;
     const target = event?.detail || event?.target;
     if (typeof getValueFromEvent === 'function') {
-      value = getValueFromEvent(event, formInstance);
-    } else if (event && target && typeof target === 'object' && valuePropName in target) {
-      value = target.valuePropName;
+      _value = getValueFromEvent(event, formInstance);
+    } else if (event && target && typeof target === 'object' && getValuePath in target) {
+      _value = get(target, formatePath(getValuePath));
     }
     if (typeof formatValue === 'function') {
-      value = formatValue(value, formInstance, event);
+      _value = formatValue(_value, formInstance, event);
     }
-    formInstance.updatedValueByPaths(_name, value);
+    // 校验值是否有变化
+    if (value === _value) return;
+
+    formInstance.updatedValueByPaths(_name, _value);
     if (typeof onAfterUpdate === 'function') {
-      onAfterUpdate(value, formInstance, event);
+      onAfterUpdate(_value, formInstance, event);
     }
   };
+  useEffect(() => {
+    return () => {
+      if (isRemoveValueOnUnmount) {
+        formInstance.removeValueByPaths(_name);
+      }
+    };
+  }, []);
   /**基础组件参数*/
   const baseControl = {
     ...attrs,
     name,
+    id,
     [valuePropName]: value,
     [trigger]: onValueChange,
   };
@@ -558,6 +604,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
     formInstance,
     _name,
     name,
+    id,
     paths,
     parentName,
     formAttrsNameInstance,

package/src/form/form.tsx

@@ -1,10 +1,11 @@
-import { MObject } from 'interface';
-import { FairysValtioFormInstance, useFairysValtioFormInstance } from './instance';
-import { useMemo, type ReactNode } from 'react';
+import { MObject } from 'common/interface';
+import { FairysValtioFormInstance, useFairysValtioFormInstance } from 'common/instance';
+import { useImperativeHandle, useMemo, type ReactNode, useEffect } from 'react';
 import { FairysValtioFormLayoutAttrsProps } from './layout';
 import { RuleItem } from 'async-validator';
 
-export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = Record<string, any>>
+  extends FairysValtioFormLayoutAttrsProps {
   /**表单实例*/
   form?: FairysValtioFormInstance<T>;
   /**子元素*/
@@ -18,10 +19,15 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
   /**
    * 初始化表单数据类型，默认值为 deepCopy
    * - deepCopy：使用深度拷贝初始化表单数据
-   * - proxy：使用代理对象初始化表单数据
-   * - immutable：直接使用对象，不进行任何处理，注意，这个使用必须是`valtio`中的`proxy`声明的对象数据，否则表单项更新数据不会同步
+   * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
    */
-  initFormDataType?: 'deepCopy' | 'proxy' | 'immutable';
+  initFormDataType?: 'deepCopy' | 'immutable';
+  /**
+   * 表单值改变时回调
+   * @param path 表单项路径
+   * @param value 表单项值
+   */
+  onValuesChange?: (path: PropertyKey, value: any) => void;
 }
 
 /**
@@ -44,13 +50,21 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>) {
-  const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+export function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(
+  props: FairysValtioFormAttrsProps<T>,
+  ref: React.Ref<FairysValtioFormInstance<T>>,
+) {
+  const { form, rules, formData, hideState, initFormDataType = 'deepCopy', onValuesChange, ...rest } = props;
   const formInstance = useFairysValtioFormInstance(form);
   /**表单规则*/
   formInstance.rules = rules;
+  /**表单值改变时回调*/
+  formInstance.onValuesChange = onValuesChange;
   /**初始化表单值*/
   useMemo(() => formInstance.ctor({ formData, hideState, initFormDataType }), []);
+  useImperativeHandle(ref, () => formInstance);
+  /**卸载清空所有数据*/
+  useEffect(() => () => formInstance.clear(), []);
   return {
     ...rest,
     formInstance,

package/src/form/layout.tsx

@@ -3,6 +3,8 @@ import clsx from 'clsx';
 import { proxy, useSnapshot } from 'valtio';
 
 export interface FairysValtioFormLayoutContextOptions {
+  /**平台*/
+  platform?: 'pc' | 'rn' | 'taro';
   /**列数据*/
   colCount?: number;
   /**规则校验失败错误提示位置*/
@@ -27,7 +29,7 @@ export interface FairysValtioFormLayoutContextOptions {
   /**
    * 底部边框类型
    */
-  itemBorderType?: 'bottom' | 'body';
+  itemBorderType?: 'bottom' | 'body' | 'none';
   /**边框颜色*/
   itemBorderColor?: React.CSSProperties['borderColor'];
   /**是否校验失败时显示红色边框*/
@@ -104,7 +106,7 @@ export const FairysValtioFormLayoutContext = createContext<FairysValtioFormLayou
 export const useFairysValtioFormLayoutContext = () => {
   const instance = useContext(FairysValtioFormLayoutContext);
   const state = useSnapshot(instance.state);
-  return [state, instance] as const;
+  return [state, instance] as [FairysValtioFormLayoutContextOptions, FairysValtioFormLayoutInstance];
 };
 
 /**
@@ -169,6 +171,7 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
   const parent_isInvalidBorderRed = state.isInvalidBorderRed;
   const parent_isInvalidTextRed = state.isInvalidTextRed;
   const parent_showColon = state.showColon;
+  const parent_platform = state.platform;
 
   const {
     colCount = parent_colCount,
@@ -186,6 +189,7 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
     isInvalidBorderRed = parent_isInvalidBorderRed,
     isInvalidTextRed = parent_isInvalidTextRed,
     showColon = parent_showColon,
+    platform = parent_platform,
     gap,
     isAllColSpan = false,
     className,
@@ -215,6 +219,7 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
         isInvalidBorderRed,
         isInvalidTextRed,
         showColon,
+        platform,
       }),
     [
       colCount,
@@ -231,6 +236,7 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
       isInvalidBorderRed,
       isInvalidTextRed,
       showColon,
+      platform,
     ],
   );
 
@@ -277,7 +283,7 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
 
   const body_base = useMemo(() => {
     return clsx(
-      'fairys-valtio-form-layout-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__px-[8px] fairystaroform__w-full fairystaroform__grid fairystaroform__gap-[2px] fairystaroform__box-border',
+      'fairys-valtio-form-layout-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__px-[8px] fairystaroform__w-full fairystaroform__grid  fairystaroform__box-border fairystaroform__pt-[8px] fairystaroform__pb-[12px] fairystaroform__gap-[6px]',
       bodyClassName,
     );
   }, [bodyClassName]);

package/src/index.tsx

@@ -1,5 +1,4 @@
-export * from './form/hooks';
-export * from './form/instance';
-export * from './form/layout';
-export * from './form/form';
-export * from './form/form.item';
+export * from 'common';
+export * from 'form/layout';
+export * from 'form/form';
+export * from 'form/form.item';