pc & h5

安装

npm install @carefrees/form-utils-react # yarn add @carefrees/form-utils-react # pnpm add @carefrees/form-utils-react

使用

基本使用

控制隐藏

表单字段监听

list 表单项

表单项依赖更新(dependencies 参数)

布局组件

类型

Form 表单

import React from 'react';
import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
import { FormLayoutProps } from '@carefrees/form-utils-react/esm/layout';

export interface FormProps<T = any> extends FormLayoutProps {
  children?: React.ReactNode;
  form?: FormInstanceBase;
  style?: React.CSSProperties;
  className?: string;
  layoutClassName?: string;
  layoutStyle?: React.CSSProperties;
  /**表单数据*/
  formData?: any;
  /**值更新触发*/
  onValuesChange?: (changedValues: Partial<T>, values: T) => void;
  /**提交保存 验证成功*/
  onFinish?: (values: T) => void;
  /**提交保存 验证失败*/
  onFinishFailed?: (errorInfo: ValidateErrorEntity<T>) => void;
  /**隐藏表单项初始值*/
  hideData?: Record<string, boolean>;
  /**表单名称*/
  name?: string;
  /**隐藏规则校验*/
  hideRuleData?: Record<string, boolean>;
  /**自动重置更新formData数据*/
  isAutoUpdatedFormData?: boolean;
  /**背景颜色*/
  bgcolor?: string;
}
export declare function Form<T = any>(props: FormProps<T>): import('react/jsx-runtime').JSX.Element;

FormItem 表单项

import { LayoutFormItemProps } from '@carefrees/form-utils-react/esm/layout/layout.formItem';
import { FormItemAttrOptions } from '@carefrees/form-utils-react/esm/hooks/attr/attr.FormItem';
import React from 'react';
export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
  /**不进行样式渲染*/
  noStyle?: boolean;
}
/**表单项*/
export declare const FormItem: React.MemoExoticComponent<
  (props: Partial<FormItemProps>) => import('react/jsx-runtime').JSX.Element
>;
/**隐藏表单项*/
export declare const FormHideItem: React.MemoExoticComponent<
  (props: FormItemProps) => import('react/jsx-runtime').JSX.Element
>;

FormList 表单 List

import { RuleInstanceBase, FormItemInstanceBase, FormListInstanceBase } from '@carefrees/form-utils';
import React from 'react';
import { RegisterFormListOptions } from '@carefrees/form-utils-react-hooks';
export interface FormListChildrenProps {
  /**数据集合*/
  fields: {
    name: number;
    key: number;
  }[];
  /**添加*/
  onAdd: (initialValue?: Object) => void;
  /**删除*/
  onDelete: (index: number | number[]) => void;
  /**移动*/
  onMove: (from: number, to: number) => void;
}
export interface FormListProps extends RegisterFormListOptions {
  children: (
    options: FormListChildrenProps,
    instances: {
      ruleInstance: RuleInstanceBase;
      formItemInstance: FormItemInstanceBase;
      formListInstance: FormListInstanceBase;
    },
  ) => React.ReactNode;
}
/**form list 组件*/
export declare const FormList: React.MemoExoticComponent<
  (props: FormListProps) => import('react/jsx-runtime').JSX.Element
>;
/**隐藏 form list item 组件*/
export declare const FormHideList: React.MemoExoticComponent<
  (props: FormListProps) => import('react/jsx-runtime').JSX.Element
>;

布局组件类型

import React from 'react';
import { AttrsOptions } from '@carefrees/form-utils-react-hooks';
import { FormLayoutBodyProps } from '@carefrees/form-utils-react/esm/layout/layout.body';
export interface FormLayoutProps extends AttrsOptions, FormLayoutBodyProps {
  /**标题*/
  title?: React.ReactNode;
  /**额外内容*/
  extra?: React.ReactNode;
  /**内容*/
  children?: React.ReactNode;
  /**是否占据整行*/
  isAllColSpan?: boolean;
  className?: string;
  /**头部ClassName*/
  headerClassName?: string;
  /**内容ClassName*/
  bodyClassName?: string;
  style?: React.CSSProperties;
  /**头部样式*/
  headerStyle?: React.CSSProperties;
  /**内容样式*/
  bodyStyle?: React.CSSProperties;
  /**是否添加边框*/
  bordered?: boolean;
}
/**布局组件*/
export declare const FormLayout: React.MemoExoticComponent<
  (props: FormLayoutProps) => import('react/jsx-runtime').JSX.Element
>;
export interface FormLayoutRowsProps
  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
/**布局组件 占据一整行*/
export declare const FormLayoutRows: React.ForwardRefExoticComponent<
  Omit<FormLayoutRowsProps, 'ref'> & React.RefAttributes<HTMLDivElement>
