@fairys/valtio-form-basic 1.0.0 → 1.0.1

package/README.md

@@ -251,40 +251,9 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): {
+export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): Omit<FairysValtioFormAttrsProps<T>, "initFormDataType" | "form" | "rules" | "formData" | "hideState" | "onValuesChange"> & {
     formInstance: FairysValtioFormInstance<T>;
-    /**子元素*/
-    children: ReactNode;
-    gap?: string | number;
-    title?: React.ReactNode;
-    extra?: React.ReactNode;
-    isAllColSpan?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    headerClassName?: string;
-    headerStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    bordered?: boolean;
-    boxShadow?: boolean;
-    lastItemBordered?: boolean;
-    platform?: "pc" | "rn" | "taro";
-    colCount?: number;
-    errorLayout?: "bottom-left" | "bottom-right" | "top-right" | "top-left" | "left-border-top" | "right-border-top";
-    labelMode?: "left" | "top" | "between";
-    formItemClassName?: string;
-    formItemStyle?: React.CSSProperties;
-    formItemLabelClassName?: string;
-    formItemLabelStyle?: React.CSSProperties;
-    formItemBodyClassName?: string;
-    formItemBodyStyle?: React.CSSProperties;
-    itemBorderType?: "bottom" | "body" | "none";
-    itemBorderColor?: React.CSSProperties["borderColor"];
-    isInvalidBorderRed?: boolean;
-    isInvalidTextRed?: boolean;
-    showColon?: boolean;
 };
-
 ```
 
 ###  formItem
@@ -369,6 +338,10 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<st
     isJoinParentField?: boolean;
     /**校验规则*/
     rules?: RuleItem[];
+    /**卸载移除数据值
+     * @default true
+     */
+    isRemoveValueOnUnmount?: boolean;
 }
 
 ```
@@ -511,21 +484,40 @@ export const FormItem = (props: FormItemProps) => {
 }
  * ```
 */
-export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): {
-    value: unknown;
-    error: string[];
+export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemNoStyleAttrsReturn<T>;
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = Record<string, any>> {
+    /**表单项值*/
+    value?: any;
+    /**是否校验错误*/
+    isInvalid: boolean;
+    /**是否必填*/
+    isRequired: boolean;
+    /**错误信息*/
+    error?: string[];
+    /**值改变事件*/
     onValueChange: (event: any) => void;
+    /**表单状态*/
     state: T;
+    /**错误状态*/
     errorState: Record<PropertyKey, string[]>;
+    /**表单实例*/
     formInstance: FairysValtioFormInstance<T>;
-    _name: string;
-    name: string;
-    id: string;
-    paths: (number | symbol)[] | (string | number)[];
-    parentName: string;
+    /**拼接父级字段名后得到的表单项名称*/
+    _name?: string;
+    /**表单项名称*/
+    name?: string;
+    /**表单项ID*/
+    id?: string;
+    /**表单项路径*/
+    paths?: (string | number)[];
+    /**父级字段名*/
+    parentName?: string;
+    /**表单属性名实例*/
     formAttrsNameInstance: FairysValtioFormParentAttrs;
-    children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>;
-};
+    /**子元素*/
+    children?: React.ReactNode;
+}
+
 ```
 
 ###  layout
