@@ -10,11 +10,17 @@ import Label from 'components/Label/Label.react';
10
10
import Modal from 'components/Modal/Modal.react' ;
11
11
import React from 'react' ;
12
12
import TextInput from 'components/TextInput/TextInput.react' ;
13
+ import Checkbox from 'components/Checkbox/Checkbox.react' ;
13
14
14
15
export default class AddArrayEntryDialog extends React . Component {
15
16
constructor ( ) {
16
17
super ( ) ;
17
- this . state = { value : '' } ;
18
+ this . state = {
19
+ value : '' ,
20
+ showMismatchRow : false ,
21
+ mismatchConfirmed : false ,
22
+ parsedType : '' ,
23
+ } ;
18
24
this . inputRef = React . createRef ( ) ;
19
25
}
20
26
@@ -24,9 +30,6 @@ export default class AddArrayEntryDialog extends React.Component {
24
30
}
25
31
}
26
32
27
- valid ( ) {
28
- return this . state . value !== '' ;
29
- }
30
33
31
34
getValue ( ) {
32
35
try {
@@ -36,17 +39,66 @@ export default class AddArrayEntryDialog extends React.Component {
36
39
}
37
40
}
38
41
42
+ getType ( value ) {
43
+ if ( Array . isArray ( value ) ) {
44
+ return 'array' ;
45
+ }
46
+ if ( value === null ) {
47
+ return 'null' ;
48
+ }
49
+ return typeof value ;
50
+ }
51
+
52
+ handleConfirm ( ) {
53
+ const parsed = this . getValue ( ) ;
54
+ const entryType = this . getType ( parsed ) ;
55
+ const lastType = this . props . lastType ;
56
+
57
+ if ( lastType && entryType !== lastType ) {
58
+ if ( ! this . state . showMismatchRow ) {
59
+ this . setState (
60
+ {
61
+ showMismatchRow : true ,
62
+ mismatchConfirmed : false ,
63
+ parsedType : entryType ,
64
+ } ,
65
+ ( ) => {
66
+ if ( document . activeElement instanceof HTMLElement ) {
67
+ document . activeElement . blur ( ) ;
68
+ }
69
+ }
70
+ ) ;
71
+ return ;
72
+ }
73
+ if ( ! this . state . mismatchConfirmed ) {
74
+ return ;
75
+ }
76
+ }
77
+
78
+ this . props . onConfirm ( parsed ) ;
79
+ this . setState ( {
80
+ value : '' ,
81
+ showMismatchRow : false ,
82
+ mismatchConfirmed : false ,
83
+ parsedType : '' ,
84
+ } ) ;
85
+ }
86
+
39
87
render ( ) {
40
- return (
88
+ const confirmDisabled =
89
+ this . state . value === '' ||
90
+ ( this . state . showMismatchRow && ! this . state . mismatchConfirmed ) ;
91
+
92
+ const addEntryModal = (
41
93
< Modal
42
94
type = { Modal . Types . INFO }
43
95
icon = "plus-solid"
44
96
title = "Add entry"
45
97
confirmText = "Add Unique"
46
98
cancelText = "Cancel"
47
99
onCancel = { this . props . onCancel }
48
- onConfirm = { ( ) => this . props . onConfirm ( this . getValue ( ) ) }
49
- disabled = { ! this . valid ( ) }
100
+ onConfirm = { this . handleConfirm . bind ( this ) }
101
+ disabled = { confirmDisabled }
50
102
>
51
103
< Field
52
104
label = {
@@ -60,11 +112,39 @@ export default class AddArrayEntryDialog extends React.Component {
60
112
placeholder = { 'Enter value' }
61
113
ref = { this . inputRef }
62
114
value = { this . state . value }
63
- onChange = { value => this . setState ( { value } ) }
115
+ onChange = { value =>
116
+ this . setState ( {
117
+ value,
118
+ showMismatchRow : false ,
119
+ mismatchConfirmed : false ,
120
+ } )
121
+ }
64
122
/>
65
123
}
66
124
/>
125
+ { this . state . showMismatchRow && (
126
+ < Field
127
+ label = {
128
+ < Label
129
+ text = "⚠️ Ignore type mismatch"
130
+ description = {
131
+ < >
132
+ Previous item type is < strong > { this . props . lastType } </ strong > , new entry type is < strong > { this . state . parsedType } </ strong > .
133
+ </ >
134
+ }
135
+ />
136
+ }
137
+ input = {
138
+ < Checkbox
139
+ checked = { this . state . mismatchConfirmed }
140
+ onChange = { checked => this . setState ( { mismatchConfirmed : checked } ) }
141
+ />
142
+ }
143
+ />
144
+ ) }
67
145
</ Modal >
68
146
) ;
147
+
148
+ return addEntryModal ;
69
149
}
70
150
}
0 commit comments