@salutejs/plasma-core 1.226.1-next-sbcom.0 → 1.227.0-dev.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/__helpers/IconPlaceholder.js +6 -9
- package/__helpers/index.js +1 -1
- package/collectPackageInfo.js +4 -4
- package/components/Badge/Badge.js +30 -103
- package/components/Badge/index.js +1 -1
- package/components/Basebox/Basebox.js +33 -42
- package/components/Basebox/index.js +1 -1
- package/components/Button/Button.js +28 -67
- package/components/Button/Button.mixins.js +22 -76
- package/components/Button/Button.props.js +5 -5
- package/components/Button/createButton.js +14 -145
- package/components/Button/index.js +4 -4
- package/components/Card/Card.js +34 -162
- package/components/Card/CardBody.js +4 -4
- package/components/Card/CardContent.js +14 -23
- package/components/Card/CardMedia.js +20 -91
- package/components/Card/CardPrice.js +18 -60
- package/components/Card/CardTypography.js +43 -52
- package/components/Card/index.js +5 -5
- package/components/Carousel/Carousel.js +46 -64
- package/components/Carousel/CarouselItem.js +21 -93
- package/components/Carousel/hooks.js +62 -121
- package/components/Carousel/index.js +3 -3
- package/components/Carousel/utils.js +59 -73
- package/components/Fade/Fade.js +6 -9
- package/components/Fade/index.js +1 -1
- package/components/Field/Field.js +48 -63
- package/components/Field/Field.statuses.js +3 -3
- package/components/Field/index.js +2 -2
- package/components/Image/Image.js +34 -115
- package/components/Image/index.js +1 -1
- package/components/Input/Input.js +7 -7
- package/components/Input/Input.mixins.js +9 -12
- package/components/Input/index.js +1 -1
- package/components/ModalBase/ModalBase.js +22 -100
- package/components/ModalBase/ModalBaseContext.js +6 -9
- package/components/ModalBase/ModalOverlay.js +28 -111
- package/components/ModalBase/hooks.js +15 -43
- package/components/ModalBase/index.js +2 -2
- package/components/PaginationDots/PaginationDot.js +11 -17
- package/components/PaginationDots/PaginationDots.js +4 -7
- package/components/PaginationDots/index.js +3 -3
- package/components/PaginationDots/usePaginationDots.js +10 -11
- package/components/Popup/Popup.js +52 -205
- package/components/Popup/index.js +1 -1
- package/components/PopupBase/PopupBase.js +35 -169
- package/components/PopupBase/PopupBaseContext.js +26 -86
- package/components/PopupBase/PopupBaseRoot.js +31 -169
- package/components/PopupBase/hooks.js +23 -97
- package/components/PopupBase/index.js +3 -3
- package/components/PopupBase/utils.js +32 -78
- package/components/Price/Price.js +15 -90
- package/components/Price/index.js +1 -1
- package/components/RadioGroup/RadioGroup.js +6 -127
- package/components/RadioGroup/index.js +1 -1
- package/components/SSRProvider/SSRProvider.js +4 -5
- package/components/SSRProvider/index.js +1 -1
- package/components/Skeleton/LineSkeleton.js +23 -95
- package/components/Skeleton/RectSkeleton.js +20 -93
- package/components/Skeleton/Skeleton.js +2 -2
- package/components/Skeleton/TextSkeleton.js +11 -55
- package/components/Skeleton/index.js +3 -3
- package/components/Slider/Double.js +52 -203
- package/components/Slider/Handle.js +28 -158
- package/components/Slider/Single.js +29 -177
- package/components/Slider/Slider.js +5 -7
- package/components/Slider/SliderBase.js +39 -48
- package/components/Slider/ThumbBase.js +19 -95
- package/components/Slider/index.js +3 -3
- package/components/Slider/utils.js +2 -2
- package/components/Spinner/Spinner.js +28 -100
- package/components/Spinner/SpinnerSvg.js +9 -78
- package/components/Spinner/index.js +1 -1
- package/components/Switch/Switch.js +49 -220
- package/components/Switch/index.js +1 -1
- package/components/Tabs/TabItem.js +33 -168
- package/components/Tabs/Tabs.js +32 -170
- package/components/Tabs/TabsContext.js +12 -42
- package/components/Tabs/createTabsController.js +33 -168
- package/components/Tabs/index.js +4 -4
- package/components/TextArea/TextArea.js +20 -30
- package/components/TextArea/index.js +1 -1
- package/components/TextField/index.js +3 -3
- package/components/Toast/Toast.js +15 -16
- package/components/Toast/ToastContext.js +4 -8
- package/components/Toast/ToastController.js +44 -101
- package/components/Toast/ToastProvider.js +37 -142
- package/components/Toast/index.js +3 -3
- package/components/Toast/useToast.js +6 -6
- package/components/Typography/Body.js +18 -18
- package/components/Typography/Button.js +13 -13
- package/components/Typography/Caption.js +8 -8
- package/components/Typography/Display.js +18 -18
- package/components/Typography/Footnote.js +13 -13
- package/components/Typography/Headline.js +43 -43
- package/components/Typography/Paragraph.js +24 -24
- package/components/Typography/Underline.js +8 -8
- package/es/__helpers/IconPlaceholder.js +5 -8
- package/es/collectPackageInfo.js +3 -3
- package/es/components/Badge/Badge.js +27 -100
- package/es/components/Basebox/Basebox.js +28 -37
- package/es/components/Button/Button.js +24 -63
- package/es/components/Button/Button.mixins.js +19 -73
- package/es/components/Button/Button.props.js +3 -3
- package/es/components/Button/createButton.js +12 -143
- package/es/components/Card/Card.js +29 -157
- package/es/components/Card/CardBody.js +2 -2
- package/es/components/Card/CardContent.js +12 -21
- package/es/components/Card/CardMedia.js +17 -88
- package/es/components/Card/CardPrice.js +13 -55
- package/es/components/Card/CardTypography.js +43 -52
- package/es/components/Carousel/Carousel.js +45 -63
- package/es/components/Carousel/CarouselItem.js +18 -90
- package/es/components/Carousel/hooks.js +58 -117
- package/es/components/Carousel/utils.js +58 -72
- package/es/components/Fade/Fade.js +5 -8
- package/es/components/Field/Field.js +44 -59
- package/es/components/Field/Field.statuses.js +4 -4
- package/es/components/Image/Image.js +31 -112
- package/es/components/Input/Input.js +4 -4
- package/es/components/Input/Input.mixins.js +6 -9
- package/es/components/ModalBase/ModalBase.js +16 -94
- package/es/components/ModalBase/ModalBaseContext.js +6 -9
- package/es/components/ModalBase/ModalOverlay.js +23 -106
- package/es/components/ModalBase/hooks.js +12 -40
- package/es/components/PaginationDots/PaginationDot.js +9 -15
- package/es/components/PaginationDots/PaginationDots.js +3 -6
- package/es/components/PaginationDots/usePaginationDots.js +9 -10
- package/es/components/Popup/Popup.js +48 -201
- package/es/components/PopupBase/PopupBase.js +27 -161
- package/es/components/PopupBase/PopupBaseContext.js +25 -85
- package/es/components/PopupBase/PopupBaseRoot.js +26 -164
- package/es/components/PopupBase/hooks.js +21 -95
- package/es/components/PopupBase/utils.js +31 -77
- package/es/components/Price/Price.js +12 -87
- package/es/components/RadioGroup/RadioGroup.js +5 -126
- package/es/components/SSRProvider/SSRProvider.js +3 -4
- package/es/components/Skeleton/LineSkeleton.js +18 -90
- package/es/components/Skeleton/RectSkeleton.js +16 -89
- package/es/components/Skeleton/Skeleton.js +2 -2
- package/es/components/Skeleton/TextSkeleton.js +7 -51
- package/es/components/Slider/Double.js +49 -200
- package/es/components/Slider/Handle.js +23 -153
- package/es/components/Slider/Single.js +26 -174
- package/es/components/Slider/Slider.js +2 -4
- package/es/components/Slider/SliderBase.js +36 -45
- package/es/components/Slider/ThumbBase.js +16 -92
- package/es/components/Slider/index.js +1 -1
- package/es/components/Slider/utils.js +2 -2
- package/es/components/Spinner/Spinner.js +23 -95
- package/es/components/Spinner/SpinnerSvg.js +8 -77
- package/es/components/Switch/Switch.js +45 -216
- package/es/components/Tabs/TabItem.js +28 -163
- package/es/components/Tabs/Tabs.js +28 -166
- package/es/components/Tabs/TabsContext.js +11 -41
- package/es/components/Tabs/createTabsController.js +28 -163
- package/es/components/TextArea/TextArea.js +18 -28
- package/es/components/Toast/Toast.js +10 -11
- package/es/components/Toast/ToastContext.js +3 -7
- package/es/components/Toast/ToastController.js +38 -95
- package/es/components/Toast/ToastProvider.js +34 -139
- package/es/components/Toast/useToast.js +4 -4
- package/es/components/Typography/Body.js +15 -15
- package/es/components/Typography/Button.js +10 -10
- package/es/components/Typography/Caption.js +5 -5
- package/es/components/Typography/Display.js +15 -15
- package/es/components/Typography/Footnote.js +10 -10
- package/es/components/Typography/Headline.js +40 -40
- package/es/components/Typography/Paragraph.js +21 -21
- package/es/components/Typography/Underline.js +5 -5
- package/es/hocs/withAutoFocus.js +8 -78
- package/es/hocs/withSkeleton.js +5 -10
- package/es/hooks/useDebouncedFunction.js +4 -36
- package/es/hooks/useFocusTrap.js +18 -21
- package/es/hooks/useForkRef.js +3 -3
- package/es/hooks/useIsomorphicLayoutEffect.js +1 -1
- package/es/hooks/useResizeObserver.js +8 -8
- package/es/hooks/useUniqId.js +6 -52
- package/es/mixins/addFocus.js +17 -22
- package/es/mixins/applyDisabled.js +6 -9
- package/es/mixins/applyEllipsis.js +2 -4
- package/es/mixins/applyMaxLines.js +3 -6
- package/es/mixins/applyNoSelect.js +2 -4
- package/es/mixins/applyOutline.js +2 -4
- package/es/mixins/applyRoundness.js +4 -7
- package/es/mixins/applyScrollSnap.js +4 -7
- package/es/mixins/applySkeletonGradient.js +6 -9
- package/es/mixins/applyView.js +2 -5
- package/es/mixins/blur.js +2 -5
- package/es/mixins/shadows.js +1 -1
- package/es/tokens/colors.js +48 -48
- package/es/tokens/typography.js +18 -18
- package/es/utils/__tests__/formatters.test.js +2 -2
- package/es/utils/animatedScrollTo.js +24 -34
- package/es/utils/canUseDOM.js +1 -1
- package/es/utils/extractTextFrom.js +3 -7
- package/es/utils/focusManager.js +40 -47
- package/es/utils/formatCurrency.js +4 -4
- package/es/utils/formatters.js +6 -14
- package/es/utils/react.js +4 -4
- package/es/utils/roundness.js +2 -4
- package/es/utils/scopeTab.js +5 -5
- package/es/utils/setRef.js +1 -1
- package/es/utils/tabbable.js +16 -25
- package/es/utils/toCssSize.js +1 -3
- package/es/utils/transformStyles.js +5 -60
- package/hocs/index.js +2 -2
- package/hocs/withAutoFocus.js +9 -79
- package/hocs/withSkeleton.js +8 -13
- package/hooks/index.js +6 -6
- package/hooks/useDebouncedFunction.js +5 -37
- package/hooks/useFocusTrap.js +22 -25
- package/hooks/useForkRef.js +5 -5
- package/hooks/useIsomorphicLayoutEffect.js +3 -3
- package/hooks/useResizeObserver.js +9 -9
- package/hooks/useUniqId.js +8 -54
- package/mixins/addFocus.js +19 -24
- package/mixins/applyDisabled.js +7 -10
- package/mixins/applyEllipsis.js +3 -5
- package/mixins/applyMaxLines.js +4 -7
- package/mixins/applyNoSelect.js +3 -5
- package/mixins/applyOutline.js +3 -5
- package/mixins/applyRoundness.js +5 -8
- package/mixins/applyScrollSnap.js +5 -8
- package/mixins/applySkeletonGradient.js +8 -11
- package/mixins/applyView.js +3 -6
- package/mixins/blur.js +2 -5
- package/mixins/index.js +11 -11
- package/mixins/shadows.js +1 -1
- package/package.json +13 -18
- package/tokens/colors.js +48 -48
- package/tokens/typography.js +18 -18
- package/utils/__tests__/formatters.test.js +3 -3
- package/utils/animatedScrollTo.js +24 -34
- package/utils/canUseDOM.js +1 -1
- package/utils/extractTextFrom.js +4 -8
- package/utils/focusManager.js +41 -48
- package/utils/formatCurrency.js +4 -4
- package/utils/formatters.js +6 -14
- package/utils/index.js +10 -10
- package/utils/react.js +7 -7
- package/utils/roundness.js +2 -4
- package/utils/scopeTab.js +6 -6
- package/utils/setRef.js +1 -1
- package/utils/tabbable.js +16 -25
- package/utils/toCssSize.js +1 -3
- package/utils/transformStyles.js +5 -60
|
@@ -16,117 +16,67 @@ _export(exports, {
|
|
|
16
16
|
return useCarouselLite;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
function _array_like_to_array(arr, len) {
|
|
24
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
25
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
26
|
-
return arr2;
|
|
27
|
-
}
|
|
28
|
-
function _array_with_holes(arr) {
|
|
29
|
-
if (Array.isArray(arr)) return arr;
|
|
30
|
-
}
|
|
19
|
+
const _lodashthrottle = /*#__PURE__*/ _interop_require_default(require("lodash.throttle"));
|
|
20
|
+
const _react = require("react");
|
|
21
|
+
const _hooks = require("../../hooks");
|
|
22
|
+
const _utils = require("./utils");
|
|
31
23
|
function _interop_require_default(obj) {
|
|
32
24
|
return obj && obj.__esModule ? obj : {
|
|
33
25
|
default: obj
|
|
34
26
|
};
|
|
35
27
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
45
|
-
_arr.push(_s.value);
|
|
46
|
-
if (i && _arr.length === i) break;
|
|
47
|
-
}
|
|
48
|
-
} catch (err) {
|
|
49
|
-
_d = true;
|
|
50
|
-
_e = err;
|
|
51
|
-
} finally{
|
|
52
|
-
try {
|
|
53
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
54
|
-
} finally{
|
|
55
|
-
if (_d) throw _e;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
return _arr;
|
|
59
|
-
}
|
|
60
|
-
function _non_iterable_rest() {
|
|
61
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
62
|
-
}
|
|
63
|
-
function _sliced_to_array(arr, i) {
|
|
64
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
65
|
-
}
|
|
66
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
67
|
-
if (!o) return;
|
|
68
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
69
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
70
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
71
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
72
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
73
|
-
}
|
|
74
|
-
var THROTTLE_DEFAULT_MS = 100;
|
|
75
|
-
var DEBOUNCE_DEFAULT_MS = 150;
|
|
76
|
-
var useCarousel = function useCarousel(param) {
|
|
77
|
-
var index = param.index, axis = param.axis, _param_detectActive = param.detectActive, detectActive = _param_detectActive === void 0 ? false : _param_detectActive, _param_detectThreshold = param.detectThreshold, detectThreshold = _param_detectThreshold === void 0 ? 0.5 : _param_detectThreshold, _param_scrollAlign = param.scrollAlign, scrollAlign = _param_scrollAlign === void 0 ? 'center' : _param_scrollAlign, scaleCallback = param.scaleCallback, scaleResetCallback = param.scaleResetCallback, onIndexChange = param.onIndexChange, onDetectActiveItem = param.onDetectActiveItem, _param_animatedScrollByIndex = param.animatedScrollByIndex, animatedScrollByIndex = _param_animatedScrollByIndex === void 0 ? false : _param_animatedScrollByIndex, _param_throttleMs = param.throttleMs, throttleMs = _param_throttleMs === void 0 ? THROTTLE_DEFAULT_MS : _param_throttleMs, _param_debounceMs = param.debounceMs, debounceMs = _param_debounceMs === void 0 ? DEBOUNCE_DEFAULT_MS : _param_debounceMs;
|
|
78
|
-
var prevIndex = (0, _react.useRef)(null);
|
|
79
|
-
var direction = (0, _react.useRef)(null);
|
|
80
|
-
var offset = (0, _react.useRef)(0);
|
|
81
|
-
var scrollRef = (0, _react.useRef)(null);
|
|
82
|
-
var trackRef = (0, _react.useRef)(null);
|
|
28
|
+
const THROTTLE_DEFAULT_MS = 100;
|
|
29
|
+
const DEBOUNCE_DEFAULT_MS = 150;
|
|
30
|
+
const useCarousel = ({ index, axis, detectActive = false, detectThreshold = 0.5, scrollAlign = 'center', scaleCallback, scaleResetCallback, onIndexChange, onDetectActiveItem, animatedScrollByIndex = false, throttleMs = THROTTLE_DEFAULT_MS, debounceMs = DEBOUNCE_DEFAULT_MS })=>{
|
|
31
|
+
const prevIndex = (0, _react.useRef)(null);
|
|
32
|
+
const direction = (0, _react.useRef)(null);
|
|
33
|
+
const offset = (0, _react.useRef)(0);
|
|
34
|
+
const scrollRef = (0, _react.useRef)(null);
|
|
35
|
+
const trackRef = (0, _react.useRef)(null);
|
|
83
36
|
/**
|
|
84
37
|
* Для того, чтобы не спамить изменениями индекса.
|
|
85
38
|
* Задержка дебаунса слегка больше, чем у тротлинга.
|
|
86
39
|
* Таким образом, событие срабатывает при завершении скролла.
|
|
87
|
-
*/
|
|
88
|
-
return onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(i);
|
|
89
|
-
}, debounceMs);
|
|
40
|
+
*/ const debouncedOnIndexChange = (0, _hooks.useDebouncedFunction)((i)=>onIndexChange?.(i), debounceMs);
|
|
90
41
|
/**
|
|
91
42
|
* Вычисление центрального элемента.
|
|
92
43
|
* Подсчет: от 0 до 1, какое количество ширины/высоты
|
|
93
44
|
* каждого элемента находится по центру скролла.
|
|
94
|
-
*/
|
|
95
|
-
return (0, _lodashthrottle.default)(
|
|
45
|
+
*/ const throttledDetectActiveItem = (0, _react.useMemo)(()=>{
|
|
46
|
+
return (0, _lodashthrottle.default)(()=>{
|
|
96
47
|
if (!detectActive || scrollRef.current === null || trackRef.current === null) {
|
|
97
48
|
return;
|
|
98
49
|
}
|
|
99
50
|
/**
|
|
100
51
|
* Правая (или нижняя для Оу) граница элемента.
|
|
101
|
-
*/
|
|
52
|
+
*/ let itemEdge = offset.current;
|
|
102
53
|
/**
|
|
103
54
|
* Смещение (отрицательный или положительный отступ)
|
|
104
55
|
* и размер карусели (для Ox - ширина, для Oy - высота).
|
|
105
|
-
*/
|
|
106
|
-
|
|
56
|
+
*/ const scrollPos = scrollRef.current[axis === 'x' ? 'scrollLeft' : 'scrollTop'];
|
|
57
|
+
const scrollSize = scrollRef.current[axis === 'x' ? 'offsetWidth' : 'offsetHeight'];
|
|
107
58
|
/**
|
|
108
59
|
* Граница скролла (видимой части).
|
|
109
60
|
* Смещение + размер.
|
|
110
|
-
*/
|
|
61
|
+
*/ const scrollEdge = scrollPos + scrollSize;
|
|
111
62
|
/**
|
|
112
63
|
* Элементы перед, после и в видимой части.
|
|
113
64
|
* перед [ ВИДИМЫЕ ] после
|
|
114
|
-
*/
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
65
|
+
*/ const prevItems = [];
|
|
66
|
+
const nextItems = [];
|
|
67
|
+
let count = 0;
|
|
68
|
+
const items = (0, _utils.getCarouselItems)(trackRef.current);
|
|
118
69
|
/**
|
|
119
70
|
* Проходим по всему списку, суммируя ширины элементов,
|
|
120
71
|
* пока не найдем один элемент, чей центр будет в центре карусели.
|
|
121
|
-
*/ for(
|
|
122
|
-
|
|
123
|
-
var item = items.item(itemIndex);
|
|
72
|
+
*/ for(let itemIndex = 0; itemIndex < items.length; itemIndex++){
|
|
73
|
+
const item = items.item(itemIndex);
|
|
124
74
|
if (item === null) {
|
|
125
75
|
continue;
|
|
126
76
|
}
|
|
127
77
|
/**
|
|
128
78
|
* Для Ox - ширина, для Oy - высота.
|
|
129
|
-
*/
|
|
79
|
+
*/ const itemSize = item[axis === 'x' ? 'offsetWidth' : 'offsetHeight'];
|
|
130
80
|
/**
|
|
131
81
|
* Все элементы правее вьюпорта выпадают из процедуры.
|
|
132
82
|
* Сравниваем по предыдущему элементу.
|
|
@@ -148,11 +98,11 @@ var useCarousel = function useCarousel(param) {
|
|
|
148
98
|
}
|
|
149
99
|
continue;
|
|
150
100
|
}
|
|
151
|
-
|
|
101
|
+
const itemSlot = (0, _utils.getItemSlot)(itemIndex, itemEdge, itemSize, scrollPos, scrollSize, scrollAlign, prevIndex.current ?? 0, offset.current);
|
|
152
102
|
if (itemSlot !== null) {
|
|
153
103
|
if (detectThreshold && Math.abs(itemSlot) <= detectThreshold) {
|
|
154
|
-
onDetectActiveItem
|
|
155
|
-
debouncedOnIndexChange
|
|
104
|
+
onDetectActiveItem?.(itemIndex);
|
|
105
|
+
debouncedOnIndexChange?.(itemIndex);
|
|
156
106
|
}
|
|
157
107
|
if (scaleCallback) {
|
|
158
108
|
scaleCallback(item, itemSlot);
|
|
@@ -163,27 +113,19 @@ var useCarousel = function useCarousel(param) {
|
|
|
163
113
|
}
|
|
164
114
|
}
|
|
165
115
|
if (scaleCallback && scaleResetCallback) {
|
|
166
|
-
window.requestAnimationFrame(
|
|
116
|
+
window.requestAnimationFrame(()=>{
|
|
167
117
|
if (direction.current) {
|
|
168
118
|
if (nextItems.length) {
|
|
169
|
-
nextItems.splice(0, count).forEach(
|
|
170
|
-
return scaleCallback(elem, count);
|
|
171
|
-
});
|
|
119
|
+
nextItems.splice(0, count).forEach((elem)=>scaleCallback(elem, count));
|
|
172
120
|
if (nextItems.length) {
|
|
173
|
-
nextItems.splice(0, count).forEach(
|
|
174
|
-
return scaleResetCallback(elem);
|
|
175
|
-
});
|
|
121
|
+
nextItems.splice(0, count).forEach((elem)=>scaleResetCallback(elem));
|
|
176
122
|
}
|
|
177
123
|
}
|
|
178
124
|
} else if (prevItems.length) {
|
|
179
|
-
|
|
180
|
-
prItemsRev.splice(0, count).forEach(
|
|
181
|
-
return scaleCallback(elem, count * -1);
|
|
182
|
-
});
|
|
125
|
+
const prItemsRev = prevItems.reverse();
|
|
126
|
+
prItemsRev.splice(0, count).forEach((elem)=>scaleCallback(elem, count * -1));
|
|
183
127
|
if (prItemsRev.length) {
|
|
184
|
-
prItemsRev.splice(0, count).forEach(
|
|
185
|
-
return scaleResetCallback(elem);
|
|
186
|
-
});
|
|
128
|
+
prItemsRev.splice(0, count).forEach((elem)=>scaleResetCallback(elem));
|
|
187
129
|
}
|
|
188
130
|
}
|
|
189
131
|
});
|
|
@@ -202,21 +144,21 @@ var useCarousel = function useCarousel(param) {
|
|
|
202
144
|
]);
|
|
203
145
|
/**
|
|
204
146
|
* Прокрутка до нужной позиции индекса.
|
|
205
|
-
*/
|
|
206
|
-
|
|
207
|
-
|
|
147
|
+
*/ const toIndex = (0, _react.useCallback)((i)=>{
|
|
148
|
+
const scrollEl = scrollRef.current;
|
|
149
|
+
const items = trackRef.current ? (0, _utils.getCarouselItems)(trackRef.current) : null;
|
|
208
150
|
if (scrollEl && items && items.length > 0 && i >= 0) {
|
|
209
151
|
(0, _utils.scrollToPos)({
|
|
210
|
-
scrollEl
|
|
152
|
+
scrollEl,
|
|
211
153
|
pos: (0, _utils.getCalculatedPos)({
|
|
212
|
-
scrollEl
|
|
213
|
-
items
|
|
214
|
-
axis
|
|
154
|
+
scrollEl,
|
|
155
|
+
items,
|
|
156
|
+
axis,
|
|
215
157
|
index: i,
|
|
216
158
|
offset: offset.current,
|
|
217
|
-
scrollAlign
|
|
159
|
+
scrollAlign
|
|
218
160
|
}),
|
|
219
|
-
axis
|
|
161
|
+
axis,
|
|
220
162
|
/**
|
|
221
163
|
* Без анимации при переходе на другой конец списка
|
|
222
164
|
*/ animated: animatedScrollByIndex && (prevIndex.current === null || Math.abs(i - prevIndex.current) !== items.length - 1)
|
|
@@ -228,7 +170,7 @@ var useCarousel = function useCarousel(param) {
|
|
|
228
170
|
axis,
|
|
229
171
|
scrollAlign
|
|
230
172
|
]);
|
|
231
|
-
(0, _react.useEffect)(
|
|
173
|
+
(0, _react.useEffect)(()=>{
|
|
232
174
|
if (scrollRef.current && trackRef.current) {
|
|
233
175
|
offset.current = (0, _utils.getCalculatedOffset)(scrollRef.current, trackRef.current, axis);
|
|
234
176
|
}
|
|
@@ -238,12 +180,12 @@ var useCarousel = function useCarousel(param) {
|
|
|
238
180
|
/**
|
|
239
181
|
* Операции на маунте/анмаунте компонента.
|
|
240
182
|
* Создать слушатели событи и т.п.
|
|
241
|
-
*/ (0, _react.useEffect)(
|
|
242
|
-
|
|
183
|
+
*/ (0, _react.useEffect)(()=>{
|
|
184
|
+
const carouselElement = scrollRef.current;
|
|
243
185
|
if (carouselElement) {
|
|
244
186
|
carouselElement.addEventListener('scroll', throttledDetectActiveItem);
|
|
245
187
|
}
|
|
246
|
-
return
|
|
188
|
+
return ()=>{
|
|
247
189
|
if (carouselElement) {
|
|
248
190
|
carouselElement.removeEventListener('scroll', throttledDetectActiveItem);
|
|
249
191
|
}
|
|
@@ -253,8 +195,8 @@ var useCarousel = function useCarousel(param) {
|
|
|
253
195
|
]);
|
|
254
196
|
/**
|
|
255
197
|
* Нужно вызвать только при первом рендере
|
|
256
|
-
*/ (0, _react.useEffect)(
|
|
257
|
-
requestAnimationFrame(
|
|
198
|
+
*/ (0, _react.useEffect)(()=>{
|
|
199
|
+
requestAnimationFrame(()=>{
|
|
258
200
|
/**
|
|
259
201
|
* Прокрутка до начального индекса.
|
|
260
202
|
*/ toIndex(index);
|
|
@@ -268,7 +210,7 @@ var useCarousel = function useCarousel(param) {
|
|
|
268
210
|
}, []);
|
|
269
211
|
/**
|
|
270
212
|
* Прокрутка до нужной позиции индекса, если индекс изменился.
|
|
271
|
-
*/ (0, _react.useEffect)(
|
|
213
|
+
*/ (0, _react.useEffect)(()=>{
|
|
272
214
|
if (index !== prevIndex.current) {
|
|
273
215
|
toIndex(index);
|
|
274
216
|
}
|
|
@@ -277,29 +219,28 @@ var useCarousel = function useCarousel(param) {
|
|
|
277
219
|
toIndex
|
|
278
220
|
]);
|
|
279
221
|
return {
|
|
280
|
-
scrollRef
|
|
281
|
-
trackRef
|
|
222
|
+
scrollRef,
|
|
223
|
+
trackRef
|
|
282
224
|
};
|
|
283
225
|
};
|
|
284
|
-
function useCarouselLite(
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
var needTranslateToInitialIndex = (0, _react.useRef)(true);
|
|
226
|
+
function useCarouselLite({ index, axis, scrollAlign = 'center', scrollMode = 'translate' }) {
|
|
227
|
+
const [prevIndex, setPrevIndex] = (0, _react.useState)(index);
|
|
228
|
+
const carouselRef = (0, _react.useRef)(null);
|
|
229
|
+
const trackRef = (0, _react.useRef)(null);
|
|
230
|
+
const needTranslateToInitialIndex = (0, _react.useRef)(true);
|
|
290
231
|
// Первый раз нужно проскролить к индексу, после первого рендера
|
|
291
|
-
(0, _react.useLayoutEffect)(
|
|
232
|
+
(0, _react.useLayoutEffect)(()=>{
|
|
292
233
|
if (needTranslateToInitialIndex.current === false) {
|
|
293
234
|
return;
|
|
294
235
|
}
|
|
295
236
|
/**
|
|
296
237
|
* Вызываем через requestAnimationFrame, так как при использовании динамических CarouselCol
|
|
297
238
|
* ширины элементов высчитываются неверно внутри translateToIndex при синхронном вызове
|
|
298
|
-
*/
|
|
239
|
+
*/ const rafId = requestAnimationFrame(()=>{
|
|
299
240
|
(0, _utils.translateToIndex)(index, index, axis, scrollAlign, trackRef.current, carouselRef.current, true, scrollMode);
|
|
300
241
|
needTranslateToInitialIndex.current = false;
|
|
301
242
|
});
|
|
302
|
-
return
|
|
243
|
+
return ()=>{
|
|
303
244
|
cancelAnimationFrame(rafId);
|
|
304
245
|
};
|
|
305
246
|
}, [
|
|
@@ -316,6 +257,6 @@ function useCarouselLite(param) {
|
|
|
316
257
|
}
|
|
317
258
|
return {
|
|
318
259
|
scrollRef: carouselRef,
|
|
319
|
-
trackRef
|
|
260
|
+
trackRef
|
|
320
261
|
};
|
|
321
262
|
}
|
|
@@ -31,6 +31,6 @@ _export(exports, {
|
|
|
31
31
|
return _hooks.useCarouselLite;
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
const _Carousel = require("./Carousel");
|
|
35
|
+
const _CarouselItem = require("./CarouselItem");
|
|
36
|
+
const _hooks = require("./hooks");
|
|
@@ -28,12 +28,11 @@ _export(exports, {
|
|
|
28
28
|
return translateToIndex;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
var scrollAlign = param.scrollAlign, position = param.position, carouselSize = param.carouselSize, itemSize = param.itemSize, offset = param.offset, scrollStart = param.scrollStart, axis = param.axis;
|
|
31
|
+
const _utils = require("../../utils");
|
|
32
|
+
const positionModByScrollAlign = ({ scrollAlign, position, carouselSize, itemSize, offset, scrollStart, axis })=>{
|
|
34
33
|
if (scrollAlign === 'start') {
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
const inaccuracy = 1;
|
|
35
|
+
const paddingOffset = axis === 'y' ? offset - itemSize / 2 + inaccuracy : 0;
|
|
37
36
|
return position + paddingOffset;
|
|
38
37
|
}
|
|
39
38
|
if (scrollAlign === 'center') {
|
|
@@ -52,55 +51,45 @@ var positionModByScrollAlign = function positionModByScrollAlign(param) {
|
|
|
52
51
|
}
|
|
53
52
|
return position;
|
|
54
53
|
};
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
var scrollStart;
|
|
54
|
+
const getCalculatedPos = ({ scrollEl, items, axis, index, offset, scrollAlign })=>{
|
|
55
|
+
let position = scrollAlign === 'center' ? offset : 0;
|
|
56
|
+
let carouselSize;
|
|
57
|
+
let itemSize;
|
|
58
|
+
let scrollStart;
|
|
61
59
|
if (items.item(index) === null) {
|
|
62
60
|
return position;
|
|
63
61
|
}
|
|
64
|
-
for(
|
|
62
|
+
for(let i = 0; i < index; i++){
|
|
65
63
|
if (axis === 'x') {
|
|
66
|
-
|
|
67
|
-
var _items_item;
|
|
68
|
-
position += (_ref = (_items_item = items.item(i)) === null || _items_item === void 0 ? void 0 : _items_item.offsetWidth) !== null && _ref !== void 0 ? _ref : 0;
|
|
64
|
+
position += items.item(i)?.offsetWidth ?? 0;
|
|
69
65
|
} else {
|
|
70
|
-
|
|
71
|
-
var _items_item1;
|
|
72
|
-
position += (_ref1 = (_items_item1 = items.item(i)) === null || _items_item1 === void 0 ? void 0 : _items_item1.offsetHeight) !== null && _ref1 !== void 0 ? _ref1 : 0;
|
|
66
|
+
position += items.item(i)?.offsetHeight ?? 0;
|
|
73
67
|
}
|
|
74
68
|
}
|
|
75
69
|
if (axis === 'x') {
|
|
76
|
-
var _ref2;
|
|
77
|
-
var _items_item2;
|
|
78
70
|
carouselSize = scrollEl.offsetWidth;
|
|
79
|
-
itemSize =
|
|
71
|
+
itemSize = items.item(index)?.offsetWidth ?? 0;
|
|
80
72
|
scrollStart = scrollEl.scrollLeft;
|
|
81
73
|
} else {
|
|
82
|
-
var _ref3;
|
|
83
|
-
var _items_item3;
|
|
84
74
|
carouselSize = scrollEl.offsetHeight;
|
|
85
|
-
itemSize =
|
|
75
|
+
itemSize = items.item(index)?.offsetHeight ?? 0;
|
|
86
76
|
scrollStart = scrollEl.scrollTop;
|
|
87
77
|
}
|
|
88
78
|
return positionModByScrollAlign({
|
|
89
|
-
scrollAlign
|
|
90
|
-
position
|
|
91
|
-
carouselSize
|
|
92
|
-
itemSize
|
|
93
|
-
offset
|
|
94
|
-
scrollStart
|
|
95
|
-
axis
|
|
79
|
+
scrollAlign,
|
|
80
|
+
position,
|
|
81
|
+
carouselSize,
|
|
82
|
+
itemSize,
|
|
83
|
+
offset,
|
|
84
|
+
scrollStart,
|
|
85
|
+
axis
|
|
96
86
|
});
|
|
97
87
|
};
|
|
98
|
-
|
|
99
|
-
|
|
88
|
+
const getCalculatedOffset = (scrollEl, trackEl, axis)=>{
|
|
89
|
+
const paddingProp = axis === 'x' ? 'paddingLeft' : 'paddingTop';
|
|
100
90
|
return parseInt(getComputedStyle(scrollEl)[paddingProp], 10) + parseInt(getComputedStyle(trackEl)[paddingProp], 10);
|
|
101
91
|
};
|
|
102
|
-
|
|
103
|
-
var scrollEl = param.scrollEl, pos = param.pos, axis = param.axis, animated = param.animated, duration = param.duration, timingFunction = param.timingFunction;
|
|
92
|
+
const scrollToPos = ({ scrollEl, pos, axis, animated, duration, timingFunction })=>{
|
|
104
93
|
if (axis === 'x' && Math.abs(pos - scrollEl.scrollLeft) > 1) {
|
|
105
94
|
if (animated) {
|
|
106
95
|
(0, _utils.animatedScrollToX)(scrollEl, pos, duration, timingFunction);
|
|
@@ -120,17 +109,14 @@ var scrollToPos = function scrollToPos(param) {
|
|
|
120
109
|
}
|
|
121
110
|
}
|
|
122
111
|
};
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
};
|
|
126
|
-
var getItemSlot = function getItemSlot(itemIndex, itemEnd, itemSize, scrollStart, scrollSize, scrollAlign) {
|
|
127
|
-
var prevIndex = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : 0, offset = arguments.length > 7 && arguments[7] !== void 0 ? arguments[7] : 0;
|
|
112
|
+
const round = (n)=>Math.round(n * 100) / 100;
|
|
113
|
+
const getItemSlot = (itemIndex, itemEnd, itemSize, scrollStart, scrollSize, scrollAlign, prevIndex = 0, offset = 0)=>{
|
|
128
114
|
/**
|
|
129
115
|
* Граница и центр скролла (видимой части).
|
|
130
116
|
* Смещение + размер.
|
|
131
|
-
*/
|
|
132
|
-
|
|
133
|
-
|
|
117
|
+
*/ const scrollEnd = scrollStart + scrollSize;
|
|
118
|
+
const scrollCenter = scrollStart + scrollSize / 2;
|
|
119
|
+
const itemCenter = itemEnd - itemSize / 2;
|
|
134
120
|
if (scrollAlign === 'center') {
|
|
135
121
|
return round((itemCenter - scrollCenter) / itemSize);
|
|
136
122
|
}
|
|
@@ -141,9 +127,9 @@ var getItemSlot = function getItemSlot(itemIndex, itemEnd, itemSize, scrollStart
|
|
|
141
127
|
return round((itemEnd - (scrollSize + scrollStart)) / itemSize);
|
|
142
128
|
}
|
|
143
129
|
if (scrollAlign === 'activeDirection') {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
130
|
+
const prevStart = offset + itemSize * prevIndex;
|
|
131
|
+
const prevEnd = prevStart + itemSize;
|
|
132
|
+
const prevVisible = prevEnd > scrollStart && prevStart < scrollEnd;
|
|
147
133
|
if (!prevVisible) {
|
|
148
134
|
if (prevIndex < itemIndex) {
|
|
149
135
|
return round((itemEnd - (scrollSize + scrollStart)) / itemSize);
|
|
@@ -156,28 +142,28 @@ var getItemSlot = function getItemSlot(itemIndex, itemEnd, itemSize, scrollStart
|
|
|
156
142
|
function getCarouselItems(track) {
|
|
157
143
|
return track.children;
|
|
158
144
|
}
|
|
159
|
-
|
|
160
|
-
x
|
|
161
|
-
return
|
|
145
|
+
const axisToTranslateMap = {
|
|
146
|
+
x (position) {
|
|
147
|
+
return `translateX(${-position}px)`;
|
|
162
148
|
},
|
|
163
|
-
y
|
|
164
|
-
return
|
|
149
|
+
y (position) {
|
|
150
|
+
return `translateY(${-position}px)`;
|
|
165
151
|
}
|
|
166
152
|
};
|
|
167
|
-
|
|
153
|
+
const axisToOffsetKeyMap = {
|
|
168
154
|
x: 'offsetLeft',
|
|
169
155
|
y: 'offsetTop'
|
|
170
156
|
};
|
|
171
|
-
|
|
157
|
+
const axisToSizeKeyMap = {
|
|
172
158
|
x: 'offsetWidth',
|
|
173
159
|
y: 'offsetHeight'
|
|
174
160
|
};
|
|
175
|
-
|
|
161
|
+
const axisToScrollKeyMap = {
|
|
176
162
|
x: 'scrollLeft',
|
|
177
163
|
y: 'scrollTop'
|
|
178
164
|
};
|
|
179
165
|
function getCenterPosition(itemSize, itemStart, carouselSize, trackOffset) {
|
|
180
|
-
|
|
166
|
+
const relativeMiddle = itemStart + trackOffset + itemSize / 2;
|
|
181
167
|
return relativeMiddle - carouselSize / 2;
|
|
182
168
|
}
|
|
183
169
|
function getEndPosition(itemSize, itemStart, carouselSize, trackOffset) {
|
|
@@ -205,12 +191,12 @@ function boundPosition(position, trackSize, carouselSize, trackOffset) {
|
|
|
205
191
|
}
|
|
206
192
|
// если все элементы помещаются в ширину карусели, то считаем trackEnd по-другому
|
|
207
193
|
if (trackSize < carouselSize) {
|
|
208
|
-
|
|
194
|
+
const trackEnd = Math.abs(carouselSize - trackSize - trackOffset);
|
|
209
195
|
return position < trackEnd ? position : trackEnd;
|
|
210
196
|
}
|
|
211
|
-
|
|
212
|
-
if (position >
|
|
213
|
-
return
|
|
197
|
+
const trackEnd = trackSize - carouselSize + trackOffset;
|
|
198
|
+
if (position > trackEnd) {
|
|
199
|
+
return trackEnd;
|
|
214
200
|
}
|
|
215
201
|
return position;
|
|
216
202
|
}
|
|
@@ -238,10 +224,10 @@ function setTimingFunction(element, timingFunction) {
|
|
|
238
224
|
}
|
|
239
225
|
}
|
|
240
226
|
function translateToPosition(element, axis, position) {
|
|
241
|
-
|
|
227
|
+
const translate = axisToTranslateMap[axis];
|
|
242
228
|
element.style.transform = translate(position);
|
|
243
229
|
}
|
|
244
|
-
|
|
230
|
+
const scrollOptions = {
|
|
245
231
|
behavior: 'auto',
|
|
246
232
|
left: 0,
|
|
247
233
|
top: 0
|
|
@@ -250,24 +236,24 @@ function translateToIndex(index, prevIndex, axis, align, track, carousel, disabl
|
|
|
250
236
|
if (track === null || carousel === null) {
|
|
251
237
|
return;
|
|
252
238
|
}
|
|
253
|
-
|
|
239
|
+
const scrollKey = axisToScrollKeyMap[axis];
|
|
254
240
|
if (disableAnimation === false && scrollMode === 'translate' && carousel[scrollKey] !== 0) {
|
|
255
241
|
carousel.scrollTo(scrollOptions);
|
|
256
242
|
}
|
|
257
|
-
|
|
243
|
+
const itemToTranslateTo = track.children.item(index);
|
|
258
244
|
if (itemToTranslateTo === null) {
|
|
259
245
|
return;
|
|
260
246
|
}
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
247
|
+
const numberOfItems = track.children.length;
|
|
248
|
+
const offsetKey = axisToOffsetKeyMap[axis];
|
|
249
|
+
const sizeKey = axisToSizeKeyMap[axis];
|
|
250
|
+
const carouselSize = carousel[sizeKey];
|
|
251
|
+
const trackSize = track[sizeKey];
|
|
252
|
+
const trackOffset = track[offsetKey];
|
|
253
|
+
const itemSize = itemToTranslateTo[sizeKey];
|
|
254
|
+
const itemStart = itemToTranslateTo[offsetKey];
|
|
255
|
+
const translatePosition = getTranslatePosition(itemSize, itemStart, carouselSize, trackOffset, align);
|
|
256
|
+
const position = boundPosition(translatePosition, trackSize, carouselSize, trackOffset);
|
|
271
257
|
if (scrollMode === 'scroll') {
|
|
272
258
|
carousel.scrollTo({
|
|
273
259
|
behavior: disableAnimation ? 'auto' : 'smooth',
|
package/components/Fade/Fade.js
CHANGED
|
@@ -8,23 +8,20 @@ Object.defineProperty(exports, "Fade", {
|
|
|
8
8
|
return Fade;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
|
|
11
|
+
const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
|
|
12
12
|
function _interop_require_default(obj) {
|
|
13
13
|
return obj && obj.__esModule ? obj : {
|
|
14
14
|
default: obj
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
|
-
|
|
17
|
+
const gradients = {
|
|
18
18
|
top: 'radial-gradient(200% 200% at 50% -100%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)',
|
|
19
19
|
bottom: 'radial-gradient(200% 200% at 50% 200%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)'
|
|
20
20
|
};
|
|
21
|
-
|
|
21
|
+
const Fade = _styledcomponents.default.div.withConfig({
|
|
22
22
|
displayName: "Fade",
|
|
23
23
|
componentId: "sc-1f25e4f8-0"
|
|
24
24
|
})([
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
],
|
|
28
|
-
var _param_placement = param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement;
|
|
29
|
-
return gradients[placement];
|
|
30
|
-
});
|
|
25
|
+
`position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:`,
|
|
26
|
+
`;`
|
|
27
|
+
], ({ placement = 'bottom' })=>gradients[placement]);
|
package/components/Fade/index.js
CHANGED