@megafon/ui-core 5.12.1 → 5.14.0
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/CHANGELOG.md +33 -0
- package/dist/es/components/Carousel/Carousel.js +1 -0
- package/dist/es/components/Row/Row.css +238 -0
- package/dist/es/components/Row/Row.d.ts +46 -0
- package/dist/es/components/Row/Row.js +107 -0
- package/dist/es/components/Search/Search.css +10 -4
- package/dist/es/components/Sliders/Slider/Slider.css +2 -6
- package/dist/es/components/Sliders/Slider/Slider.js +2 -2
- package/dist/es/components/Sliders/SliderRange/SliderRange.css +12 -3
- package/dist/es/components/Sliders/SliderRange/SliderRange.js +41 -8
- package/dist/es/components/Sliders/SliderRatio/SliderRatio.css +8 -3
- package/dist/es/components/Sliders/SliderRatio/SliderRatio.js +38 -5
- package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css +1 -1
- package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.js +21 -1
- package/dist/es/components/Sliders/helpers.d.ts +1 -0
- package/dist/es/components/Sliders/helpers.js +5 -0
- package/dist/es/components/Snackbar/Snackbar.css +5 -3
- package/dist/es/components/Snackbar/Snackbar.js +5 -2
- package/dist/es/index.d.ts +1 -0
- package/dist/es/index.js +1 -0
- package/dist/lib/components/Carousel/Carousel.js +1 -0
- package/dist/lib/components/Row/Row.css +238 -0
- package/dist/lib/components/Row/Row.d.ts +46 -0
- package/dist/lib/components/Row/Row.js +127 -0
- package/dist/lib/components/Search/Search.css +10 -4
- package/dist/lib/components/Sliders/Slider/Slider.css +2 -6
- package/dist/lib/components/Sliders/Slider/Slider.js +1 -1
- package/dist/lib/components/Sliders/SliderRange/SliderRange.css +12 -3
- package/dist/lib/components/Sliders/SliderRange/SliderRange.js +40 -7
- package/dist/lib/components/Sliders/SliderRatio/SliderRatio.css +8 -3
- package/dist/lib/components/Sliders/SliderRatio/SliderRatio.js +37 -4
- package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css +1 -1
- package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.js +22 -1
- package/dist/lib/components/Sliders/helpers.d.ts +1 -0
- package/dist/lib/components/Sliders/helpers.js +12 -2
- package/dist/lib/components/Snackbar/Snackbar.css +5 -3
- package/dist/lib/components/Snackbar/Snackbar.js +5 -2
- package/dist/lib/index.d.ts +1 -0
- package/dist/lib/index.js +8 -0
- package/package.json +3 -3
|
@@ -265,13 +265,19 @@
|
|
|
265
265
|
right: 0;
|
|
266
266
|
bottom: 0;
|
|
267
267
|
width: 40px;
|
|
268
|
-
background:
|
|
269
|
-
|
|
268
|
+
background: var(--base);
|
|
269
|
+
-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
|
|
270
|
+
-webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--base) 100%);
|
|
271
|
+
mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
|
|
272
|
+
mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--spbSky0) 100%);
|
|
270
273
|
}
|
|
271
274
|
.mfui-search__list-item_active .mfui-search__item-title:after,
|
|
272
275
|
.mfui-search__popular-item_active .mfui-search__popular-item-title:after {
|
|
273
|
-
background:
|
|
274
|
-
|
|
276
|
+
background: var(--spbSky0);
|
|
277
|
+
-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
|
|
278
|
+
-webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--spbSky0) 100%);
|
|
279
|
+
mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
|
|
280
|
+
mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--spbSky0) 100%);
|
|
275
281
|
}
|
|
276
282
|
.mfui-search__highlighted-fragment {
|
|
277
283
|
font-weight: bold;
|
|
@@ -11,12 +11,8 @@
|
|
|
11
11
|
font-size: 15px;
|
|
12
12
|
line-height: 24px;
|
|
13
13
|
font-weight: 500;
|
|
14
|
-
display:
|
|
15
|
-
|
|
16
|
-
display: flex;
|
|
17
|
-
-webkit-box-align: end;
|
|
18
|
-
-ms-flex-align: end;
|
|
19
|
-
align-items: flex-end;
|
|
14
|
+
display: grid;
|
|
15
|
+
grid-template-columns: auto 55%;
|
|
20
16
|
margin-bottom: 8px;
|
|
21
17
|
}
|
|
22
18
|
.mfui-slider__display-value {
|
|
@@ -70,7 +70,7 @@ var Slider = function Slider(_ref) {
|
|
|
70
70
|
|
|
71
71
|
var handleInputChange = function handleInputChange(isRange) {
|
|
72
72
|
return function (e) {
|
|
73
|
-
var targetValue = e.target.value;
|
|
73
|
+
var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
|
|
74
74
|
var newRangeValue = (0, _helpers.getRangeValue)(targetValue, minValue, maxValue, step);
|
|
75
75
|
!isControlled && setInnerRangeValue(newRangeValue);
|
|
76
76
|
!isRange && setRawInputValue(targetValue);
|
|
@@ -14,15 +14,20 @@
|
|
|
14
14
|
margin-bottom: 8px;
|
|
15
15
|
}
|
|
16
16
|
.mfui-slider-range__display-values {
|
|
17
|
-
display:
|
|
18
|
-
|
|
19
|
-
display: flex;
|
|
17
|
+
display: grid;
|
|
18
|
+
grid-template-columns: 45% 45%;
|
|
20
19
|
-webkit-box-pack: justify;
|
|
21
20
|
-ms-flex-pack: justify;
|
|
22
21
|
justify-content: space-between;
|
|
23
22
|
width: 100%;
|
|
24
23
|
margin-top: 8px;
|
|
25
24
|
}
|
|
25
|
+
.mfui-slider-range__display-value_left {
|
|
26
|
+
margin-right: auto;
|
|
27
|
+
}
|
|
28
|
+
.mfui-slider-range__display-value_right {
|
|
29
|
+
margin-left: auto;
|
|
30
|
+
}
|
|
26
31
|
.mfui-slider-range__range-container {
|
|
27
32
|
position: relative;
|
|
28
33
|
height: 12px;
|
|
@@ -97,6 +102,7 @@
|
|
|
97
102
|
padding: 0 12px;
|
|
98
103
|
border-radius: 100px;
|
|
99
104
|
background-color: var(--spbSky0);
|
|
105
|
+
cursor: pointer;
|
|
100
106
|
}
|
|
101
107
|
.mfui-slider-range__range-track-inner {
|
|
102
108
|
position: relative;
|
|
@@ -112,6 +118,9 @@
|
|
|
112
118
|
.mfui-slider-range_disabled .mfui-slider-range__head {
|
|
113
119
|
color: var(--spbSky3);
|
|
114
120
|
}
|
|
121
|
+
.mfui-slider-range_disabled .mfui-slider-range__range-track {
|
|
122
|
+
cursor: default;
|
|
123
|
+
}
|
|
115
124
|
.mfui-slider-range_disabled .mfui-slider-range__range-input {
|
|
116
125
|
background-image: -webkit-gradient(linear, left top, left bottom, from(var(--spbSky1)), to(var(--spbSky1)));
|
|
117
126
|
background-image: linear-gradient(var(--spbSky1), var(--spbSky1));
|
|
@@ -59,6 +59,9 @@ var SliderRange = function SliderRange(_ref) {
|
|
|
59
59
|
onChange = _ref.onChange;
|
|
60
60
|
var outerLeftRangeValue = (0, _helpers.getRangeValue)(outerLeftValue !== null && outerLeftValue !== void 0 ? outerLeftValue : minValue, minValue, maxValue, step);
|
|
61
61
|
var outerRightRangeValue = (0, _helpers.getRangeValue)(outerRightValue !== null && outerRightValue !== void 0 ? outerRightValue : maxValue, minValue, maxValue, step);
|
|
62
|
+
var leftRangeInputRef = React.useRef(null);
|
|
63
|
+
var rightRangeInputRef = React.useRef(null);
|
|
64
|
+
var rangeTrackRef = React.useRef(null);
|
|
62
65
|
var rangeTrackInnerRef = React.useRef(null);
|
|
63
66
|
|
|
64
67
|
var _React$useState = React.useState(null),
|
|
@@ -87,8 +90,8 @@ var SliderRange = function SliderRange(_ref) {
|
|
|
87
90
|
var isThumbAtEndOfTrack = (0, _helpers2.checkForThumbAtEndOfTrack)(leftRangeValue, minValue, maxValue, THUMB_SIZE);
|
|
88
91
|
var showHead = !!label || !!displayValueType;
|
|
89
92
|
|
|
90
|
-
var
|
|
91
|
-
if (!rangeTrackInnerRef.current) {
|
|
93
|
+
var handleRangeTrackPointerUp = function handleRangeTrackPointerUp(e) {
|
|
94
|
+
if (!rangeTrackInnerRef.current || disabled) {
|
|
92
95
|
return;
|
|
93
96
|
}
|
|
94
97
|
|
|
@@ -105,9 +108,27 @@ var SliderRange = function SliderRange(_ref) {
|
|
|
105
108
|
}
|
|
106
109
|
};
|
|
107
110
|
|
|
111
|
+
var handleRangeTrackPointerLeave = React.useCallback(function () {
|
|
112
|
+
var _a, _b, _c;
|
|
113
|
+
|
|
114
|
+
(_a = leftRangeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
115
|
+
(_b = rightRangeInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
116
|
+
(_c = rangeTrackRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerleave', handleRangeTrackPointerLeave);
|
|
117
|
+
}, []);
|
|
118
|
+
|
|
119
|
+
var handleRangeTrackPointerDown = function handleRangeTrackPointerDown() {
|
|
120
|
+
var _a;
|
|
121
|
+
|
|
122
|
+
if (disabled) {
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
(_a = rangeTrackRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerleave', handleRangeTrackPointerLeave);
|
|
127
|
+
};
|
|
128
|
+
|
|
108
129
|
var handleLeftInputChange = function handleLeftInputChange(isRange) {
|
|
109
130
|
return function (e) {
|
|
110
|
-
var targetValue = e.target.value;
|
|
131
|
+
var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
|
|
111
132
|
var newRangeValue = (0, _helpers.getRangeValue)(targetValue, minValue, rightRangeValue, step);
|
|
112
133
|
!isControlled && setInnerLeftRangeValue(newRangeValue);
|
|
113
134
|
!isRange && setRawLeftInputValue(targetValue);
|
|
@@ -117,7 +138,7 @@ var SliderRange = function SliderRange(_ref) {
|
|
|
117
138
|
|
|
118
139
|
var handleRightInputChange = function handleRightInputChange(isRange) {
|
|
119
140
|
return function (e) {
|
|
120
|
-
var targetValue = e.target.value;
|
|
141
|
+
var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
|
|
121
142
|
var newRangeValue = (0, _helpers.getRangeValue)(targetValue, leftRangeValue, maxValue, step);
|
|
122
143
|
!isControlled && setInnerRightRangeValue(newRangeValue);
|
|
123
144
|
!isRange && setRawRightInputValue(targetValue);
|
|
@@ -150,6 +171,9 @@ var SliderRange = function SliderRange(_ref) {
|
|
|
150
171
|
}, label), !!displayValueType && /*#__PURE__*/React.createElement("div", {
|
|
151
172
|
className: cn('display-values')
|
|
152
173
|
}, /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
|
|
174
|
+
className: cn('display-value', {
|
|
175
|
+
left: true
|
|
176
|
+
}),
|
|
153
177
|
value: rawLeftInputValue !== null && rawLeftInputValue !== void 0 ? rawLeftInputValue : leftRangeValue,
|
|
154
178
|
displayValueType: displayValueType,
|
|
155
179
|
displayValuePrefix: displayLeftValuePrefix,
|
|
@@ -161,6 +185,9 @@ var SliderRange = function SliderRange(_ref) {
|
|
|
161
185
|
input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
|
|
162
186
|
}
|
|
163
187
|
}), /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
|
|
188
|
+
className: cn('display-value', {
|
|
189
|
+
right: true
|
|
190
|
+
}),
|
|
164
191
|
value: rawRightInputValue !== null && rawRightInputValue !== void 0 ? rawRightInputValue : rightRangeValue,
|
|
165
192
|
displayValueType: displayValueType,
|
|
166
193
|
displayValuePrefix: displayRightValuePrefix,
|
|
@@ -184,7 +211,9 @@ var SliderRange = function SliderRange(_ref) {
|
|
|
184
211
|
max: maxValue,
|
|
185
212
|
onChange: handleLeftInputChange(true),
|
|
186
213
|
disabled: disabled
|
|
187
|
-
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftRangeInput)
|
|
214
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftRangeInput), {
|
|
215
|
+
ref: leftRangeInputRef
|
|
216
|
+
})), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
|
|
188
217
|
className: cn('range-input', {
|
|
189
218
|
right: true
|
|
190
219
|
}),
|
|
@@ -194,9 +223,13 @@ var SliderRange = function SliderRange(_ref) {
|
|
|
194
223
|
max: maxValue,
|
|
195
224
|
onChange: handleRightInputChange(true),
|
|
196
225
|
disabled: disabled
|
|
197
|
-
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightRangeInput)
|
|
226
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightRangeInput), {
|
|
227
|
+
ref: rightRangeInputRef
|
|
228
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
198
229
|
className: cn('range-track'),
|
|
199
|
-
|
|
230
|
+
onPointerUp: handleRangeTrackPointerUp,
|
|
231
|
+
onPointerDown: handleRangeTrackPointerDown,
|
|
232
|
+
ref: rangeTrackRef
|
|
200
233
|
}, /*#__PURE__*/React.createElement("div", {
|
|
201
234
|
className: cn('range-track-inner'),
|
|
202
235
|
ref: rangeTrackInnerRef
|
|
@@ -14,15 +14,20 @@
|
|
|
14
14
|
margin-bottom: 8px;
|
|
15
15
|
}
|
|
16
16
|
.mfui-slider-ratio__display-values {
|
|
17
|
-
display:
|
|
18
|
-
|
|
19
|
-
display: flex;
|
|
17
|
+
display: grid;
|
|
18
|
+
grid-template-columns: 45% 45%;
|
|
20
19
|
-webkit-box-pack: justify;
|
|
21
20
|
-ms-flex-pack: justify;
|
|
22
21
|
justify-content: space-between;
|
|
23
22
|
width: 100%;
|
|
24
23
|
margin-top: 8px;
|
|
25
24
|
}
|
|
25
|
+
.mfui-slider-ratio__display-value_left {
|
|
26
|
+
margin-right: auto;
|
|
27
|
+
}
|
|
28
|
+
.mfui-slider-ratio__display-value_right {
|
|
29
|
+
margin-left: auto;
|
|
30
|
+
}
|
|
26
31
|
.mfui-slider-ratio__range-container {
|
|
27
32
|
position: relative;
|
|
28
33
|
width: 100%;
|
|
@@ -74,6 +74,8 @@ var SliderRatio = function SliderRatio(_ref) {
|
|
|
74
74
|
var _a, _b;
|
|
75
75
|
|
|
76
76
|
var stepCount = values.length - 1;
|
|
77
|
+
var rangeInputRef = React.useRef(null);
|
|
78
|
+
var rangeTrackRef = React.useRef(null);
|
|
77
79
|
|
|
78
80
|
var _React$useState = React.useState(false),
|
|
79
81
|
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
@@ -106,7 +108,7 @@ var SliderRatio = function SliderRatio(_ref) {
|
|
|
106
108
|
|
|
107
109
|
var handleInputChange = function handleInputChange(key) {
|
|
108
110
|
return function (e) {
|
|
109
|
-
var targetValue = e.target.value;
|
|
111
|
+
var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
|
|
110
112
|
var closestValue = (0, _helpers2.findClosestValue)(values, Number(targetValue), key);
|
|
111
113
|
var newIndex = values.findIndex(function (value) {
|
|
112
114
|
return value[key] === closestValue;
|
|
@@ -138,7 +140,11 @@ var SliderRatio = function SliderRatio(_ref) {
|
|
|
138
140
|
newIndex !== currentIndex && (onChange === null || onChange === void 0 ? void 0 : onChange(newIndex));
|
|
139
141
|
};
|
|
140
142
|
|
|
141
|
-
var
|
|
143
|
+
var handleRangeTrackPointerUp = function handleRangeTrackPointerUp(e) {
|
|
144
|
+
if (disabled) {
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
|
|
142
148
|
var currentTarget = e.currentTarget;
|
|
143
149
|
var newRangeValue = (0, _helpers2.getRangeValueByPageX)(e.pageX, currentTarget, THUMB_SIZE);
|
|
144
150
|
var newIndex = (0, _helpers2.getIndexByRangeValue)(newRangeValue, stepCount);
|
|
@@ -147,6 +153,23 @@ var SliderRatio = function SliderRatio(_ref) {
|
|
|
147
153
|
newIndex !== currentIndex && (onChange === null || onChange === void 0 ? void 0 : onChange(newIndex));
|
|
148
154
|
};
|
|
149
155
|
|
|
156
|
+
var handleRangeTrackPointerLeave = React.useCallback(function () {
|
|
157
|
+
var _a, _b;
|
|
158
|
+
|
|
159
|
+
(_a = rangeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
160
|
+
(_b = rangeTrackRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointerleave', handleRangeTrackPointerLeave);
|
|
161
|
+
}, []);
|
|
162
|
+
|
|
163
|
+
var handleRangeTrackPointerDown = function handleRangeTrackPointerDown() {
|
|
164
|
+
var _a;
|
|
165
|
+
|
|
166
|
+
if (disabled) {
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
(_a = rangeTrackRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerleave', handleRangeTrackPointerLeave);
|
|
171
|
+
};
|
|
172
|
+
|
|
150
173
|
var handleInputBlur = function handleInputBlur(key) {
|
|
151
174
|
return function () {
|
|
152
175
|
onChange === null || onChange === void 0 ? void 0 : onChange(currentIndex);
|
|
@@ -172,6 +195,9 @@ var SliderRatio = function SliderRatio(_ref) {
|
|
|
172
195
|
}, label), /*#__PURE__*/React.createElement("div", {
|
|
173
196
|
className: cn('display-values')
|
|
174
197
|
}, /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
|
|
198
|
+
className: cn('display-value', {
|
|
199
|
+
left: true
|
|
200
|
+
}),
|
|
175
201
|
value: leftInputValue,
|
|
176
202
|
displayValueType: displayValueType,
|
|
177
203
|
displayValuePrefix: displayLeftValuePrefix,
|
|
@@ -183,6 +209,9 @@ var SliderRatio = function SliderRatio(_ref) {
|
|
|
183
209
|
input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
|
|
184
210
|
}
|
|
185
211
|
}), /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
|
|
212
|
+
className: cn('display-value', {
|
|
213
|
+
right: true
|
|
214
|
+
}),
|
|
186
215
|
value: rightInputValue,
|
|
187
216
|
displayValueType: displayValueType,
|
|
188
217
|
displayValuePrefix: displayRightValuePrefix,
|
|
@@ -207,9 +236,13 @@ var SliderRatio = function SliderRatio(_ref) {
|
|
|
207
236
|
style: {
|
|
208
237
|
backgroundSize: "".concat(trackSize, "% 100%")
|
|
209
238
|
}
|
|
210
|
-
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rangeInput)
|
|
239
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rangeInput), {
|
|
240
|
+
ref: rangeInputRef
|
|
241
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
211
242
|
className: cn('range-track'),
|
|
212
|
-
|
|
243
|
+
onPointerUp: handleRangeTrackPointerUp,
|
|
244
|
+
onPointerDown: handleRangeTrackPointerDown,
|
|
245
|
+
ref: rangeTrackRef
|
|
213
246
|
}), showScale && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
214
247
|
className: cn('scale')
|
|
215
248
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scale)), values.map(function (_, i) {
|
|
@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
11
11
|
|
|
12
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
13
|
|
|
14
|
+
require("core-js/modules/es.array.includes.js");
|
|
15
|
+
|
|
14
16
|
require("core-js/modules/es.object.values.js");
|
|
15
17
|
|
|
16
18
|
var React = _interopRequireWildcard(require("react"));
|
|
@@ -30,6 +32,7 @@ var DisplayValue = {
|
|
|
30
32
|
INPUT: 'input'
|
|
31
33
|
};
|
|
32
34
|
exports.DisplayValue = DisplayValue;
|
|
35
|
+
var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
|
|
33
36
|
var cn = (0, _uiHelpers.cnCreate)('mfui-slider-display-value');
|
|
34
37
|
|
|
35
38
|
var SliderDisplayValue = function SliderDisplayValue(_ref) {
|
|
@@ -42,6 +45,7 @@ var SliderDisplayValue = function SliderDisplayValue(_ref) {
|
|
|
42
45
|
dataAttrs = _ref.dataAttrs,
|
|
43
46
|
onChange = _ref.onChange,
|
|
44
47
|
onBlur = _ref.onBlur;
|
|
48
|
+
var inputRef = React.useRef(null);
|
|
45
49
|
|
|
46
50
|
var _React$useState = React.useState(false),
|
|
47
51
|
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
@@ -59,6 +63,20 @@ var SliderDisplayValue = function SliderDisplayValue(_ref) {
|
|
|
59
63
|
setIsFocused(true);
|
|
60
64
|
};
|
|
61
65
|
|
|
66
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
67
|
+
var _a;
|
|
68
|
+
|
|
69
|
+
if (e.key === 'Enter') {
|
|
70
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
71
|
+
onBlur();
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (charsAllowedByNumberInput.includes(e.key)) {
|
|
76
|
+
e.preventDefault();
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
|
|
62
80
|
return (
|
|
63
81
|
/*#__PURE__*/
|
|
64
82
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
@@ -79,8 +97,11 @@ var SliderDisplayValue = function SliderDisplayValue(_ref) {
|
|
|
79
97
|
onChange: onChange,
|
|
80
98
|
onBlur: handleInputBlur,
|
|
81
99
|
onFocus: handleInputFocus,
|
|
100
|
+
onKeyDown: handleKeyDown,
|
|
82
101
|
disabled: disabled
|
|
83
|
-
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input)
|
|
102
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
|
|
103
|
+
ref: inputRef
|
|
104
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
84
105
|
className: cn('line')
|
|
85
106
|
}, value)), !!displayValueUnit && /*#__PURE__*/React.createElement("div", {
|
|
86
107
|
className: cn('unit')
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export declare const getRangeValue: (value: string | number, minValue: number, maxValue: number, step: number) => number;
|
|
2
2
|
export declare const getTrackSize: (value: number | undefined, minValue: number, maxValue: number) => number;
|
|
3
|
+
export declare const removeFirstZeros: (targetValue: string) => string;
|
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getTrackSize = exports.getRangeValue = void 0;
|
|
6
|
+
exports.removeFirstZeros = exports.getTrackSize = exports.getRangeValue = void 0;
|
|
7
7
|
|
|
8
8
|
require("core-js/modules/es.number.constructor.js");
|
|
9
9
|
|
|
10
10
|
require("core-js/modules/es.number.to-fixed.js");
|
|
11
11
|
|
|
12
|
+
require("core-js/modules/es.regexp.exec.js");
|
|
13
|
+
|
|
14
|
+
require("core-js/modules/es.string.replace.js");
|
|
15
|
+
|
|
12
16
|
var getRangeValue = function getRangeValue(value, minValue, maxValue, step) {
|
|
13
17
|
var sourceValue = Number(value);
|
|
14
18
|
|
|
@@ -45,4 +49,10 @@ var getTrackSize = function getTrackSize() {
|
|
|
45
49
|
return Number(percent.toFixed(3));
|
|
46
50
|
};
|
|
47
51
|
|
|
48
|
-
exports.getTrackSize = getTrackSize;
|
|
52
|
+
exports.getTrackSize = getTrackSize;
|
|
53
|
+
|
|
54
|
+
var removeFirstZeros = function removeFirstZeros(targetValue) {
|
|
55
|
+
return /^0.+/.test(targetValue) ? targetValue.replace(/^(0){1,}/, '') : targetValue;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
exports.removeFirstZeros = removeFirstZeros;
|
|
@@ -149,14 +149,16 @@ h5 {
|
|
|
149
149
|
display: block;
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
|
-
.mfui-snackbar__text {
|
|
153
|
-
display: none;
|
|
152
|
+
.mfui-snackbar__text-wrapper {
|
|
154
153
|
-webkit-box-flex: 1;
|
|
155
154
|
-ms-flex-positive: 1;
|
|
156
155
|
flex-grow: 1;
|
|
157
|
-
overflow: hidden;
|
|
158
156
|
color: var(--base);
|
|
159
157
|
}
|
|
158
|
+
.mfui-snackbar__text {
|
|
159
|
+
display: none;
|
|
160
|
+
overflow: hidden;
|
|
161
|
+
}
|
|
160
162
|
@media screen and (min-width: 768px) {
|
|
161
163
|
.mfui-snackbar__text_desktop {
|
|
162
164
|
display: block;
|
|
@@ -236,7 +236,9 @@ var Snackbar = function Snackbar(_ref) {
|
|
|
236
236
|
closed: !isOpened
|
|
237
237
|
}, [classes.container]),
|
|
238
238
|
radius: "rounded"
|
|
239
|
-
}, !isHiddenIcon && renderedIcons, renderedTimer, /*#__PURE__*/_react["default"].createElement(
|
|
239
|
+
}, !isHiddenIcon && renderedIcons, renderedTimer, /*#__PURE__*/_react["default"].createElement("div", {
|
|
240
|
+
className: cn('text-wrapper')
|
|
241
|
+
}, /*#__PURE__*/_react["default"].createElement(_Caption["default"], {
|
|
240
242
|
className: cn('text', {
|
|
241
243
|
mobile: true
|
|
242
244
|
}, [classes.text]),
|
|
@@ -248,6 +250,7 @@ var Snackbar = function Snackbar(_ref) {
|
|
|
248
250
|
}
|
|
249
251
|
}, text), /*#__PURE__*/_react["default"].createElement(_Header["default"], {
|
|
250
252
|
as: "h5",
|
|
253
|
+
color: "inherit",
|
|
251
254
|
className: cn('text', {
|
|
252
255
|
desktop: true,
|
|
253
256
|
"short": !!hasTextButton
|
|
@@ -255,7 +258,7 @@ var Snackbar = function Snackbar(_ref) {
|
|
|
255
258
|
dataAttrs: {
|
|
256
259
|
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text
|
|
257
260
|
}
|
|
258
|
-
}, text), hasTextButton && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
261
|
+
}, text)), hasTextButton && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
259
262
|
type: "text",
|
|
260
263
|
sizeAll: "small",
|
|
261
264
|
sizeMobile: "extra-small",
|
package/dist/lib/index.d.ts
CHANGED
|
@@ -37,6 +37,7 @@ export { default as Preloader } from './components/Preloader/Preloader';
|
|
|
37
37
|
export { default as PriceBadge } from './components/Badges/components/PriceBadge/PriceBadge';
|
|
38
38
|
export { default as PromoBadge } from './components/Badges/components/PromoBadge/PromoBadge';
|
|
39
39
|
export { default as RadioButton } from './components/RadioButton/RadioButton';
|
|
40
|
+
export { default as Row } from './components/Row/Row';
|
|
40
41
|
export { default as Search } from './components/Search/Search';
|
|
41
42
|
export { default as Select } from './components/Select/Select';
|
|
42
43
|
export { default as Selector } from './components/Selector/Selector';
|
package/dist/lib/index.js
CHANGED
|
@@ -237,6 +237,12 @@ Object.defineProperty(exports, "RadioButton", {
|
|
|
237
237
|
return _RadioButton["default"];
|
|
238
238
|
}
|
|
239
239
|
});
|
|
240
|
+
Object.defineProperty(exports, "Row", {
|
|
241
|
+
enumerable: true,
|
|
242
|
+
get: function get() {
|
|
243
|
+
return _Row["default"];
|
|
244
|
+
}
|
|
245
|
+
});
|
|
240
246
|
Object.defineProperty(exports, "Search", {
|
|
241
247
|
enumerable: true,
|
|
242
248
|
get: function get() {
|
|
@@ -448,6 +454,8 @@ var _PromoBadge = _interopRequireDefault(require("./components/Badges/components
|
|
|
448
454
|
|
|
449
455
|
var _RadioButton = _interopRequireDefault(require("./components/RadioButton/RadioButton"));
|
|
450
456
|
|
|
457
|
+
var _Row = _interopRequireDefault(require("./components/Row/Row"));
|
|
458
|
+
|
|
451
459
|
var _Search = _interopRequireDefault(require("./components/Search/Search"));
|
|
452
460
|
|
|
453
461
|
var _Select = _interopRequireDefault(require("./components/Select/Select"));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.14.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@babel/preset-env": "^7.8.6",
|
|
51
51
|
"@babel/preset-react": "^7.8.3",
|
|
52
52
|
"@babel/preset-typescript": "^7.8.3",
|
|
53
|
-
"@megafon/ui-icons": "^2.
|
|
53
|
+
"@megafon/ui-icons": "^2.24.0",
|
|
54
54
|
"@svgr/core": "^2.4.1",
|
|
55
55
|
"@testing-library/jest-dom": "5.16.2",
|
|
56
56
|
"@testing-library/react": "12.1.2",
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
"react-popper": "^2.2.3",
|
|
98
98
|
"swiper": "^6.5.6"
|
|
99
99
|
},
|
|
100
|
-
"gitHead": "
|
|
100
|
+
"gitHead": "46f4100ccbc226ad65d8dd4ec69d43ec891b0e73"
|
|
101
101
|
}
|