表单参数#
#重写样式部分
布局
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;
};