@@ -730,6 +722,12 @@ export declare function get<TDefault = unknown>(value: any, segments: PropertyKe
  * @returns 格式化后的路径
  */
 export declare function formatePath(path: PropertyKey): (number | symbol)[] | (string | number)[];
+/***
+ * 移除值
+ * @param value 任意值
+ * @param segments 键路径
+ */
+export declare function removeValueByPaths(value: any, segments: PropertyKey[]): void;
 /**格式化属性名*/
 export declare function formateName(name?: string, parentName?: string): string;
 /***

package/esm/form/form.d.ts

@@ -47,36 +47,6 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): {
+export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): Omit<FairysValtioFormAttrsProps<T>, "initFormDataType" | "form" | "rules" | "formData" | "hideState" | "onValuesChange"> & {
     formInstance: FairysValtioFormInstance<T>;
-    /**子元素*/
-    children: ReactNode;
-    gap?: string | number;
-    title?: React.ReactNode;
-    extra?: React.ReactNode;
-    isAllColSpan?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    headerClassName?: string;
-    headerStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    bordered?: boolean;
-    boxShadow?: boolean;
-    lastItemBordered?: boolean;
-    platform?: "pc" | "rn" | "taro";
-    colCount?: number;
-    errorLayout?: "bottom-left" | "bottom-right" | "top-right" | "top-left" | "left-border-top" | "right-border-top";
-    labelMode?: "left" | "top" | "between";
-    formItemClassName?: string;
-    formItemStyle?: React.CSSProperties;
-    formItemLabelClassName?: string;
-    formItemLabelStyle?: React.CSSProperties;
-    formItemBodyClassName?: string;
-    formItemBodyStyle?: React.CSSProperties;
-    itemBorderType?: "bottom" | "body" | "none";
-    itemBorderColor?: React.CSSProperties["borderColor"];
-    isInvalidBorderRed?: boolean;
-    isInvalidTextRed?: boolean;
-    showColon?: boolean;
 };

package/esm/form/form.item.d.ts

@@ -211,18 +211,36 @@ export const FormItem = (props: FormItemProps) => {
 }
  * ```
 */
-export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): {
-    value: unknown;
-    error: string[];
+export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemNoStyleAttrsReturn<T>;
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = Record<string, any>> {
+    /**表单项值*/
+    value?: any;
+    /**是否校验错误*/
+    isInvalid: boolean;
+    /**是否必填*/
+    isRequired: boolean;
+    /**错误信息*/
+    error?: string[];
+    /**值改变事件*/
     onValueChange: (event: any) => void;
+    /**表单状态*/
     state: T;
+    /**错误状态*/
     errorState: Record<PropertyKey, string[]>;
+    /**表单实例*/
     formInstance: FairysValtioFormInstance<T>;
-    _name: string;
-    name: string;
-    id: string;
-    paths: (number | symbol)[] | (string | number)[];
-    parentName: string;
+    /**拼接父级字段名后得到的表单项名称*/
+    _name?: string;
+    /**表单项名称*/
+    name?: string;
+    /**表单项ID*/
+    id?: string;
+    /**表单项路径*/
+    paths?: (string | number)[];
+    /**父级字段名*/
+    parentName?: string;
+    /**表单属性名实例*/
     formAttrsNameInstance: FairysValtioFormParentAttrs;
-    children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>;
-};
+    /**子元素*/
+    children?: React.ReactNode;
+}

package/esm/form/form.item.js

@@ -216,7 +216,7 @@ function useFairysValtioFormItemAttrs(props) {
     };
 }
 function useFairysValtioFormItemNoStyleAttrs(props) {
-    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRemoveValueOnUnmount = true } = props;
+    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRemoveValueOnUnmount = true, isRequired: _isRequired } = props;
     const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
     const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
         name,
@@ -229,6 +229,7 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
     ]);
     const error = errorState[_name];
     formInstance.nameToPaths[_name] = paths;
+    const _formItemRules = formInstance.rules?.[_name];
     useEffect(()=>{
         if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
         return ()=>{
@@ -258,8 +259,26 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         [valuePropName]: value,
         [trigger]: onValueChange
     };
+    const isRequired = useMemo(()=>{
+        if (_isRequired) return _isRequired;
+        if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
+        if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
+        return false;
+    }, [
+        rules,
+        formInstance,
+        _formItemRules
+    ]);
+    const isInvalid = useMemo(()=>{
+        if (Array.isArray(error) && error.length) return true;
+        return false;
+    }, [
+        error
+    ]);
     return {
         value,
+        isInvalid,
+        isRequired,
         error,
         onValueChange,
         state,

package/lib/form/form.d.ts

@@ -47,36 +47,6 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): {
+export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): Omit<FairysValtioFormAttrsProps<T>, "initFormDataType" | "form" | "rules" | "formData" | "hideState" | "onValuesChange"> & {
     formInstance: FairysValtioFormInstance<T>;
-    /**子元素*/
-    children: ReactNode;
-    gap?: string | number;
-    title?: React.ReactNode;
-    extra?: React.ReactNode;
-    isAllColSpan?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    headerClassName?: string;
-    headerStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    bordered?: boolean;
-    boxShadow?: boolean;
-    lastItemBordered?: boolean;
-    platform?: "pc" | "rn" | "taro";
-    colCount?: number;
-    errorLayout?: "bottom-left" | "bottom-right" | "top-right" | "top-left" | "left-border-top" | "right-border-top";
-    labelMode?: "left" | "top" | "between";
-    formItemClassName?: string;
-    formItemStyle?: React.CSSProperties;
-    formItemLabelClassName?: string;
-    formItemLabelStyle?: React.CSSProperties;
-    formItemBodyClassName?: string;
-    formItemBodyStyle?: React.CSSProperties;
-    itemBorderType?: "bottom" | "body" | "none";
-    itemBorderColor?: React.CSSProperties["borderColor"];
-    isInvalidBorderRed?: boolean;
-    isInvalidTextRed?: boolean;
-    showColon?: boolean;
 };

package/lib/form/form.item.d.ts

@@ -211,18 +211,36 @@ export const FormItem = (props: FormItemProps) => {
 }
  * ```
 */
