@@ -17,6 +17,7 @@ type Prop = {
17
17
data ?: any ;
18
18
onFinish ?: ( value ?: any ) => void ;
19
19
onSwitch ?: ( onShow : ( ) => void , onClose : ( ) => void ) => void ;
20
+ onVisible ?: ( visible : boolean ) => void ;
20
21
} ;
21
22
interface EditColumnsType < T > extends ColumnsType < T > {
22
23
editorConfig : {
@@ -33,6 +34,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
33
34
data = [ ] ,
34
35
onFinish,
35
36
onSwitch,
37
+ onVisible,
36
38
} ) => {
37
39
const [ form ] = Form . useForm ( ) ;
38
40
const { visible, onShow, onClose } = useVisible ( { defaultVisible : true } ) ;
@@ -50,18 +52,22 @@ export const AddNodesEdges: React.FC<Prop> = ({
50
52
useEffect ( ( ) => {
51
53
onSwitch ?.( onShow , onClose ) ;
52
54
} , [ ] ) ;
55
+ useEffect ( ( ) => {
56
+ onVisible ?.( visible ) ;
57
+ } , [ visible ] ) ;
58
+
53
59
const propertyList = ( ) => {
54
60
const attrPropertyNames = map (
55
- filter ( attrList , ( attr ) => ! attr . optional ) ,
56
- ( item ) => item . name
61
+ filter ( attrList , attr => ! attr . optional ) ,
62
+ item => item . name ,
57
63
) ;
58
- const indexPropertyNames = map ( configList , ( item ) => item . propertyName ) ;
64
+ const indexPropertyNames = map ( configList , item => item . propertyName ) ;
59
65
return map (
60
66
filter (
61
67
xor ( attrPropertyNames , indexPropertyNames ) ,
62
- ( item ) => item !== undefined
68
+ item => item !== undefined ,
63
69
) ,
64
- ( item ) => ( { label : item , value : item } )
70
+ item => ( { label : item , value : item } ) ,
65
71
) ;
66
72
} ;
67
73
const addButton = ( handleAdd ?: ( ) => void , text : string = '添加属性' ) => {
@@ -87,7 +93,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
87
93
return {
88
94
inputType : EditType . SELECT ,
89
95
prop : {
90
- options : map ( data . nodes , ( item ) => ( {
96
+ options : map ( data . nodes , item => ( {
91
97
label : item . labelName ,
92
98
value : item . labelName ,
93
99
} ) ) ,
@@ -104,7 +110,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
104
110
return {
105
111
inputType : EditType . SELECT ,
106
112
prop : {
107
- options : map ( data . nodes , ( item ) => ( {
113
+ options : map ( data . nodes , item => ( {
108
114
label : item . labelName ,
109
115
value : item . labelName ,
110
116
} ) ) ,
@@ -120,9 +126,9 @@ export const AddNodesEdges: React.FC<Prop> = ({
120
126
< Popconfirm
121
127
title = "确定要删除吗?"
122
128
onConfirm = { ( ) => {
123
- updateState ( ( draft ) => {
129
+ updateState ( draft => {
124
130
draft . startList = [
125
- ...startList . filter ( ( item ) => item . id !== record ?. id ) ,
131
+ ...startList . filter ( item => item . id !== record ?. id ) ,
126
132
] ;
127
133
} ) ;
128
134
} }
@@ -194,9 +200,9 @@ export const AddNodesEdges: React.FC<Prop> = ({
194
200
< Popconfirm
195
201
title = "确定要删除吗?"
196
202
onConfirm = { ( ) => {
197
- updateState ( ( draft ) => {
203
+ updateState ( draft => {
198
204
draft . attrList = [
199
- ...attrList . filter ( ( item ) => item . id !== record ?. id ) ,
205
+ ...attrList . filter ( item => item . id !== record ?. id ) ,
200
206
] ;
201
207
} ) ;
202
208
} }
@@ -294,9 +300,9 @@ export const AddNodesEdges: React.FC<Prop> = ({
294
300
< Popconfirm
295
301
title = "确定要删除吗?"
296
302
onConfirm = { ( ) => {
297
- updateState ( ( draft ) => {
303
+ updateState ( draft => {
298
304
draft . configList = [
299
- ...configList . filter ( ( item ) => item . id !== record ?. id ) ,
305
+ ...configList . filter ( item => item . id !== record ?. id ) ,
300
306
] ;
301
307
} ) ;
302
308
} }
@@ -309,14 +315,14 @@ export const AddNodesEdges: React.FC<Prop> = ({
309
315
} ,
310
316
] ;
311
317
const addNodeAttr = ( ) => {
312
- updateState ( ( draft ) => {
318
+ updateState ( draft => {
313
319
const list = [ ...attrList ] ;
314
320
list . push ( { id : attrList . length + 1 } ) ;
315
321
draft . attrList = [ ...list ] ;
316
322
} ) ;
317
323
} ;
318
324
const addNodeConfig = ( ) => {
319
- updateState ( ( draft ) => {
325
+ updateState ( draft => {
320
326
const list = [ ...configList ] ;
321
327
list . push ( {
322
328
id : configList . length + 1 ,
@@ -326,7 +332,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
326
332
} ) ;
327
333
} ;
328
334
const addEdge = ( ) => {
329
- updateState ( ( draft ) => {
335
+ updateState ( draft => {
330
336
const list = [ ...startList ] ;
331
337
list . push ( { id : `${ startList . length + 1 } ` } ) ;
332
338
draft . startList = [ ...list ] ;
@@ -347,7 +353,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
347
353
onClick = { ( ) => {
348
354
onClose ( ) ;
349
355
form . resetFields ( ) ;
350
- updateState ( ( draft ) => {
356
+ updateState ( draft => {
351
357
draft . startList = [ ] ;
352
358
draft . configList = [ ] ;
353
359
draft . attrList = [ ] ;
@@ -359,7 +365,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
359
365
< Button
360
366
onClick = { ( ) => {
361
367
const isEdgeRepeat =
362
- uniq ( map ( startList , ( item ) => `${ item . source } _${ item . target } ` ) )
368
+ uniq ( map ( startList , item => `${ item . source } _${ item . target } ` ) )
363
369
. length === startList . length ;
364
370
if ( ! isEdgeRepeat ) {
365
371
return message . error ( '两条边的起点和终点不能相同' ) ;
@@ -375,7 +381,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
375
381
} ,
376
382
indexs : configList ,
377
383
properties : attrList ,
378
- edgeConstraints : map ( startList , ( item ) => {
384
+ edgeConstraints : map ( startList , item => {
379
385
return [ item . source , item . target ] ;
380
386
} ) ,
381
387
} ) ;
@@ -391,7 +397,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
391
397
< div className = { styles [ `${ PUBLIC_PERFIX_CLASS } -container-header` ] } >
392
398
< span > 添加{ `${ isNode ? '点' : '边' } ` } 类型</ span >
393
399
< div >
394
- 命令行建模
400
+ < span style = { { marginRight : 4 } } > 命令行建模</ span >
395
401
< a href = "https://tugraph.antgroup.com/doc" target = "_blank" >
396
402
参见文档
397
403
</ a >
@@ -409,12 +415,12 @@ export const AddNodesEdges: React.FC<Prop> = ({
409
415
var reg = new RegExp ( '^[a-zA-Z0-9_\u4e00-\u9fa5]+$' ) ;
410
416
if ( ! value ) {
411
417
return Promise . reject (
412
- `请填写${ isNode ? '点' : '边' } 类型名称!`
418
+ `请填写${ isNode ? '点' : '边' } 类型名称!` ,
413
419
) ;
414
420
}
415
421
if ( ! reg . test ( value ) ) {
416
422
return Promise . reject (
417
- '名称由中文、字母、数字、下划线组成。'
423
+ '名称由中文、字母、数字、下划线组成。' ,
418
424
) ;
419
425
} else {
420
426
return Promise . resolve ( ) ;
@@ -426,6 +432,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
426
432
< Input
427
433
autoComplete = "off"
428
434
placeholder = { `请输入${ isNode ? '点' : '边' } 类型名称` }
435
+ className = { styles [ `${ PUBLIC_PERFIX_CLASS } -container-name` ] }
429
436
/>
430
437
</ Form . Item >
431
438
</ Form >
@@ -434,11 +441,13 @@ export const AddNodesEdges: React.FC<Prop> = ({
434
441
属性列表
435
442
</ p >
436
443
< EditTable
444
+ // className={styles[`${PUBLIC_PERFIX_CLASS}-container-attributes`]}
445
+ // style={{ background: 'red' }}
437
446
columns = { defaultColumns }
438
447
dataSource = { attrList }
439
448
rowKey = "id"
440
- onChange = { ( newData ) => {
441
- updateState ( ( draft ) => {
449
+ onChange = { newData => {
450
+ updateState ( draft => {
442
451
draft . attrList = [ ...( newData || [ ] ) ] ;
443
452
} ) ;
444
453
} }
@@ -460,9 +469,9 @@ export const AddNodesEdges: React.FC<Prop> = ({
460
469
rowKey = "id"
461
470
bordered
462
471
pagination = { false }
463
- onChange = { ( newData ) => {
464
- updateState ( ( draft ) => {
465
- draft . startList = map ( [ ...newData ] , ( item ) => ( {
472
+ onChange = { newData => {
473
+ updateState ( draft => {
474
+ draft . startList = map ( [ ...newData ] , item => ( {
466
475
...item ,
467
476
label : form . getFieldValue ( 'name' ) ,
468
477
style : { label : { value : form . getFieldValue ( 'name' ) } } ,
@@ -485,8 +494,8 @@ export const AddNodesEdges: React.FC<Prop> = ({
485
494
columns = { nodeConfigColumns }
486
495
dataSource = { configList }
487
496
rowKey = "id"
488
- onChange = { ( newData ) => {
489
- updateState ( ( draft ) => {
497
+ onChange = { newData => {
498
+ updateState ( draft => {
490
499
draft . configList = [ ...newData ] ;
491
500
} ) ;
492
501
} }
0 commit comments