Skip to content

Commit 93f87ad

Browse files
JohnIsOnTheRoadJohnIsOnTheRoad
authored
fix: form effect demo (#499)
1 parent d1fcde8 commit 93f87ad

File tree

4 files changed

+105
-197
lines changed

4 files changed

+105
-197
lines changed

‎packages/antd/README.md

+26-49
Original file line numberDiff line numberDiff line change
@@ -2345,48 +2345,20 @@ ReactDOM.render(<App />, document.getElementById('root'))
23452345
```jsx
23462346
import React from 'react'
23472347
import ReactDOM from 'react-dom'
2348-
import { Form, Field, createFormActions, useFormEffects, LifeCycleTypes } from '@uform/react'
2348+
import SchemaForm, {
2349+
SchemaMarkupField as Field,
2350+
VirtualField,
2351+
createFormActions,
2352+
useFormEffects,
2353+
LifeCycleTypes,
2354+
createVirtualBox
2355+
} from '@uform/antd'
23492356

23502357
const actions = createFormActions()
2351-
const InputField = props => (
2352-
<Field {...props}>
2353-
{({ state, mutators }) => {
2354-
const loading = state.props.loading
2355-
return <React.Fragment>
2356-
{ props.label && <label>{props.label}</label> }
2357-
{ loading ? ' loading... ' : <input
2358-
disabled={!state.editable}
2359-
value={state.value || ''}
2360-
onChange={mutators.change}
2361-
onBlur={mutators.blur}
2362-
onFocus={mutators.focus}
2363-
/> }
2364-
<span style={{ color: 'red' }}>{state.errors}</span>
2365-
<span style={{ color: 'orange' }}>{state.warnings}</span>
2366-
</React.Fragment>
2367-
}}
2368-
</Field>
2369-
)
2370-
2371-
const CheckedField = props => (
2372-
<Field {...props}>
2373-
{({ state, mutators }) => {
2374-
const loading = state.props.loading
2375-
return <React.Fragment>
2376-
{ props.label && <label>{props.label}</label> }
2377-
{ loading ? ' loading... ' : <input type="checkbox" onChange={() => {
2378-
mutators.change(!state.value)
2379-
}} checked={!!state.value} /> }
2380-
<span style={{ color: 'red' }}>{state.errors}</span>
2381-
<span style={{ color: 'orange' }}>{state.warnings}</span>
2382-
</React.Fragment>
2383-
}}
2384-
</Field>
2385-
)
23862358

2387-
const FormFragment = () => {
2359+
const FragmentContainer = createVirtualBox('ffb', (props) => {
23882360
useFormEffects(($, { setFieldState }) => {
2389-
$(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
2361+
$(LifeCycleTypes.ON_FORM_MOUNT).subscribe(() => {
23902362
setFieldState('a~', state => state.visible = false)
23912363
})
23922364

@@ -2405,24 +2377,29 @@ const FormFragment = () => {
24052377

24062378
return (
24072379
<React.Fragment>
2408-
<CheckedField name="trigger" label="show/hide" />
2409-
<div>
2410-
<InputField label="a" name="a" />
2411-
</div>
2412-
<div>
2413-
<InputField label="a-copy" name="a-copy" />
2414-
</div>
2380+
{props.children}
24152381
</React.Fragment>
24162382
)
2383+
});
2384+
2385+
const FormFragment = () => {
2386+
return <FragmentContainer>
2387+
<Field
2388+
type="radio"
2389+
name="trigger"
2390+
title="trigger"
2391+
enum={[{ label: 'show', value: true }, { label: 'hide', value: false } ]}
2392+
/>
2393+
<Field type="string" name="a" title="a" />
2394+
<Field type="string" name="a-copy" title="a-copy" />
2395+
</FragmentContainer>
24172396
}
24182397

24192398
const App = () => {
24202399
return (
2421-
<Form
2422-
actions={actions}
2423-
>
2400+
<SchemaForm actions={actions}>
24242401
<FormFragment />
2425-
</Form>
2402+
</SchemaForm>
24262403
)
24272404
}
24282405

‎packages/antd/README.zh-cn.md

+26-49
Original file line numberDiff line numberDiff line change
@@ -2410,48 +2410,20 @@ ReactDOM.render(<App />, document.getElementById('root'))
24102410
```jsx
24112411
import React from 'react'
24122412
import ReactDOM from 'react-dom'
2413-
import { Form, Field, createFormActions, useFormEffects, LifeCycleTypes } from '@uform/react'
2413+
import SchemaForm, {
2414+
SchemaMarkupField as Field,
2415+
VirtualField,
2416+
createFormActions,
2417+
useFormEffects,
2418+
LifeCycleTypes,
2419+
createVirtualBox
2420+
} from '@uform/antd'
24142421

24152422
const actions = createFormActions()
2416-
const InputField = props => (
2417-
<Field {...props}>
2418-
{({ state, mutators }) => {
2419-
const loading = state.props.loading
2420-
return <React.Fragment>
2421-
{ props.label && <label>{props.label}</label> }
2422-
{ loading ? ' loading... ' : <input
2423-
disabled={!state.editable}
2424-
value={state.value || ''}
2425-
onChange={mutators.change}
2426-
onBlur={mutators.blur}
2427-
onFocus={mutators.focus}
2428-
/> }
2429-
<span style={{ color: 'red' }}>{state.errors}</span>
2430-
<span style={{ color: 'orange' }}>{state.warnings}</span>
2431-
</React.Fragment>
2432-
}}
2433-
</Field>
2434-
)
24352423

2436-
const CheckedField = props => (
2437-
<Field {...props}>
2438-
{({ state, mutators }) => {
2439-
const loading = state.props.loading
2440-
return <React.Fragment>
2441-
{ props.label && <label>{props.label}</label> }
2442-
{ loading ? ' loading... ' : <input type="checkbox" onChange={() => {
2443-
mutators.change(!state.value)
2444-
}} checked={!!state.value} /> }
2445-
<span style={{ color: 'red' }}>{state.errors}</span>
2446-
<span style={{ color: 'orange' }}>{state.warnings}</span>
2447-
</React.Fragment>
2448-
}}
2449-
</Field>
2450-
)
2451-
2452-
const FormFragment = () => {
2424+
const FragmentContainer = createVirtualBox('ffb', (props) => {
24532425
useFormEffects(($, { setFieldState }) => {
2454-
$(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
2426+
$(LifeCycleTypes.ON_FORM_MOUNT).subscribe(() => {
24552427
setFieldState('a~', state => state.visible = false)
24562428
})
24572429

@@ -2470,24 +2442,29 @@ const FormFragment = () => {
24702442

24712443
return (
24722444
<React.Fragment>
2473-
<CheckedField name="trigger" label="show/hide" />
2474-
<div>
2475-
<InputField label="a" name="a" />
2476-
</div>
2477-
<div>
2478-
<InputField label="a-copy" name="a-copy" />
2479-
</div>
2445+
{props.children}
24802446
</React.Fragment>
24812447
)
2448+
});
2449+
2450+
const FormFragment = () => {
2451+
return <FragmentContainer>
2452+
<Field
2453+
type="radio"
2454+
name="trigger"
2455+
title="trigger"
2456+
enum={[{ label: 'show', value: true }, { label: 'hide', value: false } ]}
2457+
/>
2458+
<Field type="string" name="a" title="a" />
2459+
<Field type="string" name="a-copy" title="a-copy" />
2460+
</FragmentContainer>
24822461
}
24832462

24842463
const App = () => {
24852464
return (
2486-
<Form
2487-
actions={actions}
2488-
>
2465+
<SchemaForm actions={actions}>
24892466
<FormFragment />
2490-
</Form>
2467+
</SchemaForm>
24912468
)
24922469
}
24932470

‎packages/next/README.md

+26-49
Original file line numberDiff line numberDiff line change
@@ -2334,48 +2334,20 @@ ReactDOM.render(<App />, document.getElementById('root'))
23342334
```jsx
23352335
import React from 'react'
23362336
import ReactDOM from 'react-dom'
2337-
import { Form, Field, createFormActions, useFormEffects, LifeCycleTypes } from '@uform/react'
2337+
import SchemaForm, {
2338+
SchemaMarkupField as Field,
2339+
VirtualField,
2340+
createFormActions,
2341+
useFormEffects,
2342+
LifeCycleTypes,
2343+
createVirtualBox
2344+
} from '@uform/next'
23382345

23392346
const actions = createFormActions()
2340-
const InputField = props => (
2341-
<Field {...props}>
2342-
{({ state, mutators }) => {
2343-
const loading = state.props.loading
2344-
return <React.Fragment>
2345-
{ props.label && <label>{props.label}</label> }
2346-
{ loading ? ' loading... ' : <input
2347-
disabled={!state.editable}
2348-
value={state.value || ''}
2349-
onChange={mutators.change}
2350-
onBlur={mutators.blur}
2351-
onFocus={mutators.focus}
2352-
/> }
2353-
<span style={{ color: 'red' }}>{state.errors}</span>
2354-
<span style={{ color: 'orange' }}>{state.warnings}</span>
2355-
</React.Fragment>
2356-
}}
2357-
</Field>
2358-
)
2359-
2360-
const CheckedField = props => (
2361-
<Field {...props}>
2362-
{({ state, mutators }) => {
2363-
const loading = state.props.loading
2364-
return <React.Fragment>
2365-
{ props.label && <label>{props.label}</label> }
2366-
{ loading ? ' loading... ' : <input type="checkbox" onChange={() => {
2367-
mutators.change(!state.value)
2368-
}} checked={!!state.value} /> }
2369-
<span style={{ color: 'red' }}>{state.errors}</span>
2370-
<span style={{ color: 'orange' }}>{state.warnings}</span>
2371-
</React.Fragment>
2372-
}}
2373-
</Field>
2374-
)
23752347

2376-
const FormFragment = () => {
2348+
const FragmentContainer = createVirtualBox('ffb', (props) => {
23772349
useFormEffects(($, { setFieldState }) => {
2378-
$(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
2350+
$(LifeCycleTypes.ON_FORM_MOUNT).subscribe(() => {
23792351
setFieldState('a~', state => state.visible = false)
23802352
})
23812353

@@ -2394,24 +2366,29 @@ const FormFragment = () => {
23942366

23952367
return (
23962368
<React.Fragment>
2397-
<CheckedField name="trigger" label="show/hide" />
2398-
<div>
2399-
<InputField label="a" name="a" />
2400-
</div>
2401-
<div>
2402-
<InputField label="a-copy" name="a-copy" />
2403-
</div>
2369+
{props.children}
24042370
</React.Fragment>
24052371
)
2372+
});
2373+
2374+
const FormFragment = () => {
2375+
return <FragmentContainer>
2376+
<Field
2377+
type="radio"
2378+
name="trigger"
2379+
title="trigger"
2380+
enum={[{ label: 'show', value: true }, { label: 'hide', value: false } ]}
2381+
/>
2382+
<Field type="string" name="a" title="a" />
2383+
<Field type="string" name="a-copy" title="a-copy" />
2384+
</FragmentContainer>
24062385
}
24072386

24082387
const App = () => {
24092388
return (
2410-
<Form
2411-
actions={actions}
2412-
>
2389+
<SchemaForm actions={actions}>
24132390
<FormFragment />
2414-
</Form>
2391+
</SchemaForm>
24152392
)
24162393
}
24172394

0 commit comments

Comments
 (0)