@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
|
@@ -1,151 +1,20 @@
|
|
|
1
|
-
function _array_like_to_array(arr, len) {
|
|
2
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
-
return arr2;
|
|
5
|
-
}
|
|
6
|
-
function _array_with_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return arr;
|
|
8
|
-
}
|
|
9
|
-
function _define_property(obj, key, value) {
|
|
10
|
-
if (key in obj) {
|
|
11
|
-
Object.defineProperty(obj, key, {
|
|
12
|
-
value: value,
|
|
13
|
-
enumerable: true,
|
|
14
|
-
configurable: true,
|
|
15
|
-
writable: true
|
|
16
|
-
});
|
|
17
|
-
} else {
|
|
18
|
-
obj[key] = value;
|
|
19
|
-
}
|
|
20
|
-
return obj;
|
|
21
|
-
}
|
|
22
|
-
function _iterable_to_array(iter) {
|
|
23
|
-
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
24
|
-
}
|
|
25
|
-
function _iterable_to_array_limit(arr, i) {
|
|
26
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
27
|
-
if (_i == null) return;
|
|
28
|
-
var _arr = [];
|
|
29
|
-
var _n = true;
|
|
30
|
-
var _d = false;
|
|
31
|
-
var _s, _e;
|
|
32
|
-
try {
|
|
33
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
34
|
-
_arr.push(_s.value);
|
|
35
|
-
if (i && _arr.length === i) break;
|
|
36
|
-
}
|
|
37
|
-
} catch (err) {
|
|
38
|
-
_d = true;
|
|
39
|
-
_e = err;
|
|
40
|
-
} finally{
|
|
41
|
-
try {
|
|
42
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
43
|
-
} finally{
|
|
44
|
-
if (_d) throw _e;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
return _arr;
|
|
48
|
-
}
|
|
49
|
-
function _non_iterable_rest() {
|
|
50
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
51
|
-
}
|
|
52
|
-
function _object_spread(target) {
|
|
53
|
-
for(var i = 1; i < arguments.length; i++){
|
|
54
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
55
|
-
var ownKeys = Object.keys(source);
|
|
56
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
57
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
58
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
59
|
-
}));
|
|
60
|
-
}
|
|
61
|
-
ownKeys.forEach(function(key) {
|
|
62
|
-
_define_property(target, key, source[key]);
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
return target;
|
|
66
|
-
}
|
|
67
|
-
function _object_without_properties(source, excluded) {
|
|
68
|
-
if (source == null) return {};
|
|
69
|
-
var target = {}, sourceKeys, key, i;
|
|
70
|
-
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
|
|
71
|
-
sourceKeys = Reflect.ownKeys(source);
|
|
72
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
73
|
-
key = sourceKeys[i];
|
|
74
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
75
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
76
|
-
target[key] = source[key];
|
|
77
|
-
}
|
|
78
|
-
return target;
|
|
79
|
-
}
|
|
80
|
-
target = _object_without_properties_loose(source, excluded);
|
|
81
|
-
if (Object.getOwnPropertySymbols) {
|
|
82
|
-
sourceKeys = Object.getOwnPropertySymbols(source);
|
|
83
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
84
|
-
key = sourceKeys[i];
|
|
85
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
86
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
87
|
-
target[key] = source[key];
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
return target;
|
|
91
|
-
}
|
|
92
|
-
function _object_without_properties_loose(source, excluded) {
|
|
93
|
-
if (source == null) return {};
|
|
94
|
-
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
95
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
96
|
-
key = sourceKeys[i];
|
|
97
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
98
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
99
|
-
target[key] = source[key];
|
|
100
|
-
}
|
|
101
|
-
return target;
|
|
102
|
-
}
|
|
103
|
-
function _sliced_to_array(arr, i) {
|
|
104
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
105
|
-
}
|
|
106
|
-
function _to_array(arr) {
|
|
107
|
-
return _array_with_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_rest();
|
|
108
|
-
}
|
|
109
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
110
|
-
if (!o) return;
|
|
111
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
112
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
113
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
114
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
115
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
116
|
-
}
|
|
117
1
|
import React, { useRef, useCallback, forwardRef } from 'react';
|
|
118
2
|
import styled from 'styled-components';
|
|
119
3
|
import Draggable from 'react-draggable';
|
|
120
4
|
import { getSliderThumbValue, getOffsets } from './utils';
|
|
121
5
|
import { Thumb } from './ThumbBase';
|
|
122
|
-
|
|
6
|
+
const HandleStyled = styled.div.withConfig({
|
|
123
7
|
displayName: "Handle__HandleStyled",
|
|
124
8
|
componentId: "sc-50a39b96-0"
|
|
125
9
|
})([
|
|
126
|
-
|
|
10
|
+
`cursor:pointer;position:absolute;z-index:1;top:0;left:0;`
|
|
127
11
|
]);
|
|
128
|
-
export
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
], _ref1 = _to_array(_ref), _ref2 = _ref1[0], _rest = _ref1.slice(1), stepSize = _ref2.stepSize, onChangeCommitted = _ref2.onChangeCommitted, onChange = _ref2.onChange, xPosition = _ref2.xPosition, min = _ref2.min, max = _ref2.max, _ref_bounds = _ref2.bounds, bounds = _ref_bounds === void 0 ? [] : _ref_bounds, zIndex = _ref2.zIndex, disabled = _ref2.disabled, side = _ref2.side, rest = _object_without_properties(_ref2, [
|
|
133
|
-
"stepSize",
|
|
134
|
-
"onChangeCommitted",
|
|
135
|
-
"onChange",
|
|
136
|
-
"xPosition",
|
|
137
|
-
"min",
|
|
138
|
-
"max",
|
|
139
|
-
"bounds",
|
|
140
|
-
"zIndex",
|
|
141
|
-
"disabled",
|
|
142
|
-
"side"
|
|
143
|
-
]), _rest1 = _sliced_to_array(_rest, 1), ref = _rest1[0];
|
|
144
|
-
var lastOnChangeValue = useRef();
|
|
145
|
-
var currentSliderValue = (lastOnChangeValue === null || lastOnChangeValue === void 0 ? void 0 : lastOnChangeValue.current) || rest.value;
|
|
146
|
-
var onDrag = useCallback(function(_, data) {
|
|
12
|
+
export const Handle = /*#__PURE__*/ forwardRef(({ stepSize, onChangeCommitted, onChange, xPosition, min, max, bounds = [], zIndex, disabled, side, ...rest }, ref)=>{
|
|
13
|
+
const lastOnChangeValue = useRef();
|
|
14
|
+
const currentSliderValue = lastOnChangeValue?.current || rest.value;
|
|
15
|
+
const onDrag = useCallback((_, data)=>{
|
|
147
16
|
if (onChange) {
|
|
148
|
-
|
|
17
|
+
const newValue = getSliderThumbValue(data.x, stepSize, min, max);
|
|
149
18
|
if (lastOnChangeValue.current !== newValue) {
|
|
150
19
|
onChange(newValue, data);
|
|
151
20
|
lastOnChangeValue.current = newValue;
|
|
@@ -157,8 +26,8 @@ export var Handle = /*#__PURE__*/ forwardRef(function(_0, _1) {
|
|
|
157
26
|
min,
|
|
158
27
|
max
|
|
159
28
|
]);
|
|
160
|
-
|
|
161
|
-
|
|
29
|
+
const onStop = useCallback((_, data)=>{
|
|
30
|
+
const newValue = getSliderThumbValue(data.x, stepSize, min, max);
|
|
162
31
|
onChangeCommitted(newValue, data);
|
|
163
32
|
}, [
|
|
164
33
|
onChangeCommitted,
|
|
@@ -166,18 +35,18 @@ export var Handle = /*#__PURE__*/ forwardRef(function(_0, _1) {
|
|
|
166
35
|
min,
|
|
167
36
|
max
|
|
168
37
|
]);
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
38
|
+
const [offsetLeft, offsetRight] = getOffsets(ref, side);
|
|
39
|
+
const [leftValueBound, rightValueBound] = bounds;
|
|
40
|
+
const leftPositionBound = leftValueBound ? (leftValueBound - min) * stepSize : null;
|
|
41
|
+
const rightPositionBound = rightValueBound ? (rightValueBound - min) * stepSize : null;
|
|
42
|
+
const position = typeof xPosition === 'number' ? {
|
|
174
43
|
x: xPosition,
|
|
175
44
|
y: 0
|
|
176
45
|
} : undefined;
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
left: (leftPositionBound
|
|
180
|
-
right: (rightPositionBound
|
|
46
|
+
const tabIndex = disabled ? -1 : 0;
|
|
47
|
+
const computedBounds = {
|
|
48
|
+
left: (leftPositionBound ?? 0) + offsetLeft,
|
|
49
|
+
right: (rightPositionBound ?? stepSize * (max - min)) - offsetRight
|
|
181
50
|
};
|
|
182
51
|
return /*#__PURE__*/ React.createElement(Draggable, {
|
|
183
52
|
axis: "x",
|
|
@@ -193,9 +62,9 @@ export var Handle = /*#__PURE__*/ forwardRef(function(_0, _1) {
|
|
|
193
62
|
}, /*#__PURE__*/ React.createElement(HandleStyled, {
|
|
194
63
|
ref: ref,
|
|
195
64
|
style: {
|
|
196
|
-
zIndex
|
|
65
|
+
zIndex
|
|
197
66
|
}
|
|
198
|
-
}, /*#__PURE__*/ React.createElement(Thumb,
|
|
67
|
+
}, /*#__PURE__*/ React.createElement(Thumb, {
|
|
199
68
|
tabIndex: tabIndex,
|
|
200
69
|
min: min,
|
|
201
70
|
max: max,
|
|
@@ -204,6 +73,7 @@ export var Handle = /*#__PURE__*/ forwardRef(function(_0, _1) {
|
|
|
204
73
|
onChangeCommitted: onChangeCommitted,
|
|
205
74
|
xPosition: xPosition,
|
|
206
75
|
disabled: disabled,
|
|
207
|
-
bounds: computedBounds
|
|
208
|
-
|
|
76
|
+
bounds: computedBounds,
|
|
77
|
+
...rest
|
|
78
|
+
})));
|
|
209
79
|
});
|
|
@@ -1,211 +1,63 @@
|
|
|
1
|
-
function _array_like_to_array(arr, len) {
|
|
2
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
-
return arr2;
|
|
5
|
-
}
|
|
6
|
-
function _array_with_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return arr;
|
|
8
|
-
}
|
|
9
|
-
function _define_property(obj, key, value) {
|
|
10
|
-
if (key in obj) {
|
|
11
|
-
Object.defineProperty(obj, key, {
|
|
12
|
-
value: value,
|
|
13
|
-
enumerable: true,
|
|
14
|
-
configurable: true,
|
|
15
|
-
writable: true
|
|
16
|
-
});
|
|
17
|
-
} else {
|
|
18
|
-
obj[key] = value;
|
|
19
|
-
}
|
|
20
|
-
return obj;
|
|
21
|
-
}
|
|
22
|
-
function _iterable_to_array_limit(arr, i) {
|
|
23
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
24
|
-
if (_i == null) return;
|
|
25
|
-
var _arr = [];
|
|
26
|
-
var _n = true;
|
|
27
|
-
var _d = false;
|
|
28
|
-
var _s, _e;
|
|
29
|
-
try {
|
|
30
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
31
|
-
_arr.push(_s.value);
|
|
32
|
-
if (i && _arr.length === i) break;
|
|
33
|
-
}
|
|
34
|
-
} catch (err) {
|
|
35
|
-
_d = true;
|
|
36
|
-
_e = err;
|
|
37
|
-
} finally{
|
|
38
|
-
try {
|
|
39
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
40
|
-
} finally{
|
|
41
|
-
if (_d) throw _e;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
return _arr;
|
|
45
|
-
}
|
|
46
|
-
function _non_iterable_rest() {
|
|
47
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
48
|
-
}
|
|
49
|
-
function _object_spread(target) {
|
|
50
|
-
for(var i = 1; i < arguments.length; i++){
|
|
51
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
52
|
-
var ownKeys = Object.keys(source);
|
|
53
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
54
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
55
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
56
|
-
}));
|
|
57
|
-
}
|
|
58
|
-
ownKeys.forEach(function(key) {
|
|
59
|
-
_define_property(target, key, source[key]);
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
return target;
|
|
63
|
-
}
|
|
64
|
-
function ownKeys(object, enumerableOnly) {
|
|
65
|
-
var keys = Object.keys(object);
|
|
66
|
-
if (Object.getOwnPropertySymbols) {
|
|
67
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
68
|
-
if (enumerableOnly) {
|
|
69
|
-
symbols = symbols.filter(function(sym) {
|
|
70
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
keys.push.apply(keys, symbols);
|
|
74
|
-
}
|
|
75
|
-
return keys;
|
|
76
|
-
}
|
|
77
|
-
function _object_spread_props(target, source) {
|
|
78
|
-
source = source != null ? source : {};
|
|
79
|
-
if (Object.getOwnPropertyDescriptors) {
|
|
80
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
81
|
-
} else {
|
|
82
|
-
ownKeys(Object(source)).forEach(function(key) {
|
|
83
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
return target;
|
|
87
|
-
}
|
|
88
|
-
function _object_without_properties(source, excluded) {
|
|
89
|
-
if (source == null) return {};
|
|
90
|
-
var target = {}, sourceKeys, key, i;
|
|
91
|
-
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
|
|
92
|
-
sourceKeys = Reflect.ownKeys(source);
|
|
93
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
94
|
-
key = sourceKeys[i];
|
|
95
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
96
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
97
|
-
target[key] = source[key];
|
|
98
|
-
}
|
|
99
|
-
return target;
|
|
100
|
-
}
|
|
101
|
-
target = _object_without_properties_loose(source, excluded);
|
|
102
|
-
if (Object.getOwnPropertySymbols) {
|
|
103
|
-
sourceKeys = Object.getOwnPropertySymbols(source);
|
|
104
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
105
|
-
key = sourceKeys[i];
|
|
106
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
107
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
108
|
-
target[key] = source[key];
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
return target;
|
|
112
|
-
}
|
|
113
|
-
function _object_without_properties_loose(source, excluded) {
|
|
114
|
-
if (source == null) return {};
|
|
115
|
-
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
116
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
117
|
-
key = sourceKeys[i];
|
|
118
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
119
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
120
|
-
target[key] = source[key];
|
|
121
|
-
}
|
|
122
|
-
return target;
|
|
123
|
-
}
|
|
124
|
-
function _sliced_to_array(arr, i) {
|
|
125
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
126
|
-
}
|
|
127
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
128
|
-
if (!o) return;
|
|
129
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
130
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
131
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
132
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
133
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
134
|
-
}
|
|
135
1
|
import React from 'react';
|
|
136
2
|
import { SliderBase } from './SliderBase';
|
|
137
3
|
import { Handle } from './Handle';
|
|
138
|
-
export
|
|
139
|
-
|
|
140
|
-
"min",
|
|
141
|
-
"max",
|
|
142
|
-
"value",
|
|
143
|
-
"disabled",
|
|
144
|
-
"onChangeCommitted",
|
|
145
|
-
"onChange",
|
|
146
|
-
"ariaLabel",
|
|
147
|
-
"multipleStepSize",
|
|
148
|
-
"thumb"
|
|
149
|
-
]);
|
|
150
|
-
var _React_useState = _sliced_to_array(React.useState({
|
|
4
|
+
export const Slider = ({ min, max, value, disabled, onChangeCommitted, onChange, ariaLabel, multipleStepSize = 10, thumb, ...rest })=>{
|
|
5
|
+
const [state, setState] = React.useState({
|
|
151
6
|
xHandle: 0,
|
|
152
7
|
stepSize: 0,
|
|
153
8
|
railFillWidth: 0
|
|
154
|
-
})
|
|
155
|
-
|
|
156
|
-
React.useEffect(
|
|
157
|
-
|
|
158
|
-
setState(
|
|
159
|
-
|
|
9
|
+
});
|
|
10
|
+
const { stepSize } = state;
|
|
11
|
+
React.useEffect(()=>{
|
|
12
|
+
const localValue = Math.min(Math.max(value, min), max) - min;
|
|
13
|
+
setState((prevState)=>({
|
|
14
|
+
...prevState,
|
|
160
15
|
xHandle: stepSize * localValue,
|
|
161
16
|
railFillWidth: stepSize * localValue
|
|
162
|
-
});
|
|
163
|
-
});
|
|
17
|
+
}));
|
|
164
18
|
}, [
|
|
165
19
|
value,
|
|
166
20
|
stepSize,
|
|
167
21
|
min,
|
|
168
22
|
max
|
|
169
23
|
]);
|
|
170
|
-
|
|
171
|
-
setState(
|
|
172
|
-
|
|
24
|
+
const setStepSize = React.useCallback((newStepSize)=>{
|
|
25
|
+
setState((prevState)=>({
|
|
26
|
+
...prevState,
|
|
173
27
|
stepSize: newStepSize
|
|
174
|
-
});
|
|
175
|
-
});
|
|
28
|
+
}));
|
|
176
29
|
}, []);
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
setState(
|
|
180
|
-
|
|
30
|
+
const onHandleChange = React.useCallback((handleValue, data)=>{
|
|
31
|
+
const newHandleXPosition = data.x;
|
|
32
|
+
setState((prevState)=>({
|
|
33
|
+
...prevState,
|
|
181
34
|
railFillWidth: newHandleXPosition
|
|
182
|
-
});
|
|
183
|
-
});
|
|
35
|
+
}));
|
|
184
36
|
if (onChange) {
|
|
185
37
|
onChange(handleValue);
|
|
186
38
|
}
|
|
187
39
|
}, [
|
|
188
40
|
onChange
|
|
189
41
|
]);
|
|
190
|
-
|
|
42
|
+
const onHandleChangeCommitted = React.useCallback((handleValue, data)=>{
|
|
191
43
|
onChangeCommitted(handleValue);
|
|
192
|
-
setState(
|
|
193
|
-
|
|
44
|
+
setState((prevState)=>({
|
|
45
|
+
...prevState,
|
|
194
46
|
xHandle: data.lastX,
|
|
195
47
|
railFillWidth: data.lastX
|
|
196
|
-
});
|
|
197
|
-
});
|
|
48
|
+
}));
|
|
198
49
|
}, [
|
|
199
50
|
onChangeCommitted
|
|
200
51
|
]);
|
|
201
|
-
return /*#__PURE__*/ React.createElement(SliderBase,
|
|
52
|
+
return /*#__PURE__*/ React.createElement(SliderBase, {
|
|
202
53
|
min: min,
|
|
203
54
|
max: max,
|
|
204
55
|
disabled: disabled,
|
|
205
56
|
setStepSize: setStepSize,
|
|
206
57
|
onChange: onHandleChangeCommitted,
|
|
207
|
-
railFillWidth: state.railFillWidth
|
|
208
|
-
|
|
58
|
+
railFillWidth: state.railFillWidth,
|
|
59
|
+
...rest
|
|
60
|
+
}, /*#__PURE__*/ React.createElement(Handle, {
|
|
209
61
|
stepSize: state.stepSize,
|
|
210
62
|
onChangeCommitted: onHandleChangeCommitted,
|
|
211
63
|
onChange: onHandleChange,
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Slider as SliderSingleValue } from './Single';
|
|
3
3
|
import { Slider as SliderDoubleValues } from './Double';
|
|
4
|
-
|
|
5
|
-
return typeof props.value === 'number';
|
|
6
|
-
};
|
|
4
|
+
const isSingleValueProps = (props)=>typeof props.value === 'number';
|
|
7
5
|
/**
|
|
8
6
|
* Слайдер позволяет определить числовое значение в пределах указанного промежутка.
|
|
9
7
|
* Можно указать два значения.
|
|
10
8
|
* Только для приложения Салют.
|
|
11
|
-
*/ export
|
|
9
|
+
*/ export const SliderCore = (props)=>{
|
|
12
10
|
if (isSingleValueProps(props)) {
|
|
13
11
|
return /*#__PURE__*/ React.createElement(SliderSingleValue, props);
|
|
14
12
|
}
|
|
@@ -1,60 +1,53 @@
|
|
|
1
1
|
import React, { useCallback, useRef } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { useIsomorphicLayoutEffect } from '../../hooks';
|
|
4
|
-
|
|
4
|
+
const Slider = styled.div.withConfig({
|
|
5
5
|
displayName: "SliderBase__Slider",
|
|
6
6
|
componentId: "sc-1367fcf6-0"
|
|
7
7
|
})([
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
],
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
]
|
|
19
|
-
|
|
20
|
-
var disabled = param.disabled;
|
|
21
|
-
return disabled && css([
|
|
22
|
-
"opacity:0.4;"
|
|
23
|
-
]);
|
|
24
|
-
});
|
|
25
|
-
var RailWrap = styled.div.withConfig({
|
|
8
|
+
`position:relative;height:1.625rem;user-select:none;`,
|
|
9
|
+
` `,
|
|
10
|
+
``
|
|
11
|
+
], ({ $settings: { indent = 0.75, backgroundColor, fillColor } })=>css([
|
|
12
|
+
`--indent:`,
|
|
13
|
+
`rem;--background-color:`,
|
|
14
|
+
`;--fill-color:`,
|
|
15
|
+
`;`
|
|
16
|
+
], indent, backgroundColor, fillColor), ({ disabled })=>disabled && css([
|
|
17
|
+
`opacity:0.4;`
|
|
18
|
+
]));
|
|
19
|
+
const RailWrap = styled.div.withConfig({
|
|
26
20
|
displayName: "SliderBase__RailWrap",
|
|
27
21
|
componentId: "sc-1367fcf6-1"
|
|
28
22
|
})([
|
|
29
|
-
|
|
23
|
+
`height:100%;`
|
|
30
24
|
]);
|
|
31
|
-
|
|
25
|
+
const Rail = styled.div.withConfig({
|
|
32
26
|
displayName: "SliderBase__Rail",
|
|
33
27
|
componentId: "sc-1367fcf6-2"
|
|
34
28
|
})([
|
|
35
|
-
|
|
29
|
+
`position:relative;top:50%;margin-left:var(--indent);margin-right:var(--indent);height:0.25rem;border-radius:0.125rem;background-color:var(--background-color);overflow:hidden;transform:translateY(-50%);`
|
|
36
30
|
]);
|
|
37
|
-
|
|
31
|
+
const Fill = styled.div.withConfig({
|
|
38
32
|
displayName: "SliderBase__Fill",
|
|
39
33
|
componentId: "sc-1367fcf6-3"
|
|
40
34
|
})([
|
|
41
|
-
|
|
35
|
+
`position:absolute;height:100%;top:0;left:0;background-color:var(--fill-color);width:0;`
|
|
42
36
|
]);
|
|
43
|
-
export
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
var onHandleChange = useCallback(function(e) {
|
|
37
|
+
export const SliderBase = ({ max, min, setStepSize, railFillWidth, children, railFillXPosition = 0, disabled, onChange, settings = {} })=>{
|
|
38
|
+
const { indent = 0.75, fontSizeMultiplier = 16 } = settings;
|
|
39
|
+
const ref = useRef(null);
|
|
40
|
+
const gap = indent * fontSizeMultiplier * 2;
|
|
41
|
+
const onHandleChange = useCallback((e)=>{
|
|
49
42
|
if (!onChange || disabled) {
|
|
50
43
|
return;
|
|
51
44
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
45
|
+
const { x, width } = e.currentTarget.getBoundingClientRect();
|
|
46
|
+
const lastX = e.clientX - x;
|
|
47
|
+
const position = min + lastX / (width - gap) * (max - min);
|
|
48
|
+
const result = Math.max(min, Math.min(max, position));
|
|
56
49
|
onChange(result, {
|
|
57
|
-
lastX
|
|
50
|
+
lastX
|
|
58
51
|
});
|
|
59
52
|
}, [
|
|
60
53
|
onChange,
|
|
@@ -63,28 +56,26 @@ export var SliderBase = function SliderBase(param) {
|
|
|
63
56
|
gap,
|
|
64
57
|
max
|
|
65
58
|
]);
|
|
66
|
-
useIsomorphicLayoutEffect(
|
|
67
|
-
|
|
59
|
+
useIsomorphicLayoutEffect(()=>{
|
|
60
|
+
const resizeHandler = ()=>{
|
|
68
61
|
if (ref.current) {
|
|
69
|
-
|
|
70
|
-
|
|
62
|
+
const railSize = ref.current.offsetWidth - gap;
|
|
63
|
+
const totalSteps = max - min;
|
|
71
64
|
setStepSize(railSize / totalSteps);
|
|
72
65
|
}
|
|
73
66
|
};
|
|
74
67
|
resizeHandler();
|
|
75
68
|
window.addEventListener('resize', resizeHandler);
|
|
76
|
-
return
|
|
77
|
-
return window.removeEventListener('resize', resizeHandler);
|
|
78
|
-
};
|
|
69
|
+
return ()=>window.removeEventListener('resize', resizeHandler);
|
|
79
70
|
}, [
|
|
80
71
|
min,
|
|
81
72
|
max,
|
|
82
73
|
setStepSize,
|
|
83
74
|
ref.current
|
|
84
75
|
]);
|
|
85
|
-
|
|
86
|
-
left:
|
|
87
|
-
width:
|
|
76
|
+
const fillStyle = {
|
|
77
|
+
left: `${railFillXPosition}px`,
|
|
78
|
+
width: `${railFillWidth}px`
|
|
88
79
|
};
|
|
89
80
|
return /*#__PURE__*/ React.createElement(Slider, {
|
|
90
81
|
disabled: disabled,
|