表单参数

重写样式部分

布局

import { ViewProps } from 'react-native';
import type { FairysValtioFormLayoutContextOptions as _FairysValtioFormLayoutContextOptions } from '@fairys/valtio-form-basic';
export interface FairysValtioFormLayoutContextOptions extends Omit<_FairysValtioFormLayoutContextOptions, 'formItemStyle' | 'formItemLabelStyle' | 'formItemBodyStyle' | 'formItemClassName' | 'formItemLabelClassName' | 'formItemBodyClassName' | ''> {
    /**表单项 style*/
    formItemStyle?: ViewProps['style'];
    /**表单项 label  style*/
    formItemLabelStyle?: ViewProps['style'];
    /**表单项 body  style*/
    formItemBodyStyle?: ViewProps['style'];
}
export interface FairysValtioFormLayoutAttrsProps extends FairysValtioFormLayoutContextOptions {
    /**
     * @description gap 属性是用来设置网格行与列之间的间隙,该属性是row-gap and column-gap的简写形式。
     */
    gap?: string | number;
    /**标题*/
    title?: React.ReactNode;
    /**额外内容*/
    extra?: React.ReactNode;
    /**内容*/
    children?: React.ReactNode;
    /**布局样式*/
    style?: ViewProps['style'];
    /**头部样式*/
    headerStyle?: ViewProps['style'];
    headerTextStyle?: ViewProps['style'];
    /**额外内容样式*/
    headerExtraStyle?: ViewProps['style'];
    /**内容样式*/
    bodyStyle?: ViewProps['style'];
    /**是否边框*/
    bordered?: boolean;
}
export declare class FairysValtioFormLayoutInstance {
    state: FairysValtioFormLayoutContextOptions;
    updated: (options?: FairysValtioFormLayoutContextOptions) => void;
}
/**初始化实例*/ 
export declare const useFairysValtioFormLayoutInstance: (instance?: FairysValtioFormLayoutInstance) => FairysValtioFormLayoutInstance;
/**布局上下文*/
export declare const FairysValtioFormLayoutContext: import("react").Context<FairysValtioFormLayoutInstance>;
/**获取布局上下文*/
export declare const useFairysValtioFormLayoutContext: () => [FairysValtioFormLayoutContextOptions, FairysValtioFormLayoutInstance];
/**
 * 布局属性处理
*/
export declare function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttrsProps): FairysValtioFormLayoutAttrsReturn;
export interface FairysValtioFormLayoutAttrsReturn {
    /**列数*/
    colCount: number;
    /**规则校验失败错误提示位置*/
    errorLayout: string;
    /**
     * label显示模式
     * @platform RN 支持 between
     */
    labelMode: string;
    /**
     * 底部边框类型
     */
    itemBorderType: string;
    /**表单布局实例*/
    formLayoutInstance: FairysValtioFormLayoutInstance;
    /**布局样式*/
    layoutStyle: ViewProps['style'];
    /**头部样式*/
    headerStyle: ViewProps['style'];
    /**头部标题样式*/
    headerTitleStyle: ViewProps['style'];
    /**头部额外内容样式*/
    headerExtraStyle: ViewProps['style'];
    /**内容样式*/
    bodyStyle: ViewProps['style'];
}

表单项

/**表单项*/
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> = Record<string, any>> extends Omit<_FairysValtioFormItemAttrsProps<T>, 'style' | 'labelStyle' | 'bodyStyle' | 'rowSpan' | 'className' | 'labelClassName' | 'bodyClassName'> {
    style?: ViewProps['style'];
    labelStyle?: ViewProps['style'];
    bodyStyle?: ViewProps['style'];
}
/**
 * 处理表单表单项属性
 *
*/
export declare function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemAttrsReturn<T>;
export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = Record<string, any>> {
    /**表单项值*/
    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;
}
/**
 * 没有样式的表单项属性,仅返回基础输入组件参数
*/
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*/
    id?: string;
    /**表单项路径*/
    paths?: (string | number)[];
    /**父级字段名*/
    parentName?: string;
    /**表单属性名实例*/
    formAttrsNameInstance: FairysValtioFormParentAttrs;
    /**子元素*/
    children?: React.ReactNode;
}

表单

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> = Record<string, any>> 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';
    /**
     * 表单值改变时回调
     * @param path 表单项路径
     * @param value 表单项值
     */
    onValuesChange?: (path: PropertyKey, value: any) => void;
}
/**
 * 表单属性处理
*/
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>;
};

类型

部分参数依赖基础表单组件概览

布局

import type { FairysValtioFormLayoutAttrsProps } from './hooks/layout';
export interface FairysRNValtioFormLayoutProps extends FairysValtioFormLayoutAttrsProps {}
export declare function FairysRNValtioFormLayout(props: FairysRNValtioFormLayoutProps): import("react/jsx-runtime").JSX.Element;

表单项

/**表单项*/
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> = Record<string, any>> extends Omit<ViewProps, 'style'>, FairysValtioFormItemAttrsProps {
    /**是否使用控制隐藏的表单项*/
    isHide?: boolean;
    /**是否使用无样式表单项*/
    noStyle?: boolean;
}
/**普通表单项*/
export declare function FairysRNValtioFormItemBase<T extends MObject<T> = Record<string, any>>(props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
/**控制隐藏的表单项*/
export declare function FairysRNValtioFormHideItem<T extends MObject<T> = Record<string, any>>(props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
/**无样式表单项*/
export declare function FairysRNValtioFormItemNoStyle<T extends MObject<T> = Record<string, any>>(props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
export declare function FairysRNValtioFormItem<T extends MObject<T> = Record<string, any>>(props: FairysRNValtioFormItemProps<T>): import("react/jsx-runtime").JSX.Element;

表单

import React from 'react';
import { FairysRNValtioFormItem, FairysRNValtioFormHideItem, FairysRNValtioFormItemBase } from './form.item';
import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState } from '@fairys/valtio-form-basic/esm/common';
import type { FairysValtioFormInstance, MObject } from '@fairys/valtio-form-basic/esm/common';
import type { FairysValtioFormAttrsProps } from './hooks/form';
export interface FairysRNValtioFormProps<T extends MObject<T> = Record<string, any>> extends FairysValtioFormAttrsProps<T> {
}
declare function FairysRNValtioFormBase<T extends MObject<T> = Record<string, any>>(props: FairysRNValtioFormProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): import("react/jsx-runtime").JSX.Element;
export declare const FairysRNValtioForm: typeof FairysRNValtioFormBase & {
    /**初始化实例*/
    useForm: typeof useFairysValtioFormInstance;
    /**获取状态*/
    useFormState: typeof useFairysValtioFormInstanceContextState;
    /**获取隐藏状态*/
    useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
    /**获取上下文实例*/
    useFormInstance: typeof useFairysValtioFormInstanceContext;
    /**表单项基础组件*/
    FormItemBase: typeof FairysRNValtioFormItemBase;
    /**表单项组件*/
    FormItem: typeof FairysRNValtioFormItem;
    /**隐藏表单项组件*/
    FormHideItem: typeof FairysRNValtioFormHideItem;
};