@itcase/forms 1.0.78 → 1.0.80
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.
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
.form {
|
|
2
2
|
&__group {
|
|
3
3
|
width: 100%;
|
|
4
|
+
padding: var(--form-group-padding, 0);
|
|
4
5
|
margin: 0 0 12px 0;
|
|
5
6
|
&_hidden {
|
|
6
|
-
visibility: hidden;
|
|
7
|
-
display: none;
|
|
8
7
|
position: absolute;
|
|
8
|
+
display: none;
|
|
9
|
+
visibility: hidden;
|
|
9
10
|
z-index: -1;
|
|
10
11
|
}
|
|
11
12
|
&_type_row.&_hidden {
|
|
12
|
-
visibility: hidden
|
|
13
|
+
visibility: hidden;
|
|
13
14
|
}
|
|
14
15
|
&-wrapper {
|
|
15
16
|
display: flex;
|
|
@@ -31,5 +32,4 @@
|
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
|
-
|
|
35
35
|
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
.form {
|
|
2
|
+
&-maskedInput {
|
|
3
|
+
position: relative;
|
|
4
|
+
&&_state {
|
|
5
|
+
&_success {
|
|
6
|
+
& .input {
|
|
7
|
+
border: solid 1px var(--input-success-border, green);
|
|
8
|
+
&:hover {
|
|
9
|
+
border: solid 1px var(--input-success-border-hover);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
&_disabled {
|
|
14
|
+
& .input {
|
|
15
|
+
background: var(--input-disabled-background, #ececec);
|
|
16
|
+
border: solid 1px var(--input-disabled-border, #747474);
|
|
17
|
+
&:hover {
|
|
18
|
+
background: var(--input-disabled-background, #ececec);
|
|
19
|
+
border: solid 1px var(--input-disabled-border, #747474);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&_error {
|
|
25
|
+
& .input {
|
|
26
|
+
border: solid 1px var(--input-error-border);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
&_focus {
|
|
30
|
+
& .input {
|
|
31
|
+
background: var(--input-focus-background);
|
|
32
|
+
border: solid 1px var(--input-focus-border);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:root {
|
|
40
|
+
--input-success-border: var(--color-success-border-primary);
|
|
41
|
+
--input-success-border-hover: var(--color-surface-border-quaternary);
|
|
42
|
+
--input-error-border: var(--color-error-border-primary);
|
|
43
|
+
--input-focus-background: var(--color-surface-primary);
|
|
44
|
+
--input-focus-border: var(--color-surface-border-quaternary);
|
|
45
|
+
}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
&-item {
|
|
13
13
|
height: var(--form-field-helptext-height, 20px);
|
|
14
14
|
line-height: var(--form-field-helptext-line-height, 20px);
|
|
15
|
+
padding: var(--form-field-helptext-padding, 0);
|
|
15
16
|
display: block;
|
|
16
17
|
}
|
|
17
18
|
}
|
|
@@ -37,10 +38,10 @@
|
|
|
37
38
|
|
|
38
39
|
.form {
|
|
39
40
|
&^&-field_type_float {
|
|
41
|
+
padding: var(--form-field_type_float-padding);
|
|
42
|
+
margin: var(--form-field_type_float-margin);
|
|
40
43
|
position: relative;
|
|
41
44
|
gap: var(--form-field_type_float-gap);
|
|
42
|
-
margin: var(--form-field_type_float-margin);
|
|
43
|
-
padding: var(--form-field_type_float-padding);
|
|
44
45
|
&^&__item_state_focus,
|
|
45
46
|
&^&__item_state_filled {
|
|
46
47
|
& .form {
|
|
@@ -59,26 +60,26 @@
|
|
|
59
60
|
& .form {
|
|
60
61
|
&-field {
|
|
61
62
|
&__label {
|
|
62
|
-
|
|
63
|
+
background: var(--color-surface-primary);
|
|
64
|
+
padding: 0 4px;
|
|
63
65
|
position: absolute;
|
|
64
66
|
display: flex;
|
|
65
67
|
top: 0;
|
|
66
68
|
z-index: 2;
|
|
67
69
|
transform: scale(1) translate(8px, 20px);
|
|
68
70
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
71
|
+
pointer-events: none;
|
|
69
72
|
transform-origin: top left;
|
|
70
|
-
background: var(--color-surface-primary);
|
|
71
|
-
padding: 0 4px;
|
|
72
73
|
}
|
|
73
74
|
&__message {
|
|
74
|
-
padding: 0 0 0 12px;
|
|
75
|
+
padding: var(--form-field-type-float-message-padding, 0 0 0 12px);
|
|
75
76
|
}
|
|
76
77
|
}
|
|
77
78
|
}
|
|
78
79
|
& .input {
|
|
79
80
|
&::placeholder {
|
|
80
|
-
opacity: 0%;
|
|
81
81
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
82
|
+
opacity: 0%;
|
|
82
83
|
}
|
|
83
84
|
}
|
|
84
85
|
}
|
package/dist/itcase-forms.cjs.js
CHANGED
|
@@ -14,6 +14,7 @@ var useStyles = require('@itcase/ui/hooks/useStyles');
|
|
|
14
14
|
var camelCase = require('lodash/camelCase');
|
|
15
15
|
var snakeCase = require('lodash/snakeCase');
|
|
16
16
|
var Choice = require('@itcase/ui/components/Choice');
|
|
17
|
+
var Icon = require('@itcase/ui/components/Icon');
|
|
17
18
|
var Code = require('@itcase/ui/components/Code');
|
|
18
19
|
var DatePicker = require('@itcase/ui/components/DatePicker');
|
|
19
20
|
var axios = require('axios');
|
|
@@ -23,7 +24,6 @@ var reactDropzone = require('react-dropzone');
|
|
|
23
24
|
var common = require('@itcase/common');
|
|
24
25
|
var Loader = require('@itcase/ui/components/Loader');
|
|
25
26
|
var Title = require('@itcase/ui/components/Title');
|
|
26
|
-
var Icon = require('@itcase/ui/components/Icon');
|
|
27
27
|
var Input = require('@itcase/ui/components/Input');
|
|
28
28
|
var Radio = require('@itcase/ui/components/Radio');
|
|
29
29
|
var Segmented = require('@itcase/ui/components/Segmented');
|
|
@@ -49,13 +49,13 @@ var axios__default = /*#__PURE__*/_interopDefault(axios);
|
|
|
49
49
|
var castArray__default = /*#__PURE__*/_interopDefault(castArray);
|
|
50
50
|
var createDecorator__default = /*#__PURE__*/_interopDefault(createDecorator);
|
|
51
51
|
|
|
52
|
-
const phoneValidation =
|
|
52
|
+
const phoneValidation = value => {
|
|
53
53
|
if (!value) {
|
|
54
54
|
return true;
|
|
55
55
|
}
|
|
56
56
|
return libphonenumberJs.isPossiblePhoneNumber(value, 'RU');
|
|
57
57
|
};
|
|
58
|
-
const emailValidation =
|
|
58
|
+
const emailValidation = value => {
|
|
59
59
|
// from https://emailregex.com/
|
|
60
60
|
if (!value) {
|
|
61
61
|
return true;
|
|
@@ -65,6 +65,11 @@ const emailValidation = (value, context) => {
|
|
|
65
65
|
const regexp = /^[a-za-яёЁ0-9_-]+(?:\.[a-za-яёЁ0-9_-]+)*@(?:[a-za-яёЁ0-9](?:[a-za-яёЁ0-9-]*[a-za-яёЁ0-9])?\.)+[a-za-яёЁ0-9]+$/;
|
|
66
66
|
return regexp.test(String(value).toLowerCase());
|
|
67
67
|
};
|
|
68
|
+
const dateValidation = value => {
|
|
69
|
+
const valueDate = value instanceof Date ? value : new Date(value);
|
|
70
|
+
const isDateValid = !isNaN(valueDate.getTime());
|
|
71
|
+
return isDateValid;
|
|
72
|
+
};
|
|
68
73
|
const addRequiredFieldsParamToSchema = schema => {
|
|
69
74
|
const fields = Object.entries(schema.fields);
|
|
70
75
|
schema.requiredFields = fields.reduce((list, [fieldName, validationProps]) => {
|
|
@@ -126,11 +131,17 @@ function useYupValidationSchema(schema, language) {
|
|
|
126
131
|
|
|
127
132
|
function FieldWrapperBase(props) {
|
|
128
133
|
const {
|
|
134
|
+
id,
|
|
135
|
+
children,
|
|
136
|
+
isDisabled,
|
|
137
|
+
isErrorState,
|
|
138
|
+
isHidden,
|
|
139
|
+
isRequired,
|
|
140
|
+
isValidState,
|
|
129
141
|
after,
|
|
130
142
|
afterItem,
|
|
131
143
|
before,
|
|
132
144
|
beforeItem,
|
|
133
|
-
children,
|
|
134
145
|
className,
|
|
135
146
|
dataTour,
|
|
136
147
|
desc,
|
|
@@ -141,13 +152,17 @@ function FieldWrapperBase(props) {
|
|
|
141
152
|
dividerFill,
|
|
142
153
|
dividerSize,
|
|
143
154
|
dividerWidth,
|
|
155
|
+
errorKey,
|
|
156
|
+
errorMessage,
|
|
144
157
|
fieldClassName,
|
|
145
|
-
|
|
158
|
+
helpText,
|
|
159
|
+
helpTextColor,
|
|
160
|
+
helpTextColorSuccess,
|
|
161
|
+
helpTextSize,
|
|
162
|
+
helpTextSizeMobile,
|
|
163
|
+
helpTextWeight,
|
|
146
164
|
inputName,
|
|
147
165
|
inputValue,
|
|
148
|
-
isDisabled,
|
|
149
|
-
isHidden,
|
|
150
|
-
isRequired,
|
|
151
166
|
label,
|
|
152
167
|
labelHidden,
|
|
153
168
|
labelTextColor,
|
|
@@ -155,21 +170,12 @@ function FieldWrapperBase(props) {
|
|
|
155
170
|
labelTextSizeMobile,
|
|
156
171
|
labelTextSizeTablet,
|
|
157
172
|
labelTextWeight,
|
|
158
|
-
helpText,
|
|
159
|
-
helpTextSize,
|
|
160
|
-
helpTextSizeMobile,
|
|
161
|
-
helpTextWeight,
|
|
162
|
-
helpTextColor,
|
|
163
|
-
isErrorState,
|
|
164
|
-
isValidState,
|
|
165
|
-
errorMessage,
|
|
166
173
|
messageTextSize,
|
|
167
174
|
metaActive,
|
|
168
175
|
metaError,
|
|
169
176
|
set,
|
|
170
177
|
showDivider,
|
|
171
178
|
showMessage,
|
|
172
|
-
errorKey,
|
|
173
179
|
tag: Tag,
|
|
174
180
|
type
|
|
175
181
|
} = props;
|
|
@@ -241,10 +247,10 @@ function FieldWrapperBase(props) {
|
|
|
241
247
|
className: clsx__default.default('form-field__content-inner', fieldClass)
|
|
242
248
|
}, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React__default.default.createElement(Divider.Divider, {
|
|
243
249
|
className: "form-field__item-divider",
|
|
244
|
-
|
|
250
|
+
width: dividerWidth,
|
|
245
251
|
fill: dividerFill,
|
|
246
|
-
|
|
247
|
-
|
|
252
|
+
direction: dividerDirection,
|
|
253
|
+
size: dividerSize
|
|
248
254
|
})), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
|
|
249
255
|
className: "form-field__message",
|
|
250
256
|
"data-test-id": `${inputName}FieldMessage`
|
|
@@ -260,7 +266,7 @@ function FieldWrapperBase(props) {
|
|
|
260
266
|
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
261
267
|
size: helpTextSize,
|
|
262
268
|
sizeMobile: helpTextSizeMobile,
|
|
263
|
-
textColor: helpTextColor,
|
|
269
|
+
textColor: isValidState ? helpTextColorSuccess : helpTextColor,
|
|
264
270
|
textWeight: helpTextWeight
|
|
265
271
|
}, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
266
272
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
@@ -269,20 +275,24 @@ function FieldWrapperBase(props) {
|
|
|
269
275
|
}, '\u00A0')), after);
|
|
270
276
|
}
|
|
271
277
|
FieldWrapperBase.defaultProps = {
|
|
272
|
-
requiredMessageTextSize: 's',
|
|
273
|
-
requiredMessageTextColor: 'warningTextPrimary',
|
|
274
|
-
errorMessageTextSize: 's',
|
|
275
278
|
errorMessageTextColor: 'errorTextPrimary',
|
|
279
|
+
errorMessageTextSize: 's',
|
|
280
|
+
requiredMessageTextColor: 'warningTextPrimary',
|
|
281
|
+
requiredMessageTextSize: 's',
|
|
276
282
|
tag: 'div',
|
|
277
283
|
type: 'normal'
|
|
278
284
|
};
|
|
279
285
|
FieldWrapperBase.propTypes = {
|
|
286
|
+
id: PropTypes__default.default.string,
|
|
287
|
+
children: PropTypes__default.default.any,
|
|
288
|
+
isDisabled: PropTypes__default.default.bool,
|
|
289
|
+
isHidden: PropTypes__default.default.bool,
|
|
290
|
+
isRequired: PropTypes__default.default.bool,
|
|
280
291
|
after: PropTypes__default.default.any,
|
|
281
292
|
afterItem: PropTypes__default.default.any,
|
|
282
293
|
autoComplete: PropTypes__default.default.string,
|
|
283
294
|
before: PropTypes__default.default.any,
|
|
284
295
|
beforeItem: PropTypes__default.default.any,
|
|
285
|
-
children: PropTypes__default.default.any,
|
|
286
296
|
className: PropTypes__default.default.string,
|
|
287
297
|
dataTour: PropTypes__default.default.string,
|
|
288
298
|
desc: PropTypes__default.default.string,
|
|
@@ -294,15 +304,11 @@ FieldWrapperBase.propTypes = {
|
|
|
294
304
|
dividerSize: PropTypes__default.default.string,
|
|
295
305
|
dividerWidth: PropTypes__default.default.string,
|
|
296
306
|
fieldClassName: PropTypes__default.default.string,
|
|
297
|
-
id: PropTypes__default.default.string,
|
|
298
307
|
inputName: PropTypes__default.default.string,
|
|
299
308
|
inputOnBlur: PropTypes__default.default.func,
|
|
300
309
|
inputOnChange: PropTypes__default.default.func,
|
|
301
310
|
inputOnFocus: PropTypes__default.default.func,
|
|
302
311
|
inputValue: PropTypes__default.default.any,
|
|
303
|
-
isDisabled: PropTypes__default.default.bool,
|
|
304
|
-
isHidden: PropTypes__default.default.bool,
|
|
305
|
-
isRequired: PropTypes__default.default.bool,
|
|
306
312
|
itemType: PropTypes__default.default.string,
|
|
307
313
|
label: PropTypes__default.default.any,
|
|
308
314
|
labelHidden: PropTypes__default.default.bool,
|
|
@@ -659,7 +665,13 @@ const CustomField = /*#__PURE__*/React__default.default.memo(function CustomFiel
|
|
|
659
665
|
initialValue,
|
|
660
666
|
fieldProps,
|
|
661
667
|
classNameGroupItem,
|
|
662
|
-
showMessage
|
|
668
|
+
showMessage,
|
|
669
|
+
clearIcon,
|
|
670
|
+
clearIconFill,
|
|
671
|
+
clearIconFillHover,
|
|
672
|
+
clearIconShape,
|
|
673
|
+
clearIconSize,
|
|
674
|
+
onClickClearIcon
|
|
663
675
|
} = props;
|
|
664
676
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
665
677
|
initialValue: initialValue,
|
|
@@ -708,7 +720,16 @@ const CustomField = /*#__PURE__*/React__default.default.memo(function CustomFiel
|
|
|
708
720
|
input: input,
|
|
709
721
|
isDisabled: isDisabled,
|
|
710
722
|
meta: meta
|
|
711
|
-
}))
|
|
723
|
+
})), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
|
|
724
|
+
className: "form-field__icon",
|
|
725
|
+
iconFill: clearIconFill,
|
|
726
|
+
iconFillHover: clearIconFillHover,
|
|
727
|
+
imageSrc: clearIcon,
|
|
728
|
+
shape: clearIconShape,
|
|
729
|
+
size: clearIconSize,
|
|
730
|
+
SvgImage: clearIcon,
|
|
731
|
+
onClick: onClickClearIcon
|
|
732
|
+
}));
|
|
712
733
|
});
|
|
713
734
|
});
|
|
714
735
|
CustomField.defaultProps = {
|
|
@@ -1567,6 +1588,14 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
|
|
|
1567
1588
|
isRequired,
|
|
1568
1589
|
isRevealable,
|
|
1569
1590
|
classNameGroupItem,
|
|
1591
|
+
// dataTestId,
|
|
1592
|
+
// iconBorder,
|
|
1593
|
+
// iconBorderHover,
|
|
1594
|
+
clearIcon,
|
|
1595
|
+
clearIconFill,
|
|
1596
|
+
clearIconFillHover,
|
|
1597
|
+
clearIconShape,
|
|
1598
|
+
clearIconSize,
|
|
1570
1599
|
fieldProps,
|
|
1571
1600
|
iconFill,
|
|
1572
1601
|
iconFillHover,
|
|
@@ -1579,10 +1608,8 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
|
|
|
1579
1608
|
name,
|
|
1580
1609
|
parse,
|
|
1581
1610
|
showMessage,
|
|
1582
|
-
onChange
|
|
1583
|
-
|
|
1584
|
-
// iconBorder,
|
|
1585
|
-
// iconBorderHover,
|
|
1611
|
+
onChange,
|
|
1612
|
+
onClickClearIcon
|
|
1586
1613
|
} = props;
|
|
1587
1614
|
const [isRevealed, setIsRevealed] = React.useState(false);
|
|
1588
1615
|
const inputType = React.useMemo(() => {
|
|
@@ -1665,6 +1692,15 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
|
|
|
1665
1692
|
size: iconSize,
|
|
1666
1693
|
SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
|
|
1667
1694
|
onClick: onClickIconReveal
|
|
1695
|
+
}), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
|
|
1696
|
+
className: "form-field__icon",
|
|
1697
|
+
iconFill: clearIconFill,
|
|
1698
|
+
iconFillHover: clearIconFillHover,
|
|
1699
|
+
imageSrc: clearIcon,
|
|
1700
|
+
shape: clearIconShape,
|
|
1701
|
+
size: clearIconSize,
|
|
1702
|
+
SvgImage: clearIcon,
|
|
1703
|
+
onClick: onClickClearIcon
|
|
1668
1704
|
}));
|
|
1669
1705
|
});
|
|
1670
1706
|
});
|
|
@@ -2032,7 +2068,7 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
|
|
|
2032
2068
|
fieldProps,
|
|
2033
2069
|
initialValue,
|
|
2034
2070
|
name,
|
|
2035
|
-
options,
|
|
2071
|
+
options = [],
|
|
2036
2072
|
selectProps,
|
|
2037
2073
|
selectRef,
|
|
2038
2074
|
showMessage,
|
|
@@ -2057,8 +2093,8 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
|
|
|
2057
2093
|
const optionsValues = getDefaultValue(options, input.value);
|
|
2058
2094
|
if (!optionsValues.length && input.value?.length) {
|
|
2059
2095
|
optionsValues.push({
|
|
2060
|
-
|
|
2061
|
-
|
|
2096
|
+
label: input.value,
|
|
2097
|
+
value: input.value
|
|
2062
2098
|
});
|
|
2063
2099
|
}
|
|
2064
2100
|
return optionsValues;
|
|
@@ -2088,8 +2124,8 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
|
|
|
2088
2124
|
meta: meta
|
|
2089
2125
|
});
|
|
2090
2126
|
const updatedSelectProps = useValidationAppearanceInputProps({
|
|
2091
|
-
|
|
2092
|
-
|
|
2127
|
+
inputProps: selectProps,
|
|
2128
|
+
validationStateKey: isErrorState ? errorKey : 'success'
|
|
2093
2129
|
});
|
|
2094
2130
|
return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
|
|
2095
2131
|
className: clsx__default.default('form-field_type_select', 'form__item_type_select', classNameGroupItem),
|
|
@@ -2098,33 +2134,33 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
|
|
|
2098
2134
|
fieldClassName: 'form-select',
|
|
2099
2135
|
inputName: input.name,
|
|
2100
2136
|
inputValue: input.value,
|
|
2137
|
+
metaActive: meta.active,
|
|
2138
|
+
metaError: meta.error,
|
|
2139
|
+
showMessage: showMessage,
|
|
2101
2140
|
isDisabled: isDisabled,
|
|
2102
2141
|
isErrorState: isErrorState,
|
|
2103
2142
|
isRequired: isRequired,
|
|
2104
|
-
isValidState: isValidState
|
|
2105
|
-
metaActive: meta.active,
|
|
2106
|
-
metaError: meta.error,
|
|
2107
|
-
showMessage: showMessage
|
|
2143
|
+
isValidState: isValidState
|
|
2108
2144
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Select.Select, Object.assign({
|
|
2109
2145
|
className: "form-select-item",
|
|
2146
|
+
ref: selectRef,
|
|
2110
2147
|
instanceId: `id_${input.name}`,
|
|
2111
|
-
isDisabled: isDisabled,
|
|
2112
2148
|
options: options,
|
|
2113
|
-
ref: selectRef,
|
|
2114
2149
|
value: selectedOptions,
|
|
2150
|
+
isDisabled: isDisabled,
|
|
2115
2151
|
onChange: onChangeValue,
|
|
2116
2152
|
onInputChange: onInputChange
|
|
2117
2153
|
}, updatedSelectProps)));
|
|
2118
2154
|
});
|
|
2119
2155
|
});
|
|
2120
2156
|
SelectField.propTypes = {
|
|
2121
|
-
name: PropTypes__default.default.string.isRequired,
|
|
2122
|
-
classNameGroupItem: PropTypes__default.default.string,
|
|
2123
|
-
fieldProps: PropTypes__default.default.object,
|
|
2124
2157
|
isDisabled: PropTypes__default.default.bool,
|
|
2125
2158
|
isRequired: PropTypes__default.default.bool,
|
|
2159
|
+
classNameGroupItem: PropTypes__default.default.string,
|
|
2160
|
+
fieldProps: PropTypes__default.default.object,
|
|
2126
2161
|
label: PropTypes__default.default.any,
|
|
2127
2162
|
messageType: PropTypes__default.default.string,
|
|
2163
|
+
name: PropTypes__default.default.string.isRequired,
|
|
2128
2164
|
options: PropTypes__default.default.array,
|
|
2129
2165
|
selectProps: PropTypes__default.default.object,
|
|
2130
2166
|
selectRef: PropTypes__default.default.any,
|
|
@@ -2306,7 +2342,13 @@ const MaskedInputField = /*#__PURE__*/React__default.default.memo(function Maske
|
|
|
2306
2342
|
showMessage,
|
|
2307
2343
|
inputProps,
|
|
2308
2344
|
optionsMask,
|
|
2309
|
-
unmasked
|
|
2345
|
+
unmasked,
|
|
2346
|
+
clearIcon,
|
|
2347
|
+
clearIconFill,
|
|
2348
|
+
clearIconFillHover,
|
|
2349
|
+
clearIconShape,
|
|
2350
|
+
clearIconSize,
|
|
2351
|
+
onClickClearIcon
|
|
2310
2352
|
} = props;
|
|
2311
2353
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2312
2354
|
initialValue: initialValue,
|
|
@@ -2373,7 +2415,16 @@ const MaskedInputField = /*#__PURE__*/React__default.default.memo(function Maske
|
|
|
2373
2415
|
value: value,
|
|
2374
2416
|
onBlur: input.onBlur,
|
|
2375
2417
|
onFocus: input.onFocus
|
|
2376
|
-
}, updatedInputProps))
|
|
2418
|
+
}, updatedInputProps)), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
|
|
2419
|
+
className: "form-field__icon",
|
|
2420
|
+
iconFill: clearIconFill,
|
|
2421
|
+
iconFillHover: clearIconFillHover,
|
|
2422
|
+
imageSrc: clearIcon,
|
|
2423
|
+
shape: clearIconShape,
|
|
2424
|
+
size: clearIconSize,
|
|
2425
|
+
SvgImage: clearIcon,
|
|
2426
|
+
onClick: onClickClearIcon
|
|
2427
|
+
}));
|
|
2377
2428
|
});
|
|
2378
2429
|
});
|
|
2379
2430
|
MaskedInputField.defaultProps = {
|
|
@@ -3243,6 +3294,7 @@ exports.SelectField = SelectField;
|
|
|
3243
3294
|
exports.Switch = SwitchField;
|
|
3244
3295
|
exports.Textarea = TextareaField;
|
|
3245
3296
|
exports.addRequiredFieldsParamToSchema = addRequiredFieldsParamToSchema;
|
|
3297
|
+
exports.dateValidation = dateValidation;
|
|
3246
3298
|
exports.emailValidation = emailValidation;
|
|
3247
3299
|
exports.focusOnError = focusOnError;
|
|
3248
3300
|
exports.focusOnErrorDecorator = focusOnErrorDecorator;
|
package/dist/itcase-forms.esm.js
CHANGED
|
@@ -13,6 +13,7 @@ import { useStyles } from '@itcase/ui/hooks/useStyles';
|
|
|
13
13
|
import camelCase from 'lodash/camelCase';
|
|
14
14
|
import snakeCase from 'lodash/snakeCase';
|
|
15
15
|
import { Choice } from '@itcase/ui/components/Choice';
|
|
16
|
+
import { Icon } from '@itcase/ui/components/Icon';
|
|
16
17
|
import { Code } from '@itcase/ui/components/Code';
|
|
17
18
|
import { DatePickerInput } from '@itcase/ui/components/DatePicker';
|
|
18
19
|
import axios from 'axios';
|
|
@@ -22,7 +23,6 @@ import { useDropzone, ErrorCode } from 'react-dropzone';
|
|
|
22
23
|
import { createFileFromDataURL } from '@itcase/common';
|
|
23
24
|
import { Loader } from '@itcase/ui/components/Loader';
|
|
24
25
|
import { Title } from '@itcase/ui/components/Title';
|
|
25
|
-
import { Icon } from '@itcase/ui/components/Icon';
|
|
26
26
|
import { Input } from '@itcase/ui/components/Input';
|
|
27
27
|
import { Radio } from '@itcase/ui/components/Radio';
|
|
28
28
|
import { Segmented } from '@itcase/ui/components/Segmented';
|
|
@@ -37,13 +37,13 @@ import { NotificationItem } from '@itcase/ui/components/Notification';
|
|
|
37
37
|
import createDecorator from 'final-form-focus';
|
|
38
38
|
import { getProblemFromError, NETWORK_ERROR, CONNECTION_ERROR } from 'apisauce';
|
|
39
39
|
|
|
40
|
-
const phoneValidation =
|
|
40
|
+
const phoneValidation = value => {
|
|
41
41
|
if (!value) {
|
|
42
42
|
return true;
|
|
43
43
|
}
|
|
44
44
|
return isPossiblePhoneNumber(value, 'RU');
|
|
45
45
|
};
|
|
46
|
-
const emailValidation =
|
|
46
|
+
const emailValidation = value => {
|
|
47
47
|
// from https://emailregex.com/
|
|
48
48
|
if (!value) {
|
|
49
49
|
return true;
|
|
@@ -53,6 +53,11 @@ const emailValidation = (value, context) => {
|
|
|
53
53
|
const regexp = /^[a-za-яёЁ0-9_-]+(?:\.[a-za-яёЁ0-9_-]+)*@(?:[a-za-яёЁ0-9](?:[a-za-яёЁ0-9-]*[a-za-яёЁ0-9])?\.)+[a-za-яёЁ0-9]+$/;
|
|
54
54
|
return regexp.test(String(value).toLowerCase());
|
|
55
55
|
};
|
|
56
|
+
const dateValidation = value => {
|
|
57
|
+
const valueDate = value instanceof Date ? value : new Date(value);
|
|
58
|
+
const isDateValid = !isNaN(valueDate.getTime());
|
|
59
|
+
return isDateValid;
|
|
60
|
+
};
|
|
56
61
|
const addRequiredFieldsParamToSchema = schema => {
|
|
57
62
|
const fields = Object.entries(schema.fields);
|
|
58
63
|
schema.requiredFields = fields.reduce((list, [fieldName, validationProps]) => {
|
|
@@ -114,11 +119,17 @@ function useYupValidationSchema(schema, language) {
|
|
|
114
119
|
|
|
115
120
|
function FieldWrapperBase(props) {
|
|
116
121
|
const {
|
|
122
|
+
id,
|
|
123
|
+
children,
|
|
124
|
+
isDisabled,
|
|
125
|
+
isErrorState,
|
|
126
|
+
isHidden,
|
|
127
|
+
isRequired,
|
|
128
|
+
isValidState,
|
|
117
129
|
after,
|
|
118
130
|
afterItem,
|
|
119
131
|
before,
|
|
120
132
|
beforeItem,
|
|
121
|
-
children,
|
|
122
133
|
className,
|
|
123
134
|
dataTour,
|
|
124
135
|
desc,
|
|
@@ -129,13 +140,17 @@ function FieldWrapperBase(props) {
|
|
|
129
140
|
dividerFill,
|
|
130
141
|
dividerSize,
|
|
131
142
|
dividerWidth,
|
|
143
|
+
errorKey,
|
|
144
|
+
errorMessage,
|
|
132
145
|
fieldClassName,
|
|
133
|
-
|
|
146
|
+
helpText,
|
|
147
|
+
helpTextColor,
|
|
148
|
+
helpTextColorSuccess,
|
|
149
|
+
helpTextSize,
|
|
150
|
+
helpTextSizeMobile,
|
|
151
|
+
helpTextWeight,
|
|
134
152
|
inputName,
|
|
135
153
|
inputValue,
|
|
136
|
-
isDisabled,
|
|
137
|
-
isHidden,
|
|
138
|
-
isRequired,
|
|
139
154
|
label,
|
|
140
155
|
labelHidden,
|
|
141
156
|
labelTextColor,
|
|
@@ -143,21 +158,12 @@ function FieldWrapperBase(props) {
|
|
|
143
158
|
labelTextSizeMobile,
|
|
144
159
|
labelTextSizeTablet,
|
|
145
160
|
labelTextWeight,
|
|
146
|
-
helpText,
|
|
147
|
-
helpTextSize,
|
|
148
|
-
helpTextSizeMobile,
|
|
149
|
-
helpTextWeight,
|
|
150
|
-
helpTextColor,
|
|
151
|
-
isErrorState,
|
|
152
|
-
isValidState,
|
|
153
|
-
errorMessage,
|
|
154
161
|
messageTextSize,
|
|
155
162
|
metaActive,
|
|
156
163
|
metaError,
|
|
157
164
|
set,
|
|
158
165
|
showDivider,
|
|
159
166
|
showMessage,
|
|
160
|
-
errorKey,
|
|
161
167
|
tag: Tag,
|
|
162
168
|
type
|
|
163
169
|
} = props;
|
|
@@ -229,10 +235,10 @@ function FieldWrapperBase(props) {
|
|
|
229
235
|
className: clsx('form-field__content-inner', fieldClass)
|
|
230
236
|
}, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React.createElement(Divider, {
|
|
231
237
|
className: "form-field__item-divider",
|
|
232
|
-
|
|
238
|
+
width: dividerWidth,
|
|
233
239
|
fill: dividerFill,
|
|
234
|
-
|
|
235
|
-
|
|
240
|
+
direction: dividerDirection,
|
|
241
|
+
size: dividerSize
|
|
236
242
|
})), showMessage && /*#__PURE__*/React.createElement("div", {
|
|
237
243
|
className: "form-field__message",
|
|
238
244
|
"data-test-id": `${inputName}FieldMessage`
|
|
@@ -248,7 +254,7 @@ function FieldWrapperBase(props) {
|
|
|
248
254
|
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
249
255
|
size: helpTextSize,
|
|
250
256
|
sizeMobile: helpTextSizeMobile,
|
|
251
|
-
textColor: helpTextColor,
|
|
257
|
+
textColor: isValidState ? helpTextColorSuccess : helpTextColor,
|
|
252
258
|
textWeight: helpTextWeight
|
|
253
259
|
}, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
|
|
254
260
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
@@ -257,20 +263,24 @@ function FieldWrapperBase(props) {
|
|
|
257
263
|
}, '\u00A0')), after);
|
|
258
264
|
}
|
|
259
265
|
FieldWrapperBase.defaultProps = {
|
|
260
|
-
requiredMessageTextSize: 's',
|
|
261
|
-
requiredMessageTextColor: 'warningTextPrimary',
|
|
262
|
-
errorMessageTextSize: 's',
|
|
263
266
|
errorMessageTextColor: 'errorTextPrimary',
|
|
267
|
+
errorMessageTextSize: 's',
|
|
268
|
+
requiredMessageTextColor: 'warningTextPrimary',
|
|
269
|
+
requiredMessageTextSize: 's',
|
|
264
270
|
tag: 'div',
|
|
265
271
|
type: 'normal'
|
|
266
272
|
};
|
|
267
273
|
FieldWrapperBase.propTypes = {
|
|
274
|
+
id: PropTypes.string,
|
|
275
|
+
children: PropTypes.any,
|
|
276
|
+
isDisabled: PropTypes.bool,
|
|
277
|
+
isHidden: PropTypes.bool,
|
|
278
|
+
isRequired: PropTypes.bool,
|
|
268
279
|
after: PropTypes.any,
|
|
269
280
|
afterItem: PropTypes.any,
|
|
270
281
|
autoComplete: PropTypes.string,
|
|
271
282
|
before: PropTypes.any,
|
|
272
283
|
beforeItem: PropTypes.any,
|
|
273
|
-
children: PropTypes.any,
|
|
274
284
|
className: PropTypes.string,
|
|
275
285
|
dataTour: PropTypes.string,
|
|
276
286
|
desc: PropTypes.string,
|
|
@@ -282,15 +292,11 @@ FieldWrapperBase.propTypes = {
|
|
|
282
292
|
dividerSize: PropTypes.string,
|
|
283
293
|
dividerWidth: PropTypes.string,
|
|
284
294
|
fieldClassName: PropTypes.string,
|
|
285
|
-
id: PropTypes.string,
|
|
286
295
|
inputName: PropTypes.string,
|
|
287
296
|
inputOnBlur: PropTypes.func,
|
|
288
297
|
inputOnChange: PropTypes.func,
|
|
289
298
|
inputOnFocus: PropTypes.func,
|
|
290
299
|
inputValue: PropTypes.any,
|
|
291
|
-
isDisabled: PropTypes.bool,
|
|
292
|
-
isHidden: PropTypes.bool,
|
|
293
|
-
isRequired: PropTypes.bool,
|
|
294
300
|
itemType: PropTypes.string,
|
|
295
301
|
label: PropTypes.any,
|
|
296
302
|
labelHidden: PropTypes.bool,
|
|
@@ -647,7 +653,13 @@ const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
|
|
|
647
653
|
initialValue,
|
|
648
654
|
fieldProps,
|
|
649
655
|
classNameGroupItem,
|
|
650
|
-
showMessage
|
|
656
|
+
showMessage,
|
|
657
|
+
clearIcon,
|
|
658
|
+
clearIconFill,
|
|
659
|
+
clearIconFillHover,
|
|
660
|
+
clearIconShape,
|
|
661
|
+
clearIconSize,
|
|
662
|
+
onClickClearIcon
|
|
651
663
|
} = props;
|
|
652
664
|
return /*#__PURE__*/React.createElement(Field, {
|
|
653
665
|
initialValue: initialValue,
|
|
@@ -696,7 +708,16 @@ const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
|
|
|
696
708
|
input: input,
|
|
697
709
|
isDisabled: isDisabled,
|
|
698
710
|
meta: meta
|
|
699
|
-
}))
|
|
711
|
+
})), clearIcon && /*#__PURE__*/React.createElement(Icon, {
|
|
712
|
+
className: "form-field__icon",
|
|
713
|
+
iconFill: clearIconFill,
|
|
714
|
+
iconFillHover: clearIconFillHover,
|
|
715
|
+
imageSrc: clearIcon,
|
|
716
|
+
shape: clearIconShape,
|
|
717
|
+
size: clearIconSize,
|
|
718
|
+
SvgImage: clearIcon,
|
|
719
|
+
onClick: onClickClearIcon
|
|
720
|
+
}));
|
|
700
721
|
});
|
|
701
722
|
});
|
|
702
723
|
CustomField.defaultProps = {
|
|
@@ -1555,6 +1576,14 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
|
|
|
1555
1576
|
isRequired,
|
|
1556
1577
|
isRevealable,
|
|
1557
1578
|
classNameGroupItem,
|
|
1579
|
+
// dataTestId,
|
|
1580
|
+
// iconBorder,
|
|
1581
|
+
// iconBorderHover,
|
|
1582
|
+
clearIcon,
|
|
1583
|
+
clearIconFill,
|
|
1584
|
+
clearIconFillHover,
|
|
1585
|
+
clearIconShape,
|
|
1586
|
+
clearIconSize,
|
|
1558
1587
|
fieldProps,
|
|
1559
1588
|
iconFill,
|
|
1560
1589
|
iconFillHover,
|
|
@@ -1567,10 +1596,8 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
|
|
|
1567
1596
|
name,
|
|
1568
1597
|
parse,
|
|
1569
1598
|
showMessage,
|
|
1570
|
-
onChange
|
|
1571
|
-
|
|
1572
|
-
// iconBorder,
|
|
1573
|
-
// iconBorderHover,
|
|
1599
|
+
onChange,
|
|
1600
|
+
onClickClearIcon
|
|
1574
1601
|
} = props;
|
|
1575
1602
|
const [isRevealed, setIsRevealed] = useState(false);
|
|
1576
1603
|
const inputType = useMemo(() => {
|
|
@@ -1653,6 +1680,15 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
|
|
|
1653
1680
|
size: iconSize,
|
|
1654
1681
|
SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
|
|
1655
1682
|
onClick: onClickIconReveal
|
|
1683
|
+
}), clearIcon && /*#__PURE__*/React.createElement(Icon, {
|
|
1684
|
+
className: "form-field__icon",
|
|
1685
|
+
iconFill: clearIconFill,
|
|
1686
|
+
iconFillHover: clearIconFillHover,
|
|
1687
|
+
imageSrc: clearIcon,
|
|
1688
|
+
shape: clearIconShape,
|
|
1689
|
+
size: clearIconSize,
|
|
1690
|
+
SvgImage: clearIcon,
|
|
1691
|
+
onClick: onClickClearIcon
|
|
1656
1692
|
}));
|
|
1657
1693
|
});
|
|
1658
1694
|
});
|
|
@@ -2020,7 +2056,7 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
|
|
|
2020
2056
|
fieldProps,
|
|
2021
2057
|
initialValue,
|
|
2022
2058
|
name,
|
|
2023
|
-
options,
|
|
2059
|
+
options = [],
|
|
2024
2060
|
selectProps,
|
|
2025
2061
|
selectRef,
|
|
2026
2062
|
showMessage,
|
|
@@ -2045,8 +2081,8 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
|
|
|
2045
2081
|
const optionsValues = getDefaultValue(options, input.value);
|
|
2046
2082
|
if (!optionsValues.length && input.value?.length) {
|
|
2047
2083
|
optionsValues.push({
|
|
2048
|
-
|
|
2049
|
-
|
|
2084
|
+
label: input.value,
|
|
2085
|
+
value: input.value
|
|
2050
2086
|
});
|
|
2051
2087
|
}
|
|
2052
2088
|
return optionsValues;
|
|
@@ -2076,8 +2112,8 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
|
|
|
2076
2112
|
meta: meta
|
|
2077
2113
|
});
|
|
2078
2114
|
const updatedSelectProps = useValidationAppearanceInputProps({
|
|
2079
|
-
|
|
2080
|
-
|
|
2115
|
+
inputProps: selectProps,
|
|
2116
|
+
validationStateKey: isErrorState ? errorKey : 'success'
|
|
2081
2117
|
});
|
|
2082
2118
|
return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
|
|
2083
2119
|
className: clsx('form-field_type_select', 'form__item_type_select', classNameGroupItem),
|
|
@@ -2086,33 +2122,33 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
|
|
|
2086
2122
|
fieldClassName: 'form-select',
|
|
2087
2123
|
inputName: input.name,
|
|
2088
2124
|
inputValue: input.value,
|
|
2125
|
+
metaActive: meta.active,
|
|
2126
|
+
metaError: meta.error,
|
|
2127
|
+
showMessage: showMessage,
|
|
2089
2128
|
isDisabled: isDisabled,
|
|
2090
2129
|
isErrorState: isErrorState,
|
|
2091
2130
|
isRequired: isRequired,
|
|
2092
|
-
isValidState: isValidState
|
|
2093
|
-
metaActive: meta.active,
|
|
2094
|
-
metaError: meta.error,
|
|
2095
|
-
showMessage: showMessage
|
|
2131
|
+
isValidState: isValidState
|
|
2096
2132
|
}, fieldProps), /*#__PURE__*/React.createElement(Select, Object.assign({
|
|
2097
2133
|
className: "form-select-item",
|
|
2134
|
+
ref: selectRef,
|
|
2098
2135
|
instanceId: `id_${input.name}`,
|
|
2099
|
-
isDisabled: isDisabled,
|
|
2100
2136
|
options: options,
|
|
2101
|
-
ref: selectRef,
|
|
2102
2137
|
value: selectedOptions,
|
|
2138
|
+
isDisabled: isDisabled,
|
|
2103
2139
|
onChange: onChangeValue,
|
|
2104
2140
|
onInputChange: onInputChange
|
|
2105
2141
|
}, updatedSelectProps)));
|
|
2106
2142
|
});
|
|
2107
2143
|
});
|
|
2108
2144
|
SelectField.propTypes = {
|
|
2109
|
-
name: PropTypes.string.isRequired,
|
|
2110
|
-
classNameGroupItem: PropTypes.string,
|
|
2111
|
-
fieldProps: PropTypes.object,
|
|
2112
2145
|
isDisabled: PropTypes.bool,
|
|
2113
2146
|
isRequired: PropTypes.bool,
|
|
2147
|
+
classNameGroupItem: PropTypes.string,
|
|
2148
|
+
fieldProps: PropTypes.object,
|
|
2114
2149
|
label: PropTypes.any,
|
|
2115
2150
|
messageType: PropTypes.string,
|
|
2151
|
+
name: PropTypes.string.isRequired,
|
|
2116
2152
|
options: PropTypes.array,
|
|
2117
2153
|
selectProps: PropTypes.object,
|
|
2118
2154
|
selectRef: PropTypes.any,
|
|
@@ -2294,7 +2330,13 @@ const MaskedInputField = /*#__PURE__*/React.memo(function MaskedInputField(props
|
|
|
2294
2330
|
showMessage,
|
|
2295
2331
|
inputProps,
|
|
2296
2332
|
optionsMask,
|
|
2297
|
-
unmasked
|
|
2333
|
+
unmasked,
|
|
2334
|
+
clearIcon,
|
|
2335
|
+
clearIconFill,
|
|
2336
|
+
clearIconFillHover,
|
|
2337
|
+
clearIconShape,
|
|
2338
|
+
clearIconSize,
|
|
2339
|
+
onClickClearIcon
|
|
2298
2340
|
} = props;
|
|
2299
2341
|
return /*#__PURE__*/React.createElement(Field, {
|
|
2300
2342
|
initialValue: initialValue,
|
|
@@ -2361,7 +2403,16 @@ const MaskedInputField = /*#__PURE__*/React.memo(function MaskedInputField(props
|
|
|
2361
2403
|
value: value,
|
|
2362
2404
|
onBlur: input.onBlur,
|
|
2363
2405
|
onFocus: input.onFocus
|
|
2364
|
-
}, updatedInputProps))
|
|
2406
|
+
}, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
|
|
2407
|
+
className: "form-field__icon",
|
|
2408
|
+
iconFill: clearIconFill,
|
|
2409
|
+
iconFillHover: clearIconFillHover,
|
|
2410
|
+
imageSrc: clearIcon,
|
|
2411
|
+
shape: clearIconShape,
|
|
2412
|
+
size: clearIconSize,
|
|
2413
|
+
SvgImage: clearIcon,
|
|
2414
|
+
onClick: onClickClearIcon
|
|
2415
|
+
}));
|
|
2365
2416
|
});
|
|
2366
2417
|
});
|
|
2367
2418
|
MaskedInputField.defaultProps = {
|
|
@@ -3199,4 +3250,4 @@ const getErrorsForFinalForm = errorData => {
|
|
|
3199
3250
|
return formErrors;
|
|
3200
3251
|
};
|
|
3201
3252
|
|
|
3202
|
-
export { CheckboxField as Checkbox, ChipsField, ChoiceField, CodeField, CustomField, DEFAULT_MESSAGES_FIELDS, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, MaskedInputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
|
|
3253
|
+
export { CheckboxField as Checkbox, ChipsField, ChoiceField, CodeField, CustomField, DEFAULT_MESSAGES_FIELDS, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, MaskedInputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, dateValidation, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/forms",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.80",
|
|
4
4
|
"description": "Forms fields, inputs, etc.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,41 +30,38 @@
|
|
|
30
30
|
"registry": "https://registry.npmjs.org/"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@itcase/common": "^1.2.
|
|
34
|
-
"@itcase/
|
|
35
|
-
"
|
|
33
|
+
"@itcase/common": "^1.2.19",
|
|
34
|
+
"@itcase/config": "^1.0.26",
|
|
35
|
+
"@itcase/ui": "^1.3.36",
|
|
36
|
+
"axios": "^1.8.4",
|
|
36
37
|
"clsx": "^2.1.1",
|
|
37
38
|
"final-form": "^4.20.10",
|
|
38
39
|
"final-form-focus": "^1.1.2",
|
|
39
|
-
"libphonenumber-js": "^1.
|
|
40
|
+
"libphonenumber-js": "^1.12.6",
|
|
40
41
|
"lodash": "^4.17.21",
|
|
41
|
-
"luxon": "^3.
|
|
42
|
-
"postcss": "^8.5.1",
|
|
42
|
+
"luxon": "^3.6.1",
|
|
43
43
|
"prop-types": "^15.8.1",
|
|
44
44
|
"react": "^18.3.1",
|
|
45
45
|
"react-date-range": "^2.0.1",
|
|
46
|
-
"react-datepicker": "^
|
|
46
|
+
"react-datepicker": "^8.2.1",
|
|
47
47
|
"react-dom": "^18.3.1",
|
|
48
|
-
"react-dropzone": "^14.3.
|
|
48
|
+
"react-dropzone": "^14.3.8",
|
|
49
49
|
"react-final-form": "^6.5.9",
|
|
50
50
|
"react-imask": "^7.6.1",
|
|
51
|
-
"react-select": "^5.
|
|
51
|
+
"react-select": "^5.10.1"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@itcase/lint": "^1.0.
|
|
55
|
-
"@babel/core": "^7.26.
|
|
56
|
-
"@babel/eslint-parser": "^7.
|
|
57
|
-
"@babel/preset-env": "^7.26.
|
|
54
|
+
"@itcase/lint": "^1.0.49",
|
|
55
|
+
"@babel/core": "^7.26.10",
|
|
56
|
+
"@babel/eslint-parser": "^7.27.0",
|
|
57
|
+
"@babel/preset-env": "^7.26.9",
|
|
58
58
|
"@babel/preset-react": "^7.26.3",
|
|
59
|
-
"@commitlint/cli": "^19.
|
|
60
|
-
"@commitlint/config-conventional": "^19.
|
|
61
|
-
"@eslint/compat": "^1.2.5",
|
|
62
|
-
"@eslint/eslintrc": "^3.2.0",
|
|
63
|
-
"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
|
|
59
|
+
"@commitlint/cli": "^19.8.0",
|
|
60
|
+
"@commitlint/config-conventional": "^19.8.0",
|
|
64
61
|
"@rollup/plugin-babel": "^6.0.4",
|
|
65
|
-
"@rollup/plugin-commonjs": "^28.0.
|
|
62
|
+
"@rollup/plugin-commonjs": "^28.0.3",
|
|
66
63
|
"@rollup/plugin-json": "^6.1.0",
|
|
67
|
-
"@rollup/plugin-node-resolve": "^16.0.
|
|
64
|
+
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
68
65
|
"@rollup/plugin-terser": "^0.4.4",
|
|
69
66
|
"@semantic-release/changelog": "^6.0.3",
|
|
70
67
|
"@semantic-release/git": "^10.0.1",
|
|
@@ -74,50 +71,15 @@
|
|
|
74
71
|
"babel-plugin-inline-react-svg": "^2.0.2",
|
|
75
72
|
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
|
|
76
73
|
"conventional-changelog-conventionalcommits": "^8.0.0",
|
|
77
|
-
"eslint": "9.
|
|
78
|
-
"eslint-config-prettier": "10.0.1",
|
|
79
|
-
"eslint-config-standard": "17.1.0",
|
|
80
|
-
"eslint-plugin-babel": "5.3.1",
|
|
81
|
-
"eslint-plugin-import": "2.31.0",
|
|
82
|
-
"eslint-plugin-n": "17.15.1",
|
|
83
|
-
"eslint-plugin-node": "11.1.0",
|
|
84
|
-
"eslint-plugin-prettier": "5.2.3",
|
|
85
|
-
"eslint-plugin-promise": "7.2.1",
|
|
86
|
-
"eslint-plugin-react": "7.37.4",
|
|
87
|
-
"eslint-plugin-react-hooks": "5.1.0",
|
|
88
|
-
"eslint-plugin-standard": "5.0.0",
|
|
74
|
+
"eslint": "9.23.0",
|
|
89
75
|
"husky": "^9.1.7",
|
|
90
|
-
"lint-staged": "^15.
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
"postcss-combine-duplicated-selectors": "^10.0.3",
|
|
95
|
-
"postcss-dark-theme-class": "^1.3.0",
|
|
96
|
-
"postcss-discard-duplicates": "^7.0.1",
|
|
97
|
-
"postcss-each": "^1.1.0",
|
|
98
|
-
"postcss-easings": "^4.0.0",
|
|
99
|
-
"postcss-extend-rule": "^4.0.0",
|
|
100
|
-
"postcss-flexbugs-fixes": "^5.0.2",
|
|
101
|
-
"postcss-hexrgba": "^2.1.0",
|
|
102
|
-
"postcss-import": "^16.1.0",
|
|
103
|
-
"postcss-import-ext-glob": "^2.1.1",
|
|
104
|
-
"postcss-mixins": "^11.0.3",
|
|
105
|
-
"postcss-nested": "^7.0.2",
|
|
106
|
-
"postcss-nested-ancestors": "^3.0.0",
|
|
107
|
-
"postcss-normalize": "^13.0.1",
|
|
108
|
-
"postcss-prepend-imports": "^1.0.1",
|
|
109
|
-
"postcss-preset-env": "^10.1.3",
|
|
110
|
-
"postcss-pxtorem": "^6.1.0",
|
|
111
|
-
"postcss-responsive-type": "github:ITCase/postcss-responsive-type",
|
|
112
|
-
"postcss-sort-media-queries": "^5.2.0",
|
|
113
|
-
"prettier": "3.4.2",
|
|
114
|
-
"rollup": "^4.31.0",
|
|
76
|
+
"lint-staged": "^15.5.0",
|
|
77
|
+
"postcss": "^8.5.3",
|
|
78
|
+
"prettier": "3.5.3",
|
|
79
|
+
"rollup": "^4.38.0",
|
|
115
80
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
116
|
-
"semantic-release": "^24.2.
|
|
117
|
-
"stylelint": "^16.
|
|
118
|
-
"
|
|
119
|
-
"stylelint-no-unsupported-browser-features": "^8.0.2",
|
|
120
|
-
"stylelint-order": "^6.0.4",
|
|
121
|
-
"typescript": "^5.7.3"
|
|
81
|
+
"semantic-release": "^24.2.3",
|
|
82
|
+
"stylelint": "^16.17.0",
|
|
83
|
+
"typescript": "^5.8.2"
|
|
122
84
|
}
|
|
123
85
|
}
|