Skip to content

Commit

Permalink
test(project): update mobx => @formily/reactive
Browse files Browse the repository at this point in the history
  • Loading branch information
@janryWang
janryWang committed Mar 11, 2021
1 parent 1448a05 commit c0fb81e
Show file tree
Hide file tree
Showing 36 changed files with 91 additions and 412 deletions.
6 changes: 3 additions & 3 deletions packages/antd/docs/components/Cascader.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Cascader, FormItem, FormButtonGroup, Submit } from '@formily/antd'
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'
import { action } from 'mobx'
import { action } from '@formily/reactive'

const SchemaField = createSchemaField({
components: {
Expand Down Expand Up @@ -94,7 +94,7 @@ import { Cascader, FormItem, FormButtonGroup, Submit } from '@formily/antd'
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'
import { action } from 'mobx'
import { action } from '@formily/reactive'

const SchemaField = createSchemaField({
components: {
Expand Down Expand Up @@ -186,7 +186,7 @@ import { Cascader, FormItem, FormButtonGroup, Submit } from '@formily/antd'
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'
import { action } from 'mobx'
import { action } from '@formily/reactive'

const useAddress = (pattern: Formily.Core.Types.FormPathPattern) => {
const transform = (data = {}) => {
Expand Down
305 changes: 1 addition & 304 deletions packages/antd/docs/components/Select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import { Select, FormItem, FormButtonGroup, Submit } from '@formily/antd'
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'
import { action } from 'mobx'
import { action } from '@formily/reactive'

const SchemaField = createSchemaField({
components: {
Expand Down Expand Up @@ -156,306 +156,3 @@ export default () => (
</FormProvider>
)
```

## JSON Schema 同步数据源案例

```tsx
import React from 'react'
import { Select, FormItem, FormButtonGroup, Submit } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'

const SchemaField = createSchemaField({
components: {
Select,
FormItem,
},
})

const form = createForm()

const schema = {
type: 'object',
properties: {
select: {
type: 'string',
title: '选择框',
'x-decorator': 'FormItem',
'x-component': 'Select',
enum: [
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
],
'x-component-props': {
style: {
width: 120,
},
},
},
},
}

export default () => (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
```

## JOSN Schema 异步联动数据源案例

```tsx
import React from 'react'
import { Select, FormItem, FormButtonGroup, Submit } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'
import { action } from 'mobx'

const SchemaField = createSchemaField({
components: {
Select,
FormItem,
},
})

const loadData = async (field) => {
const linkage = field.query('linkage').get('value')
if (!linkage) return []
return new Promise((resolve) => {
setTimeout(() => {
if (linkage === 1) {
resolve([
{
label: 'AAA',
value: 'aaa',
},
{
label: 'BBB',
value: 'ccc',
},
])
} else if (linkage === 2) {
resolve([
{
label: 'CCC',
value: 'ccc',
},
{
label: 'DDD',
value: 'ddd',
},
])
}
}, 1500)
})
}

const useAsyncDataSource = (service) => (field) => {
field.setComponentProps({
suffixIcon: <LoadingOutlined />,
})
service(field).then(
action((data) => {
field.setDataSource(data)
field.setComponentProps({
suffixIcon: undefined,
})
})
)
}

const form = createForm()

const schema = {
type: 'object',
properties: {
linkage: {
type: 'string',
title: '联动选择框',
enum: [
{ label: '发请求1', value: 1 },
{ label: '发请求2', value: 2 },
],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 120,
},
},
},
select: {
type: 'string',
title: '异步选择框',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 120,
},
},
'x-reactions': ['{{useAsyncDataSource(loadData)}}'],
},
},
}

export default () => (
<FormProvider form={form}>
<SchemaField schema={schema} scope={{ useAsyncDataSource, loadData }} />
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
```

## 纯 JSX 同步数据源案例

```tsx
import React from 'react'
import { Select, FormItem, FormButtonGroup, Submit } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'

const form = createForm()

export default () => (
<FormProvider form={form}>
<Field
name="select"
title="选择框"
dataSource={[
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
]}
decorator={[FormItem]}
component={[
Select,
{
style: {
width: 120,
},
},
]}
/>
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
```

## 纯 JSX 异步联动数据源案例

```tsx
import React from 'react'
import { Select, FormItem, FormButtonGroup, Submit } from '@formily/antd'
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'
import { action } from 'mobx'

const useAsyncDataSource = (
pattern: Formily.Core.Types.FormPathPattern,
service: (
field: Formily.Core.Models.Field
) => Promise<{ label: string; value: any }[]>
) => {
onFieldReact(pattern, (field) => {
field.setComponentProps({
suffixIcon: <LoadingOutlined />,
})
service(field).then(
action((data) => {
field.setDataSource(data)
field.setComponentProps({
suffixIcon: undefined,
})
})
)
})
}

const form = createForm({
effects: () => {
useAsyncDataSource('select', async (field) => {
const linkage = field.query('linkage').get('value')
if (!linkage) return []
return new Promise((resolve) => {
setTimeout(() => {
if (linkage === 1) {
resolve([
{
label: 'AAA',
value: 'aaa',
},
{
label: 'BBB',
value: 'ccc',
},
])
} else if (linkage === 2) {
resolve([
{
label: 'CCC',
value: 'ccc',
},
{
label: 'DDD',
value: 'ddd',
},
])
}
}, 1500)
})
})
},
})

export default () => (
<FormProvider form={form}>
<Field
name="linkage"
title="联动选择框"
dataSource={[
{ label: '发请求1', value: 1 },
{ label: '发请求2', value: 2 },
]}
decorator={[FormItem]}
component={[
Select,
{
style: {
width: 120,
},
},
]}
/>
<Field
name="select"
title="异步选择框"
decorator={[FormItem]}
component={[
Select,
{
style: {
width: 120,
},
},
]}
/>
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
```

## API

参考 https://ant.design/components/select-cn/
6 changes: 3 additions & 3 deletions packages/antd/docs/components/TreeSelect.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ import {
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'
import { action } from 'mobx'
import { action } from '@formily/reactive'

const SchemaField = createSchemaField({
components: {
Expand Down Expand Up @@ -379,7 +379,7 @@ import {
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'
import { action } from 'mobx'
import { action } from '@formily/reactive'

const SchemaField = createSchemaField({
components: {
Expand Down Expand Up @@ -631,7 +631,7 @@ import {
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
import { LoadingOutlined } from '@ant-design/icons'
import { action } from 'mobx'
import { action } from '@formily/reactive'

const useAsyncDataSource = (
pattern: Formily.Core.Types.FormPathPattern,
Expand Down
2 changes: 1 addition & 1 deletion packages/antd/docs/components/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
## 安装

```bash
$ npm install --save antd mobx moment
$ npm install --save antd moment
$ npm install --save @formily/core @formily/react @formily/antd

```
Expand Down
2 changes: 1 addition & 1 deletion packages/antd/docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ footer: Open-source MIT Licensed | Copyright © 2019-present<br />Powered by sel
## 安装

```bash
$ npm install --save antd mobx moment
$ npm install --save antd moment
$ npm install --save @formily/core @formily/react @formily/antd

```
Expand Down
Loading

0 comments on commit c0fb81e

Please sign in to comment.