-}
-function getRegistry () => ISchemaFormRegistry
-```
-
-**用法**
-
-```tsx
-import SchemaForm, {
- SchemaMarkupField as Field,
- getRegistry
-} from '@formily/meet'
-
-registerVirtualBox('CustomLayout', props => {
- return (
-
- {props.children}
- {props.schema['x-component-props']['attr']}
-
- )
-})
-
-getRegistry()
-```
-
-#### cleanRegistry
-
-清理预先注册的所有组件。
-
-```typescript
-function cleanRegistry()
-```
-
-**用法**
-
-```tsx
-import SchemaForm, {
- SchemaMarkupField as Field,
- cleanRegistry
-} from '@formily/meet'
-
-registerVirtualBox('CustomLayout', props => {
- return (
-
- {props.children}
- {props.schema['x-component-props']['attr']}
-
- )
-})
-
-cleanRegistry()
-```
-
-### Interfaces
-
-整体完全继承@formily/react, 下面只列举@formily/meet 的特有的 Interfaces
-
----
-
-#### ISchema
-
-Schema 协议对象,主要用于约束一份 json 结构满足 Schema 协议
-
-```typescript
-interface ISchema {
- /** base json schema spec**/
- title?: React.ReactNode
- description?: React.ReactNode
- default?: any
- readOnly?: boolean
- writeOnly?: boolean
- type?: 'string' | 'object' | 'array' | 'number' | string
- enum?: Array
- const?: any
- multipleOf?: number
- maximum?: number
- exclusiveMaximum?: number
- minimum?: number
- exclusiveMinimum?: number
- maxLength?: number
- minLength?: number
- pattern?: string | RegExp
- maxItems?: number
- minItems?: number
- uniqueItems?: boolean
- maxProperties?: number
- minProperties?: number
- required?: string[] | boolean
- format?: string
- /** nested json schema spec **/
- properties?: {
- [key: string]: ISchema
- }
- items?: ISchema | ISchema[]
- additionalItems?: ISchema
- patternProperties?: {
- [key: string]: ISchema
- }
- additionalProperties?: ISchema
- /** extend json schema specs */
- editable?: boolean
- //数据与样式是否可见
- visible?: boolean
- //样式是否可见
- display?: boolean
- ['x-props']?: { [name: string]: any }
- ['x-index']?: number
- ['x-rules']?: ValidatePatternRules
- ['x-component']?: string
- ['x-component-props']?: { [name: string]: any }
- ['x-render']?: (
- props: T & {
- renderComponent: () => React.ReactElement
- }
- ) => React.ReactElement
- ['x-effect']?: (
- dispatch: (type: string, payload: any) => void,
- option?: object
- ) => { [key: string]: any }
-}
-```
-
-#### IFormActions
-
-```typescript
-interface IFormActions {
- /*
- * 表单提交,如果回调参数返回Promise,
- * 那么整个提交流程会hold住,同时loading为true,
- * 等待Promise resolve才触发表单onFormSubmitEnd事件,同时loading为false
- */
- submit(
- onSubmit?: (values: IFormState['values']) => any | Promise
- ): Promise<{
- validated: IFormValidateResult
- payload: any //onSubmit回调函数返回值
- }>
-
- /** 获取当前表单Schema **/
- getFormSchema(): Schema
-
- /*
- * 清空错误消息,可以通过传FormPathPattern来批量或精确控制要清空的字段,
- * 比如clearErrors("*(aa,bb,cc)")
- */
- clearErrors: (pattern?: FormPathPattern) => void
-
- /*
- * 获取状态变化情况,主要用于在表单生命周期钩子内判断当前生命周期中有哪些状态发生了变化,
- * 比如hasChanged(state,'value.aa')
- */
- hasChanged(
- target: IFormState | IFieldState | IVirtualFieldState,
- path: FormPathPattern
- ): boolean
-
- /*
- * 重置表单
- */
- reset(options?: {
- //强制清空
- forceClear?: boolean
- //强制校验
- validate?: boolean
- //重置范围,用于批量或者精确控制要重置的字段
- selector?: FormPathPattern
- //是否清空默认值
- clearInitialValue?: boolean
- }): Promise
-
- /*
- * 校验表单, 当校验失败时抛出异常
- */
- validate(
- path?: FormPathPattern,
- options?: {
- //是否悲观校验,如果当前字段遇到第一个校验错误则停止后续校验流程
- first?: boolean
- }
- ): Promise
-
- /*
- * 设置表单状态
- */
- setFormState(
- //操作回调
- callback?: (state: IFormState) => any,
- //是否不触发事件
- silent?: boolean
- ): void
-
- /*
- * 获取表单状态
- */
- getFormState(
- //transformer
- callback?: (state: IFormState) => any
- ): any
-
- /*
- * 设置字段状态
- */
- setFieldState(
- //字段路径
- path: FormPathPattern,
- //操作回调
- callback?: (state: IFieldState) => void,
- //是否不触发事件
- silent?: boolean
- ): void
-
- /*
- * 获取字段状态
- */
- getFieldState(
- //字段路径
- path: FormPathPattern,
- //transformer
- callback?: (state: IFieldState) => any
- ): any
-
- /*
- * 获取表单观察者树
- */
- getFormGraph(): IFormGraph
-
- /*
- * 设置表单观察者树
- */
- setFormGraph(graph: IFormGraph): void
-
- /*
- * 监听表单生命周期
- */
- subscribe(
- callback?: ({ type, payload }: { type: string; payload: any }) => void
- ): number
-
- /*
- * 取消监听表单生命周期
- */
- unsubscribe(id: number): void
-
- /*
- * 触发表单自定义生命周期
- */
- notify: (type: string, payload?: T) => void
-
- /*
- * 设置字段值
- */
- setFieldValue(path?: FormPathPattern, value?: any): void
-
- /*
- * 获取字段值
- */
- getFieldValue(path?: FormPathPattern): any
-
- /*
- * 设置字段初始值
- */
- setFieldInitialValue(path?: FormPathPattern, value?: any): void
-
- /*
- * 获取字段初始值
- */
- getFieldInitialValue(path?: FormPathPattern): any
-}
-```
-
-#### IFormAsyncActions
-
-```typescript
-interface IFormAsyncActions {
- /*
- * 表单提交,如果回调参数返回Promise,
- * 那么整个提交流程会hold住,同时loading为true,
- * 等待Promise resolve才触发表单onFormSubmitEnd事件,同时loading为false
- */
- submit(
- onSubmit?: (values: IFormState['values']) => void | Promise
- ): Promise
-
- /** 获取当前表单Schema **/
- getFormSchema(): Promise
-
- /*
- * 重置表单
- */
- reset(options?: {
- //强制清空
- forceClear?: boolean
- //强制校验
- validate?: boolean
- //重置范围,用于批量或者精确控制要重置的字段
- selector?: FormPathPattern
- //是否清空默认值
- clearInitialValue?: boolean
- }): Promise
- /*
- * 获取状态变化情况,主要用于在表单生命周期钩子内判断当前生命周期中有哪些状态发生了变化,
- * 比如hasChanged(state,'value.aa')
- */
- hasChanged(target: any, path: FormPathPattern): Promise
- /*
- * 清空错误消息,可以通过传FormPathPattern来批量或精确控制要清空的字段,
- * 比如clearErrors("*(aa,bb,cc)")
- */
- clearErrors: (pattern?: FormPathPattern) => Promise
- /*
- * 校验表单, 当校验失败时抛出异常
- */
- validate(
- path?: FormPathPattern,
- options?: {
- //是否悲观校验,如果当前字段遇到第一个校验错误则停止后续校验流程
- first?: boolean
- }
- ): Promise
- /*
- * 设置表单状态
- */
- setFormState(
- //操作回调
- callback?: (state: IFormState) => any,
- //是否不触发事件
- silent?: boolean
- ): Promise
- /*
- * 获取表单状态
- */
- getFormState(
- //transformer
- callback?: (state: IFormState) => any
- ): Promise
- /*
- * 设置字段状态
- */
- setFieldState(
- //字段路径
- path: FormPathPattern,
- //操作回调
- callback?: (state: IFieldState) => void,
- //是否不触发事件
- silent?: boolean
- ): Promise
- /*
- * 获取字段状态
- */
- getFieldState(
- //字段路径
- path: FormPathPattern,
- //transformer
- callback?: (state: IFieldState) => any
- ): Promise
- getFormGraph(): Promise
- setFormGraph(graph: IFormGraph): Promise
- subscribe(callback?: FormHeartSubscriber): Promise
- unsubscribe(id: number): Promise
- notify: (type: string, payload: T) => Promise
- dispatch: (type: string, payload: T) => void
- setFieldValue(path?: FormPathPattern, value?: any): Promise
- getFieldValue(path?: FormPathPattern): Promise
- setFieldInitialValue(path?: FormPathPattern, value?: any): Promise
- getFieldInitialValue(path?: FormPathPattern): Promise
-}
-```
-
-#### ButtonProps
-
-```typescript
-interface ButtonProps {
- /** reset pops **/
- onSubmit?: ISchemaFormProps['onSubmit']
- showLoading?: boolean
- /** nextBtnProps **/
- // 按钮的类型
- type?: 'primary' | 'secondary' | 'normal'
- // 按钮的尺寸
- size?: 'small' | 'medium' | 'large'
- // 按钮中 Icon 的尺寸,用于替代 Icon 的默认大小
- iconSize?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl'
- // 当 component = 'button' 时,设置 button 标签的 type 值
- htmlType?: 'submit' | 'reset' | 'button'
- // 设置标签类型
- component?: 'button' | 'a'
- // 设置按钮的载入状态
- loading?: boolean
- // 是否为幽灵按钮
- ghost?: true | false | 'light' | 'dark'
- // 是否为文本按钮
- text?: boolean
- // 是否为警告按钮
- warning?: boolean
- // 是否禁用
- disabled?: boolean
- // 点击按钮的回调
- onClick?: (e: {}) => void
- // 在Button组件使用component属性值为a时有效,代表链接页面的URL
- href?: string
- // 在Button组件使用component属性值为a时有效,代表何处打开链接文档
- target?: string
-}
-```
-
-#### CardProps
-
-```typescript
-interface CardProps extends HTMLAttributesWeak, CommonProps {
- // 卡片的上的图片 / 视频
- media?: React.ReactNode
-
- // 卡片的标题
- title?: React.ReactNode
-
- // 卡片的副标题
- subTitle?: React.ReactNode
-
- // 卡片操作组,位置在卡片底部
- actions?: React.ReactNode
-
- // 是否显示标题的项目符号
- showTitleBullet?: boolean
-
- // 是否展示头部的分隔线
- showHeadDivider?: boolean
-
- // 内容区域的固定高度
- contentHeight?: string | number
-
- // 标题区域的用户自定义内容
- extra?: React.ReactNode
-
- // 是否开启自由模式,开启后card 将使用子组件配合使用, 设置此项后 title, subtitle, 等等属性都将失效
- free?: boolean
-}
-```
-
-#### ISchemaFieldAdaptorProps
-
-```typescript
-interface ISchemaFieldAdaptorProps
- extends Exclude,
- Partial {
- labelCol?: number | { span: number; offset?: number }
- wrapperCol?: number | { span: number; offset?: number }
-}
-```
-
-#### IFieldState
-
-```typescript
-interface IFieldState {
- /**只读属性**/
-
- //状态名称,FieldState
- displayName?: string
- //数据路径
- name: string
- //节点路径
- path: string
- //是否已经初始化
- initialized: boolean
- //是否处于原始态,只有value===intialValues时的时候该状态为true
- pristine: boolean
- //是否处于合法态,只要errors长度大于0的时候valid为false
- valid: boolean
- //是否处于非法态,只要errors长度大于0的时候valid为true
- invalid: boolean
- //是否处于校验态
- validating: boolean
- //是否被修改,如果值发生变化,该属性为true,同时在整个字段的生命周期内都会为true
- modified: boolean
- //是否被触碰
- touched: boolean
- //是否被激活,字段触发onFocus事件的时候,它会被触发为true,触发onBlur时,为false
- active: boolean
- //是否访问过,字段触发onBlur事件的时候,它会被触发为true
- visited: boolean
-
- /**可写属性**/
-
- //是否可见,注意:该状态如果为false,那么字段的值不会被提交,同时UI不会显示
- visible: boolean
- //是否展示,注意:该状态如果为false,那么字段的值会提交,UI不会展示,类似于表单隐藏域
- display: boolean
- //是否可编辑
- editable: boolean
- //是否处于loading状态,注意:如果字段处于异步校验时,loading为true
- loading: boolean
- //字段多参值,比如字段onChange触发时,给事件回调传了多参数据,那么这里会存储所有参数的值
- values: any[]
- //字段错误消息
- errors: string[]
- //字段告警消息
- warnings: string[]
- //字段值,与values[0]是恒定相等
- value: any
- //初始值
- initialValue: any
- //校验规则,具体类型描述参考后面文档
- rules: ValidatePatternRules[]
- //是否必填
- required: boolean
- //是否挂载
- mounted: boolean
- //是否卸载
- unmounted: boolean
- //字段扩展属性
- props: FieldProps
-}
-```
-
-#### ISchemaFieldComponentProps
-
-```typescript
-interface ISchemaFieldComponentProps extends IFieldState {
- schema: Schema
- mutators: IMutators
- form: IForm
- renderField: (
- addtionKey: string | number,
- reactKey?: string | number
- ) => React.ReactElement
-}
-```
-
-#### ISchemaVirtualFieldComponentProps
-
-```typescript
-interface ISchemaVirtualFieldComponentProps extends IVirtualFieldState {
- schema: Schema
- form: IForm
- children: React.ReactElement[]
- renderField: (
- addtionKey: string | number,
- reactKey?: string | number
- ) => React.ReactElement
-}
-```
-
-#### ISchemaFieldWrapper
-
-```typescript
-interface ISchemaFieldWrapper {
- (Traget: ISchemaFieldComponent):
- | React.FC
- | React.ClassicComponent
-}
-```
-
-#### ISchemaFieldComponent
-
-```typescript
-declare type ISchemaFieldComponent = ComponentWithStyleComponent<
- ISchemaFieldComponentProps
-> & {
- __WRAPPERS__?: ISchemaFieldWrapper[]
-}
-```
-
-#### ISchemaVirtualFieldComponent
-
-```typescript
-declare type ISchemaVirtualFieldComponent = ComponentWithStyleComponent<
- ISchemaVirtualFieldComponentProps
-> & {
- __WRAPPERS__?: ISchemaFieldWrapper[]
-}
-```
-
-#### ISchemaFormRegistry
-
-```typescript
-interface ISchemaFormRegistry {
- fields: {
- [key: string]: ISchemaFieldComponent
- }
- virtualFields: {
- [key: string]: ISchemaVirtualFieldComponent
- }
- wrappers?: ISchemaFieldWrapper[]
- formItemComponent: React.JSXElementConstructor
- formComponent: string | React.JSXElementConstructor
-}
-```
-
-#### InternalFormats
-
-```typescript
-type InternalFormats =
- | 'url'
- | 'email'
- | 'ipv6'
- | 'ipv4'
- | 'idcard'
- | 'taodomain'
- | 'qq'
- | 'phone'
- | 'money'
- | 'zh'
- | 'date'
- | 'zip'
- | string
-```
-
-#### CustomValidator
-
-```typescript
-declare type CustomValidator = (
- value: any,
- rescription?: ValidateDescription
-) => ValidateResponse
-```
-
-#### ValidateDescription
-
-```typescript
-interface ValidateDescription {
- // 内置校验规则,参考string内置校验规则
- format?: InternalFormats
- // 自定义校验规则
- validator?: CustomValidator
- // 是否必填
- required?: boolean
- // 匹配规则
- pattern?: RegExp | string
- // 最大长度
- max?: number
- // 最大值(大于)
- maximum?: number
- // 最大值(大于等于)
- exclusiveMaximum?: number
- // 最小值(小于等于)
- exclusiveMinimum?: number
- // 最小值(小于)
- minimum?: number
- // 最小长度
- min?: number
- // 长度
- len?: number
- // 空格
- whitespace?: boolean
- // 是否包含在枚举列表中
- enum?: any[]
- // 错误信息
- message?: string
- [key: string]: any
-}
-```
-
-#### ValidateArrayRules
-
-```typescript
-declare type ValidateArrayRules = Array<
- InternalFormats | CustomValidator | ValidateDescription
->
-```
-
-#### ValidatePatternRules
-
-```typescript
-declare type ValidatePatternRules =
- | InternalFormats
- | CustomValidator
- | ValidateDescription
- | ValidateArrayRules
-```
-
-#### IPreviewTextProps
-
-```typescript
-interface IPreviewTextProps {
- className?: React.ReactText
- dataSource?: any[]
- value?: any
- addonBefore?: React.ReactNode
- innerBefore?: React.ReactNode
- addonTextBefore?: React.ReactNode
- addonTextAfter?: React.ReactNode
- innerAfter?: React.ReactNode
- addonAfter?: React.ReactNode
-}
-```
-
-#### IMutators
-
-```typescript
-interface IMutators {
- change: (value: V) => void //改变当前字段值
- dispatch: (name: string, payload: any) => void //触发effect事件
- errors: (
- errors: string | Array,
- ...formatValues: Array
- ) => void //设置当前字段的错误消息
- push(value: V) //对当前字段的值做push操作
- pop() //对当前字段的值做pop操作
- insert(index: number, value: V) //对当前字段的值做insert操作
- remove(name: string) //对当前字段的值做remove操作
- unshift(value: V) //对当前字段值做unshift操作
- shift() //对当前字段值做shift操作
- move(fromIndex: number, toIndex: number) //对当前字段值做move操作
-}
-```
-
-#### IFieldProps
-
-```typescript
-interface IFieldProps {
- name: string //字段数据路径
- path: Array //字段数组数据路径
- value: V //字段值
- errors: Array //字段错误消息集合
- editable: boolean | ((name: string) => boolean) //字段是否可编辑
- locale: Locale //国际化文案对象
- loading: boolean //是否处于加载态
- schemaPath: Array //schema path,考虑到有些schema其实是不占数据路径的,所以这个路径是真实路径
- getSchema: (path: string) => ISchema //根据路径获取schema
- renderField: (
- childKey: string,
- reactKey: string | number
- ) => JSX.Element | string | null //根据childKey渲染当前字段的子字段
- renderComponent: React.FunctionComponent | undefined> //渲染当前字段的组件,对于x-render来说,可以借助它快速实现渲染包装功能
- getOrderProperties: () => Array<{
- schema: ISchema
- key: number
- path: string
- name: string
- }> //根据properties里字段的x-index值求出排序后的properties
- mutators: Mutators //数据操作对象
- schema: ISchema
-}
-```
-
-```typescript
-interface IConnectOptions {
- //控制表单组件
- valueName?: string
- //事件名称
- eventName?: string
- //默认props
- defaultProps?: Partial
- //取值函数,有些场景我们的事件函数取值并不是事件回调的第一个参数,需要做进一步的定制
- getValueFromEvent?: (
- props: IFieldProps['x-props'],
- event: Event,
- ...args: any[]
- ) => any
- //字段组件props transformer
- getProps?: (
- connectProps: IConnectProps,
- fieldProps: IFieldProps
- ) => IConnectProps
- //字段组件component transformer
- getComponent?: (
- target: T,
- connectProps: IConnectProps,
- fieldProps: IFieldProps
- ) => T
-}
-```
-
-### IForm
-
-```typescript
-interface IForm {
- submit(
- onSubmit?: (values: IFormState['values']) => any | Promise
- ): Promise
- clearErrors: (pattern?: FormPathPattern) => void
- hasChanged(target: any, path: FormPathPattern): boolean
- reset(options?: IFormResetOptions): Promise
- validate(
- path?: FormPathPattern,
- options?: IFormExtendedValidateFieldOptions
- ): Promise
- setFormState(callback?: (state: IFormState) => any, silent?: boolean): void
- getFormState(callback?: (state: IFormState) => any): any
- setFieldState(
- path: FormPathPattern,
- callback?: (state: IFieldState) => void,
- silent?: boolean
- ): void
- getFieldState(
- path: FormPathPattern,
- callback?: (state: IFieldState) => any
- ): any
- unsafe_do_not_use_transform_data_path(path: FormPathPattern): FormPathPattern //eslint-disable-line
- registerField(props: IFieldStateProps): IField
- registerVirtualField(props: IVirtualFieldStateProps): IVirtualField
- createMutators(field: IField | FormPathPattern): IMutators
- getFormGraph(): IFormGraph
- setFormGraph(graph: IFormGraph): void
- subscribe(callback?: FormHeartSubscriber): number
- unsubscribe(id: number): void
- notify: (type: string, payload?: T) => void
- setFieldValue(path?: FormPathPattern, value?: any): void
- getFieldValue(path?: FormPathPattern): any
- setFieldInitialValue(path?: FormPathPattern, value?: any): void
- getFieldInitialValue(path?: FormPathPattern): any
-}
-```
-
-#### IFormActions
-
-```typescript
-interface IFormActions {
- submit(
- onSubmit?: (values: IFormState['values']) => void | Promise
- ): Promise
- reset(options?: IFormResetOptions): void
- hasChanged(target: any, path: FormPathPattern): boolean
- validate(path?: FormPathPattern, options?: {}): Promise
- setFormState(callback?: (state: IFormState) => any): void
- getFormState(callback?: (state: IFormState) => any): any
- clearErrors: (pattern?: FormPathPattern) => void
- setFieldState(
- path: FormPathPattern,
- callback?: (state: IFieldState) => void
- ): void
- getFieldState(
- path: FormPathPattern,
- callback?: (state: IFieldState) => any
- ): any
- getFormGraph(): IFormGraph
- setFormGraph(graph: IFormGraph): void
- subscribe(callback?: FormHeartSubscriber): number
- unsubscribe(id: number): void
- notify: (type: string, payload?: T) => void
- dispatch: (type: string, payload?: T) => void
- setFieldValue(path?: FormPathPattern, value?: any): void
- getFieldValue(path?: FormPathPattern): any
- setFieldInitialValue(path?: FormPathPattern, value?: any): void
- getFieldInitialValue(path?: FormPathPattern): any
-}
-```
-
-#### IFormValidateResult
-
-```typescript
-interface IFormValidateResult {
- errors: Array<{
- path: string
- messages: string[]
- }>
- warnings: Array<{
- path: string
- messages: string[]
- }>
-}
-```
-
-#### ISchemaFormProps
-
-```typescript
-interface ISchemaFormProps<
- Value = any,
- DefaultValue = any,
- FormEffectPayload = any,
- FormActions = ISchemaFormActions | ISchemaFormAsyncActions
-> extends IFormProps {
- schema?: ISchema
- fields?: ISchemaFormRegistry['fields']
- components?: {
- [key: string]: React.JSXElementConstructor
- }
- virtualFields?: ISchemaFormRegistry['virtualFields']
- formComponent?: ISchemaFormRegistry['formComponent']
- formItemComponent?: ISchemaFormRegistry['formItemComponent']
- expressionScope?: { [key: string]: any }
-}
-```
-
-#### IFormSpyAPI
-
-```typescript
-interface IFormSpyAPI {
- form: IForm
- type: string
- state: any
-}
-```
-
-#### ISpyHook
-
-```typescript
-interface ISpyHook {
- form: IForm
- state: any
- type: string
-}
-```
-
-#### MergedFieldComponentProps
-
-```typescript
-interface MergedFieldComponentProps extends IFieldState {
- schema: Schema
- mutators: IMutators
- form: IForm
- renderField: (
- addtionKey: string | number,
- reactKey?: string | number
- ) => React.ReactElement
-}
-```
-
-#### Pagination
-
-```typescript
-interface Pagination {
- total: number
- pageSize: number
- current: number
-}
-```
-
-#### IQueryParams
-
-```typescript
-type IQueryParams = {
- pagination: {
- total: number
- pageSize: number
- current: number
- }
- sorter?: {
- order: string
- field: string
- columnKey: string
- column: any
- }
- filters?: {
- [dataIndex: string]: any
- }
- values: any
-}
-```
-
-#### IQueryResponse
-
-```typescript
-type IQueryResponse = {
- dataSource: any[]
- total: number
- pageSize: number
- current: number
-}
+render(, null, { driver: DriverUniversal })
```