@@ -32,7 +32,7 @@ import ReactDOM from 'react-dom'
32
32
import { filter , withLatestFrom , map , debounceTime } from ' rxjs/operators'
33
33
import {
34
34
SchemaForm ,
35
- Field ,
35
+ SchemaMarkupField as Field ,
36
36
FormButtonGroup ,
37
37
Submit ,
38
38
Reset ,
@@ -41,19 +41,27 @@ import {
41
41
FormPath ,
42
42
FormBlock ,
43
43
FormLayout ,
44
- createFormActions
44
+ createFormActions ,
45
+ FormEffectHooks ,
46
+ createEffectHook ,
45
47
} from ' @uform/antd'
46
48
import { Button } from ' antd'
47
49
import Printer from ' @uform/printer'
48
50
import ' antd/dist/antd.css'
49
51
52
+ const { onFormInit$ , onFieldValueChange$ } = FormEffectHooks
53
+ const onSearch$ = createEffectHook (' onSearch' )
54
+ const onChangeOption$ = createEffectHook (' onChangeOption' )
55
+ const actions = createFormActions ()
56
+
50
57
const App = () => {
51
58
const [state , setState ] = useState ({ visible: false })
52
59
return (
53
60
< Printer>
54
61
< SchemaForm
62
+ actions= {actions}
55
63
effects= {($ , { setFieldState, getFieldState }) => {
56
- $ ( ' onFormInit ' ).subscribe (() => {
64
+ onFormInit$ ( ).subscribe (() => {
57
65
setFieldState (FormPath .match (' *(gg,hh)' ), state => {
58
66
state .props [' x-props' ] = state .props [' x-props' ] || {}
59
67
state .props [' x-props' ].style = {
@@ -64,14 +72,14 @@ const App = () => {
64
72
}
65
73
})
66
74
})
67
- $ ( ' onFieldValueChange ' , ' aa' ).subscribe (fieldState => {
75
+ onFieldValueChange$ ( ' aa' ).subscribe (fieldState => {
68
76
console .log (fieldState .value )
69
77
setFieldState (' bb' , state => {
70
78
state .visible = ! fieldState .value
71
79
})
72
80
})
73
81
74
- $ ( ' onFieldValueChange ' , ' cc' ).subscribe (fieldState => {
82
+ onFieldValueChange$ ( ' cc' ).subscribe (fieldState => {
75
83
setFieldState (' dd' , state => {
76
84
state .visible = ! fieldState .value
77
85
})
@@ -89,14 +97,14 @@ const App = () => {
89
97
}
90
98
})
91
99
})
92
- $ ( ' onFieldValueChange ' , ' mm' ).subscribe (fieldState => {
100
+ onFieldValueChange$ ( ' mm' ).subscribe (fieldState => {
93
101
setFieldState (' ff' , state => {
94
102
state .visible = ! fieldState .value
95
103
})
96
104
})
97
- $ ( ' onFieldValueChange ' , ' gg' )
105
+ onFieldValueChange$ ( ' gg' )
98
106
.pipe (
99
- withLatestFrom ($ ( ' onChangeOption ' )),
107
+ withLatestFrom (onChangeOption$ ( )),
100
108
map (([fieldState , { payload: option }]) => {
101
109
return {
102
110
state: fieldState,
@@ -114,7 +122,8 @@ const App = () => {
114
122
}
115
123
})
116
124
})
117
- $ (' onSearch' , ' gg' )
125
+
126
+ onSearch$ (' gg' )
118
127
.pipe (
119
128
map (fieldState => {
120
129
setFieldState (' gg' , state => {
@@ -175,7 +184,7 @@ const App = () => {
175
184
name= " gg"
176
185
type= " string"
177
186
x- effect= {dispatch => ({
178
- onChange (value , option ) {
187
+ onChange (value , option ) {
179
188
dispatch (' onChangeOption' , option)
180
189
},
181
190
onSearch (value ) {
@@ -215,26 +224,29 @@ import React from 'react'
215
224
import ReactDOM from ' react-dom'
216
225
import {
217
226
SchemaForm ,
218
- Field ,
227
+ SchemaMarkupField as Field ,
219
228
FormButtonGroup ,
220
229
Submit ,
221
230
Reset ,
222
231
FormItemGrid ,
223
232
FormCard ,
224
233
FormPath ,
225
234
FormBlock ,
226
- FormLayout
235
+ FormLayout ,
236
+ FormEffectHooks ,
227
237
} from ' @uform/next'
228
238
import { filter , withLatestFrom , map , debounceTime } from ' rxjs/operators'
229
239
import { Button } from ' @alifd/next'
230
240
import Printer from ' @uform/printer'
231
241
import ' @alifd/next/dist/next.css'
232
242
243
+ const { onFieldValueChange$ } = FormEffectHooks
244
+
233
245
const App = () => (
234
246
< Printer>
235
247
< SchemaForm
236
248
effects= {($ , { setFieldState, getFieldState }) => {
237
- $ ( ' onFieldValueChange ' , ' total' ).subscribe (({ value }) => {
249
+ onFieldValueChange$ ( ' total' ).subscribe (({ value }) => {
238
250
if (! value) return
239
251
setFieldState (' count' , state => {
240
252
const price = getFieldState (' price' , state => state .value )
@@ -247,7 +259,7 @@ const App = () => (
247
259
state .value = value / count
248
260
})
249
261
})
250
- $ ( ' onFieldValueChange ' , ' price' ).subscribe (({ value }) => {
262
+ onFieldValueChange$ ( ' price' ).subscribe (({ value }) => {
251
263
if (! value) return
252
264
setFieldState (' total' , state => {
253
265
const count = getFieldState (' count' , state => state .value )
@@ -260,7 +272,7 @@ const App = () => (
260
272
state .value = total / value
261
273
})
262
274
})
263
- $ ( ' onFieldValueChange ' , ' count' ).subscribe (({ value }) => {
275
+ onFieldValueChange$ ( ' count' ).subscribe (({ value }) => {
264
276
if (! value) return
265
277
setFieldState (' total' , state => {
266
278
const price = getFieldState (' price' , state => state .value )
@@ -305,7 +317,7 @@ import ReactDOM from 'react-dom'
305
317
import { filter , withLatestFrom , map , debounceTime } from ' rxjs/operators'
306
318
import {
307
319
SchemaForm ,
308
- Field ,
320
+ SchemaMarkupField as Field ,
309
321
FormButtonGroup ,
310
322
Submit ,
311
323
Reset ,
@@ -314,12 +326,15 @@ import {
314
326
FormPath ,
315
327
FormBlock ,
316
328
FormLayout ,
317
- createFormActions
329
+ createFormActions ,
330
+ FormEffectHooks ,
318
331
} from ' @uform/antd'
319
332
import { Button } from ' antd'
320
333
import Printer from ' @uform/printer'
321
334
import ' antd/dist/antd.css'
322
335
336
+ const { onFormInit$ , onFieldValueChange$ } = FormEffectHooks
337
+
323
338
const App = () => (
324
339
< Printer>
325
340
< SchemaForm
@@ -354,10 +369,10 @@ const App = () => (
354
369
state .value = value
355
370
})
356
371
}
357
- $ ( ' onFormInit ' ).subscribe (() => {
372
+ onFormInit$ ( ).subscribe (() => {
358
373
hide (' bb' )
359
374
})
360
- $ ( ' onFieldValueChange ' , ' aa' ).subscribe (fieldState => {
375
+ onFieldValueChange$ ( ' aa' ).subscribe (fieldState => {
361
376
if (! fieldState .value ) return
362
377
show (' bb' )
363
378
loading (' bb' )
@@ -367,7 +382,7 @@ const App = () => (
367
382
setValue (' bb' , ' 1111' )
368
383
}, 1000 )
369
384
})
370
- $ ( ' onFieldValueChange ' , ' bb' ).subscribe (fieldState => {
385
+ onFieldValueChange$ ( ' bb' ).subscribe (fieldState => {
371
386
console .log (fieldState .loading )
372
387
if (! fieldState .value ) return hide (' cc' )
373
388
show (' cc' )
@@ -411,7 +426,7 @@ import ReactDOM from 'react-dom'
411
426
import { filter , withLatestFrom , map , debounceTime } from ' rxjs/operators'
412
427
import {
413
428
SchemaForm ,
414
- Field ,
429
+ SchemaMarkupField as Field ,
415
430
FormButtonGroup ,
416
431
Submit ,
417
432
Reset ,
@@ -471,7 +486,7 @@ import ReactDOM from 'react-dom'
471
486
import { filter , withLatestFrom , map , debounceTime } from ' rxjs/operators'
472
487
import {
473
488
SchemaForm ,
474
- Field ,
489
+ SchemaMarkupField as Field ,
475
490
FormButtonGroup ,
476
491
Submit ,
477
492
Reset ,
0 commit comments