@invoicebox/ui 0.1.0-alpha.320 → 0.1.0-alpha.322
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/common/AppCardLink/index.js +2 -1
- package/dist/components/common/BgCard/index.js +2 -1
- package/dist/components/common/BgCard/styles.js +2 -1
- package/dist/components/common/Calendar/index.js +2 -1
- package/dist/components/common/Calendar/index.stories.js +2 -1
- package/dist/components/common/Calendar/styles.js +2 -1
- package/dist/components/common/Divider/index.js +2 -1
- package/dist/components/common/Drawer/index.js +2 -1
- package/dist/components/common/Drawer/index.stories.js +2 -1
- package/dist/components/common/Drawer/styles.js +2 -1
- package/dist/components/common/Dropdown/index.js +2 -1
- package/dist/components/common/Dropdown/styles.js +9 -8
- package/dist/components/common/EntityAutocompleteOptionsDrawer/index.js +2 -1
- package/dist/components/common/EntityAutocompleteOptionsDrawer/index.stories.js +2 -1
- package/dist/components/common/Flag/index.js +2 -1
- package/dist/components/common/Flag/styles.js +2 -1
- package/dist/components/common/InvoiceboxSpinner/index.js +2 -1
- package/dist/components/common/InvoiceboxSpinner/styles.js +2 -1
- package/dist/components/common/PointsLoader/index.js +2 -1
- package/dist/components/common/QRCode/index.js +2 -2
- package/dist/components/common/ReadOnlyLabelValueField/index.js +2 -1
- package/dist/components/common/Scrollbar/index.js +2 -1
- package/dist/components/common/Scrollbar/styles.js +2 -1
- package/dist/components/common/SecondaryButton/index.js +4 -3
- package/dist/components/common/SecondaryButton/styles.js +2 -1
- package/dist/components/common/Skeleton/index.js +2 -1
- package/dist/components/common/Skeleton/styles.js +2 -1
- package/dist/components/common/Toast/index.js +2 -1
- package/dist/components/common/Tooltip/index.js +2 -1
- package/dist/components/common/Typography/index.js +4 -3
- package/dist/components/common/WarningIcon/index.js +2 -1
- package/dist/components/form/Autocomplete/components/Autocomplete/index.js +2 -1
- package/dist/components/form/Autocomplete/components/Autocomplete/index.stories.js +2 -1
- package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/index.js +2 -1
- package/dist/components/form/Checkbox/index.js +4 -3
- package/dist/components/form/Checkbox/index.stories.js +2 -1
- package/dist/components/form/CodeInput/index.js +2 -1
- package/dist/components/form/CodeInput/index.stories.js +2 -1
- package/dist/components/form/CountrySelect/components/CountryItem/index.d.ts +2 -1
- package/dist/components/form/CountrySelect/components/CountryItem/index.js +10 -4
- package/dist/components/form/CountrySelect/components/CountryItem/stlyes.d.ts +4 -0
- package/dist/components/form/CountrySelect/components/CountryItem/stlyes.js +18 -7
- package/dist/components/form/CountrySelect/index.d.ts +1 -0
- package/dist/components/form/CountrySelect/index.js +5 -3
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.js +2 -1
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js +2 -1
- package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.js +2 -2
- package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.stories.js +2 -1
- package/dist/components/form/CurrencyInput/CurrencyInputString/index.js +2 -2
- package/dist/components/form/CurrencyInput/CurrencyInputString/index.stories.js +2 -1
- package/dist/components/form/DateInput/components/CalendarIcon/index.js +2 -1
- package/dist/components/form/DateInput/components/MobileDrawerDateCalendar/index.js +2 -1
- package/dist/components/form/DateInput/components/MobileDrawerDateCalendar/index.stories.js +2 -1
- package/dist/components/form/DateInput/index.js +2 -1
- package/dist/components/form/DateInput/index.stories.js +2 -1
- package/dist/components/form/DateInput/logic.d.ts +1 -0
- package/dist/components/form/DateInput/logic.js +11 -0
- package/dist/components/form/DateTimeInput/components/MobileDatePicker/index.d.ts +12 -0
- package/dist/components/form/DateTimeInput/components/MobileDatePicker/index.js +83 -0
- package/dist/components/form/DateTimeInput/components/MobileDatePicker/index.stories.d.ts +6 -0
- package/dist/components/form/DateTimeInput/components/MobileDatePicker/index.stories.js +48 -0
- package/dist/components/form/DateTimeInput/components/MobileDatePicker/logic.d.ts +11 -0
- package/dist/components/form/DateTimeInput/components/MobileDatePicker/logic.js +92 -0
- package/dist/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/index.d.ts +4 -0
- package/dist/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/index.js +42 -22
- package/dist/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/index.stories.js +2 -1
- package/dist/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/styles.d.ts +1 -2
- package/dist/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/styles.js +4 -8
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/components/WheelColumn/index.d.ts +14 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/components/WheelColumn/index.js +259 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/components/WheelColumn/styles.d.ts +12 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/components/WheelColumn/styles.js +35 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/constants.d.ts +11 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/constants.js +40 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/index.d.ts +12 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/index.js +48 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/index.stories.d.ts +5 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/index.stories.js +47 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/palette.d.ts +9 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/palette.js +17 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/styles.d.ts +12 -0
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/styles.js +39 -0
- package/dist/components/form/DateTimeInput/components/TimePicker/index.d.ts +1 -0
- package/dist/components/form/DateTimeInput/components/TimePicker/index.js +34 -16
- package/dist/components/form/DateTimeInput/components/TimePicker/index.stories.d.ts +1 -0
- package/dist/components/form/DateTimeInput/components/TimePicker/index.stories.js +31 -17
- package/dist/components/form/DateTimeInput/components/TimePicker/styles.d.ts +0 -4
- package/dist/components/form/DateTimeInput/components/TimePicker/styles.js +2 -13
- package/dist/components/form/DateTimeInput/index.js +22 -4
- package/dist/components/form/DateTimeInput/index.stories.js +2 -1
- package/dist/components/form/InputLabel/index.js +2 -1
- package/dist/components/form/InputLabel/styles.js +2 -1
- package/dist/components/form/ModernPlaceholder/index.js +2 -1
- package/dist/components/form/PhoneInput/index.d.ts +1 -0
- package/dist/components/form/PhoneInput/index.js +2 -1
- package/dist/components/form/PhoneInput/index.stories.js +4 -2
- package/dist/components/form/PhoneInput/phoneInputLogic.d.ts +2 -0
- package/dist/components/form/PhoneInput/types.d.ts +1 -0
- package/dist/components/form/PositiveIntegerInput/index.js +2 -1
- package/dist/components/form/PositiveIntegerInput/index.stories.js +2 -1
- package/dist/components/form/PositiveIntegerInput/styles.js +2 -1
- package/dist/components/form/PureInput/index.js +4 -3
- package/dist/components/form/PureInput/styles.js +2 -2
- package/dist/components/form/ResetButton/index.js +2 -1
- package/dist/components/form/SearchInput/index.js +2 -1
- package/dist/components/form/SearchInput/index.stories.js +2 -1
- package/dist/components/form/Select/components/Input/index.js +2 -1
- package/dist/components/form/Select/components/Loader/index.js +2 -1
- package/dist/components/form/Select/components/MultipleValue/index.js +2 -1
- package/dist/components/form/Select/components/MultipleValue/styles.js +2 -1
- package/dist/components/form/Select/index.js +2 -1
- package/dist/components/form/Select/index.stories.js +2 -1
- package/dist/components/form/Select/styles.js +2 -1
- package/dist/components/form/TagsInput/index.js +2 -1
- package/dist/components/form/TagsInput/index.stories.js +2 -1
- package/dist/components/form/TagsInput/styles.js +2 -2
- package/dist/components/form/TextInput/index.js +2 -1
- package/dist/components/form/TextInput/index.stories.js +2 -1
- package/dist/components/form/Toggle/index.js +4 -3
- package/dist/components/form/Toggle/index.stories.js +2 -1
- package/dist/components/form/Toggle/styles.js +10 -10
- package/dist/components/form/_hooks/useInputStyles.js +2 -1
- package/dist/components/form/common/DrawerHeader/index.d.ts +2 -0
- package/dist/components/form/common/DrawerHeader/index.js +15 -5
- package/dist/components/form/common/DrawerHeader/styles.d.ts +4 -0
- package/dist/components/form/common/DrawerHeader/styles.js +17 -7
- package/dist/esm/components/common/Dropdown/styles.js +7 -7
- package/dist/esm/components/common/QRCode/index.js +2 -2
- package/dist/esm/components/common/SecondaryButton/index.js +2 -2
- package/dist/esm/components/common/Typography/index.js +2 -2
- package/dist/esm/components/form/Checkbox/index.js +2 -2
- package/dist/esm/components/form/CountrySelect/components/CountryItem/index.js +8 -3
- package/dist/esm/components/form/CountrySelect/components/CountryItem/stlyes.js +17 -6
- package/dist/esm/components/form/CountrySelect/index.js +3 -2
- package/dist/esm/components/form/CurrencyInput/CurrencyInputNumber/index.js +2 -2
- package/dist/esm/components/form/CurrencyInput/CurrencyInputString/index.js +2 -2
- package/dist/esm/components/form/DateInput/logic.js +11 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileDatePicker/index.js +74 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileDatePicker/index.stories.js +39 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileDatePicker/logic.js +86 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/index.js +40 -21
- package/dist/esm/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/styles.js +3 -7
- package/dist/esm/components/form/DateTimeInput/components/MobileWheelPicker/components/WheelColumn/index.js +250 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileWheelPicker/components/WheelColumn/styles.js +28 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileWheelPicker/constants.js +34 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileWheelPicker/index.js +32 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileWheelPicker/index.stories.js +38 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileWheelPicker/palette.js +10 -0
- package/dist/esm/components/form/DateTimeInput/components/MobileWheelPicker/styles.js +32 -0
- package/dist/esm/components/form/DateTimeInput/components/TimePicker/index.js +32 -15
- package/dist/esm/components/form/DateTimeInput/components/TimePicker/index.stories.js +29 -15
- package/dist/esm/components/form/DateTimeInput/components/TimePicker/styles.js +1 -12
- package/dist/esm/components/form/DateTimeInput/index.js +21 -4
- package/dist/esm/components/form/PhoneInput/index.stories.js +2 -1
- package/dist/esm/components/form/PureInput/index.js +2 -2
- package/dist/esm/components/form/PureInput/styles.js +2 -2
- package/dist/esm/components/form/TagsInput/styles.js +2 -2
- package/dist/esm/components/form/Toggle/index.js +2 -2
- package/dist/esm/components/form/Toggle/styles.js +10 -10
- package/dist/esm/components/form/common/DrawerHeader/index.js +13 -4
- package/dist/esm/components/form/common/DrawerHeader/styles.js +16 -6
- package/dist/esm/palette/context.js +2 -0
- package/dist/esm/palette/provider.js +2 -0
- package/dist/hooks/useUnupdatableHandler/index.stories.js +2 -1
- package/dist/palette/context.d.ts +2 -0
- package/dist/palette/context.js +48 -46
- package/dist/palette/provider.js +50 -47
- package/dist/palette/usePalette.d.ts +1 -0
- package/package.json +1 -1
- package/dist/components/form/DateTimeInput/components/MobileNumbersColumn/index.d.ts +0 -8
- package/dist/components/form/DateTimeInput/components/MobileNumbersColumn/index.js +0 -201
- package/dist/components/form/DateTimeInput/components/MobileNumbersColumn/styles.d.ts +0 -7
- package/dist/components/form/DateTimeInput/components/MobileNumbersColumn/styles.js +0 -27
- package/dist/esm/components/form/DateTimeInput/components/MobileNumbersColumn/index.js +0 -193
- package/dist/esm/components/form/DateTimeInput/components/MobileNumbersColumn/styles.js +0 -19
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var S = _interopRequireWildcard(require("./styles"));
|
|
10
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
11
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
12
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
13
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
14
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
15
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
16
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
17
|
-
// Константы для оптимизации
|
|
18
|
-
var OPACITY_STEPS = [1, 0.8, 0.5, 0.3, 0.2];
|
|
19
|
-
var INCLINE_STEPS = [0, 20, 45, 70, 80];
|
|
20
|
-
var MobileNumbersColumn = function MobileNumbersColumn(_ref) {
|
|
21
|
-
var numbers = _ref.numbers,
|
|
22
|
-
value = _ref.value,
|
|
23
|
-
onChange = _ref.onChange;
|
|
24
|
-
var _useState = (0, _react.useState)(null),
|
|
25
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
26
|
-
centerNumber = _useState2[0],
|
|
27
|
-
setCenterNumber = _useState2[1];
|
|
28
|
-
var containerRef = (0, _react.useRef)(null);
|
|
29
|
-
var itemsRef = (0, _react.useRef)([]);
|
|
30
|
-
var isScrollingRef = (0, _react.useRef)(null);
|
|
31
|
-
var rafRef = (0, _react.useRef)(null);
|
|
32
|
-
|
|
33
|
-
// Функция для центрирования элемента
|
|
34
|
-
var snapToCenter = (0, _react.useCallback)(function (index) {
|
|
35
|
-
if (!containerRef.current || index === -1) return;
|
|
36
|
-
var container = containerRef.current;
|
|
37
|
-
var item = itemsRef.current[index];
|
|
38
|
-
if (!item) return;
|
|
39
|
-
var scrollOffset = item.offsetTop - container.clientHeight / 2 + item.clientHeight / 2;
|
|
40
|
-
container.scrollTo({
|
|
41
|
-
top: scrollOffset,
|
|
42
|
-
behavior: 'smooth'
|
|
43
|
-
});
|
|
44
|
-
}, []);
|
|
45
|
-
|
|
46
|
-
// Оптимизированная функция поиска центра
|
|
47
|
-
var findCenterElement = (0, _react.useCallback)(function () {
|
|
48
|
-
if (!containerRef.current) return -1;
|
|
49
|
-
var container = containerRef.current;
|
|
50
|
-
var containerRect = container.getBoundingClientRect();
|
|
51
|
-
var containerCenter = containerRect.top + containerRect.height / 2;
|
|
52
|
-
var minDistance = Infinity;
|
|
53
|
-
var closestIndex = -1;
|
|
54
|
-
|
|
55
|
-
// Находим только ближайший индекс
|
|
56
|
-
itemsRef.current.forEach(function (item, index) {
|
|
57
|
-
if (item) {
|
|
58
|
-
var itemRect = item.getBoundingClientRect();
|
|
59
|
-
var itemCenter = itemRect.top + itemRect.height / 2;
|
|
60
|
-
var distance = Math.abs(itemCenter - containerCenter);
|
|
61
|
-
if (distance < minDistance) {
|
|
62
|
-
minDistance = distance;
|
|
63
|
-
closestIndex = index;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
var newNumber = numbers.find(function (a, index) {
|
|
68
|
-
return index === closestIndex;
|
|
69
|
-
});
|
|
70
|
-
if (closestIndex !== -1 && typeof newNumber === 'number') {
|
|
71
|
-
setCenterNumber(newNumber.toString());
|
|
72
|
-
}
|
|
73
|
-
return closestIndex;
|
|
74
|
-
}, [numbers]);
|
|
75
|
-
(0, _react.useEffect)(function () {
|
|
76
|
-
if (value) {
|
|
77
|
-
var indexValue = numbers.indexOf(value);
|
|
78
|
-
snapToCenter(indexValue);
|
|
79
|
-
} else {
|
|
80
|
-
snapToCenter(0);
|
|
81
|
-
}
|
|
82
|
-
}, [numbers, snapToCenter, value]);
|
|
83
|
-
|
|
84
|
-
// Оптимизированный обработчик скролла
|
|
85
|
-
(0, _react.useEffect)(function () {
|
|
86
|
-
if (!containerRef.current) return;
|
|
87
|
-
var container = containerRef.current;
|
|
88
|
-
var handleScroll = function handleScroll() {
|
|
89
|
-
if (rafRef.current) {
|
|
90
|
-
cancelAnimationFrame(rafRef.current);
|
|
91
|
-
}
|
|
92
|
-
rafRef.current = requestAnimationFrame(function () {
|
|
93
|
-
findCenterElement();
|
|
94
|
-
});
|
|
95
|
-
if (isScrollingRef.current) {
|
|
96
|
-
clearTimeout(isScrollingRef.current);
|
|
97
|
-
}
|
|
98
|
-
isScrollingRef.current = setTimeout(function () {
|
|
99
|
-
var closestIndex = findCenterElement();
|
|
100
|
-
if (closestIndex !== -1) {
|
|
101
|
-
snapToCenter(closestIndex);
|
|
102
|
-
var newNumber = numbers.find(function (item, index) {
|
|
103
|
-
return index === closestIndex;
|
|
104
|
-
});
|
|
105
|
-
if (typeof newNumber === 'number') {
|
|
106
|
-
onChange(newNumber);
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
}, 150);
|
|
110
|
-
};
|
|
111
|
-
container.addEventListener('scroll', handleScroll, {
|
|
112
|
-
passive: true
|
|
113
|
-
});
|
|
114
|
-
setTimeout(function () {
|
|
115
|
-
return findCenterElement();
|
|
116
|
-
}, 0);
|
|
117
|
-
return function () {
|
|
118
|
-
container.removeEventListener('scroll', handleScroll);
|
|
119
|
-
if (rafRef.current) {
|
|
120
|
-
cancelAnimationFrame(rafRef.current);
|
|
121
|
-
}
|
|
122
|
-
if (isScrollingRef.current) {
|
|
123
|
-
clearTimeout(isScrollingRef.current);
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
}, [findCenterElement, numbers, onChange, snapToCenter]);
|
|
127
|
-
|
|
128
|
-
// Функция получения стилей на основе индекса
|
|
129
|
-
var getItemStyles = (0, _react.useCallback)(function (index) {
|
|
130
|
-
if (!centerNumber) return {
|
|
131
|
-
opacity: 0.2,
|
|
132
|
-
incline: 80
|
|
133
|
-
};
|
|
134
|
-
var activeIndex = numbers.indexOf(Number(centerNumber));
|
|
135
|
-
|
|
136
|
-
// Расстояние от активного элемента
|
|
137
|
-
var distance = Math.abs(index - activeIndex);
|
|
138
|
-
var maxDistance = 5; // Максимальное расстояние для применения эффекта
|
|
139
|
-
|
|
140
|
-
// Выбираем стиль на основе расстояния
|
|
141
|
-
var stepIndex = Math.min(distance, maxDistance);
|
|
142
|
-
|
|
143
|
-
// Используем предвычисленные значения
|
|
144
|
-
var opacityIndex = Math.min(stepIndex, OPACITY_STEPS.length - 1);
|
|
145
|
-
var inclineIndex = Math.min(stepIndex, INCLINE_STEPS.length - 1);
|
|
146
|
-
return {
|
|
147
|
-
opacity: OPACITY_STEPS[opacityIndex],
|
|
148
|
-
incline: INCLINE_STEPS[inclineIndex]
|
|
149
|
-
};
|
|
150
|
-
}, [centerNumber, numbers]);
|
|
151
|
-
var handleNumberClick = (0, _react.useCallback)(function (index) {
|
|
152
|
-
snapToCenter(index);
|
|
153
|
-
}, [snapToCenter]);
|
|
154
|
-
return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
|
|
155
|
-
ref: containerRef
|
|
156
|
-
}, /*#__PURE__*/_react["default"].createElement(S.Number, {
|
|
157
|
-
$opacity: 0,
|
|
158
|
-
$isActive: false,
|
|
159
|
-
$incline: 0
|
|
160
|
-
}), /*#__PURE__*/_react["default"].createElement(S.Number, {
|
|
161
|
-
$opacity: 0,
|
|
162
|
-
$isActive: false,
|
|
163
|
-
$incline: 0
|
|
164
|
-
}), /*#__PURE__*/_react["default"].createElement(S.Number, {
|
|
165
|
-
$opacity: 0,
|
|
166
|
-
$isActive: false,
|
|
167
|
-
$incline: 0
|
|
168
|
-
}), numbers.map(function (numberItem, index) {
|
|
169
|
-
var _getItemStyles = getItemStyles(index),
|
|
170
|
-
opacity = _getItemStyles.opacity,
|
|
171
|
-
incline = _getItemStyles.incline;
|
|
172
|
-
var isActive = centerNumber === numberItem.toString();
|
|
173
|
-
return /*#__PURE__*/_react["default"].createElement(S.Number, {
|
|
174
|
-
key: numberItem,
|
|
175
|
-
$opacity: opacity,
|
|
176
|
-
$incline: incline,
|
|
177
|
-
$isActive: isActive,
|
|
178
|
-
ref: function ref(el) {
|
|
179
|
-
if (el) {
|
|
180
|
-
itemsRef.current[index] = el;
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
|
-
onClick: function onClick() {
|
|
184
|
-
return handleNumberClick(index);
|
|
185
|
-
}
|
|
186
|
-
}, numberItem.toString().length === 1 ? "0".concat(numberItem) : numberItem);
|
|
187
|
-
}), /*#__PURE__*/_react["default"].createElement(S.Number, {
|
|
188
|
-
$opacity: 0,
|
|
189
|
-
$isActive: false,
|
|
190
|
-
$incline: 0
|
|
191
|
-
}), /*#__PURE__*/_react["default"].createElement(S.Number, {
|
|
192
|
-
$opacity: 0,
|
|
193
|
-
$isActive: false,
|
|
194
|
-
$incline: 0
|
|
195
|
-
}), /*#__PURE__*/_react["default"].createElement(S.Number, {
|
|
196
|
-
$opacity: 0,
|
|
197
|
-
$isActive: false,
|
|
198
|
-
$incline: 0
|
|
199
|
-
}));
|
|
200
|
-
};
|
|
201
|
-
var _default = exports["default"] = MobileNumbersColumn;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
|
-
export declare const Number: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
4
|
-
$opacity: number;
|
|
5
|
-
$incline: number;
|
|
6
|
-
$isActive: boolean;
|
|
7
|
-
}>> & string;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.Wrapper = exports.Number = void 0;
|
|
8
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
-
var _reducedMotion = require("../../../../../utils/reducedMotion");
|
|
10
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
11
|
-
var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
|
|
12
|
-
displayName: "styles__Wrapper",
|
|
13
|
-
componentId: "sc-jqg7lg-0"
|
|
14
|
-
})(["height:100%;overflow:scroll;display:flex;flex-direction:column;align-items:center;width:100%;position:relative;text-align:right;transform:translateZ(0);backface-visibility:hidden;will-change:transform;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
|
|
15
|
-
var Number = exports.Number = _styledComponents["default"].div.withConfig({
|
|
16
|
-
displayName: "styles__Number",
|
|
17
|
-
componentId: "sc-jqg7lg-1"
|
|
18
|
-
})(["opacity:", ";width:28px;height:28px;flex-shrink:0;transform:translateZ(0) rotateX(", "deg);backface-visibility:hidden;will-change:transform,opacity;transition:all 0.1s ease;", " ", ""], function (_ref) {
|
|
19
|
-
var $opacity = _ref.$opacity;
|
|
20
|
-
return $opacity;
|
|
21
|
-
}, function (_ref2) {
|
|
22
|
-
var $incline = _ref2.$incline;
|
|
23
|
-
return $incline;
|
|
24
|
-
}, function (_ref3) {
|
|
25
|
-
var $isActive = _ref3.$isActive;
|
|
26
|
-
return $isActive && (0, _styledComponents.css)(["margin:4px 0;"]);
|
|
27
|
-
}, _reducedMotion.reducedMotion);
|
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
7
|
-
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
8
|
-
import * as S from './styles';
|
|
9
|
-
// Константы для оптимизации
|
|
10
|
-
var OPACITY_STEPS = [1, 0.8, 0.5, 0.3, 0.2];
|
|
11
|
-
var INCLINE_STEPS = [0, 20, 45, 70, 80];
|
|
12
|
-
var MobileNumbersColumn = function MobileNumbersColumn(_ref) {
|
|
13
|
-
var numbers = _ref.numbers,
|
|
14
|
-
value = _ref.value,
|
|
15
|
-
onChange = _ref.onChange;
|
|
16
|
-
var _useState = useState(null),
|
|
17
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
18
|
-
centerNumber = _useState2[0],
|
|
19
|
-
setCenterNumber = _useState2[1];
|
|
20
|
-
var containerRef = useRef(null);
|
|
21
|
-
var itemsRef = useRef([]);
|
|
22
|
-
var isScrollingRef = useRef(null);
|
|
23
|
-
var rafRef = useRef(null);
|
|
24
|
-
|
|
25
|
-
// Функция для центрирования элемента
|
|
26
|
-
var snapToCenter = useCallback(function (index) {
|
|
27
|
-
if (!containerRef.current || index === -1) return;
|
|
28
|
-
var container = containerRef.current;
|
|
29
|
-
var item = itemsRef.current[index];
|
|
30
|
-
if (!item) return;
|
|
31
|
-
var scrollOffset = item.offsetTop - container.clientHeight / 2 + item.clientHeight / 2;
|
|
32
|
-
container.scrollTo({
|
|
33
|
-
top: scrollOffset,
|
|
34
|
-
behavior: 'smooth'
|
|
35
|
-
});
|
|
36
|
-
}, []);
|
|
37
|
-
|
|
38
|
-
// Оптимизированная функция поиска центра
|
|
39
|
-
var findCenterElement = useCallback(function () {
|
|
40
|
-
if (!containerRef.current) return -1;
|
|
41
|
-
var container = containerRef.current;
|
|
42
|
-
var containerRect = container.getBoundingClientRect();
|
|
43
|
-
var containerCenter = containerRect.top + containerRect.height / 2;
|
|
44
|
-
var minDistance = Infinity;
|
|
45
|
-
var closestIndex = -1;
|
|
46
|
-
|
|
47
|
-
// Находим только ближайший индекс
|
|
48
|
-
itemsRef.current.forEach(function (item, index) {
|
|
49
|
-
if (item) {
|
|
50
|
-
var itemRect = item.getBoundingClientRect();
|
|
51
|
-
var itemCenter = itemRect.top + itemRect.height / 2;
|
|
52
|
-
var distance = Math.abs(itemCenter - containerCenter);
|
|
53
|
-
if (distance < minDistance) {
|
|
54
|
-
minDistance = distance;
|
|
55
|
-
closestIndex = index;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
var newNumber = numbers.find(function (a, index) {
|
|
60
|
-
return index === closestIndex;
|
|
61
|
-
});
|
|
62
|
-
if (closestIndex !== -1 && typeof newNumber === 'number') {
|
|
63
|
-
setCenterNumber(newNumber.toString());
|
|
64
|
-
}
|
|
65
|
-
return closestIndex;
|
|
66
|
-
}, [numbers]);
|
|
67
|
-
useEffect(function () {
|
|
68
|
-
if (value) {
|
|
69
|
-
var indexValue = numbers.indexOf(value);
|
|
70
|
-
snapToCenter(indexValue);
|
|
71
|
-
} else {
|
|
72
|
-
snapToCenter(0);
|
|
73
|
-
}
|
|
74
|
-
}, [numbers, snapToCenter, value]);
|
|
75
|
-
|
|
76
|
-
// Оптимизированный обработчик скролла
|
|
77
|
-
useEffect(function () {
|
|
78
|
-
if (!containerRef.current) return;
|
|
79
|
-
var container = containerRef.current;
|
|
80
|
-
var handleScroll = function handleScroll() {
|
|
81
|
-
if (rafRef.current) {
|
|
82
|
-
cancelAnimationFrame(rafRef.current);
|
|
83
|
-
}
|
|
84
|
-
rafRef.current = requestAnimationFrame(function () {
|
|
85
|
-
findCenterElement();
|
|
86
|
-
});
|
|
87
|
-
if (isScrollingRef.current) {
|
|
88
|
-
clearTimeout(isScrollingRef.current);
|
|
89
|
-
}
|
|
90
|
-
isScrollingRef.current = setTimeout(function () {
|
|
91
|
-
var closestIndex = findCenterElement();
|
|
92
|
-
if (closestIndex !== -1) {
|
|
93
|
-
snapToCenter(closestIndex);
|
|
94
|
-
var newNumber = numbers.find(function (item, index) {
|
|
95
|
-
return index === closestIndex;
|
|
96
|
-
});
|
|
97
|
-
if (typeof newNumber === 'number') {
|
|
98
|
-
onChange(newNumber);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}, 150);
|
|
102
|
-
};
|
|
103
|
-
container.addEventListener('scroll', handleScroll, {
|
|
104
|
-
passive: true
|
|
105
|
-
});
|
|
106
|
-
setTimeout(function () {
|
|
107
|
-
return findCenterElement();
|
|
108
|
-
}, 0);
|
|
109
|
-
return function () {
|
|
110
|
-
container.removeEventListener('scroll', handleScroll);
|
|
111
|
-
if (rafRef.current) {
|
|
112
|
-
cancelAnimationFrame(rafRef.current);
|
|
113
|
-
}
|
|
114
|
-
if (isScrollingRef.current) {
|
|
115
|
-
clearTimeout(isScrollingRef.current);
|
|
116
|
-
}
|
|
117
|
-
};
|
|
118
|
-
}, [findCenterElement, numbers, onChange, snapToCenter]);
|
|
119
|
-
|
|
120
|
-
// Функция получения стилей на основе индекса
|
|
121
|
-
var getItemStyles = useCallback(function (index) {
|
|
122
|
-
if (!centerNumber) return {
|
|
123
|
-
opacity: 0.2,
|
|
124
|
-
incline: 80
|
|
125
|
-
};
|
|
126
|
-
var activeIndex = numbers.indexOf(Number(centerNumber));
|
|
127
|
-
|
|
128
|
-
// Расстояние от активного элемента
|
|
129
|
-
var distance = Math.abs(index - activeIndex);
|
|
130
|
-
var maxDistance = 5; // Максимальное расстояние для применения эффекта
|
|
131
|
-
|
|
132
|
-
// Выбираем стиль на основе расстояния
|
|
133
|
-
var stepIndex = Math.min(distance, maxDistance);
|
|
134
|
-
|
|
135
|
-
// Используем предвычисленные значения
|
|
136
|
-
var opacityIndex = Math.min(stepIndex, OPACITY_STEPS.length - 1);
|
|
137
|
-
var inclineIndex = Math.min(stepIndex, INCLINE_STEPS.length - 1);
|
|
138
|
-
return {
|
|
139
|
-
opacity: OPACITY_STEPS[opacityIndex],
|
|
140
|
-
incline: INCLINE_STEPS[inclineIndex]
|
|
141
|
-
};
|
|
142
|
-
}, [centerNumber, numbers]);
|
|
143
|
-
var handleNumberClick = useCallback(function (index) {
|
|
144
|
-
snapToCenter(index);
|
|
145
|
-
}, [snapToCenter]);
|
|
146
|
-
return /*#__PURE__*/React.createElement(S.Wrapper, {
|
|
147
|
-
ref: containerRef
|
|
148
|
-
}, /*#__PURE__*/React.createElement(S.Number, {
|
|
149
|
-
$opacity: 0,
|
|
150
|
-
$isActive: false,
|
|
151
|
-
$incline: 0
|
|
152
|
-
}), /*#__PURE__*/React.createElement(S.Number, {
|
|
153
|
-
$opacity: 0,
|
|
154
|
-
$isActive: false,
|
|
155
|
-
$incline: 0
|
|
156
|
-
}), /*#__PURE__*/React.createElement(S.Number, {
|
|
157
|
-
$opacity: 0,
|
|
158
|
-
$isActive: false,
|
|
159
|
-
$incline: 0
|
|
160
|
-
}), numbers.map(function (numberItem, index) {
|
|
161
|
-
var _getItemStyles = getItemStyles(index),
|
|
162
|
-
opacity = _getItemStyles.opacity,
|
|
163
|
-
incline = _getItemStyles.incline;
|
|
164
|
-
var isActive = centerNumber === numberItem.toString();
|
|
165
|
-
return /*#__PURE__*/React.createElement(S.Number, {
|
|
166
|
-
key: numberItem,
|
|
167
|
-
$opacity: opacity,
|
|
168
|
-
$incline: incline,
|
|
169
|
-
$isActive: isActive,
|
|
170
|
-
ref: function ref(el) {
|
|
171
|
-
if (el) {
|
|
172
|
-
itemsRef.current[index] = el;
|
|
173
|
-
}
|
|
174
|
-
},
|
|
175
|
-
onClick: function onClick() {
|
|
176
|
-
return handleNumberClick(index);
|
|
177
|
-
}
|
|
178
|
-
}, numberItem.toString().length === 1 ? "0".concat(numberItem) : numberItem);
|
|
179
|
-
}), /*#__PURE__*/React.createElement(S.Number, {
|
|
180
|
-
$opacity: 0,
|
|
181
|
-
$isActive: false,
|
|
182
|
-
$incline: 0
|
|
183
|
-
}), /*#__PURE__*/React.createElement(S.Number, {
|
|
184
|
-
$opacity: 0,
|
|
185
|
-
$isActive: false,
|
|
186
|
-
$incline: 0
|
|
187
|
-
}), /*#__PURE__*/React.createElement(S.Number, {
|
|
188
|
-
$opacity: 0,
|
|
189
|
-
$isActive: false,
|
|
190
|
-
$incline: 0
|
|
191
|
-
}));
|
|
192
|
-
};
|
|
193
|
-
export default MobileNumbersColumn;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
import { reducedMotion } from '../../../../../utils/reducedMotion';
|
|
3
|
-
export var Wrapper = styled.div.withConfig({
|
|
4
|
-
displayName: "styles__Wrapper",
|
|
5
|
-
componentId: "sc-jqg7lg-0"
|
|
6
|
-
})(["height:100%;overflow:scroll;display:flex;flex-direction:column;align-items:center;width:100%;position:relative;text-align:right;transform:translateZ(0);backface-visibility:hidden;will-change:transform;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
|
|
7
|
-
export var Number = styled.div.withConfig({
|
|
8
|
-
displayName: "styles__Number",
|
|
9
|
-
componentId: "sc-jqg7lg-1"
|
|
10
|
-
})(["opacity:", ";width:28px;height:28px;flex-shrink:0;transform:translateZ(0) rotateX(", "deg);backface-visibility:hidden;will-change:transform,opacity;transition:all 0.1s ease;", " ", ""], function (_ref) {
|
|
11
|
-
var $opacity = _ref.$opacity;
|
|
12
|
-
return $opacity;
|
|
13
|
-
}, function (_ref2) {
|
|
14
|
-
var $incline = _ref2.$incline;
|
|
15
|
-
return $incline;
|
|
16
|
-
}, function (_ref3) {
|
|
17
|
-
var $isActive = _ref3.$isActive;
|
|
18
|
-
return $isActive && css(["margin:4px 0;"]);
|
|
19
|
-
}, reducedMotion);
|