@@ -948,8 +1004,8 @@ ReactDOM.render(
, document.getElementById('root'))
#### useForm
-* 创建一个 [IForm](#IForm) 实例。需要注意的是,该操作会代理整个表单创建过程,包括actions的处理。
-* useForm是底层方法,它在包装具有业务属性的表单框架时非常有用。
+- 创建一个 [IForm](#IForm) 实例。需要注意的是,该操作会代理整个表单创建过程,包括 actions 的处理。
+- useForm 是底层方法,它在包装具有业务属性的表单框架时非常有用。
**签名**
@@ -969,15 +1025,17 @@ type useForm = <
```jsx
import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
-import { SchemaForm,
+import {
+ SchemaForm,
SchemaMarkupField as Field,
- createFormActions, createEffectHook,
- useForm,
+ createFormActions,
+ createEffectHook,
+ useForm,
FormSpy,
useFormEffects,
useFieldState,
LifeCycleTypes,
- createVirtualBox,
+ createVirtualBox
} from '@formily/next'
import { setup } from '@formily/next-components'
@@ -986,7 +1044,7 @@ const actions = createFormActions()
const App = () => {
const form = useForm({
value: { username: 'moe' },
- actions,
+ actions
})
return (
@@ -997,7 +1055,6 @@ const App = () => {
}
ReactDOM.render(
, document.getElementById('root'))
-
```
#### useField
@@ -1015,30 +1072,29 @@ type useField = (options: IFieldStateUIProps): IFieldHook
```jsx
import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
-import { SchemaForm,
+import {
+ SchemaForm,
SchemaMarkupField as Field,
- createFormActions, createEffectHook,
- useForm,
+ createFormActions,
+ createEffectHook,
+ useForm,
FormSpy,
useFormEffects,
LifeCycleTypes,
createControllerBox,
- useField,
+ useField
} from '@formily/next'
-const CustomField = createControllerBox('customField', (props) => {
- const { name } = props;
- const realName = props.props['x-component-props']['x-name'];
- const {
- form,
- state,
- props: fieldProps,
- mutators
- } = useField({
- name: `${name}.${realName}`,
- })
-
- return
+const CustomField = createControllerBox('customField', props => {
+ const { name } = props
+ const realName = props.props['x-component-props']['x-name']
+ const { form, state, props: fieldProps, mutators } = useField({
+ name: `${name}.${realName}`
+ })
+
+ return (
+
+ )
})
const App = () => {
@@ -1046,14 +1102,15 @@ const App = () => {
- {({ state, form }) => name: {form && form.getFieldValue('username')}
}
+ {({ state, form }) => (
+ name: {form && form.getFieldValue('username')}
+ )}
)
}
ReactDOM.render(
, document.getElementById('root'))
-
```
#### useVirtualField
@@ -1071,21 +1128,23 @@ type UseVirtualField = (options: IVirtualFieldStateProps): IVirtualFieldHook
```jsx
import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
-import { SchemaForm,
+import {
+ SchemaForm,
SchemaMarkupField as Field,
- createFormActions, createEffectHook,
- useForm,
+ createFormActions,
+ createEffectHook,
+ useForm,
FormSpy,
useFormEffects,
LifeCycleTypes,
createControllerBox,
- useVirtualField,
+ useVirtualField
} from '@formily/next'
import { setup } from '@formily/next-components'
setup()
-const LayoutBox = createControllerBox('LayoutBox', (props) => {
+const LayoutBox = createControllerBox('LayoutBox', props => {
useVirtualField({ name: 'random' })
return
{props.children}
})
@@ -1096,13 +1155,12 @@ const App = () => {
-
+
)
}
ReactDOM.render(
, document.getElementById('root'))
-
```
#### useFormSpy
@@ -1120,21 +1178,23 @@ type useFormSpy = (props: IFormSpyProps): ISpyHook
```jsx
import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
-import { SchemaForm,
+import {
+ SchemaForm,
SchemaMarkupField as Field,
- createFormActions, createEffectHook,
- useForm,
+ createFormActions,
+ createEffectHook,
+ useForm,
FormSpy,
useFormEffects,
LifeCycleTypes,
createControllerBox,
- useFormSpy,
+ useFormSpy
} from '@formily/next'
import { setup } from '@formily/next-components'
setup()
-const CustomSpy = createControllerBox('CustomSpy', (props) => {
+const CustomSpy = createControllerBox('CustomSpy', props => {
const { form } = useFormSpy({ selector: '*', reducer: v => v })
return
name: {form && form.getFieldValue('username')}
})
@@ -1149,7 +1209,6 @@ const App = () => {
}
ReactDOM.render(
, document.getElementById('root'))
-
```
#### useDeepFormItem
@@ -1161,7 +1220,7 @@ ReactDOM.render(
, document.getElementById('root'))
```tsx
import { useDeepFormItem, FormItemDeepProvider } from '@formily/next'
import { Form } from '@alifd/next'
-const CustomComponent = (props) => {
+const CustomComponent = props => {
const {
prefixCls,
labelAlign,
@@ -1169,22 +1228,25 @@ const CustomComponent = (props) => {
wrapperCol: contextWrapperCol
} = useDeepFormItem()
- return
- {props.children}
-
+ return (
+
+ {props.children}
+
+ )
}
const App = () => {
- return
-
-
+ return (
+
+
+
+ )
}
-
```
#### useShallowFormItem
@@ -1193,7 +1255,7 @@ const App = () => {
**用法**
-下列 `
` 除了`label`以外,会继承其他所有顶部的 `FormItem` 属性。
+下列 `` 除了`label`以外,会继承其他所有顶部的 `FormItem` 属性。
```tsx
import { SchemaField, FormItemShallowProvider, useShallowFormItem } from '@formily/next'
@@ -1206,7 +1268,6 @@ const NoLabelInput = (props) => {
```
-
### API
> 整体完全继承@formily/react, 下面只列举@formily/next 的特有 API
@@ -1271,36 +1332,36 @@ setValidationLanguage('zh')
#### setValidationLocale
-设置校验规则命中时,message的定义, 搭配[setValidationLanguage](#setValidationLanguage) 使用
+设置校验规则命中时,message 的定义, 搭配[setValidationLanguage](#setValidationLanguage) 使用
**签名**
```typescript
interface ILocaleMessages {
- [key: string]: string | ILocaleMessages;
+ [key: string]: string | ILocaleMessages
}
interface ILocales {
- [lang: string]: ILocaleMessages;
+ [lang: string]: ILocaleMessages
}
-const setValidationLocale: (locale: ILocales) => void;
+const setValidationLocale: (locale: ILocales) => void
```
**用法**
```tsx
-import { setValidationLanguage, setValidationLocale, } from '@formily/next'
+import { setValidationLanguage, setValidationLocale } from '@formily/next'
setValidationLanguage('zh')
setValidationLocale({
zh: {
- required: '这是修改默认的必填文案',
- },
+ required: '这是修改默认的必填文案'
+ }
})
```
#### registerValidationFormats
-拓展校验正则format, 当不满足此规则时即报错。
+拓展校验正则 format, 当不满足此规则时即报错。
**签名**
@@ -1348,8 +1409,8 @@ static (template: any) => void;
import { setValidationLocale, registerValidationMTEngine } from '@formily/next'
setValidationLocale({
en: {
- required: '这是定制必填文案 <% injectVar %>',
- },
+ required: '这是定制必填文案 <% injectVar %>'
+ }
})
registerValidationMTEngine((message, context) => {
@@ -1471,29 +1532,29 @@ ReactDOM.render(, document.getElementById('root'))
#### connect
-> 包装字段组件,让字段组件只需要支持value/defaultValue/onChange属性即可快速接入表单
+> 包装字段组件,让字段组件只需要支持 value/defaultValue/onChange 属性即可快速接入表单
```typescript
-type Connect = >(options?: IConnectOptions) =>
-(Target: T) => React.PureComponent
+type Connect = >(
+ options?: IConnectOptions
+) => (Target: T) => React.PureComponent
```
-* IConnectOptions
-
-| 参数 | 说明 | 类型 | 默认值 |
-|:----------|:---------------------------------|:--------------------|:--------------------|
-| valueName | value字段的名称 | string | `'value'` |
-| eventName | 改变value的事件名 | string | `'onChange'` |
-| defaultProps | 默认属性 | {} | {} |
-| getValueFromEvent | 根据事件获取value | (event?: any, value?: any) => any | |
-| getProps | 获取props的函数 | (componentProps: {}, fieldProps: [MergedFieldComponentProps](#MergedFieldComponentProps)) => {} | void | |
-| getComponent | 获取Component的函数 | (Target: any, componentProps: {}, fieldProps: [MergedFieldComponentProps](#MergedFieldComponentProps)) => React.JSXElementConstructor | |
+- IConnectOptions
+| 参数 | 说明 | 类型 | 默认值 |
+| :---------------- | :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :----------- |
+| valueName | value 字段的名称 | string | `'value'` |
+| eventName | 改变 value 的事件名 | string | `'onChange'` |
+| defaultProps | 默认属性 | {} | {} |
+| getValueFromEvent | 根据事件获取 value | (event?: any, value?: any) => any | |
+| getProps | 获取 props 的函数 | (componentProps: {}, fieldProps: [MergedFieldComponentProps](#MergedFieldComponentProps)) => {} | void | |
+| getComponent | 获取 Component 的函数 | (Target: any, componentProps: {}, fieldProps: [MergedFieldComponentProps](#MergedFieldComponentProps)) => React.JSXElementConstructor | |
**用法**
```typescript
-import {registerFormField,connect} from '@formily/next'
+import { registerFormField, connect } from '@formily/next'
registerFormField(
'string',
@@ -1529,7 +1590,6 @@ const Input = connect({
})(Input))
```
-
#### registerFormFields
全局批量注册拓展组件
@@ -1537,6 +1597,7 @@ const Input = connect({
```typescript
function registerFormFields(object: ISchemaFormRegistry['fields'])
```
+
**用法**
```jsx
@@ -1550,10 +1611,20 @@ import {
} from '@formily/next' // 或者 @formily/next
const CustomComponent1 = props => {
- return props.onChange(e.target.value)} />
+ return (
+ props.onChange(e.target.value)}
+ />
+ )
}
const CustomComponent2 = props => {
- return