>;

布局组件内容类型

import React from 'react';
import { SizeInfo } from '@carefrees/form-utils-react/esm/hooks/useResizeObserver';
export interface FormLayoutBodyProps {
  className?: string;
  style?: React.CSSProperties;
  /**列数据*/
  colCount?: number;
  /**
   * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
   */
  gap?: string | number;
  /**
   * 获取多少行
   */
  onGapRow?: (row: number, col: number, target: HTMLDivElement) => void;
  /**内容大小变化*/
  onResize?: (size: SizeInfo, target: HTMLDivElement) => void;
  /**内容*/
  children?: React.ReactNode;
}
/**布局组件-内容区域*/
export declare const FormLayoutBody: React.MemoExoticComponent<
  (props: FormLayoutBodyProps) => import('react/jsx-runtime').JSX.Element
>;

表单项布局组件类型

import React from 'react';
export interface LayoutFormItemProps {
  /**规则校验失败错误提示位置*/
  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
  /**必填样式*/
  required?: boolean;
  /**label显示模式*/
  labelMode?: 'left' | 'top' | 'between' | 'hide';
  /**内容*/
  children?: React.ReactNode;
  /**只进行规则样式*/
  onlyRuleStyle?: boolean;
  label?: React.ReactNode;
  /**底部提示内容*/
  helpText?: React.ReactNode;
  /**额外内容*/
  extra?: React.ReactNode;
  /**是否显示label后的冒号*/
  showColon?: boolean;
  /**
   * 表单项占据列数
   * @default 1
   */
  colSpan?: number;
  /**
   * 表单项占据行数
   * @default 1
   */
  rowSpan?: number;
  htmlFor?: string;
  /**规则验证结果*/
  validateResult?: {
    tip: string | (string | undefined)[];
    isInvalid: boolean;
  };
  style?: React.CSSProperties;
  className?: string;
  labelStyle?: React.CSSProperties;
  labelClassName?: string;
}
/**布局组件 表单项*/
export declare const LayoutFormItem: React.MemoExoticComponent<
  (props: LayoutFormItemProps) => import('react/jsx-runtime').JSX.Element
>;

表单项参数

import { RuleInstanceBase, FormInstanceBase, FormItemInstanceBase } from '@carefrees/form-utils';
import { RegisterFormItemOptions } from '@carefrees/form-utils-react-hooks';
import React from 'react';
export interface FormItemAttrOptions extends RegisterFormItemOptions {
  /**依赖更新项*/
  dependencies?: string[];
  /**通知 只用于校验规则提示 字段 */
  noticeOnlyRuleDataField?: string[];
  /**通知父级字段监听方法更新*/
  isNoticeParentField?: boolean;
  /**通知watch监听方法更新*/
  noticeWatchField?: string[];
  /**是否保护值(不进行表单项组件卸载重置初始值)*/
  preserve?: boolean;
  /**重写规则*/
  useRules?: (ruleInstance: RuleInstanceBase, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => void;
  /**输入框属性重写*/
  useAttrs?: (attrs: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
  /**输入框属性*/
  attrs?: any;
  /**传递组件字段*/
  valuePropName?: string;
  /**取值字段(默认和valuePropName值相同)*/
  getValuePath?: string;
  /**自定义获取值*/
  getValueFromEvent?: (event: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
  /**值格式化*/
  formatValue?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => any;
  /**触发数据更新之后触发（用于数据联动之类的）*/
  onAfterUpdate?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => void;
  /**事件名称*/
  trigger?: string;
  /**子元素*/
  children?: React.ReactNode;
}
/**表单项参数*/
export declare const useFormItemAttr: (options: FormItemAttrOptions) => {
  children:
    | string
    | number
    | boolean
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
    | Iterable<React.ReactNode>;
  form: FormInstanceBase<any>;
  formItemInstance: FormItemInstanceBase;
  ruleInstance: RuleInstanceBase;
  onChange: (event: any) => void;
  htmlFor: string;
  validateResult: {
    tip: string | (string | undefined)[];
    isInvalid: boolean;
  };
};

ON THIS PAGE

#pc & h5

#安装

#使用

#基本使用

#控制隐藏

#表单字段监听

#list 表单项

#表单项依赖更新(dependencies 参数)

#布局组件

#类型

#Form 表单

#FormItem 表单项

#FormList 表单 List

#布局组件 类型

#布局组件内容 类型

#表单项布局组件类型

#表单项参数

pc & h5

安装

使用

基本使用

控制隐藏

表单字段监听

list 表单项

表单项依赖更新(dependencies 参数)

布局组件

类型

Form 表单

FormItem 表单项

FormList 表单 List

布局组件类型

布局组件内容类型

表单项布局组件类型

表单项参数