@invoicebox/ui 0.1.0-alpha.312 → 0.1.0-alpha.313
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/components/form/Autocomplete/components/Autocomplete/index.js +6 -6
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.js +4 -4
- package/dist/components/form/DateInput/index.js +4 -4
- package/dist/components/form/DateTimeInput/index.js +4 -4
- package/dist/components/form/PhoneInput/index.js +6 -6
- package/dist/components/form/PositiveIntegerInput/index.js +4 -4
- package/dist/components/form/SearchInput/index.js +4 -4
- package/dist/components/form/Select/components/Input/index.js +4 -4
- package/dist/components/form/Select/index.js +2 -1
- package/dist/components/form/TextInput/index.js +4 -4
- package/dist/components/form/_hooks/useInputStyles.d.ts +2 -1
- package/dist/components/form/_hooks/useInputStyles.js +11 -9
- package/dist/esm/components/form/Autocomplete/components/Autocomplete/index.js +6 -6
- package/dist/esm/components/form/CurrencyInput/CoreCurrencyInput/index.js +4 -4
- package/dist/esm/components/form/DateInput/index.js +4 -4
- package/dist/esm/components/form/DateTimeInput/index.js +4 -4
- package/dist/esm/components/form/PhoneInput/index.js +6 -6
- package/dist/esm/components/form/PositiveIntegerInput/index.js +4 -4
- package/dist/esm/components/form/SearchInput/index.js +4 -4
- package/dist/esm/components/form/Select/components/Input/index.js +4 -4
- package/dist/esm/components/form/Select/index.js +2 -1
- package/dist/esm/components/form/TextInput/index.js +4 -4
- package/dist/esm/components/form/_hooks/useInputStyles.js +11 -9
- package/package.json +1 -1
|
@@ -57,8 +57,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
57
57
|
inputMaxLength = _ref.inputMaxLength,
|
|
58
58
|
_ref$isInputOnlyNumbe = _ref.isInputOnlyNumbers,
|
|
59
59
|
isInputOnlyNumbers = _ref$isInputOnlyNumbe === void 0 ? false : _ref$isInputOnlyNumbe,
|
|
60
|
-
|
|
61
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
60
|
+
size = _ref.size,
|
|
62
61
|
autoFocus = _ref.autoFocus,
|
|
63
62
|
_ref$required = _ref.required,
|
|
64
63
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
@@ -103,7 +102,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
103
102
|
inputLabel = _useInputStyles.inputLabel,
|
|
104
103
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
105
104
|
isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder,
|
|
106
|
-
modernInputPlaceholder = _useInputStyles.modernInputPlaceholder
|
|
105
|
+
modernInputPlaceholder = _useInputStyles.modernInputPlaceholder,
|
|
106
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
107
107
|
var handleOpen = (0, _react.useCallback)(function () {
|
|
108
108
|
return setIsOpen(true);
|
|
109
109
|
}, []);
|
|
@@ -188,13 +188,13 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
188
188
|
disabled: disabled,
|
|
189
189
|
required: required,
|
|
190
190
|
useModernStyles: useModernStyles,
|
|
191
|
-
size:
|
|
191
|
+
size: fieldSize,
|
|
192
192
|
left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - _constants2.LABEL_PADDING : undefined
|
|
193
193
|
}, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
|
|
194
194
|
visible: !isHideModernPlaceholder,
|
|
195
195
|
paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
|
|
196
|
-
paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
197
|
-
size:
|
|
196
|
+
paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
|
|
197
|
+
size: fieldSize,
|
|
198
198
|
required: required
|
|
199
199
|
}, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
|
|
200
200
|
ref: ref,
|
|
@@ -13,8 +13,7 @@ var _useInputStyles2 = require("../../_hooks/useInputStyles");
|
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
14
|
var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_ref) {
|
|
15
15
|
var label = _ref.label,
|
|
16
|
-
|
|
17
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
16
|
+
size = _ref.size,
|
|
18
17
|
_ref$hasError = _ref.hasError,
|
|
19
18
|
hasError = _ref$hasError === void 0 ? false : _ref$hasError,
|
|
20
19
|
value = _ref.value,
|
|
@@ -48,14 +47,15 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
|
|
|
48
47
|
}),
|
|
49
48
|
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
50
49
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
51
|
-
inputLabel = _useInputStyles.inputLabel
|
|
50
|
+
inputLabel = _useInputStyles.inputLabel,
|
|
51
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
52
52
|
return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
|
|
53
53
|
inFocus: inFocus,
|
|
54
54
|
label: inputLabel,
|
|
55
55
|
disabled: disabled,
|
|
56
56
|
required: required,
|
|
57
57
|
useModernStyles: useModernStyles,
|
|
58
|
-
size:
|
|
58
|
+
size: fieldSize
|
|
59
59
|
}, /*#__PURE__*/_react["default"].createElement(_styles.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_styles.StyledCurrencyInputFromLibrary, {
|
|
60
60
|
$palette: palette,
|
|
61
61
|
$hasBorder: !useModernStyles,
|
|
@@ -39,8 +39,7 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
|
|
|
39
39
|
label = _ref.label,
|
|
40
40
|
minDate = _ref.minDate,
|
|
41
41
|
maxDate = _ref.maxDate,
|
|
42
|
-
|
|
43
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
42
|
+
size = _ref.size,
|
|
44
43
|
dropdownProps = _ref.dropdownProps,
|
|
45
44
|
placeholder = _ref.placeholder,
|
|
46
45
|
_ref$useModernStyles = _ref.useModernStyles,
|
|
@@ -92,7 +91,8 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
|
|
|
92
91
|
}),
|
|
93
92
|
inputLabel = _useInputStyles.inputLabel,
|
|
94
93
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
95
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
94
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
95
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
96
96
|
(0, _react.useEffect)(function () {
|
|
97
97
|
if (stringValue && value === resetValue) {
|
|
98
98
|
setStringValue('');
|
|
@@ -123,7 +123,7 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
|
|
|
123
123
|
inFocus: inFocus,
|
|
124
124
|
label: inputLabel,
|
|
125
125
|
useModernStyles: useModernStyles,
|
|
126
|
-
size:
|
|
126
|
+
size: fieldSize,
|
|
127
127
|
required: required
|
|
128
128
|
}, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
|
|
129
129
|
onClick: handleTrigger,
|
|
@@ -41,8 +41,7 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
|
|
|
41
41
|
label = _ref.label,
|
|
42
42
|
minDate = _ref.minDate,
|
|
43
43
|
maxDate = _ref.maxDate,
|
|
44
|
-
|
|
45
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
44
|
+
size = _ref.size,
|
|
46
45
|
dropdownProps = _ref.dropdownProps,
|
|
47
46
|
placeholder = _ref.placeholder,
|
|
48
47
|
saveLabel = _ref.saveLabel,
|
|
@@ -103,7 +102,8 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
|
|
|
103
102
|
}),
|
|
104
103
|
inputLabel = _useInputStyles.inputLabel,
|
|
105
104
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
106
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
105
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
106
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
107
107
|
var handleStringValueChange = (0, _react.useCallback)(function (event) {
|
|
108
108
|
setStringValue(event.target.value);
|
|
109
109
|
}, [setStringValue]);
|
|
@@ -151,7 +151,7 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
|
|
|
151
151
|
label: inputLabel,
|
|
152
152
|
required: required,
|
|
153
153
|
useModernStyles: useModernStyles,
|
|
154
|
-
size:
|
|
154
|
+
size: fieldSize
|
|
155
155
|
}, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
|
|
156
156
|
onClick: handleTrigger,
|
|
157
157
|
ref: inputRef,
|
|
@@ -43,8 +43,7 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
|
|
|
43
43
|
countries = _ref.countries,
|
|
44
44
|
onCountryChange = _ref.onCountryChange,
|
|
45
45
|
pureInputProps = _ref.pureInputProps,
|
|
46
|
-
|
|
47
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
46
|
+
size = _ref.size,
|
|
48
47
|
autoFocus = _ref.autoFocus,
|
|
49
48
|
_ref$isSupportCityRus = _ref.isSupportCityRusPhoneNumber,
|
|
50
49
|
isSupportCityRusPhoneNumber = _ref$isSupportCityRus === void 0 ? false : _ref$isSupportCityRus,
|
|
@@ -102,7 +101,8 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
|
|
|
102
101
|
}),
|
|
103
102
|
inputLabel = _useInputStyles.inputLabel,
|
|
104
103
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
105
|
-
isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder
|
|
104
|
+
isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder,
|
|
105
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
106
106
|
var handleChangeCountry = (0, _react.useCallback)(function (countryCode) {
|
|
107
107
|
setCountry(countryCode);
|
|
108
108
|
if (onCountryChange) {
|
|
@@ -191,13 +191,13 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
|
|
|
191
191
|
disabled: disabled,
|
|
192
192
|
required: required,
|
|
193
193
|
useModernStyles: useModernStyles,
|
|
194
|
-
size:
|
|
194
|
+
size: fieldSize,
|
|
195
195
|
left: isHaveSelectCountries && useModernStyles ? 65 : undefined
|
|
196
196
|
}, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
|
|
197
197
|
visible: !isHideModernPlaceholder,
|
|
198
198
|
paddingLeft: isHaveSelectCountries ? 75 : 18,
|
|
199
|
-
paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
200
|
-
size:
|
|
199
|
+
paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
|
|
200
|
+
size: fieldSize,
|
|
201
201
|
required: required
|
|
202
202
|
}, modernPlaceholderText), !!(countrySelectOptions !== null && countrySelectOptions !== void 0 && countrySelectOptions.length) && /*#__PURE__*/_react["default"].createElement(S.InputLabelFloatWrapper, null, /*#__PURE__*/_react["default"].createElement(S.CountrySelectWrapper, null, /*#__PURE__*/_react["default"].createElement(_CountrySelect.CountrySelect, {
|
|
203
203
|
minWidth: isMobile ? '100%' : '350px',
|
|
@@ -32,8 +32,7 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
|
|
|
32
32
|
onFocus = _ref.onFocus,
|
|
33
33
|
onBlur = _ref.onBlur,
|
|
34
34
|
name = _ref.name,
|
|
35
|
-
|
|
36
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
35
|
+
size = _ref.size,
|
|
37
36
|
_ref$useModernStyles = _ref.useModernStyles,
|
|
38
37
|
useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
|
|
39
38
|
var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
|
|
@@ -53,7 +52,8 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
|
|
|
53
52
|
}),
|
|
54
53
|
inputLabel = _useInputStyles.inputLabel,
|
|
55
54
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
56
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
55
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
56
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
57
57
|
var filters = (0, _useFilters.useFilters)({
|
|
58
58
|
max: max
|
|
59
59
|
});
|
|
@@ -86,7 +86,7 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
|
|
|
86
86
|
inFocus: inFocus,
|
|
87
87
|
label: inputLabel,
|
|
88
88
|
useModernStyles: useModernStyles,
|
|
89
|
-
size:
|
|
89
|
+
size: fieldSize
|
|
90
90
|
}, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
|
|
91
91
|
name: name,
|
|
92
92
|
hasError: hasError,
|
|
@@ -28,8 +28,7 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
|
|
|
28
28
|
autoFocus = _ref.autoFocus,
|
|
29
29
|
isOnlyNumbers = _ref.isOnlyNumbers,
|
|
30
30
|
maxLength = _ref.maxLength,
|
|
31
|
-
|
|
32
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
31
|
+
size = _ref.size,
|
|
33
32
|
_ref$useModernStyles = _ref.useModernStyles,
|
|
34
33
|
useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
|
|
35
34
|
var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
|
|
@@ -51,7 +50,8 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
|
|
|
51
50
|
}),
|
|
52
51
|
inputLabel = _useInputStyles.inputLabel,
|
|
53
52
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
54
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
53
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
54
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
55
55
|
var handleInputReset = (0, _react.useCallback)(function () {
|
|
56
56
|
onChange('');
|
|
57
57
|
}, [onChange]);
|
|
@@ -60,7 +60,7 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
|
|
|
60
60
|
}, [onChange]);
|
|
61
61
|
return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
|
|
62
62
|
useModernStyles: useModernStyles,
|
|
63
|
-
size:
|
|
63
|
+
size: fieldSize,
|
|
64
64
|
label: useModernStyles ? inputLabel : undefined
|
|
65
65
|
}, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
|
|
66
66
|
ref: ref,
|
|
@@ -28,8 +28,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
|
|
|
28
28
|
label = _ref.label,
|
|
29
29
|
isOpen = _ref.isOpen,
|
|
30
30
|
onReset = _ref.onReset,
|
|
31
|
-
|
|
32
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
31
|
+
size = _ref.size,
|
|
33
32
|
onClick = _ref.onClick,
|
|
34
33
|
required = _ref.required,
|
|
35
34
|
_ref$useModernStyles = _ref.useModernStyles,
|
|
@@ -46,14 +45,15 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
|
|
|
46
45
|
}),
|
|
47
46
|
inputLabel = _useInputStyles.inputLabel,
|
|
48
47
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
49
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
48
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
49
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
50
50
|
var isShowResetIcon = !!value && !!onReset;
|
|
51
51
|
return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
|
|
52
52
|
inFocus: inFocus,
|
|
53
53
|
label: inputLabel,
|
|
54
54
|
required: required,
|
|
55
55
|
useModernStyles: useModernStyles,
|
|
56
|
-
size:
|
|
56
|
+
size: fieldSize
|
|
57
57
|
}, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
|
|
58
58
|
ref: ref,
|
|
59
59
|
hasError: hasError,
|
|
@@ -69,6 +69,7 @@ var Select = exports.Select = function Select(_ref) {
|
|
|
69
69
|
_useState2 = _slicedToArray(_useState, 2),
|
|
70
70
|
isOpen = _useState2[0],
|
|
71
71
|
setIsOpen = _useState2[1];
|
|
72
|
+
var fieldSize = useModernStyles && !size ? 'L' : size || 'M';
|
|
72
73
|
|
|
73
74
|
/*
|
|
74
75
|
существует интеграционная проблема селекта с final-form
|
|
@@ -225,7 +226,7 @@ var Select = exports.Select = function Select(_ref) {
|
|
|
225
226
|
name: name,
|
|
226
227
|
isOpen: isOpen,
|
|
227
228
|
onReset: isResetButtonEnabled ? handleReset : undefined,
|
|
228
|
-
size:
|
|
229
|
+
size: fieldSize,
|
|
229
230
|
onClick: isDrawerOptions || !!renderedValue ? handleInputClick : undefined,
|
|
230
231
|
required: required,
|
|
231
232
|
useModernStyles: useModernStyles
|
|
@@ -32,8 +32,7 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
|
|
|
32
32
|
paddingRight = _ref.paddingRight,
|
|
33
33
|
type = _ref.type,
|
|
34
34
|
children = _ref.children,
|
|
35
|
-
|
|
36
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
35
|
+
size = _ref.size,
|
|
37
36
|
isOnlyNumbers = _ref.isOnlyNumbers,
|
|
38
37
|
autoFocus = _ref.autoFocus,
|
|
39
38
|
_ref$element = _ref.element,
|
|
@@ -70,7 +69,8 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
|
|
|
70
69
|
}),
|
|
71
70
|
inputLabel = _useInputStyles.inputLabel,
|
|
72
71
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
73
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
72
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
73
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
74
74
|
var handleChange = (0, _react.useCallback)(function (event) {
|
|
75
75
|
onChange(event.target.value.slice(0, maxLength !== null && maxLength !== void 0 ? maxLength : Infinity));
|
|
76
76
|
}, [onChange, maxLength]);
|
|
@@ -79,7 +79,7 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
|
|
|
79
79
|
label: inputLabel,
|
|
80
80
|
disabled: disabled,
|
|
81
81
|
required: required,
|
|
82
|
-
size:
|
|
82
|
+
size: fieldSize,
|
|
83
83
|
useModernStyles: useModernStyles
|
|
84
84
|
}, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
|
|
85
85
|
id: id,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { TSizes } from '../constants';
|
|
2
2
|
type TParams = {
|
|
3
3
|
inFocus: boolean;
|
|
4
|
-
size
|
|
4
|
+
size?: TSizes;
|
|
5
5
|
isHaveValue: boolean;
|
|
6
6
|
useModernStyles?: boolean;
|
|
7
7
|
label?: string;
|
|
@@ -20,5 +20,6 @@ export declare const useInputStyles: ({ inFocus, useModernStyles, label, size, p
|
|
|
20
20
|
modernInputPlaceholder: string | undefined;
|
|
21
21
|
isHideModernPlaceholder: boolean;
|
|
22
22
|
modernPlaceholder: false | "" | import("react/jsx-runtime").JSX.Element | undefined;
|
|
23
|
+
fieldSize: TSizes;
|
|
23
24
|
};
|
|
24
25
|
export {};
|
|
@@ -27,6 +27,7 @@ var useInputStyles = exports.useInputStyles = function useInputStyles(_ref) {
|
|
|
27
27
|
conditionHideModernPlaceholder = _ref$conditionHideMod === void 0 ? false : _ref$conditionHideMod,
|
|
28
28
|
paddingRight = _ref.paddingRight;
|
|
29
29
|
var isHideModernPlaceholder = isHaveValue || inFocus || conditionHideModernPlaceholder;
|
|
30
|
+
var fieldSize = useModernStyles && !size ? 'L' : size || 'M';
|
|
30
31
|
var inputLabel = (0, _react.useMemo)(function () {
|
|
31
32
|
if (useModernStyles) {
|
|
32
33
|
return isHideModernPlaceholder ? label : undefined;
|
|
@@ -37,25 +38,25 @@ var useInputStyles = exports.useInputStyles = function useInputStyles(_ref) {
|
|
|
37
38
|
var paddingAndVariantOptions = (0, _react.useMemo)(function () {
|
|
38
39
|
if (useModernStyles) {
|
|
39
40
|
if (isHideModernPlaceholder) {
|
|
40
|
-
return _constants.MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
41
|
+
return _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize];
|
|
41
42
|
} else {
|
|
42
|
-
return _objectSpread(_objectSpread({}, _constants.MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
43
|
-
paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
44
|
-
paddingBottom: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
43
|
+
return _objectSpread(_objectSpread({}, _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize]), {}, {
|
|
44
|
+
paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
|
|
45
|
+
paddingBottom: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop
|
|
45
46
|
});
|
|
46
47
|
}
|
|
47
48
|
} else {
|
|
48
|
-
return _constants.SIZE_PARAMS_MAP[
|
|
49
|
+
return _constants.SIZE_PARAMS_MAP[fieldSize];
|
|
49
50
|
}
|
|
50
|
-
}, [useModernStyles, isHideModernPlaceholder,
|
|
51
|
+
}, [useModernStyles, isHideModernPlaceholder, fieldSize]);
|
|
51
52
|
var modernInputPlaceholder = (0, _react.useMemo)(function () {
|
|
52
53
|
return placeholder || label;
|
|
53
54
|
}, [label, placeholder]);
|
|
54
55
|
var modernPlaceholder = useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
|
|
55
56
|
visible: !isHideModernPlaceholder,
|
|
56
|
-
paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
57
|
+
paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
|
|
57
58
|
paddingRight: paddingRight,
|
|
58
|
-
size:
|
|
59
|
+
size: fieldSize,
|
|
59
60
|
required: required
|
|
60
61
|
}, modernInputPlaceholder);
|
|
61
62
|
return {
|
|
@@ -63,6 +64,7 @@ var useInputStyles = exports.useInputStyles = function useInputStyles(_ref) {
|
|
|
63
64
|
paddingAndVariantOptions: paddingAndVariantOptions,
|
|
64
65
|
modernInputPlaceholder: modernInputPlaceholder,
|
|
65
66
|
isHideModernPlaceholder: isHideModernPlaceholder,
|
|
66
|
-
modernPlaceholder: modernPlaceholder
|
|
67
|
+
modernPlaceholder: modernPlaceholder,
|
|
68
|
+
fieldSize: fieldSize
|
|
67
69
|
};
|
|
68
70
|
};
|
|
@@ -48,8 +48,7 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
48
48
|
inputMaxLength = _ref.inputMaxLength,
|
|
49
49
|
_ref$isInputOnlyNumbe = _ref.isInputOnlyNumbers,
|
|
50
50
|
isInputOnlyNumbers = _ref$isInputOnlyNumbe === void 0 ? false : _ref$isInputOnlyNumbe,
|
|
51
|
-
|
|
52
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
51
|
+
size = _ref.size,
|
|
53
52
|
autoFocus = _ref.autoFocus,
|
|
54
53
|
_ref$required = _ref.required,
|
|
55
54
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
@@ -94,7 +93,8 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
94
93
|
inputLabel = _useInputStyles.inputLabel,
|
|
95
94
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
96
95
|
isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder,
|
|
97
|
-
modernInputPlaceholder = _useInputStyles.modernInputPlaceholder
|
|
96
|
+
modernInputPlaceholder = _useInputStyles.modernInputPlaceholder,
|
|
97
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
98
98
|
var handleOpen = useCallback(function () {
|
|
99
99
|
return setIsOpen(true);
|
|
100
100
|
}, []);
|
|
@@ -179,13 +179,13 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
179
179
|
disabled: disabled,
|
|
180
180
|
required: required,
|
|
181
181
|
useModernStyles: useModernStyles,
|
|
182
|
-
size:
|
|
182
|
+
size: fieldSize,
|
|
183
183
|
left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - LABEL_PADDING : undefined
|
|
184
184
|
}, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
|
|
185
185
|
visible: !isHideModernPlaceholder,
|
|
186
186
|
paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
|
|
187
|
-
paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
188
|
-
size:
|
|
187
|
+
paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
|
|
188
|
+
size: fieldSize,
|
|
189
189
|
required: required
|
|
190
190
|
}, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
|
|
191
191
|
ref: ref,
|
|
@@ -6,8 +6,7 @@ import { useComponentPalette } from '../../../../palette';
|
|
|
6
6
|
import { useInputStyles } from '../../_hooks/useInputStyles';
|
|
7
7
|
export var CoreCurrencyInput = function CoreCurrencyInput(_ref) {
|
|
8
8
|
var label = _ref.label,
|
|
9
|
-
|
|
10
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
9
|
+
size = _ref.size,
|
|
11
10
|
_ref$hasError = _ref.hasError,
|
|
12
11
|
hasError = _ref$hasError === void 0 ? false : _ref$hasError,
|
|
13
12
|
value = _ref.value,
|
|
@@ -41,14 +40,15 @@ export var CoreCurrencyInput = function CoreCurrencyInput(_ref) {
|
|
|
41
40
|
}),
|
|
42
41
|
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
43
42
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
44
|
-
inputLabel = _useInputStyles.inputLabel
|
|
43
|
+
inputLabel = _useInputStyles.inputLabel,
|
|
44
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
45
45
|
return /*#__PURE__*/React.createElement(InputLabel, {
|
|
46
46
|
inFocus: inFocus,
|
|
47
47
|
label: inputLabel,
|
|
48
48
|
disabled: disabled,
|
|
49
49
|
required: required,
|
|
50
50
|
useModernStyles: useModernStyles,
|
|
51
|
-
size:
|
|
51
|
+
size: fieldSize
|
|
52
52
|
}, /*#__PURE__*/React.createElement(InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(StyledCurrencyInputFromLibrary, {
|
|
53
53
|
$palette: palette,
|
|
54
54
|
$hasBorder: !useModernStyles,
|
|
@@ -30,8 +30,7 @@ export var DateInput = function DateInput(_ref) {
|
|
|
30
30
|
label = _ref.label,
|
|
31
31
|
minDate = _ref.minDate,
|
|
32
32
|
maxDate = _ref.maxDate,
|
|
33
|
-
|
|
34
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
33
|
+
size = _ref.size,
|
|
35
34
|
dropdownProps = _ref.dropdownProps,
|
|
36
35
|
placeholder = _ref.placeholder,
|
|
37
36
|
_ref$useModernStyles = _ref.useModernStyles,
|
|
@@ -83,7 +82,8 @@ export var DateInput = function DateInput(_ref) {
|
|
|
83
82
|
}),
|
|
84
83
|
inputLabel = _useInputStyles.inputLabel,
|
|
85
84
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
86
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
85
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
86
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
87
87
|
useEffect(function () {
|
|
88
88
|
if (stringValue && value === resetValue) {
|
|
89
89
|
setStringValue('');
|
|
@@ -114,7 +114,7 @@ export var DateInput = function DateInput(_ref) {
|
|
|
114
114
|
inFocus: inFocus,
|
|
115
115
|
label: inputLabel,
|
|
116
116
|
useModernStyles: useModernStyles,
|
|
117
|
-
size:
|
|
117
|
+
size: fieldSize,
|
|
118
118
|
required: required
|
|
119
119
|
}, /*#__PURE__*/React.createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
|
|
120
120
|
onClick: handleTrigger,
|
|
@@ -32,8 +32,7 @@ export var DateTimeInput = function DateTimeInput(_ref) {
|
|
|
32
32
|
label = _ref.label,
|
|
33
33
|
minDate = _ref.minDate,
|
|
34
34
|
maxDate = _ref.maxDate,
|
|
35
|
-
|
|
36
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
35
|
+
size = _ref.size,
|
|
37
36
|
dropdownProps = _ref.dropdownProps,
|
|
38
37
|
placeholder = _ref.placeholder,
|
|
39
38
|
saveLabel = _ref.saveLabel,
|
|
@@ -94,7 +93,8 @@ export var DateTimeInput = function DateTimeInput(_ref) {
|
|
|
94
93
|
}),
|
|
95
94
|
inputLabel = _useInputStyles.inputLabel,
|
|
96
95
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
97
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
96
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
97
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
98
98
|
var handleStringValueChange = useCallback(function (event) {
|
|
99
99
|
setStringValue(event.target.value);
|
|
100
100
|
}, [setStringValue]);
|
|
@@ -142,7 +142,7 @@ export var DateTimeInput = function DateTimeInput(_ref) {
|
|
|
142
142
|
label: inputLabel,
|
|
143
143
|
required: required,
|
|
144
144
|
useModernStyles: useModernStyles,
|
|
145
|
-
size:
|
|
145
|
+
size: fieldSize
|
|
146
146
|
}, /*#__PURE__*/React.createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
|
|
147
147
|
onClick: handleTrigger,
|
|
148
148
|
ref: inputRef,
|
|
@@ -33,8 +33,7 @@ export var PhoneInput = function PhoneInput(_ref) {
|
|
|
33
33
|
countries = _ref.countries,
|
|
34
34
|
onCountryChange = _ref.onCountryChange,
|
|
35
35
|
pureInputProps = _ref.pureInputProps,
|
|
36
|
-
|
|
37
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
36
|
+
size = _ref.size,
|
|
38
37
|
autoFocus = _ref.autoFocus,
|
|
39
38
|
_ref$isSupportCityRus = _ref.isSupportCityRusPhoneNumber,
|
|
40
39
|
isSupportCityRusPhoneNumber = _ref$isSupportCityRus === void 0 ? false : _ref$isSupportCityRus,
|
|
@@ -92,7 +91,8 @@ export var PhoneInput = function PhoneInput(_ref) {
|
|
|
92
91
|
}),
|
|
93
92
|
inputLabel = _useInputStyles.inputLabel,
|
|
94
93
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
95
|
-
isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder
|
|
94
|
+
isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder,
|
|
95
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
96
96
|
var handleChangeCountry = useCallback(function (countryCode) {
|
|
97
97
|
setCountry(countryCode);
|
|
98
98
|
if (onCountryChange) {
|
|
@@ -181,13 +181,13 @@ export var PhoneInput = function PhoneInput(_ref) {
|
|
|
181
181
|
disabled: disabled,
|
|
182
182
|
required: required,
|
|
183
183
|
useModernStyles: useModernStyles,
|
|
184
|
-
size:
|
|
184
|
+
size: fieldSize,
|
|
185
185
|
left: isHaveSelectCountries && useModernStyles ? 65 : undefined
|
|
186
186
|
}, /*#__PURE__*/React.createElement(S.InputLabelContent, null, useModernStyles && /*#__PURE__*/React.createElement(ModernPlaceholder, {
|
|
187
187
|
visible: !isHideModernPlaceholder,
|
|
188
188
|
paddingLeft: isHaveSelectCountries ? 75 : 18,
|
|
189
|
-
paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
190
|
-
size:
|
|
189
|
+
paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
|
|
190
|
+
size: fieldSize,
|
|
191
191
|
required: required
|
|
192
192
|
}, modernPlaceholderText), !!(countrySelectOptions !== null && countrySelectOptions !== void 0 && countrySelectOptions.length) && /*#__PURE__*/React.createElement(S.InputLabelFloatWrapper, null, /*#__PURE__*/React.createElement(S.CountrySelectWrapper, null, /*#__PURE__*/React.createElement(CountrySelect, {
|
|
193
193
|
minWidth: isMobile ? '100%' : '350px',
|
|
@@ -23,8 +23,7 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
|
|
|
23
23
|
onFocus = _ref.onFocus,
|
|
24
24
|
onBlur = _ref.onBlur,
|
|
25
25
|
name = _ref.name,
|
|
26
|
-
|
|
27
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
26
|
+
size = _ref.size,
|
|
28
27
|
_ref$useModernStyles = _ref.useModernStyles,
|
|
29
28
|
useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
|
|
30
29
|
var _useInputFocus = useInputFocus({
|
|
@@ -44,7 +43,8 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
|
|
|
44
43
|
}),
|
|
45
44
|
inputLabel = _useInputStyles.inputLabel,
|
|
46
45
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
47
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
46
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
47
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
48
48
|
var filters = useFilters({
|
|
49
49
|
max: max
|
|
50
50
|
});
|
|
@@ -77,7 +77,7 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
|
|
|
77
77
|
inFocus: inFocus,
|
|
78
78
|
label: inputLabel,
|
|
79
79
|
useModernStyles: useModernStyles,
|
|
80
|
-
size:
|
|
80
|
+
size: fieldSize
|
|
81
81
|
}, /*#__PURE__*/React.createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
|
|
82
82
|
name: name,
|
|
83
83
|
hasError: hasError,
|
|
@@ -19,8 +19,7 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
19
19
|
autoFocus = _ref.autoFocus,
|
|
20
20
|
isOnlyNumbers = _ref.isOnlyNumbers,
|
|
21
21
|
maxLength = _ref.maxLength,
|
|
22
|
-
|
|
23
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
22
|
+
size = _ref.size,
|
|
24
23
|
_ref$useModernStyles = _ref.useModernStyles,
|
|
25
24
|
useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
|
|
26
25
|
var _useInputFocus = useInputFocus({
|
|
@@ -42,7 +41,8 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
42
41
|
}),
|
|
43
42
|
inputLabel = _useInputStyles.inputLabel,
|
|
44
43
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
45
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
44
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
45
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
46
46
|
var handleInputReset = useCallback(function () {
|
|
47
47
|
onChange('');
|
|
48
48
|
}, [onChange]);
|
|
@@ -51,7 +51,7 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
51
51
|
}, [onChange]);
|
|
52
52
|
return /*#__PURE__*/React.createElement(InputLabel, {
|
|
53
53
|
useModernStyles: useModernStyles,
|
|
54
|
-
size:
|
|
54
|
+
size: fieldSize,
|
|
55
55
|
label: useModernStyles ? inputLabel : undefined
|
|
56
56
|
}, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
|
|
57
57
|
ref: ref,
|
|
@@ -19,8 +19,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
19
19
|
label = _ref.label,
|
|
20
20
|
isOpen = _ref.isOpen,
|
|
21
21
|
onReset = _ref.onReset,
|
|
22
|
-
|
|
23
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
22
|
+
size = _ref.size,
|
|
24
23
|
onClick = _ref.onClick,
|
|
25
24
|
required = _ref.required,
|
|
26
25
|
_ref$useModernStyles = _ref.useModernStyles,
|
|
@@ -37,14 +36,15 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
37
36
|
}),
|
|
38
37
|
inputLabel = _useInputStyles.inputLabel,
|
|
39
38
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
40
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
39
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
40
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
41
41
|
var isShowResetIcon = !!value && !!onReset;
|
|
42
42
|
return /*#__PURE__*/React.createElement(InputLabel, {
|
|
43
43
|
inFocus: inFocus,
|
|
44
44
|
label: inputLabel,
|
|
45
45
|
required: required,
|
|
46
46
|
useModernStyles: useModernStyles,
|
|
47
|
-
size:
|
|
47
|
+
size: fieldSize
|
|
48
48
|
}, /*#__PURE__*/React.createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
|
|
49
49
|
ref: ref,
|
|
50
50
|
hasError: hasError,
|
|
@@ -59,6 +59,7 @@ export var Select = function Select(_ref) {
|
|
|
59
59
|
_useState2 = _slicedToArray(_useState, 2),
|
|
60
60
|
isOpen = _useState2[0],
|
|
61
61
|
setIsOpen = _useState2[1];
|
|
62
|
+
var fieldSize = useModernStyles && !size ? 'L' : size || 'M';
|
|
62
63
|
|
|
63
64
|
/*
|
|
64
65
|
существует интеграционная проблема селекта с final-form
|
|
@@ -215,7 +216,7 @@ export var Select = function Select(_ref) {
|
|
|
215
216
|
name: name,
|
|
216
217
|
isOpen: isOpen,
|
|
217
218
|
onReset: isResetButtonEnabled ? handleReset : undefined,
|
|
218
|
-
size:
|
|
219
|
+
size: fieldSize,
|
|
219
220
|
onClick: isDrawerOptions || !!renderedValue ? handleInputClick : undefined,
|
|
220
221
|
required: required,
|
|
221
222
|
useModernStyles: useModernStyles
|
|
@@ -23,8 +23,7 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
23
23
|
paddingRight = _ref.paddingRight,
|
|
24
24
|
type = _ref.type,
|
|
25
25
|
children = _ref.children,
|
|
26
|
-
|
|
27
|
-
size = _ref$size === void 0 ? 'M' : _ref$size,
|
|
26
|
+
size = _ref.size,
|
|
28
27
|
isOnlyNumbers = _ref.isOnlyNumbers,
|
|
29
28
|
autoFocus = _ref.autoFocus,
|
|
30
29
|
_ref$element = _ref.element,
|
|
@@ -61,7 +60,8 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
61
60
|
}),
|
|
62
61
|
inputLabel = _useInputStyles.inputLabel,
|
|
63
62
|
paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
|
|
64
|
-
modernPlaceholder = _useInputStyles.modernPlaceholder
|
|
63
|
+
modernPlaceholder = _useInputStyles.modernPlaceholder,
|
|
64
|
+
fieldSize = _useInputStyles.fieldSize;
|
|
65
65
|
var handleChange = useCallback(function (event) {
|
|
66
66
|
onChange(event.target.value.slice(0, maxLength !== null && maxLength !== void 0 ? maxLength : Infinity));
|
|
67
67
|
}, [onChange, maxLength]);
|
|
@@ -70,7 +70,7 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
70
70
|
label: inputLabel,
|
|
71
71
|
disabled: disabled,
|
|
72
72
|
required: required,
|
|
73
|
-
size:
|
|
73
|
+
size: fieldSize,
|
|
74
74
|
useModernStyles: useModernStyles
|
|
75
75
|
}, /*#__PURE__*/React.createElement(S.InputLabelContent, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
|
|
76
76
|
id: id,
|
|
@@ -19,6 +19,7 @@ export var useInputStyles = function useInputStyles(_ref) {
|
|
|
19
19
|
conditionHideModernPlaceholder = _ref$conditionHideMod === void 0 ? false : _ref$conditionHideMod,
|
|
20
20
|
paddingRight = _ref.paddingRight;
|
|
21
21
|
var isHideModernPlaceholder = isHaveValue || inFocus || conditionHideModernPlaceholder;
|
|
22
|
+
var fieldSize = useModernStyles && !size ? 'L' : size || 'M';
|
|
22
23
|
var inputLabel = useMemo(function () {
|
|
23
24
|
if (useModernStyles) {
|
|
24
25
|
return isHideModernPlaceholder ? label : undefined;
|
|
@@ -29,25 +30,25 @@ export var useInputStyles = function useInputStyles(_ref) {
|
|
|
29
30
|
var paddingAndVariantOptions = useMemo(function () {
|
|
30
31
|
if (useModernStyles) {
|
|
31
32
|
if (isHideModernPlaceholder) {
|
|
32
|
-
return MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
33
|
+
return MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize];
|
|
33
34
|
} else {
|
|
34
|
-
return _objectSpread(_objectSpread({}, MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
35
|
-
paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
36
|
-
paddingBottom: MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
35
|
+
return _objectSpread(_objectSpread({}, MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize]), {}, {
|
|
36
|
+
paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
|
|
37
|
+
paddingBottom: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop
|
|
37
38
|
});
|
|
38
39
|
}
|
|
39
40
|
} else {
|
|
40
|
-
return SIZE_PARAMS_MAP[
|
|
41
|
+
return SIZE_PARAMS_MAP[fieldSize];
|
|
41
42
|
}
|
|
42
|
-
}, [useModernStyles, isHideModernPlaceholder,
|
|
43
|
+
}, [useModernStyles, isHideModernPlaceholder, fieldSize]);
|
|
43
44
|
var modernInputPlaceholder = useMemo(function () {
|
|
44
45
|
return placeholder || label;
|
|
45
46
|
}, [label, placeholder]);
|
|
46
47
|
var modernPlaceholder = useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
|
|
47
48
|
visible: !isHideModernPlaceholder,
|
|
48
|
-
paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[
|
|
49
|
+
paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
|
|
49
50
|
paddingRight: paddingRight,
|
|
50
|
-
size:
|
|
51
|
+
size: fieldSize,
|
|
51
52
|
required: required
|
|
52
53
|
}, modernInputPlaceholder);
|
|
53
54
|
return {
|
|
@@ -55,6 +56,7 @@ export var useInputStyles = function useInputStyles(_ref) {
|
|
|
55
56
|
paddingAndVariantOptions: paddingAndVariantOptions,
|
|
56
57
|
modernInputPlaceholder: modernInputPlaceholder,
|
|
57
58
|
isHideModernPlaceholder: isHideModernPlaceholder,
|
|
58
|
-
modernPlaceholder: modernPlaceholder
|
|
59
|
+
modernPlaceholder: modernPlaceholder,
|
|
60
|
+
fieldSize: fieldSize
|
|
59
61
|
};
|
|
60
62
|
};
|