-export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): {
-    value: unknown;
-    error: string[];
+export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemNoStyleAttrsReturn<T>;
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = Record<string, any>> {
+    /**表单项值*/
+    value?: any;
+    /**是否校验错误*/
+    isInvalid: boolean;
+    /**是否必填*/
+    isRequired: boolean;
+    /**错误信息*/
+    error?: string[];
+    /**值改变事件*/
     onValueChange: (event: any) => void;
+    /**表单状态*/
     state: T;
+    /**错误状态*/
     errorState: Record<PropertyKey, string[]>;
+    /**表单实例*/
     formInstance: FairysValtioFormInstance<T>;
-    _name: string;
-    name: string;
-    id: string;
-    paths: (number | symbol)[] | (string | number)[];
-    parentName: string;
+    /**拼接父级字段名后得到的表单项名称*/
+    _name?: string;
+    /**表单项名称*/
+    name?: string;
+    /**表单项ID*/
+    id?: string;
+    /**表单项路径*/
+    paths?: (string | number)[];
+    /**父级字段名*/
+    parentName?: string;
+    /**表单属性名实例*/
     formAttrsNameInstance: FairysValtioFormParentAttrs;
-    children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>;
-};
+    /**子元素*/
+    children?: React.ReactNode;
+}

package/lib/form/form.item.js

@@ -256,7 +256,7 @@ function useFairysValtioFormItemAttrs(props) {
     };
 }
 function useFairysValtioFormItemNoStyleAttrs(props) {
-    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRemoveValueOnUnmount = true } = props;
+    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRemoveValueOnUnmount = true, isRequired: _isRequired } = props;
     const [state, errorState, formInstance] = (0, index_js_namespaceObject.useFairysValtioFormInstanceContextState)();
     const { name: _name, paths, parentName, formAttrsNameInstance } = (0, hooks_index_js_namespaceObject.useFairysValtioFormAttrsName)({
         name,
@@ -269,6 +269,7 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
     ]);
     const error = errorState[_name];
     formInstance.nameToPaths[_name] = paths;
+    const _formItemRules = formInstance.rules?.[_name];
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
         return ()=>{
@@ -298,8 +299,26 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         [valuePropName]: value,
         [trigger]: onValueChange
     };
