@itcase/forms 1.0.17 → 1.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/form/Field/Checkbox/Checkbox.css +19 -0
- package/dist/css/form/Field/Custom/Custom.css +3 -12
- package/dist/css/form/Field/RadioGroup/RadioGroup.css +12 -0
- package/dist/css/form/Field/Segmented/Segmented.css +12 -1
- package/dist/css/form/Field/Select/Select.css +2 -224
- package/dist/css/form/Form/Form.css +7 -17
- package/dist/css/form/Form/css/__group/form__group.css +1 -0
- package/dist/css/form/Form/css/__item/form__item_state_error.css +0 -9
- package/dist/css/form/Form/css/__item/form__item_state_success.css +5 -8
- package/dist/css/form/FormField/FormField.css +10 -5
- package/dist/itcase-forms.cjs.js +101 -36
- package/dist/itcase-forms.esm.js +101 -36
- package/package.json +1 -1
|
@@ -1,3 +1,22 @@
|
|
|
1
|
+
.form-checkbox {
|
|
2
|
+
&&_state {
|
|
3
|
+
&_success {
|
|
4
|
+
& .checkbox__state {
|
|
5
|
+
border: solid 1px var(--color-success-border-primary);
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
&_error {
|
|
9
|
+
& .checkbox__state {
|
|
10
|
+
border: solid 1px var(--color-error-border-primary);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
&_focus {
|
|
14
|
+
& .checkbox__state {
|
|
15
|
+
background: var(--color-surface-primary);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
1
20
|
.form-field {
|
|
2
21
|
&_type_checkbox {
|
|
3
22
|
display: grid;
|
|
@@ -1,14 +1,5 @@
|
|
|
1
|
-
.form-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
&_success {
|
|
5
|
-
border: solid 1px var(--color-success-border-primary);
|
|
6
|
-
}
|
|
7
|
-
&_error {
|
|
8
|
-
border: solid 1px var(--color-error-border-primary);
|
|
9
|
-
}
|
|
10
|
-
&_focus {
|
|
11
|
-
background: var(--color-surface-primary);
|
|
12
|
-
}
|
|
1
|
+
.form-field {
|
|
2
|
+
&_type_custom {
|
|
3
|
+
width: 100%;
|
|
13
4
|
}
|
|
14
5
|
}
|
|
@@ -1,3 +1,15 @@
|
|
|
1
1
|
.radiogroup {
|
|
2
2
|
border: solid 1px red;
|
|
3
3
|
}
|
|
4
|
+
.form-radio {
|
|
5
|
+
&_state_success {
|
|
6
|
+
& .radio-button__state {
|
|
7
|
+
border: solid 1px var(--color-success-border-primary);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
&_state_error {
|
|
11
|
+
& .radio-button__state {
|
|
12
|
+
border: solid 1px var(--color-error-border-primary);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -7,235 +7,13 @@
|
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
&_state_success {
|
|
10
|
-
|
|
10
|
+
& .select__control {
|
|
11
11
|
border: solid 1px var(--color-success-border-primary);
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
&_state_error {
|
|
15
|
-
|
|
15
|
+
& .select__control {
|
|
16
16
|
border: solid 1px var(--color-error-border-primary);
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
-
&__control {
|
|
20
|
-
border: solid 1px var(--color-surface-border-secondary);
|
|
21
|
-
border-radius: 6px;
|
|
22
|
-
position: relative;
|
|
23
|
-
display: flex;
|
|
24
|
-
flex-wrap: wrap;
|
|
25
|
-
justify-content: space-between;
|
|
26
|
-
align-items: center;
|
|
27
|
-
cursor: default;
|
|
28
|
-
outline: 0 !important;
|
|
29
|
-
@mixin text-m;
|
|
30
|
-
^&__value-container {
|
|
31
|
-
padding: 16px 16px;
|
|
32
|
-
position: relative;
|
|
33
|
-
overflow: hidden;
|
|
34
|
-
display: flex;
|
|
35
|
-
flex: 1;
|
|
36
|
-
flex-wrap: wrap;
|
|
37
|
-
gap: 8px;
|
|
38
|
-
align-items: center;
|
|
39
|
-
^^&__single-value {
|
|
40
|
-
color: var(--color-surface-text-primary);
|
|
41
|
-
@mixin text-m;
|
|
42
|
-
}
|
|
43
|
-
^^&__placeholder {
|
|
44
|
-
color: var(--color-surface-text-primary);
|
|
45
|
-
@mixin text-m;
|
|
46
|
-
}
|
|
47
|
-
^^&__input-container {
|
|
48
|
-
flex: 1;
|
|
49
|
-
visibility: visible;
|
|
50
|
-
@mixin text-m;
|
|
51
|
-
}
|
|
52
|
-
&--is-multi {
|
|
53
|
-
padding: 13px 24px 13px 16px;
|
|
54
|
-
@media (--mobile) {
|
|
55
|
-
padding: 13px 24px 13px 16px;
|
|
56
|
-
}
|
|
57
|
-
+ ^^^&__indicators {
|
|
58
|
-
@media (--mobile) {
|
|
59
|
-
padding: 12px 16px 0 0;
|
|
60
|
-
align-self: stretch;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
^^^&__placeholder {
|
|
64
|
-
padding: 4px 0 8px 4px;
|
|
65
|
-
}
|
|
66
|
-
^^^&__input-container {
|
|
67
|
-
padding: 4px 8px;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
^^&__multi-value {
|
|
71
|
-
background: var(--color-surface-tertiary);
|
|
72
|
-
margin: 1px;
|
|
73
|
-
border-radius: 4px;
|
|
74
|
-
position: relative;
|
|
75
|
-
display: flex;
|
|
76
|
-
gap: 4px;
|
|
77
|
-
&__label {
|
|
78
|
-
color: var(--color-surface-text-primary);
|
|
79
|
-
padding: 4px 0 4px 8px;
|
|
80
|
-
@mixin text-l 300;
|
|
81
|
-
}
|
|
82
|
-
&__remove {
|
|
83
|
-
color: var(--color-accent-item);
|
|
84
|
-
padding: 3px 8px 4px 8px;
|
|
85
|
-
cursor: pointer;
|
|
86
|
-
&:hover {
|
|
87
|
-
background: var(--color-accent-hover);
|
|
88
|
-
}
|
|
89
|
-
& svg {
|
|
90
|
-
transform: scale(1.5);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
&-count {
|
|
94
|
-
color: var(--color-surface-text-primary);
|
|
95
|
-
@mixin text-l 300;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
^&__indicators {
|
|
100
|
-
padding: 16px 16px 0 0;
|
|
101
|
-
display: flex;
|
|
102
|
-
align-items: center;
|
|
103
|
-
align-self: flex-start;
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
@media (--mobile) {
|
|
106
|
-
align-items: flex-start;
|
|
107
|
-
}
|
|
108
|
-
&-separator {
|
|
109
|
-
display: none;
|
|
110
|
-
}
|
|
111
|
-
^^&__clear-indicator {
|
|
112
|
-
color: var(--color-surface-text-primary);
|
|
113
|
-
padding: 0 8px 0 0;
|
|
114
|
-
@mixin text-m 300;
|
|
115
|
-
&::after {
|
|
116
|
-
content: 'clear';
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
^^&__dropdown-indicator {
|
|
120
|
-
width: 20px;
|
|
121
|
-
height: 20px;
|
|
122
|
-
/* background: url('/public/img/icons/chevron_xs_down.svg') 50% 50% no-repeat; */
|
|
123
|
-
@media (--mobile) {
|
|
124
|
-
margin: 2px 0 0 0;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
^^&__indicator {
|
|
128
|
-
& svg {
|
|
129
|
-
display: none;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
&__menu {
|
|
135
|
-
width: 100%;
|
|
136
|
-
background: var(--color-surface-primary);
|
|
137
|
-
margin: -8px 0 0 0;
|
|
138
|
-
border: solid 1px var(--color-surface-border-primary);
|
|
139
|
-
border-top: none;
|
|
140
|
-
position: absolute;
|
|
141
|
-
left: 0;
|
|
142
|
-
top: 100%;
|
|
143
|
-
z-index: 100000;
|
|
144
|
-
&-notice {
|
|
145
|
-
padding: 10px 48px 10px 20px;
|
|
146
|
-
&--no-options {
|
|
147
|
-
@mixin text-m;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
&-list {
|
|
151
|
-
overflow-y: scroll;
|
|
152
|
-
max-height: 200px;
|
|
153
|
-
background: var(--color-surface-primary);
|
|
154
|
-
padding: 8px 0;
|
|
155
|
-
&--is-multi {
|
|
156
|
-
@mixin text-m;
|
|
157
|
-
^^^&__option {
|
|
158
|
-
&--is-selected {
|
|
159
|
-
}
|
|
160
|
-
&--is-focused {
|
|
161
|
-
background: none !important;
|
|
162
|
-
/* display: flex;
|
|
163
|
-
justify-content: center; */
|
|
164
|
-
&:hover {
|
|
165
|
-
background: #eee;
|
|
166
|
-
cursor: pointer;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
&--is-disabled {
|
|
170
|
-
border: solid 1px red;
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
^^&__option {
|
|
175
|
-
color: var(--color-surface-text-primary);
|
|
176
|
-
padding: 16px 48px 16px 20px;
|
|
177
|
-
display: flex;
|
|
178
|
-
cursor: pointer;
|
|
179
|
-
@mixin text-m;
|
|
180
|
-
&:hover {
|
|
181
|
-
background: var(--color-surface-primary-hover);
|
|
182
|
-
}
|
|
183
|
-
&-label {
|
|
184
|
-
width: 100%;
|
|
185
|
-
position: relative;
|
|
186
|
-
display: block;
|
|
187
|
-
z-index: 100;
|
|
188
|
-
cursor: pointer;
|
|
189
|
-
}
|
|
190
|
-
&-checkbox {
|
|
191
|
-
opacity: 0%;
|
|
192
|
-
&:checked {
|
|
193
|
-
& + .form-select {
|
|
194
|
-
&__option-state {
|
|
195
|
-
&::before {
|
|
196
|
-
width: 8px;
|
|
197
|
-
height: 8px;
|
|
198
|
-
background: var(--color-surface-item-accent);
|
|
199
|
-
border-radius: 50%;
|
|
200
|
-
position: absolute;
|
|
201
|
-
content: '';
|
|
202
|
-
display: block;
|
|
203
|
-
left: 2px;
|
|
204
|
-
top: 2px;
|
|
205
|
-
z-index: 2;
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
&-state {
|
|
212
|
-
width: 14px;
|
|
213
|
-
height: 14px;
|
|
214
|
-
background: none;
|
|
215
|
-
border: solid 1px var(--color-surface-border-accent);
|
|
216
|
-
border-radius: 2px;
|
|
217
|
-
position: absolute;
|
|
218
|
-
content: '';
|
|
219
|
-
display: block;
|
|
220
|
-
left: 0;
|
|
221
|
-
top: 2px;
|
|
222
|
-
z-index: 1;
|
|
223
|
-
&:hover {
|
|
224
|
-
border: solid 1px var(--color-surface-border-accent);
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
&-text {
|
|
228
|
-
padding: 0 0 0 8px;
|
|
229
|
-
}
|
|
230
|
-
&--is-selected {
|
|
231
|
-
color: var(--color-surface-text-primary);
|
|
232
|
-
background: var(--color-surface-primary-hover);
|
|
233
|
-
}
|
|
234
|
-
&--is-focused {
|
|
235
|
-
color: var(--color-surface-text-primary);
|
|
236
|
-
background: var(--color-surface-primary-hover);
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
19
|
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
}
|
|
10
10
|
.form {
|
|
11
11
|
&__group {
|
|
12
|
+
width: 100%;
|
|
12
13
|
margin: 0;
|
|
13
14
|
&-wrapper {
|
|
14
15
|
display: flex;
|
|
@@ -77,15 +78,6 @@
|
|
|
77
78
|
.form {
|
|
78
79
|
&__item {
|
|
79
80
|
&&_state_error {
|
|
80
|
-
/* & ^&-label {
|
|
81
|
-
&-inner {
|
|
82
|
-
color: var(--color-error-text-secondary);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
& ^&-inner {
|
|
86
|
-
&-item {
|
|
87
|
-
}
|
|
88
|
-
} */
|
|
89
81
|
}
|
|
90
82
|
}
|
|
91
83
|
}
|
|
@@ -102,15 +94,12 @@
|
|
|
102
94
|
.form {
|
|
103
95
|
&__item {
|
|
104
96
|
&&_state_success {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
97
|
+
& .select__control {
|
|
98
|
+
border: 1px solid var(--color-success-border-primary);
|
|
99
|
+
}
|
|
100
|
+
& .input {
|
|
101
|
+
border: 1px solid var(--color-success-border-primary);
|
|
109
102
|
}
|
|
110
|
-
& ^&-inner {
|
|
111
|
-
&-item {
|
|
112
|
-
}
|
|
113
|
-
} */
|
|
114
103
|
}
|
|
115
104
|
}
|
|
116
105
|
}
|
|
@@ -257,6 +246,7 @@
|
|
|
257
246
|
width: 100%;
|
|
258
247
|
&__wrapper {
|
|
259
248
|
width: 100%;
|
|
249
|
+
height: 100%;
|
|
260
250
|
position: relative;
|
|
261
251
|
}
|
|
262
252
|
}
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
.form {
|
|
2
2
|
&__item {
|
|
3
3
|
&&_state_success {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
& .select__control {
|
|
5
|
+
border: 1px solid var(--color-success-border-primary);
|
|
6
|
+
}
|
|
7
|
+
& .input {
|
|
8
|
+
border: 1px solid var(--color-success-border-primary);
|
|
8
9
|
}
|
|
9
|
-
& ^&-inner {
|
|
10
|
-
&-item {
|
|
11
|
-
}
|
|
12
|
-
} */
|
|
13
10
|
}
|
|
14
11
|
}
|
|
15
12
|
}
|
|
@@ -21,16 +21,19 @@
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
.form-field {
|
|
24
|
+
position: relative;
|
|
24
25
|
}
|
|
25
26
|
.form {
|
|
26
27
|
&^&-field_type_float {
|
|
27
|
-
|
|
28
|
+
gap: var(--form-field_type_float-gap);
|
|
29
|
+
margin: var(--form-field_type_float-margin);
|
|
30
|
+
padding: var(--form-field_type_float-padding);
|
|
28
31
|
&^&__item_state_focus,
|
|
29
32
|
&^&__item_state_filled {
|
|
30
33
|
& .form {
|
|
31
34
|
&-field {
|
|
32
35
|
&__label {
|
|
33
|
-
transform: scale(0.
|
|
36
|
+
transform: scale(0.85) translate(10px, 2px);
|
|
34
37
|
}
|
|
35
38
|
}
|
|
36
39
|
}
|
|
@@ -48,14 +51,14 @@
|
|
|
48
51
|
display: flex;
|
|
49
52
|
top: 0;
|
|
50
53
|
z-index: 2;
|
|
51
|
-
transform: scale(1) translate(8px,
|
|
54
|
+
transform: scale(1) translate(8px, 20px);
|
|
52
55
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
53
56
|
transform-origin: top left;
|
|
54
57
|
background: var(--color-surface-primary);
|
|
55
58
|
padding: 0 4px;
|
|
56
59
|
}
|
|
57
60
|
&__message {
|
|
58
|
-
padding:
|
|
61
|
+
padding: 0 0 0 12px;
|
|
59
62
|
}
|
|
60
63
|
}
|
|
61
64
|
}
|
|
@@ -70,7 +73,9 @@
|
|
|
70
73
|
.form-field {
|
|
71
74
|
&_type {
|
|
72
75
|
&_normal {
|
|
73
|
-
gap: 4px;
|
|
76
|
+
gap: var(--form-field_type_normal-gap, 4px);
|
|
77
|
+
margin: var(--form-field_type_normal-margin);
|
|
78
|
+
padding: var(--form-field_type_normal-padding);
|
|
74
79
|
}
|
|
75
80
|
}
|
|
76
81
|
}
|
package/dist/itcase-forms.cjs.js
CHANGED
|
@@ -548,6 +548,7 @@ function FieldWrapperBase(props) {
|
|
|
548
548
|
metaValid = props.metaValid,
|
|
549
549
|
set = props.set,
|
|
550
550
|
type = props.type,
|
|
551
|
+
hideMessage = props.hideMessage,
|
|
551
552
|
isHidden = props.isHidden,
|
|
552
553
|
Tag = props.tag,
|
|
553
554
|
dataTour = props.dataTour,
|
|
@@ -628,7 +629,7 @@ function FieldWrapperBase(props) {
|
|
|
628
629
|
direction: dividerDirection,
|
|
629
630
|
size: dividerSize,
|
|
630
631
|
fill: dividerFill
|
|
631
|
-
})), /*#__PURE__*/React__default.default.createElement("div", {
|
|
632
|
+
})), !hideMessage && /*#__PURE__*/React__default.default.createElement("div", {
|
|
632
633
|
className: "form-field__message"
|
|
633
634
|
}, Boolean(showError) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
634
635
|
className: "form-field__message-item form-field__message-item_type-error",
|
|
@@ -741,7 +742,8 @@ var CheckboxField = /*#__PURE__*/React__default.default.memo(function CheckboxFi
|
|
|
741
742
|
onChange = props.onChange,
|
|
742
743
|
fieldProps = props.fieldProps,
|
|
743
744
|
inputProps = props.inputProps,
|
|
744
|
-
classNameGroupItem = props.classNameGroupItem
|
|
745
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
746
|
+
hideMessage = props.hideMessage;
|
|
745
747
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
746
748
|
name: name,
|
|
747
749
|
type: "checkbox"
|
|
@@ -767,7 +769,8 @@ var CheckboxField = /*#__PURE__*/React__default.default.memo(function CheckboxFi
|
|
|
767
769
|
metaSubmitFailed: meta.submitFailed,
|
|
768
770
|
metaTouched: meta.touched,
|
|
769
771
|
metaValid: meta.valid,
|
|
770
|
-
tag: "label"
|
|
772
|
+
tag: "label",
|
|
773
|
+
hideMessage: hideMessage
|
|
771
774
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Checkbox.Checkbox, Object.assign({
|
|
772
775
|
autoComplete: "nope",
|
|
773
776
|
checked: input.checked,
|
|
@@ -801,6 +804,7 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
|
|
|
801
804
|
label = props.label,
|
|
802
805
|
name = props.name,
|
|
803
806
|
messageType = props.messageType,
|
|
807
|
+
hideMessage = props.hideMessage,
|
|
804
808
|
placeholder = props.placeholder;
|
|
805
809
|
var _useForm = reactFinalForm.useForm(),
|
|
806
810
|
change = _useForm.change;
|
|
@@ -822,7 +826,8 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
|
|
|
822
826
|
metaSubmitError: meta.submitError,
|
|
823
827
|
metaSubmitFailed: meta.submitFailed,
|
|
824
828
|
metaTouched: meta.touched,
|
|
825
|
-
metaValid: meta.valid
|
|
829
|
+
metaValid: meta.valid,
|
|
830
|
+
hideMessage: hideMessage
|
|
826
831
|
}, /*#__PURE__*/React__default.default.createElement(Choice.Choice, {
|
|
827
832
|
options: options,
|
|
828
833
|
inputName: input.name,
|
|
@@ -850,7 +855,8 @@ var CustomField = /*#__PURE__*/React__default.default.memo(function CustomField(
|
|
|
850
855
|
isRequired = props.isRequired,
|
|
851
856
|
name = props.name,
|
|
852
857
|
fieldProps = props.fieldProps,
|
|
853
|
-
classNameGroupItem = props.classNameGroupItem
|
|
858
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
859
|
+
hideMessage = props.hideMessage;
|
|
854
860
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
855
861
|
name: name
|
|
856
862
|
}, function (_ref) {
|
|
@@ -868,7 +874,8 @@ var CustomField = /*#__PURE__*/React__default.default.memo(function CustomField(
|
|
|
868
874
|
metaSubmitError: meta.submitError,
|
|
869
875
|
metaSubmitFailed: meta.submitFailed,
|
|
870
876
|
metaTouched: meta.touched,
|
|
871
|
-
metaValid: meta.valid
|
|
877
|
+
metaValid: meta.valid,
|
|
878
|
+
hideMessage: hideMessage
|
|
872
879
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Component, Object.assign({}, props, {
|
|
873
880
|
input: input,
|
|
874
881
|
meta: meta
|
|
@@ -900,7 +907,8 @@ function DatePickerField(props) {
|
|
|
900
907
|
props.iconRevealableShow;
|
|
901
908
|
props.iconRevealableHide;
|
|
902
909
|
props.iconShape;
|
|
903
|
-
var
|
|
910
|
+
var hideMessage = props.hideMessage,
|
|
911
|
+
onChange = props.onChange,
|
|
904
912
|
classNameGroupItem = props.classNameGroupItem;
|
|
905
913
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
906
914
|
name: name
|
|
@@ -925,7 +933,8 @@ function DatePickerField(props) {
|
|
|
925
933
|
metaSubmitError: meta.submitError,
|
|
926
934
|
metaSubmitFailed: meta.submitFailed,
|
|
927
935
|
metaTouched: meta.touched,
|
|
928
|
-
metaValid: meta.valid
|
|
936
|
+
metaValid: meta.valid,
|
|
937
|
+
hideMessage: hideMessage
|
|
929
938
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(DatePicker.DatePickerInput, {
|
|
930
939
|
name: input.name,
|
|
931
940
|
value: input.value || '',
|
|
@@ -1479,6 +1488,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
|
|
|
1479
1488
|
hintDescriptionTextColor = props.hintDescriptionTextColor,
|
|
1480
1489
|
hintDescriptionTextWrap = props.hintDescriptionTextWrap,
|
|
1481
1490
|
hintDescriptionTextWeight = props.hintDescriptionTextWeight,
|
|
1491
|
+
hideMessage = props.hideMessage,
|
|
1482
1492
|
hintDescription = props.hintDescription,
|
|
1483
1493
|
isShowFilename = props.isShowFilename,
|
|
1484
1494
|
dropzoneProps = props.dropzoneProps,
|
|
@@ -1506,7 +1516,8 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
|
|
|
1506
1516
|
metaSubmitError: meta.submitError,
|
|
1507
1517
|
metaSubmitFailed: meta.submitFailed,
|
|
1508
1518
|
metaTouched: meta.touched,
|
|
1509
|
-
metaValid: meta.valid
|
|
1519
|
+
metaValid: meta.valid,
|
|
1520
|
+
hideMessage: hideMessage
|
|
1510
1521
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(FileInputDropzone, {
|
|
1511
1522
|
dropzoneProps: dropzoneProps,
|
|
1512
1523
|
hintDescription: hintDescription,
|
|
@@ -1579,26 +1590,67 @@ var Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
|
|
|
1579
1590
|
labelTextColor = props.labelTextColor,
|
|
1580
1591
|
labelTextSize = props.labelTextSize,
|
|
1581
1592
|
labelTextWeight = props.labelTextWeight,
|
|
1593
|
+
message = props.message,
|
|
1594
|
+
errorMessageTextSize = props.errorMessageTextSize,
|
|
1595
|
+
errorMessageTextWeight = props.errorMessageTextWeight,
|
|
1596
|
+
errorMessageTextColor = props.errorMessageTextColor,
|
|
1597
|
+
messageTextSize = props.messageTextSize,
|
|
1598
|
+
messageTextWeight = props.messageTextWeight,
|
|
1599
|
+
messageTextColor = props.messageTextColor,
|
|
1582
1600
|
children = props.children,
|
|
1583
|
-
dataTour = props.dataTour
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1601
|
+
dataTour = props.dataTour,
|
|
1602
|
+
name = props.name,
|
|
1603
|
+
showErrorsOnSubmit = props.showErrorsOnSubmit;
|
|
1604
|
+
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1605
|
+
name: name
|
|
1606
|
+
}, function (_ref) {
|
|
1607
|
+
_ref.input;
|
|
1608
|
+
var meta = _ref.meta;
|
|
1609
|
+
var error = meta.error || !meta.modifiedSinceLastSubmit && meta.submitError || false;
|
|
1610
|
+
var showError = React.useMemo(function () {
|
|
1611
|
+
if (showErrorsOnSubmit) {
|
|
1612
|
+
return meta.submitFailed && meta.touched && error;
|
|
1613
|
+
} else {
|
|
1614
|
+
return meta.touched && error;
|
|
1615
|
+
}
|
|
1616
|
+
}, [showErrorsOnSubmit, meta.submitFailed, meta.touched, error]);
|
|
1617
|
+
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
1618
|
+
className: clsx__default.default('form__group', className),
|
|
1619
|
+
"data-tour": dataTour
|
|
1620
|
+
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
1621
|
+
className: "form__group-wrapper"
|
|
1622
|
+
}, before, /*#__PURE__*/React__default.default.createElement("div", {
|
|
1623
|
+
className: "form__group-label"
|
|
1624
|
+
}, /*#__PURE__*/React__default.default.createElement(Title.Title, {
|
|
1625
|
+
textColor: labelTextColor,
|
|
1626
|
+
size: labelTextSize,
|
|
1627
|
+
textWeight: labelTextWeight
|
|
1628
|
+
}, label)), /*#__PURE__*/React__default.default.createElement("div", {
|
|
1629
|
+
className: "form__group-items"
|
|
1630
|
+
}, children), after), Boolean(showError) && /*#__PURE__*/React__default.default.createElement("div", {
|
|
1631
|
+
className: "form-field__message"
|
|
1632
|
+
}, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
1633
|
+
className: "form-field__message-item form-field__message-item_type-error",
|
|
1634
|
+
size: errorMessageTextSize,
|
|
1635
|
+
textWeight: errorMessageTextWeight,
|
|
1636
|
+
textColor: errorMessageTextColor,
|
|
1637
|
+
id: name + "-error"
|
|
1638
|
+
}, error)), Boolean(message) && !showError && /*#__PURE__*/React__default.default.createElement("div", {
|
|
1639
|
+
className: "form-field__message"
|
|
1640
|
+
}, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
1641
|
+
className: "form-field__message-item form-field__message-item_type_message",
|
|
1642
|
+
size: messageTextSize,
|
|
1643
|
+
textWeight: messageTextWeight,
|
|
1644
|
+
textColor: messageTextColor
|
|
1645
|
+
}, message)));
|
|
1646
|
+
});
|
|
1598
1647
|
});
|
|
1599
1648
|
Group.defaultProps = {
|
|
1600
1649
|
inputProps: {},
|
|
1601
|
-
fieldProps: {}
|
|
1650
|
+
fieldProps: {},
|
|
1651
|
+
type: 'normal',
|
|
1652
|
+
errorMessageTextSize: 's',
|
|
1653
|
+
errorMessageTextColor: 'errorTextSecondary'
|
|
1602
1654
|
};
|
|
1603
1655
|
Group.propTypes = {
|
|
1604
1656
|
name: PropTypes__default.default.string.isRequired,
|
|
@@ -1622,6 +1674,7 @@ var InputField = /*#__PURE__*/React__default.default.memo(function InputField(pr
|
|
|
1622
1674
|
iconRevealableShow = props.iconRevealableShow,
|
|
1623
1675
|
iconRevealableHide = props.iconRevealableHide,
|
|
1624
1676
|
iconShape = props.iconShape,
|
|
1677
|
+
hideMessage = props.hideMessage,
|
|
1625
1678
|
onChange = props.onChange,
|
|
1626
1679
|
classNameGroupItem = props.classNameGroupItem;
|
|
1627
1680
|
var _useState = React.useState(false),
|
|
@@ -1663,9 +1716,10 @@ var InputField = /*#__PURE__*/React__default.default.memo(function InputField(pr
|
|
|
1663
1716
|
metaSubmitError: meta.submitError,
|
|
1664
1717
|
metaSubmitFailed: meta.submitFailed,
|
|
1665
1718
|
metaTouched: meta.touched,
|
|
1666
|
-
metaValid: meta.valid
|
|
1719
|
+
metaValid: meta.valid,
|
|
1720
|
+
hideMessage: hideMessage
|
|
1667
1721
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
|
|
1668
|
-
className: clsx__default.default(meta.active && 'input_state_focus', meta.error && 'input_state_error'),
|
|
1722
|
+
className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && 'input_state_error'),
|
|
1669
1723
|
autoComplete: "nope",
|
|
1670
1724
|
name: input.name,
|
|
1671
1725
|
type: inputType,
|
|
@@ -1846,7 +1900,8 @@ var RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(pr
|
|
|
1846
1900
|
fieldProps = props.fieldProps,
|
|
1847
1901
|
editableProps = props.editableProps,
|
|
1848
1902
|
inputProps = props.inputProps,
|
|
1849
|
-
onChange = props.onChange
|
|
1903
|
+
onChange = props.onChange,
|
|
1904
|
+
hideMessage = props.hideMessage;
|
|
1850
1905
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1851
1906
|
name: name
|
|
1852
1907
|
}, function (_ref) {
|
|
@@ -1864,7 +1919,8 @@ var RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(pr
|
|
|
1864
1919
|
metaSubmitError: meta.submitError,
|
|
1865
1920
|
metaSubmitFailed: meta.submitFailed,
|
|
1866
1921
|
metaTouched: meta.touched,
|
|
1867
|
-
metaValid: meta.valid
|
|
1922
|
+
metaValid: meta.valid,
|
|
1923
|
+
hideMessage: hideMessage
|
|
1868
1924
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(RadioGroupList, {
|
|
1869
1925
|
input: input,
|
|
1870
1926
|
options: options,
|
|
@@ -1896,7 +1952,8 @@ function SegmentedField(props) {
|
|
|
1896
1952
|
isRequired = props.isRequired,
|
|
1897
1953
|
name = props.name,
|
|
1898
1954
|
fieldProps = props.fieldProps,
|
|
1899
|
-
inputProps = props.inputProps
|
|
1955
|
+
inputProps = props.inputProps,
|
|
1956
|
+
hideMessage = props.hideMessage;
|
|
1900
1957
|
var _useForm = reactFinalForm.useForm(),
|
|
1901
1958
|
change = _useForm.change;
|
|
1902
1959
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
@@ -1932,7 +1989,8 @@ function SegmentedField(props) {
|
|
|
1932
1989
|
metaSubmitError: meta.submitError,
|
|
1933
1990
|
metaSubmitFailed: meta.submitFailed,
|
|
1934
1991
|
metaTouched: meta.touched,
|
|
1935
|
-
metaValid: meta.valid
|
|
1992
|
+
metaValid: meta.valid,
|
|
1993
|
+
hideMessage: hideMessage
|
|
1936
1994
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Segmented.Segmented, Object.assign({
|
|
1937
1995
|
segments: options,
|
|
1938
1996
|
setActiveSegment: setActiveSegment,
|
|
@@ -1981,7 +2039,8 @@ var SelectField = /*#__PURE__*/React__default.default.memo(function SelectField(
|
|
|
1981
2039
|
selectProps = props.selectProps,
|
|
1982
2040
|
selectRef = props.selectRef,
|
|
1983
2041
|
onChange = props.onChange,
|
|
1984
|
-
classNameGroupItem = props.classNameGroupItem
|
|
2042
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2043
|
+
hideMessage = props.hideMessage;
|
|
1985
2044
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1986
2045
|
name: name
|
|
1987
2046
|
}, function (_ref) {
|
|
@@ -2029,7 +2088,8 @@ var SelectField = /*#__PURE__*/React__default.default.memo(function SelectField(
|
|
|
2029
2088
|
metaSubmitError: meta.submitError,
|
|
2030
2089
|
metaSubmitFailed: meta.submitFailed,
|
|
2031
2090
|
metaTouched: meta.touched,
|
|
2032
|
-
metaValid: meta.valid
|
|
2091
|
+
metaValid: meta.valid,
|
|
2092
|
+
hideMessage: hideMessage
|
|
2033
2093
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Select.Select, Object.assign({
|
|
2034
2094
|
className: "form-select-item",
|
|
2035
2095
|
instanceId: "id_" + input.name,
|
|
@@ -2057,7 +2117,8 @@ var SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchField(
|
|
|
2057
2117
|
onChange = props.onChange,
|
|
2058
2118
|
fieldProps = props.fieldProps,
|
|
2059
2119
|
inputProps = props.inputProps,
|
|
2060
|
-
classNameGroupItem = props.classNameGroupItem
|
|
2120
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2121
|
+
hideMessage = props.hideMessage;
|
|
2061
2122
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2062
2123
|
name: name,
|
|
2063
2124
|
type: "checkbox"
|
|
@@ -2083,6 +2144,7 @@ var SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchField(
|
|
|
2083
2144
|
metaSubmitFailed: meta.submitFailed,
|
|
2084
2145
|
metaTouched: meta.touched,
|
|
2085
2146
|
metaValid: meta.valid,
|
|
2147
|
+
hideMessage: hideMessage,
|
|
2086
2148
|
tag: "label"
|
|
2087
2149
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Switch.Switch, Object.assign({
|
|
2088
2150
|
autoComplete: "nope",
|
|
@@ -2112,7 +2174,8 @@ var TextareaField = /*#__PURE__*/React__default.default.memo(function TextareaFi
|
|
|
2112
2174
|
name = props.name,
|
|
2113
2175
|
fieldProps = props.fieldProps,
|
|
2114
2176
|
inputProps = props.inputProps,
|
|
2115
|
-
classNameGroupItem = props.classNameGroupItem
|
|
2177
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2178
|
+
hideMessage = props.hideMessage;
|
|
2116
2179
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2117
2180
|
name: name
|
|
2118
2181
|
}, function (_ref) {
|
|
@@ -2130,7 +2193,8 @@ var TextareaField = /*#__PURE__*/React__default.default.memo(function TextareaFi
|
|
|
2130
2193
|
metaSubmitError: meta.submitError,
|
|
2131
2194
|
metaSubmitFailed: meta.submitFailed,
|
|
2132
2195
|
metaTouched: meta.touched,
|
|
2133
|
-
metaValid: meta.valid
|
|
2196
|
+
metaValid: meta.valid,
|
|
2197
|
+
hideMessage: hideMessage
|
|
2134
2198
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
|
|
2135
2199
|
autoComplete: "nope",
|
|
2136
2200
|
name: input.name,
|
|
@@ -2372,6 +2436,7 @@ function generateField(field, config, props) {
|
|
|
2372
2436
|
var key = _ref[0],
|
|
2373
2437
|
value = _ref[1];
|
|
2374
2438
|
var groupProps = Object.assign({}, value, {
|
|
2439
|
+
hideMessage: field.hideMessage,
|
|
2375
2440
|
classNameGroupItem: value.classNameGroupItem || 'form__group-item'
|
|
2376
2441
|
});
|
|
2377
2442
|
return generateField(groupProps, {
|
package/dist/itcase-forms.esm.js
CHANGED
|
@@ -538,6 +538,7 @@ function FieldWrapperBase(props) {
|
|
|
538
538
|
metaValid = props.metaValid,
|
|
539
539
|
set = props.set,
|
|
540
540
|
type = props.type,
|
|
541
|
+
hideMessage = props.hideMessage,
|
|
541
542
|
isHidden = props.isHidden,
|
|
542
543
|
Tag = props.tag,
|
|
543
544
|
dataTour = props.dataTour,
|
|
@@ -618,7 +619,7 @@ function FieldWrapperBase(props) {
|
|
|
618
619
|
direction: dividerDirection,
|
|
619
620
|
size: dividerSize,
|
|
620
621
|
fill: dividerFill
|
|
621
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
622
|
+
})), !hideMessage && /*#__PURE__*/React.createElement("div", {
|
|
622
623
|
className: "form-field__message"
|
|
623
624
|
}, Boolean(showError) && /*#__PURE__*/React.createElement(Text, {
|
|
624
625
|
className: "form-field__message-item form-field__message-item_type-error",
|
|
@@ -731,7 +732,8 @@ var CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
|
|
|
731
732
|
onChange = props.onChange,
|
|
732
733
|
fieldProps = props.fieldProps,
|
|
733
734
|
inputProps = props.inputProps,
|
|
734
|
-
classNameGroupItem = props.classNameGroupItem
|
|
735
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
736
|
+
hideMessage = props.hideMessage;
|
|
735
737
|
return /*#__PURE__*/React.createElement(Field, {
|
|
736
738
|
name: name,
|
|
737
739
|
type: "checkbox"
|
|
@@ -757,7 +759,8 @@ var CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
|
|
|
757
759
|
metaSubmitFailed: meta.submitFailed,
|
|
758
760
|
metaTouched: meta.touched,
|
|
759
761
|
metaValid: meta.valid,
|
|
760
|
-
tag: "label"
|
|
762
|
+
tag: "label",
|
|
763
|
+
hideMessage: hideMessage
|
|
761
764
|
}, fieldProps), /*#__PURE__*/React.createElement(Checkbox, Object.assign({
|
|
762
765
|
autoComplete: "nope",
|
|
763
766
|
checked: input.checked,
|
|
@@ -791,6 +794,7 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
|
|
|
791
794
|
label = props.label,
|
|
792
795
|
name = props.name,
|
|
793
796
|
messageType = props.messageType,
|
|
797
|
+
hideMessage = props.hideMessage,
|
|
794
798
|
placeholder = props.placeholder;
|
|
795
799
|
var _useForm = useForm(),
|
|
796
800
|
change = _useForm.change;
|
|
@@ -812,7 +816,8 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
|
|
|
812
816
|
metaSubmitError: meta.submitError,
|
|
813
817
|
metaSubmitFailed: meta.submitFailed,
|
|
814
818
|
metaTouched: meta.touched,
|
|
815
|
-
metaValid: meta.valid
|
|
819
|
+
metaValid: meta.valid,
|
|
820
|
+
hideMessage: hideMessage
|
|
816
821
|
}, /*#__PURE__*/React.createElement(Choice, {
|
|
817
822
|
options: options,
|
|
818
823
|
inputName: input.name,
|
|
@@ -840,7 +845,8 @@ var CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
|
|
|
840
845
|
isRequired = props.isRequired,
|
|
841
846
|
name = props.name,
|
|
842
847
|
fieldProps = props.fieldProps,
|
|
843
|
-
classNameGroupItem = props.classNameGroupItem
|
|
848
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
849
|
+
hideMessage = props.hideMessage;
|
|
844
850
|
return /*#__PURE__*/React.createElement(Field, {
|
|
845
851
|
name: name
|
|
846
852
|
}, function (_ref) {
|
|
@@ -858,7 +864,8 @@ var CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
|
|
|
858
864
|
metaSubmitError: meta.submitError,
|
|
859
865
|
metaSubmitFailed: meta.submitFailed,
|
|
860
866
|
metaTouched: meta.touched,
|
|
861
|
-
metaValid: meta.valid
|
|
867
|
+
metaValid: meta.valid,
|
|
868
|
+
hideMessage: hideMessage
|
|
862
869
|
}, fieldProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
|
|
863
870
|
input: input,
|
|
864
871
|
meta: meta
|
|
@@ -890,7 +897,8 @@ function DatePickerField(props) {
|
|
|
890
897
|
props.iconRevealableShow;
|
|
891
898
|
props.iconRevealableHide;
|
|
892
899
|
props.iconShape;
|
|
893
|
-
var
|
|
900
|
+
var hideMessage = props.hideMessage,
|
|
901
|
+
onChange = props.onChange,
|
|
894
902
|
classNameGroupItem = props.classNameGroupItem;
|
|
895
903
|
return /*#__PURE__*/React.createElement(Field, {
|
|
896
904
|
name: name
|
|
@@ -915,7 +923,8 @@ function DatePickerField(props) {
|
|
|
915
923
|
metaSubmitError: meta.submitError,
|
|
916
924
|
metaSubmitFailed: meta.submitFailed,
|
|
917
925
|
metaTouched: meta.touched,
|
|
918
|
-
metaValid: meta.valid
|
|
926
|
+
metaValid: meta.valid,
|
|
927
|
+
hideMessage: hideMessage
|
|
919
928
|
}, fieldProps), /*#__PURE__*/React.createElement(DatePickerInput, {
|
|
920
929
|
name: input.name,
|
|
921
930
|
value: input.value || '',
|
|
@@ -1469,6 +1478,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
|
|
|
1469
1478
|
hintDescriptionTextColor = props.hintDescriptionTextColor,
|
|
1470
1479
|
hintDescriptionTextWrap = props.hintDescriptionTextWrap,
|
|
1471
1480
|
hintDescriptionTextWeight = props.hintDescriptionTextWeight,
|
|
1481
|
+
hideMessage = props.hideMessage,
|
|
1472
1482
|
hintDescription = props.hintDescription,
|
|
1473
1483
|
isShowFilename = props.isShowFilename,
|
|
1474
1484
|
dropzoneProps = props.dropzoneProps,
|
|
@@ -1496,7 +1506,8 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
|
|
|
1496
1506
|
metaSubmitError: meta.submitError,
|
|
1497
1507
|
metaSubmitFailed: meta.submitFailed,
|
|
1498
1508
|
metaTouched: meta.touched,
|
|
1499
|
-
metaValid: meta.valid
|
|
1509
|
+
metaValid: meta.valid,
|
|
1510
|
+
hideMessage: hideMessage
|
|
1500
1511
|
}, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
|
|
1501
1512
|
dropzoneProps: dropzoneProps,
|
|
1502
1513
|
hintDescription: hintDescription,
|
|
@@ -1569,26 +1580,67 @@ var Group = /*#__PURE__*/React.memo(function Group(props) {
|
|
|
1569
1580
|
labelTextColor = props.labelTextColor,
|
|
1570
1581
|
labelTextSize = props.labelTextSize,
|
|
1571
1582
|
labelTextWeight = props.labelTextWeight,
|
|
1583
|
+
message = props.message,
|
|
1584
|
+
errorMessageTextSize = props.errorMessageTextSize,
|
|
1585
|
+
errorMessageTextWeight = props.errorMessageTextWeight,
|
|
1586
|
+
errorMessageTextColor = props.errorMessageTextColor,
|
|
1587
|
+
messageTextSize = props.messageTextSize,
|
|
1588
|
+
messageTextWeight = props.messageTextWeight,
|
|
1589
|
+
messageTextColor = props.messageTextColor,
|
|
1572
1590
|
children = props.children,
|
|
1573
|
-
dataTour = props.dataTour
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1591
|
+
dataTour = props.dataTour,
|
|
1592
|
+
name = props.name,
|
|
1593
|
+
showErrorsOnSubmit = props.showErrorsOnSubmit;
|
|
1594
|
+
return /*#__PURE__*/React.createElement(Field, {
|
|
1595
|
+
name: name
|
|
1596
|
+
}, function (_ref) {
|
|
1597
|
+
_ref.input;
|
|
1598
|
+
var meta = _ref.meta;
|
|
1599
|
+
var error = meta.error || !meta.modifiedSinceLastSubmit && meta.submitError || false;
|
|
1600
|
+
var showError = useMemo(function () {
|
|
1601
|
+
if (showErrorsOnSubmit) {
|
|
1602
|
+
return meta.submitFailed && meta.touched && error;
|
|
1603
|
+
} else {
|
|
1604
|
+
return meta.touched && error;
|
|
1605
|
+
}
|
|
1606
|
+
}, [showErrorsOnSubmit, meta.submitFailed, meta.touched, error]);
|
|
1607
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1608
|
+
className: clsx('form__group', className),
|
|
1609
|
+
"data-tour": dataTour
|
|
1610
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1611
|
+
className: "form__group-wrapper"
|
|
1612
|
+
}, before, /*#__PURE__*/React.createElement("div", {
|
|
1613
|
+
className: "form__group-label"
|
|
1614
|
+
}, /*#__PURE__*/React.createElement(Title, {
|
|
1615
|
+
textColor: labelTextColor,
|
|
1616
|
+
size: labelTextSize,
|
|
1617
|
+
textWeight: labelTextWeight
|
|
1618
|
+
}, label)), /*#__PURE__*/React.createElement("div", {
|
|
1619
|
+
className: "form__group-items"
|
|
1620
|
+
}, children), after), Boolean(showError) && /*#__PURE__*/React.createElement("div", {
|
|
1621
|
+
className: "form-field__message"
|
|
1622
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
1623
|
+
className: "form-field__message-item form-field__message-item_type-error",
|
|
1624
|
+
size: errorMessageTextSize,
|
|
1625
|
+
textWeight: errorMessageTextWeight,
|
|
1626
|
+
textColor: errorMessageTextColor,
|
|
1627
|
+
id: name + "-error"
|
|
1628
|
+
}, error)), Boolean(message) && !showError && /*#__PURE__*/React.createElement("div", {
|
|
1629
|
+
className: "form-field__message"
|
|
1630
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
1631
|
+
className: "form-field__message-item form-field__message-item_type_message",
|
|
1632
|
+
size: messageTextSize,
|
|
1633
|
+
textWeight: messageTextWeight,
|
|
1634
|
+
textColor: messageTextColor
|
|
1635
|
+
}, message)));
|
|
1636
|
+
});
|
|
1588
1637
|
});
|
|
1589
1638
|
Group.defaultProps = {
|
|
1590
1639
|
inputProps: {},
|
|
1591
|
-
fieldProps: {}
|
|
1640
|
+
fieldProps: {},
|
|
1641
|
+
type: 'normal',
|
|
1642
|
+
errorMessageTextSize: 's',
|
|
1643
|
+
errorMessageTextColor: 'errorTextSecondary'
|
|
1592
1644
|
};
|
|
1593
1645
|
Group.propTypes = {
|
|
1594
1646
|
name: PropTypes.string.isRequired,
|
|
@@ -1612,6 +1664,7 @@ var InputField = /*#__PURE__*/React.memo(function InputField(props) {
|
|
|
1612
1664
|
iconRevealableShow = props.iconRevealableShow,
|
|
1613
1665
|
iconRevealableHide = props.iconRevealableHide,
|
|
1614
1666
|
iconShape = props.iconShape,
|
|
1667
|
+
hideMessage = props.hideMessage,
|
|
1615
1668
|
onChange = props.onChange,
|
|
1616
1669
|
classNameGroupItem = props.classNameGroupItem;
|
|
1617
1670
|
var _useState = useState(false),
|
|
@@ -1653,9 +1706,10 @@ var InputField = /*#__PURE__*/React.memo(function InputField(props) {
|
|
|
1653
1706
|
metaSubmitError: meta.submitError,
|
|
1654
1707
|
metaSubmitFailed: meta.submitFailed,
|
|
1655
1708
|
metaTouched: meta.touched,
|
|
1656
|
-
metaValid: meta.valid
|
|
1709
|
+
metaValid: meta.valid,
|
|
1710
|
+
hideMessage: hideMessage
|
|
1657
1711
|
}, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
|
|
1658
|
-
className: clsx(meta.active && 'input_state_focus', meta.error && 'input_state_error'),
|
|
1712
|
+
className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && 'input_state_error'),
|
|
1659
1713
|
autoComplete: "nope",
|
|
1660
1714
|
name: input.name,
|
|
1661
1715
|
type: inputType,
|
|
@@ -1836,7 +1890,8 @@ var RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
|
|
|
1836
1890
|
fieldProps = props.fieldProps,
|
|
1837
1891
|
editableProps = props.editableProps,
|
|
1838
1892
|
inputProps = props.inputProps,
|
|
1839
|
-
onChange = props.onChange
|
|
1893
|
+
onChange = props.onChange,
|
|
1894
|
+
hideMessage = props.hideMessage;
|
|
1840
1895
|
return /*#__PURE__*/React.createElement(Field, {
|
|
1841
1896
|
name: name
|
|
1842
1897
|
}, function (_ref) {
|
|
@@ -1854,7 +1909,8 @@ var RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
|
|
|
1854
1909
|
metaSubmitError: meta.submitError,
|
|
1855
1910
|
metaSubmitFailed: meta.submitFailed,
|
|
1856
1911
|
metaTouched: meta.touched,
|
|
1857
|
-
metaValid: meta.valid
|
|
1912
|
+
metaValid: meta.valid,
|
|
1913
|
+
hideMessage: hideMessage
|
|
1858
1914
|
}, fieldProps), /*#__PURE__*/React.createElement(RadioGroupList, {
|
|
1859
1915
|
input: input,
|
|
1860
1916
|
options: options,
|
|
@@ -1886,7 +1942,8 @@ function SegmentedField(props) {
|
|
|
1886
1942
|
isRequired = props.isRequired,
|
|
1887
1943
|
name = props.name,
|
|
1888
1944
|
fieldProps = props.fieldProps,
|
|
1889
|
-
inputProps = props.inputProps
|
|
1945
|
+
inputProps = props.inputProps,
|
|
1946
|
+
hideMessage = props.hideMessage;
|
|
1890
1947
|
var _useForm = useForm(),
|
|
1891
1948
|
change = _useForm.change;
|
|
1892
1949
|
return /*#__PURE__*/React.createElement(Field, {
|
|
@@ -1922,7 +1979,8 @@ function SegmentedField(props) {
|
|
|
1922
1979
|
metaSubmitError: meta.submitError,
|
|
1923
1980
|
metaSubmitFailed: meta.submitFailed,
|
|
1924
1981
|
metaTouched: meta.touched,
|
|
1925
|
-
metaValid: meta.valid
|
|
1982
|
+
metaValid: meta.valid,
|
|
1983
|
+
hideMessage: hideMessage
|
|
1926
1984
|
}, fieldProps), /*#__PURE__*/React.createElement(Segmented, Object.assign({
|
|
1927
1985
|
segments: options,
|
|
1928
1986
|
setActiveSegment: setActiveSegment,
|
|
@@ -1971,7 +2029,8 @@ var SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
|
|
|
1971
2029
|
selectProps = props.selectProps,
|
|
1972
2030
|
selectRef = props.selectRef,
|
|
1973
2031
|
onChange = props.onChange,
|
|
1974
|
-
classNameGroupItem = props.classNameGroupItem
|
|
2032
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2033
|
+
hideMessage = props.hideMessage;
|
|
1975
2034
|
return /*#__PURE__*/React.createElement(Field, {
|
|
1976
2035
|
name: name
|
|
1977
2036
|
}, function (_ref) {
|
|
@@ -2019,7 +2078,8 @@ var SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
|
|
|
2019
2078
|
metaSubmitError: meta.submitError,
|
|
2020
2079
|
metaSubmitFailed: meta.submitFailed,
|
|
2021
2080
|
metaTouched: meta.touched,
|
|
2022
|
-
metaValid: meta.valid
|
|
2081
|
+
metaValid: meta.valid,
|
|
2082
|
+
hideMessage: hideMessage
|
|
2023
2083
|
}, fieldProps), /*#__PURE__*/React.createElement(Select, Object.assign({
|
|
2024
2084
|
className: "form-select-item",
|
|
2025
2085
|
instanceId: "id_" + input.name,
|
|
@@ -2047,7 +2107,8 @@ var SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
|
|
|
2047
2107
|
onChange = props.onChange,
|
|
2048
2108
|
fieldProps = props.fieldProps,
|
|
2049
2109
|
inputProps = props.inputProps,
|
|
2050
|
-
classNameGroupItem = props.classNameGroupItem
|
|
2110
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2111
|
+
hideMessage = props.hideMessage;
|
|
2051
2112
|
return /*#__PURE__*/React.createElement(Field, {
|
|
2052
2113
|
name: name,
|
|
2053
2114
|
type: "checkbox"
|
|
@@ -2073,6 +2134,7 @@ var SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
|
|
|
2073
2134
|
metaSubmitFailed: meta.submitFailed,
|
|
2074
2135
|
metaTouched: meta.touched,
|
|
2075
2136
|
metaValid: meta.valid,
|
|
2137
|
+
hideMessage: hideMessage,
|
|
2076
2138
|
tag: "label"
|
|
2077
2139
|
}, fieldProps), /*#__PURE__*/React.createElement(Switch, Object.assign({
|
|
2078
2140
|
autoComplete: "nope",
|
|
@@ -2102,7 +2164,8 @@ var TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
|
|
|
2102
2164
|
name = props.name,
|
|
2103
2165
|
fieldProps = props.fieldProps,
|
|
2104
2166
|
inputProps = props.inputProps,
|
|
2105
|
-
classNameGroupItem = props.classNameGroupItem
|
|
2167
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2168
|
+
hideMessage = props.hideMessage;
|
|
2106
2169
|
return /*#__PURE__*/React.createElement(Field, {
|
|
2107
2170
|
name: name
|
|
2108
2171
|
}, function (_ref) {
|
|
@@ -2120,7 +2183,8 @@ var TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
|
|
|
2120
2183
|
metaSubmitError: meta.submitError,
|
|
2121
2184
|
metaSubmitFailed: meta.submitFailed,
|
|
2122
2185
|
metaTouched: meta.touched,
|
|
2123
|
-
metaValid: meta.valid
|
|
2186
|
+
metaValid: meta.valid,
|
|
2187
|
+
hideMessage: hideMessage
|
|
2124
2188
|
}, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
|
|
2125
2189
|
autoComplete: "nope",
|
|
2126
2190
|
name: input.name,
|
|
@@ -2362,6 +2426,7 @@ function generateField(field, config, props) {
|
|
|
2362
2426
|
var key = _ref[0],
|
|
2363
2427
|
value = _ref[1];
|
|
2364
2428
|
var groupProps = Object.assign({}, value, {
|
|
2429
|
+
hideMessage: field.hideMessage,
|
|
2365
2430
|
classNameGroupItem: value.classNameGroupItem || 'form__group-item'
|
|
2366
2431
|
});
|
|
2367
2432
|
return generateField(groupProps, {
|