@fairys/rn-valtio-form-basic 0.0.12

package/esm/form.d.ts

@@ -0,0 +1,16 @@
+import { FairysRNValtioFormItem, FairysRNValtioFormHideItem, FairysRNValtioFormItemBase } from './form.item';
+import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState } from '@fairys/valtio-form-basic/esm/common';
+import type { MObject } from '@fairys/valtio-form-basic/esm/common';
+import type { FairysValtioFormAttrsProps } from './hooks/form';
+export interface FairysRNValtioFormProps<T extends MObject<T> = object> extends FairysValtioFormAttrsProps<T> {
+}
+export declare function FairysRNValtioForm<T extends MObject<T> = object>(props: FairysRNValtioFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace FairysRNValtioForm {
+    var useForm: typeof useFairysValtioFormInstance;
+    var useFormState: typeof useFairysValtioFormInstanceContextState;
+    var useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
+    var useFormInstance: typeof useFairysValtioFormInstanceContext;
+    var FormItemBase: typeof FairysRNValtioFormItemBase;
+    var FormItem: typeof FairysRNValtioFormItem;
+    var FormHideItem: typeof FairysRNValtioFormHideItem;
+}

package/esm/form.item.d.ts

@@ -0,0 +1,18 @@
+/**表单项*/
+import type { ViewProps } from 'react-native';
+import type { MObject } from '@fairys/valtio-form-basic';
+import type { FairysValtioFormItemAttrsProps } from './hooks/form.item';
+export interface FairysRNValtioFormItemProps<T extends MObject<T> = object> extends Omit<ViewProps, 'style'>, FairysValtioFormItemAttrsProps {
+    /**是否使用控制隐藏的表单项*/
+    isHide?: boolean;
+    /**是否使用无样式表单项*/
+    noStyle?: boolean;
+}
+/**普通表单项*/
+export declare function FairysRNValtioFormItemBase<T extends MObject<T> = object>(props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**控制隐藏的表单项*/
+export declare function FairysRNValtioFormHideItem<T extends MObject<T> = object>(props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**无样式表单项*/
+export declare function FairysRNValtioFormItemNoStyle<T extends MObject<T> = object>(props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
+export declare function FairysRNValtioFormItem<T extends MObject<T> = object>(props: FairysRNValtioFormItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/form.item.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+import { Fragment } from "react";
+import { FairysValtioFormParentAttrsContext, useFairysValtioFormInstanceContextHideState } from "@fairys/valtio-form-basic/esm/common";
+import { formItemStyles } from "./styles/form.item.js";
+import { useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs } from "./hooks/form.item.js";
+function FairysRNValtioFormItemBase(props) {
+    const { label, extra, helpText } = props;
+    const { itemStyle, itemContainerStyle, itemLabelStyle, itemLabelTextStyle, itemLabelShowColonStyle, itemExtraStyle, itemInputStyle, itemBodyStyle, isInvalid, isRequired, showColon, formAttrsNameInstance, itemBorderType, errorStyle, helpStyle, error, children } = useFairysValtioFormItemAttrs(props);
+    return /*#__PURE__*/ jsxs(View, {
+        style: itemStyle,
+        children: [
+            /*#__PURE__*/ jsxs(View, {
+                style: itemContainerStyle,
+                children: [
+                    label ? /*#__PURE__*/ jsxs(View, {
+                        style: itemLabelStyle,
+                        children: [
+                            isRequired ? /*#__PURE__*/ jsx(Text, {
+                                style: formItemStyles["fairys-valtio-form-item-label.required"],
+                                children: "*"
+                            }) : /*#__PURE__*/ jsx(Fragment, {}),
+                            /*#__PURE__*/ jsx(Text, {
+                                style: itemLabelTextStyle,
+                                children: label
+                            }),
+                            showColon ? /*#__PURE__*/ jsx(Text, {
+                                style: itemLabelShowColonStyle,
+                                children: ":"
+                            }) : /*#__PURE__*/ jsx(Fragment, {})
+                        ]
+                    }) : /*#__PURE__*/ jsx(Fragment, {}),
+                    /*#__PURE__*/ jsxs(View, {
+                        style: itemBodyStyle,
+                        children: [
+                            /*#__PURE__*/ jsx(FairysValtioFormParentAttrsContext.Provider, {
+                                value: formAttrsNameInstance,
+                                children: /*#__PURE__*/ jsx(View, {
+                                    style: itemInputStyle,
+                                    children: children
+                                })
+                            }),
+                            extra ? /*#__PURE__*/ jsx(View, {
+                                style: itemExtraStyle,
+                                children: /*#__PURE__*/ jsx(Text, {
+                                    style: formItemStyles["fairys-valtio-form-item-body-extra-text"],
+                                    children: extra
+                                })
+                            }) : /*#__PURE__*/ jsx(Fragment, {}),
+                            'body' === itemBorderType && isInvalid ? /*#__PURE__*/ jsx(View, {
+                                style: errorStyle,
+                                children: /*#__PURE__*/ jsx(Text, {
+                                    style: formItemStyles["fairys-valtio-form-item-body-error-text"],
+                                    children: error
+                                })
+                            }) : /*#__PURE__*/ jsx(Fragment, {})
+                        ]
+                    })
+                ]
+            }),
+            helpText ? /*#__PURE__*/ jsx(View, {
+                style: helpStyle,
+                children: /*#__PURE__*/ jsx(Text, {
+                    children: helpText
+                })
+            }) : /*#__PURE__*/ jsx(Fragment, {}),
+            isInvalid && 'body' !== itemBorderType ? /*#__PURE__*/ jsx(View, {
+                style: errorStyle,
+                children: /*#__PURE__*/ jsx(Text, {
+                    style: formItemStyles["fairys-valtio-form-item-body-error-text"],
+                    children: error
+                })
+            }) : /*#__PURE__*/ jsx(Fragment, {})
+        ]
+    });
+}
+function FairysRNValtioFormHideItem(props) {
+    const [state] = useFairysValtioFormInstanceContextHideState();
+    const isHide = state[props.name];
+    if (isHide) return /*#__PURE__*/ jsx(Fragment, {});
+    return /*#__PURE__*/ jsx(FairysRNValtioFormItemBase, {
+        ...props
+    });
+}
+function FairysRNValtioFormItemNoStyle(props) {
+    const { children, formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormParentAttrsContext.Provider, {
+        value: formAttrsNameInstance,
+        children: children
+    });
+}
+function FairysRNValtioFormItem(props) {
+    const { isHide, noStyle, ...rest } = props;
+    if (isHide) return /*#__PURE__*/ jsx(FairysRNValtioFormHideItem, {
+        ...rest
+    });
+    if (noStyle) return /*#__PURE__*/ jsx(FairysRNValtioFormItemNoStyle, {
+        ...rest
+    });
+    return /*#__PURE__*/ jsx(FairysRNValtioFormItemBase, {
+        ...rest
+    });
+}
+export { FairysRNValtioFormHideItem, FairysRNValtioFormItem, FairysRNValtioFormItemBase, FairysRNValtioFormItemNoStyle };

package/esm/form.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { FairysRNValtioFormLayout } from "./layout.js";
+import { FairysRNValtioFormHideItem, FairysRNValtioFormItem, FairysRNValtioFormItemBase } from "./form.item.js";
+import { FairysValtioFormInstanceContext, useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceContextState } from "@fairys/valtio-form-basic/esm/common";
+import { useFairysValtioForm } from "./hooks/form.js";
+function FairysRNValtioForm(props) {
+    const { formInstance, children, ...rest } = useFairysValtioForm(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormInstanceContext.Provider, {
+        value: formInstance,
+        children: /*#__PURE__*/ jsx(FairysRNValtioFormLayout, {
+            ...rest,
+            children: children
+        })
+    });
+}
+FairysRNValtioForm.useForm = useFairysValtioFormInstance;
+FairysRNValtioForm.useFormState = useFairysValtioFormInstanceContextState;
+FairysRNValtioForm.useFormHideState = useFairysValtioFormInstanceContextHideState;
+FairysRNValtioForm.useFormInstance = useFairysValtioFormInstanceContext;
+FairysRNValtioForm.FormItemBase = FairysRNValtioFormItemBase;
+FairysRNValtioForm.FormItem = FairysRNValtioFormItem;
+FairysRNValtioForm.FormHideItem = FairysRNValtioFormHideItem;
+export { FairysRNValtioForm };

package/esm/hooks/form.d.ts

@@ -0,0 +1,58 @@
+import type { MObject } from '@fairys/valtio-form-basic/esm/common';
+import { FairysValtioFormInstance } from '@fairys/valtio-form-basic/esm/common';
+import { type ReactNode } from 'react';
+import { FairysValtioFormLayoutAttrsProps } from './layout';
+import { RuleItem } from 'async-validator';
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
+    /**表单实例*/
+    form?: FairysValtioFormInstance<T>;
+    /**子元素*/
+    children: ReactNode;
+    /**表单项规则(如果表单项没有指定规则，则使用全局规则，如果表单项指定规则，则使用表单项规则)*/
+    rules?: Record<PropertyKey, RuleItem[]>;
+    /**表单初始值*/
+    formData?: FairysValtioFormInstance<T>['state'];
+    /**表单隐藏状态*/
+    hideState?: FairysValtioFormInstance<T>['hideState'];
+    /**
+     * 初始化表单数据类型，默认值为 deepCopy
+     * - deepCopy：使用深度拷贝初始化表单数据
+     * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
+     */
+    initFormDataType?: 'deepCopy' | 'immutable';
+}
+/**
+ * 表单属性处理
+ *
+ * @example
+ *
+ * ```tsx
+
+ * ```
+*/
+export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>): {
+    formInstance: FairysValtioFormInstance<T>;
+    /**子元素*/
+    children: ReactNode;
+    gap?: string | number;
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    style?: import("react-native").ViewProps["style"];
+    headerStyle?: import("react-native").ViewProps["style"];
+    headerTextStyle?: import("react-native").ViewProps["style"];
+    headerExtraStyle?: import("react-native").ViewProps["style"];
+    bodyStyle?: import("react-native").ViewProps["style"];
+    bordered?: boolean;
+    formItemStyle?: import("react-native").ViewProps["style"];
+    formItemLabelStyle?: import("react-native").ViewProps["style"];
+    formItemBodyStyle?: import("react-native").ViewProps["style"];
+    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";
+    itemBorderType?: "bottom" | "body" | "none";
+    itemBorderColor?: React.CSSProperties["borderColor"];
+    isInvalidBorderRed?: boolean;
+    isInvalidTextRed?: boolean;
+    showColon?: boolean;
+};

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

@@ -0,0 +1,118 @@
+/**表单项*/
+import React from 'react';
+import { ViewProps } from 'react-native';
+import type { MObject, FairysValtioFormItemAttrsProps as _FairysValtioFormItemAttrsProps } from '@fairys/valtio-form-basic';
+import { FairysValtioFormInstance, FairysValtioFormParentAttrs } from '@fairys/valtio-form-basic/esm/common';
+import { FairysValtioFormLayoutContextOptions } from './layout';
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> extends Omit<_FairysValtioFormItemAttrsProps<T>, 'style' | 'labelStyle' | 'bodyStyle' | 'rowSpan' | 'className' | 'labelClassName' | 'bodyClassName'> {
+    style?: ViewProps['style'];
+    labelStyle?: ViewProps['style'];
+    bodyStyle?: ViewProps['style'];
+}
+/**
+ * 处理表单表单项属性
+ *
+ * @example
+ *
+ * ```tsx
+
+ * ```
+ *
+*/
+export declare function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemAttrsReturn<T>;
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+    /**表单项值*/
+    value?: any;
+    /**是否校验错误*/
+    isInvalid: boolean;
+    /**边框类型*/
+    itemBorderType: FairysValtioFormLayoutContextOptions['itemBorderType'];
+    /**值改变事件*/
+    onValueChange: (event: any) => void;
+    /**当前表单项占据列数*/
+    colSpan: number;
+    /**列数*/
+    colCount: number;
+    /**标签显示模式*/
+    labelMode: FairysValtioFormLayoutContextOptions['labelMode'];
+    /**错误提示位置*/
+    errorLayout: FairysValtioFormLayoutContextOptions['errorLayout'];
+    /**是否必填*/
+    isRequired: boolean;
+    /**表单状态*/
+    state: T;
+    /**错误状态*/
+    errorState: Record<PropertyKey, string[]>;
+    /**表单实例*/
+    formInstance: FairysValtioFormInstance<T>;
+    /**错误信息*/
+    error?: string[];
+    /**拼接父级字段名后得到的表单项名称*/
+    _name?: string;
+    /**表单项名称*/
+    name?: string;
+    /**表单项ID*/
+    id?: string;
+    /**表单项路径*/
+    paths?: (string | number)[];
+    /**父级字段名*/
+    parentName?: string;
+    /**表单属性名实例*/
+    formAttrsNameInstance: FairysValtioFormParentAttrs;
+    /**是否显示冒号*/
+    showColon: boolean;
+    itemStyle: ViewProps['style'];
+    itemContainerStyle: ViewProps['style'];
+    itemLabelStyle: ViewProps['style'];
+    itemLabelTextStyle: ViewProps['style'];
+    itemLabelShowColonStyle: ViewProps['style'];
+    itemBodyStyle: ViewProps['style'];
+    itemInputStyle: ViewProps['style'];
+    itemExtraStyle: ViewProps['style'];
+    errorStyle: ViewProps['style'];
+    helpStyle: ViewProps['style'];
+    /**子元素*/
+    children?: React.ReactNode;
+}
+/**
+ * 没有样式的表单项属性，仅返回基础输入组件参数
+ *
+ * @example
+ *
+ *```tsx
+
+ * ```
+*/
+export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemNoStyleAttrsReturn<T>;
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = object> {
+    /**表单项值*/
+    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/esm/hooks/form.item.js

@@ -0,0 +1,292 @@
+import react, { useEffect, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { formatePath, get, useFairysValtioFormAttrsName, useFairysValtioFormInstanceContextState, useId } from "@fairys/valtio-form-basic/esm/common";
+import { formItemStyles } from "../styles/form.item.js";
+import { useFairysValtioFormLayoutContext } from "./layout.js";
+function useFairysValtioFormItemAttrs(props) {
+    const [layoutAttrs] = useFairysValtioFormLayoutContext();
+    const colCount = layoutAttrs.colCount || 1;
+    const parent_borderedType = layoutAttrs.itemBorderType || 'bottom';
+    const parent_errorLayout = layoutAttrs.errorLayout || 'bottom-right';
+    const parent_formItemLabelStyle = layoutAttrs.formItemLabelStyle;
+    const parent_formItemStyle = layoutAttrs.formItemStyle;
+    const parent_formItemBodyStyle = layoutAttrs.formItemBodyStyle;
+    const parent_labelMode = layoutAttrs.labelMode || 'between';
+    const parent_itemBorderColor = layoutAttrs.itemBorderColor;
+    const parent_isInvalidBorderRed = layoutAttrs.isInvalidBorderRed;
+    const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
+    const parent_showColon = layoutAttrs.showColon;
+    const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', style, labelStyle, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules } = props;
+    const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
+        name,
+        isJoinParentField
+    });
+    const widthStyles = useMemo(()=>{
+        if (colCount >= colSpan) return {
+            width: `${100 / colCount * colSpan}%`
+        };
+        return {
+            width: "100%"
+        };
+    }, [
+        colSpan,
+        colCount
+    ]);
+    const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
+    const value = useMemo(()=>get(state, paths), [
+        state,
+        paths
+    ]);
+    const error = errorState[_name];
+    const _formItemRules = formInstance.rules?.[_name];
+    const id = useId(_name);
+    formInstance.nameToPaths[_name] = paths;
+    useEffect(()=>{
+        if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+        return ()=>{
+            formInstance.removeRules(_name);
+        };
+    }, [
+        _name,
+        rules
+    ]);
+    const onValueChange = (event)=>{
+        let newValue = event;
+        const target = event?.nativeEvent;
+        if ('function' == typeof getValueFromEvent) newValue = getValueFromEvent(event, formInstance);
+        else if (event && target && 'object' == typeof target && getValuePath in target) newValue = get(target, formatePath(getValuePath));
+        if ('function' == typeof formatValue) newValue = formatValue(newValue, formInstance, event);
+        if (newValue === value) return;
+        formInstance.updatedValueByPaths(_name, newValue);
+        if ('function' == typeof onAfterUpdate) onAfterUpdate(newValue, formInstance, event);
+    };
+    const baseControl = {
+        ...attrs,
+        style: StyleSheet.flatten([
+            attrs?.style || {},
+            'between' === labelMode ? formItemStyles["input.between"] : {}
+        ]),
+        name,
+        id,
+        [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
+    ]);
+    const item_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item"],
+            'bottom' === itemBorderType ? formItemStyles["fairys-valtio-form-item.border-bottom"] : {},
+            itemBorderColor && 'bottom' === itemBorderType ? {
+                borderColor: itemBorderColor
+            } : {},
+            isInvalid && isInvalidBorderRed && 'bottom' === itemBorderType ? formItemStyles["fairys-valtio-form-item.border-bottom.red"] : {},
+            widthStyles,
+            parent_formItemStyle,
+            style
+        ]), [
+        style,
+        widthStyles,
+        parent_formItemStyle,
+        labelMode,
+        itemBorderType,
+        isInvalid,
+        isInvalidBorderRed
+    ]);
+    const itemContainer_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item-container"],
+            'between' === labelMode ? formItemStyles["fairys-valtio-form-item-container.between"] : {},
+            'top' === labelMode ? formItemStyles["fairys-valtio-form-item-container.top"] : {},
+            'left' === labelMode ? formItemStyles["fairys-valtio-form-item-container.left"] : {}
+        ]), [
+        labelMode
+    ]);
+    const itemLabel_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item-label"],
+            'left' === labelMode ? formItemStyles["fairys-valtio-form-item-label.left"] : {},
+            parent_formItemLabelStyle,
+            labelStyle
+        ]), [
+        labelMode,
+        parent_formItemLabelStyle,
+        labelStyle
+    ]);
+    const itemLabelShowColon_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item-label.show-colon"],
+            isInvalid && isInvalidTextRed ? formItemStyles["fairys-valtio-form-item-label.show-colon.red"] : {}
+        ]), [
+        isInvalid,
+        isInvalidTextRed
+    ]);
+    const itemLabelText_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item-label-text"],
+            isInvalid && isInvalidTextRed ? formItemStyles["fairys-valtio-form-item-label-text.red"] : {}
+        ]), [
+        labelMode,
+        isInvalid,
+        isInvalidTextRed
+    ]);
+    const itemBody_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item-body"],
+            'left' === labelMode ? formItemStyles["fairys-valtio-form-item-body.left"] : {},
+            'top' === labelMode ? formItemStyles["fairys-valtio-form-item-body.top"] : {},
+            'between' === labelMode ? formItemStyles["fairys-valtio-form-item-body.between"] : {},
+            'body' === itemBorderType ? formItemStyles["fairys-valtio-form-item-body.border-bottom"] : {},
+            itemBorderColor && 'body' === itemBorderType ? {
+                borderColor: itemBorderColor
+            } : {},
+            isInvalid && isInvalidBorderRed && 'body' === itemBorderType ? formItemStyles["fairys-valtio-form-item-body.border-bottom.red"] : {},
+            parent_formItemBodyStyle,
+            bodyStyle
+        ]), [
+        bodyStyle,
+        parent_formItemBodyStyle,
+        labelMode,
+        isInvalid
+    ]);
+    const itemBodyInput_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item-body-input"],
+            'between' === labelMode ? formItemStyles["fairys-valtio-form-item-body-input.between"] : {},
+            'between' !== labelMode ? formItemStyles["fairys-valtio-form-item-body-input.not.between"] : {}
+        ]), [
+        labelMode
+    ]);
+    const itemExtra_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item-body-extra"]
+        ]), []);
+    const itemHelp_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item-help"]
+        ]), []);
+    const itemError_style = useMemo(()=>StyleSheet.flatten([
+            formItemStyles["fairys-valtio-form-item-body-error"],
+            errorLayout ? formItemStyles['fairys-valtio-form-item-body-error.' + errorLayout] || {} : {}
+        ]), [
+        errorLayout
+    ]);
+    return {
+        value,
+        isInvalid,
+        itemBorderType,
+        onValueChange,
+        colSpan,
+        colCount,
+        labelMode,
+        errorLayout,
+        isRequired,
+        state,
+        errorState,
+        formInstance,
+        error,
+        _name,
+        name,
+        id,
+        paths,
+        parentName,
+        formAttrsNameInstance,
+        showColon,
+        itemStyle: item_style,
+        itemContainerStyle: itemContainer_style,
+        itemLabelStyle: itemLabel_style,
+        itemLabelTextStyle: itemLabelText_style,
+        itemLabelShowColonStyle: itemLabelShowColon_style,
+        itemBodyStyle: itemBody_style,
+        itemInputStyle: itemBodyInput_style,
+        itemExtraStyle: itemExtra_style,
+        errorStyle: itemError_style,
+        helpStyle: itemHelp_style,
+        children: react.isValidElement(children) ? react.cloneElement(children, {
+            ...baseControl
+        }) : children
+    };
+}
+function useFairysValtioFormItemNoStyleAttrs(props) {
+    const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRequired: _isRequired } = props;
+    const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
+    const { name: _name, paths, 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;
+    const _formItemRules = formInstance.rules?.[_name];
+    useEffect(()=>{
+        if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+        return ()=>{
+            formInstance.removeRules(_name);
+        };
+    }, [
+        _name,
+        rules
+    ]);
+    const onValueChange = (event)=>{
+        let newValue = event;
+        const target = event?.nativeEvent;
+        if ('function' == typeof getValueFromEvent) newValue = getValueFromEvent(event, formInstance);
+        else if (event && target && 'object' == typeof target && getValuePath in target) newValue = get(target, formatePath(getValuePath));
+        if ('function' == typeof formatValue) newValue = formatValue(newValue, formInstance, event);
+        if (newValue === value) return;
+        formInstance.updatedValueByPaths(_name, newValue);
+        if ('function' == typeof onAfterUpdate) onAfterUpdate(newValue, formInstance, event);
+    };
+    const baseControl = {
+        ...attrs,
+        name,
+        id,
+        [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,
+        isRequired,
+        isInvalid,
+        error,
+        onValueChange,
+        state,
+        errorState,
+        formInstance,
+        _name,
+        name,
+        id,
+        paths,
+        parentName,
+        formAttrsNameInstance,
+        children: react.isValidElement(children) ? react.cloneElement(children, {
+            ...baseControl
+        }) : children
+    };
+}
+export { useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs };

package/esm/hooks/form.js

@@ -0,0 +1,17 @@
+import { useFairysValtioFormInstance } from "@fairys/valtio-form-basic/esm/common";
+import { useMemo } from "react";
+function useFairysValtioForm(props) {
+    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+    const formInstance = useFairysValtioFormInstance(form);
+    formInstance.rules = rules;
+    useMemo(()=>formInstance.ctor({
+            formData,
+            hideState,
+            initFormDataType
+        }), []);
+    return {
+        ...rest,
+        formInstance
+    };
+}
+export { useFairysValtioForm };