+    const isRequired = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (_isRequired) return _isRequired;
+        if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
+        if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
+        return false;
+    }, [
+        rules,
+        formInstance,
+        _formItemRules
+    ]);
+    const isInvalid = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (Array.isArray(error) && error.length) return true;
+        return false;
+    }, [
+        error
+    ]);
     return {
         value,
+        isInvalid,
+        isRequired,
         error,
         onValueChange,
         state,

package/package.json

@@ -3,7 +3,7 @@
   "author": "SunLxy <1011771396@qq.com>",
   "description": "使用 valtio 实现的表单基础库, 使其更加便捷，同时支持`PC`、`H5`、`Taro`，同时也更加灵活。",
   "homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "lib/index.js",
   "types": "esm/index.d.ts",
   "module": "esm/index.js",

package/src/form/form.item.tsx

@@ -81,7 +81,6 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<st
   isJoinParentField?: boolean;
   /**校验规则*/
   rules?: RuleItem[];
-
   /**卸载移除数据值
    * @default true
    */
@@ -539,6 +538,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
     isJoinParentField = true,
     rules,
     isRemoveValueOnUnmount = true,
+    isRequired: _isRequired,
   } = props;
   const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
   const {
@@ -551,6 +551,8 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
   const value = useMemo(() => get(state, paths), [state, paths]);
   const error = errorState[_name];
   formInstance.nameToPaths[_name] = paths;
+  // 使用从 Form 中设置的规则
+  const _formItemRules = formInstance.rules?.[_name];
 
   useEffect(() => {
     if (Array.isArray(rules) && rules.length) {
@@ -580,6 +582,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
       onAfterUpdate(_value, formInstance, event);
     }
   };
+
   useEffect(() => {
     return () => {
       if (isRemoveValueOnUnmount) {
@@ -587,6 +590,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
       }
     };
   }, []);
+
   /**基础组件参数*/
   const baseControl = {
     ...attrs,
@@ -595,8 +599,30 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
     [valuePropName]: value,
     [trigger]: onValueChange,
   };
+
+  /**判断是否必填*/
+  const isRequired = useMemo(() => {
+    if (_isRequired) {
+      return _isRequired;
+    } else if (Array.isArray(rules) && rules.length) {
+      return rules.some((rule) => rule.required);
+    } else if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) {
+      return _formItemRules.some((rule) => rule.required);
+    }
+    return false;
+  }, [rules, formInstance, _formItemRules]);
+
+  /**校验是否存在错误信息*/
+  const isInvalid = useMemo(() => {
+    if (Array.isArray(error) && error.length) {
+      return true;
+    }
+    return false;
+  }, [error]);
   return {
     value,
+    isInvalid,
+    isRequired,
     error,
     onValueChange,
     state,
@@ -609,5 +635,38 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
     parentName,
     formAttrsNameInstance,
     children: React.isValidElement(children) ? React.cloneElement(children, { ...baseControl }) : children,
-  };
+  } as FairysValtioFormItemNoStyleAttrsReturn<T>;
+}
+
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = Record<string, any>> {
+  /**表单项值*/
+  value?: any;
+  /**是否校验错误*/
+  isInvalid: boolean;
+  /**是否必填*/
+  isRequired: boolean;
+  /**错误信息*/
+  error?: string[];
+  /**值改变事件*/
+  onValueChange: (event: any) => void;
+  /**表单状态*/
+  state: T;
+  /**错误状态*/
+  errorState: Record<PropertyKey, string[]>;
+  /**表单实例*/
+  formInstance: FairysValtioFormInstance<T>;
+  /**拼接父级字段名后得到的表单项名称*/
+  _name?: string;
+  /**表单项名称*/
+  name?: string;
+  /**表单项ID*/
+  id?: string;
+  /**表单项路径*/
+  paths?: (string | number)[];
+  /**父级字段名*/
+  parentName?: string;
+  /**表单属性名实例*/
+  formAttrsNameInstance: FairysValtioFormParentAttrs;
+  /**子元素*/
+  children?: React.ReactNode;
 }

package/src/form/form.tsx

@@ -68,5 +68,10 @@ export function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(
   return {
     ...rest,
     formInstance,
+  } as Omit<
+    FairysValtioFormAttrsProps<T>,
+    'initFormDataType' | 'form' | 'rules' | 'formData' | 'hideState' | 'onValuesChange'
+  > & {
+    formInstance: FairysValtioFormInstance<T>;
   };
 }