@salutejs/plasma-new-hope 0.156.0-canary.1451.11071985286.0 → 0.156.0-canary.1452.11101408453.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Slider/Slider.css +14 -12
- package/cjs/components/Slider/Slider.js +9 -1
- package/cjs/components/Slider/Slider.js.map +1 -1
- package/cjs/components/Slider/Slider.tokens.js +15 -3
- package/cjs/components/Slider/Slider.tokens.js.map +1 -1
- package/cjs/components/Slider/components/Double/Double.css +7 -7
- package/cjs/components/Slider/components/Double/Double.js +14 -9
- package/cjs/components/Slider/components/Double/Double.js.map +1 -1
- package/cjs/components/Slider/components/Single/Single.css +13 -13
- package/cjs/components/Slider/components/Single/Single.js +53 -30
- package/cjs/components/Slider/components/Single/Single.js.map +1 -1
- package/cjs/components/Slider/components/Single/Single.styles.js +4 -4
- package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -1
- package/cjs/components/Slider/components/Single/Single.styles_fdps5r.css +6 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.css +4 -4
- package/cjs/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_1g9fv8o.css +4 -0
- package/cjs/components/Slider/ui/Handler/Handler.css +3 -3
- package/cjs/components/Slider/ui/Handler/Handler.js +38 -32
- package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -1
- package/cjs/components/Slider/ui/Handler/Handler.styles.js +17 -7
- package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
- package/cjs/components/Slider/ui/Handler/Handler.styles_xinbde.css +2 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_wjaol4.css +1 -0
- package/cjs/components/Slider/utils/index.js +28 -10
- package/cjs/components/Slider/utils/index.js.map +1 -1
- package/cjs/components/Slider/variations/_view/base.js +1 -1
- package/cjs/components/Slider/variations/_view/base.js.map +1 -1
- package/cjs/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
- package/cjs/components/TextArea/TextArea.js +15 -21
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/TextArea.tokens.js +2 -15
- package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
- package/cjs/components/TextArea/variations/_view/base.js +1 -1
- package/cjs/components/TextArea/variations/_view/base.js.map +1 -1
- package/cjs/components/TextArea/variations/_view/base_8npjyq.css +1 -0
- package/cjs/index.css +15 -15
- package/cjs/utils/index.js.map +1 -1
- package/emotion/cjs/components/Slider/Slider.js +9 -1
- package/emotion/cjs/components/Slider/Slider.tokens.js +15 -3
- package/emotion/cjs/components/Slider/components/Double/Double.js +10 -5
- package/emotion/cjs/components/Slider/components/Single/Single.js +53 -30
- package/emotion/cjs/components/Slider/components/Single/Single.styles.js +18 -9
- package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +9 -9
- package/emotion/cjs/components/Slider/ui/Handler/Handler.js +41 -32
- package/emotion/cjs/components/Slider/ui/Handler/Handler.styles.js +9 -15
- package/emotion/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/emotion/cjs/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
- package/emotion/cjs/components/Slider/utils/index.js +28 -10
- package/emotion/cjs/components/Slider/variations/_view/base.js +2 -1
- package/emotion/cjs/components/TextArea/TextArea.js +16 -22
- package/emotion/cjs/components/TextArea/TextArea.template-doc.mdx +0 -29
- package/emotion/cjs/components/TextArea/TextArea.tokens.js +2 -15
- package/emotion/cjs/components/TextArea/variations/_view/base.js +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
- package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +71 -9
- package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +9 -12
- package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +11 -18
- package/emotion/cjs/examples/plasma_web/components/Slider/Slider.config.js +7 -7
- package/emotion/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +73 -10
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +9 -12
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +12 -18
- package/emotion/es/components/Slider/Slider.js +9 -1
- package/emotion/es/components/Slider/Slider.tokens.js +15 -3
- package/emotion/es/components/Slider/components/Double/Double.js +10 -5
- package/emotion/es/components/Slider/components/Single/Single.js +54 -31
- package/emotion/es/components/Slider/components/Single/Single.styles.js +17 -8
- package/emotion/es/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/emotion/es/components/Slider/components/SliderBase/SliderBase.styles.js +10 -10
- package/emotion/es/components/Slider/ui/Handler/Handler.js +40 -30
- package/emotion/es/components/Slider/ui/Handler/Handler.styles.js +10 -16
- package/emotion/es/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/emotion/es/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
- package/emotion/es/components/Slider/utils/index.js +28 -10
- package/emotion/es/components/Slider/variations/_view/base.js +2 -1
- package/emotion/es/components/TextArea/TextArea.js +14 -20
- package/emotion/es/components/TextArea/TextArea.template-doc.mdx +0 -29
- package/emotion/es/components/TextArea/TextArea.tokens.js +2 -15
- package/emotion/es/components/TextArea/variations/_view/base.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
- package/emotion/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +71 -9
- package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +9 -12
- package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +11 -18
- package/emotion/es/examples/plasma_web/components/Slider/Slider.config.js +7 -7
- package/emotion/es/examples/plasma_web/components/Slider/Slider.stories.tsx +73 -10
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.config.js +9 -12
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +12 -18
- package/es/components/Slider/Slider.css +14 -12
- package/es/components/Slider/Slider.js +9 -1
- package/es/components/Slider/Slider.js.map +1 -1
- package/es/components/Slider/Slider.tokens.js +15 -3
- package/es/components/Slider/Slider.tokens.js.map +1 -1
- package/es/components/Slider/components/Double/Double.css +7 -7
- package/es/components/Slider/components/Double/Double.js +10 -5
- package/es/components/Slider/components/Double/Double.js.map +1 -1
- package/es/components/Slider/components/Single/Single.css +13 -13
- package/es/components/Slider/components/Single/Single.js +54 -31
- package/es/components/Slider/components/Single/Single.js.map +1 -1
- package/es/components/Slider/components/Single/Single.styles.js +4 -4
- package/es/components/Slider/components/Single/Single.styles.js.map +1 -1
- package/es/components/Slider/components/Single/Single.styles_fdps5r.css +6 -0
- package/es/components/Slider/components/SliderBase/SliderBase.css +4 -4
- package/es/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles_1g9fv8o.css +4 -0
- package/es/components/Slider/ui/Handler/Handler.css +3 -3
- package/es/components/Slider/ui/Handler/Handler.js +37 -31
- package/es/components/Slider/ui/Handler/Handler.js.map +1 -1
- package/es/components/Slider/ui/Handler/Handler.styles.js +17 -7
- package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
- package/es/components/Slider/ui/Handler/Handler.styles_xinbde.css +2 -0
- package/es/components/Slider/ui/Thumb/Thumb.css +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles_wjaol4.css +1 -0
- package/es/components/Slider/utils/index.js +28 -10
- package/es/components/Slider/utils/index.js.map +1 -1
- package/es/components/Slider/variations/_view/base.js +1 -1
- package/es/components/Slider/variations/_view/base.js.map +1 -1
- package/es/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
- package/es/components/TextArea/TextArea.js +15 -21
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/TextArea.tokens.js +2 -15
- package/es/components/TextArea/TextArea.tokens.js.map +1 -1
- package/es/components/TextArea/variations/_view/base.js +1 -1
- package/es/components/TextArea/variations/_view/base.js.map +1 -1
- package/es/components/TextArea/variations/_view/base_8npjyq.css +1 -0
- package/es/index.css +15 -15
- package/es/utils/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Slider/Slider.js +9 -1
- package/styled-components/cjs/components/Slider/Slider.tokens.js +15 -3
- package/styled-components/cjs/components/Slider/components/Double/Double.js +10 -5
- package/styled-components/cjs/components/Slider/components/Single/Single.js +53 -30
- package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +4 -4
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +6 -6
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +41 -32
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +7 -4
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
- package/styled-components/cjs/components/Slider/utils/index.js +28 -10
- package/styled-components/cjs/components/Slider/variations/_view/base.js +2 -1
- package/styled-components/cjs/components/TextArea/TextArea.js +15 -21
- package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +0 -29
- package/styled-components/cjs/components/TextArea/TextArea.tokens.js +2 -15
- package/styled-components/cjs/components/TextArea/variations/_view/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +71 -9
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +9 -12
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +11 -18
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +3 -3
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +73 -10
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +8 -11
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +12 -18
- package/styled-components/es/components/Slider/Slider.js +9 -1
- package/styled-components/es/components/Slider/Slider.tokens.js +15 -3
- package/styled-components/es/components/Slider/components/Double/Double.js +10 -5
- package/styled-components/es/components/Slider/components/Single/Single.js +54 -31
- package/styled-components/es/components/Slider/components/Single/Single.styles.js +3 -3
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/styled-components/es/components/Slider/ui/Handler/Handler.js +40 -30
- package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -5
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
- package/styled-components/es/components/Slider/utils/index.js +28 -10
- package/styled-components/es/components/Slider/variations/_view/base.js +2 -1
- package/styled-components/es/components/TextArea/TextArea.js +13 -19
- package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +0 -29
- package/styled-components/es/components/TextArea/TextArea.tokens.js +2 -15
- package/styled-components/es/components/TextArea/variations/_view/base.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +71 -9
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +9 -12
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +11 -18
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +3 -3
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +73 -10
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +8 -11
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +12 -18
- package/types/components/Slider/Slider.d.ts.map +1 -1
- package/types/components/Slider/Slider.tokens.d.ts +14 -2
- package/types/components/Slider/Slider.tokens.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.types.d.ts +2 -0
- package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
- package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
- package/types/components/Slider/components/Single/Single.styles.d.ts +1 -1
- package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Single/Single.types.d.ts +26 -1
- package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts +6 -2
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/Handler.types.d.ts +4 -1
- package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.d.ts +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -1
- package/types/components/Slider/utils/index.d.ts +26 -8
- package/types/components/Slider/utils/index.d.ts.map +1 -1
- package/types/components/Slider/variations/_view/base.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.d.ts +0 -4
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.tokens.d.ts +0 -13
- package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.types.d.ts +3 -15
- package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts +0 -3
- package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts +0 -81
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts +0 -3
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts +0 -81
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/utils/index.d.ts +1 -1
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +0 -4
- package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
- package/cjs/components/Slider/variations/_view/base_x642ct.css +0 -1
- package/cjs/components/TextArea/variations/_clear/base.js +0 -9
- package/cjs/components/TextArea/variations/_clear/base.js.map +0 -1
- package/cjs/components/TextArea/variations/_clear/base_193g3al.css +0 -1
- package/cjs/components/TextArea/variations/_view/base_d83rii.css +0 -1
- package/emotion/cjs/components/TextArea/variations/_clear/base.js +0 -10
- package/emotion/es/components/TextArea/variations/_clear/base.js +0 -4
- package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
- package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +0 -4
- package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
- package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
- package/es/components/Slider/variations/_view/base_x642ct.css +0 -1
- package/es/components/TextArea/variations/_clear/base.js +0 -5
- package/es/components/TextArea/variations/_clear/base.js.map +0 -1
- package/es/components/TextArea/variations/_clear/base_193g3al.css +0 -1
- package/es/components/TextArea/variations/_view/base_d83rii.css +0 -1
- package/styled-components/cjs/components/TextArea/variations/_clear/base.js +0 -10
- package/styled-components/es/components/TextArea/variations/_clear/base.js +0 -4
- package/types/components/TextArea/variations/_clear/base.d.ts +0 -2
- package/types/components/TextArea/variations/_clear/base.d.ts.map +0 -1
@@ -1,5 +1,7 @@
|
|
1
1
|
import React, { useRef, useEffect } from 'react';
|
2
2
|
import { useIsomorphicLayoutEffect } from '../../../../hooks';
|
3
|
+
import { classes } from '../../Slider.tokens';
|
4
|
+
import { cx } from '../../../../utils';
|
3
5
|
import { Fill, Rail, RailWrap, Slider } from './SliderBase.styles';
|
4
6
|
export var SliderBase = function SliderBase(_ref) {
|
5
7
|
var max = _ref.max,
|
@@ -13,6 +15,7 @@ export var SliderBase = function SliderBase(_ref) {
|
|
13
15
|
labelPlacement = _ref.labelPlacement,
|
14
16
|
rangeValuesPlacement = _ref.rangeValuesPlacement,
|
15
17
|
onChange = _ref.onChange,
|
18
|
+
orientation = _ref.orientation,
|
16
19
|
_ref$settings = _ref.settings,
|
17
20
|
settings = _ref$settings === void 0 ? {} : _ref$settings;
|
18
21
|
var _settings$indent = settings.indent,
|
@@ -21,34 +24,41 @@ export var SliderBase = function SliderBase(_ref) {
|
|
21
24
|
fontSizeMultiplier = _settings$fontSizeMul === void 0 ? 16 : _settings$fontSizeMul;
|
22
25
|
var ref = useRef(null);
|
23
26
|
var gap = indent * fontSizeMultiplier * 2;
|
27
|
+
var isVertical = orientation === 'vertical';
|
24
28
|
useEffect(function () {
|
25
29
|
var resizeHandler = function resizeHandler() {
|
26
30
|
if (ref.current) {
|
27
|
-
var railSize = ref.current.offsetWidth - gap;
|
31
|
+
var railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;
|
28
32
|
var totalSteps = max - min;
|
29
33
|
setStepSize(railSize / totalSteps);
|
30
34
|
}
|
31
35
|
};
|
32
36
|
resizeHandler();
|
33
|
-
}, [labelPlacement, rangeValuesPlacement]);
|
37
|
+
}, [labelPlacement, rangeValuesPlacement, gap, isVertical]);
|
34
38
|
var onHandleChange = function onHandleChange(e) {
|
35
39
|
if (!onChange || disabled) {
|
36
40
|
return;
|
37
41
|
}
|
38
42
|
var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
|
39
43
|
x = _e$currentTarget$getB.x,
|
40
|
-
width = _e$currentTarget$getB.width
|
41
|
-
|
42
|
-
|
44
|
+
width = _e$currentTarget$getB.width,
|
45
|
+
y = _e$currentTarget$getB.y,
|
46
|
+
height = _e$currentTarget$getB.height;
|
47
|
+
var lastPos = isVertical ? e.clientY - y : e.clientX - x;
|
48
|
+
var sliderWidth = isVertical ? height : width;
|
49
|
+
var position = min + lastPos / (sliderWidth - gap) * (max - min);
|
43
50
|
var result = Math.max(min, Math.min(max, position));
|
44
|
-
|
45
|
-
|
46
|
-
}
|
51
|
+
var data = isVertical ? {
|
52
|
+
lastY: lastPos
|
53
|
+
} : {
|
54
|
+
lastX: lastPos
|
55
|
+
};
|
56
|
+
onChange(result, data);
|
47
57
|
};
|
48
58
|
useIsomorphicLayoutEffect(function () {
|
49
59
|
var resizeHandler = function resizeHandler() {
|
50
60
|
if (ref.current) {
|
51
|
-
var railSize = ref.current.offsetWidth - gap;
|
61
|
+
var railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;
|
52
62
|
var totalSteps = max - min;
|
53
63
|
setStepSize(railSize / totalSteps);
|
54
64
|
}
|
@@ -58,13 +68,18 @@ export var SliderBase = function SliderBase(_ref) {
|
|
58
68
|
return function () {
|
59
69
|
return window.removeEventListener('resize', resizeHandler);
|
60
70
|
};
|
61
|
-
}, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement]);
|
62
|
-
var fillStyle = {
|
71
|
+
}, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement, isVertical]);
|
72
|
+
var fillStyle = isVertical ? {
|
73
|
+
top: "".concat(railFillXPosition, "px"),
|
74
|
+
height: "".concat(railFillWidth, "px"),
|
75
|
+
width: '100%'
|
76
|
+
} : {
|
63
77
|
left: "".concat(railFillXPosition, "px"),
|
64
78
|
width: "".concat(railFillWidth, "px")
|
65
79
|
};
|
66
80
|
return /*#__PURE__*/React.createElement(Slider, {
|
67
|
-
ref: ref
|
81
|
+
ref: ref,
|
82
|
+
className: cx(orientation === 'vertical' && classes.verticalOrientation)
|
68
83
|
}, /*#__PURE__*/React.createElement(RailWrap, {
|
69
84
|
"aria-hidden": "true",
|
70
85
|
onMouseDown: onHandleChange
|
@@ -1,14 +1,14 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import { tokens } from '../../Slider.tokens';
|
3
|
-
export var
|
2
|
+
import { classes, tokens } from '../../Slider.tokens';
|
3
|
+
export var Rail = /*#__PURE__*/styled.div.withConfig({
|
4
4
|
componentId: "plasma-new-hope__sc-ik0bjb-0"
|
5
|
-
})(["
|
6
|
-
export var
|
5
|
+
})(["position:relative;top:50%;height:var(", ");border-radius:var(", ");background-color:var(", ");overflow:hidden;transform:translateY(-50%);"], tokens.railThickness, tokens.railBorderRadius, tokens.railBackgroundColor);
|
6
|
+
export var Slider = /*#__PURE__*/styled.div.withConfig({
|
7
7
|
componentId: "plasma-new-hope__sc-ik0bjb-1"
|
8
|
-
})(["height:100%;"]);
|
9
|
-
export var
|
8
|
+
})(["flex:1;position:relative;user-select:none;height:var(", ");&.", "{width:var(", ");height:auto;", "{top:0;left:50%;transform:translateX(-50%);width:var(", ");height:100%;}}"], tokens.size, classes.verticalOrientation, tokens.size, Rail, tokens.railThickness);
|
9
|
+
export var RailWrap = /*#__PURE__*/styled.div.withConfig({
|
10
10
|
componentId: "plasma-new-hope__sc-ik0bjb-2"
|
11
|
-
})(["
|
11
|
+
})(["height:100%;"]);
|
12
12
|
export var Fill = /*#__PURE__*/styled.div.withConfig({
|
13
13
|
componentId: "plasma-new-hope__sc-ik0bjb-3"
|
14
14
|
})(["position:absolute;height:100%;top:0;left:0;background:var(", ");width:0;"], tokens.fillColor);
|
@@ -1,5 +1,9 @@
|
|
1
|
-
|
1
|
+
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); }
|
2
|
+
var _excluded = ["size", "orientation", "stepSize", "onChangeCommitted", "onChange", "position", "min", "max", "bounds", "zIndex", "disabled", "side", "showCurrentValue", "startOffset", "endOffset", "value", "valuePlacement"];
|
2
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
3
7
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
8
|
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."); }
|
5
9
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
@@ -10,8 +14,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
10
14
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
11
15
|
import React, { useRef, forwardRef } from 'react';
|
12
16
|
import Draggable from 'react-draggable';
|
17
|
+
import { cx } from '../../../../utils';
|
13
18
|
import { getSliderThumbValue, getOffsets } from '../../utils';
|
14
19
|
import { Thumb } from '../Thumb/Thumb';
|
20
|
+
import { classes } from '../../Slider.tokens';
|
15
21
|
import { HandlerStyled, StyledValue } from './Handler.styles';
|
16
22
|
|
17
23
|
// TODO: PLASMA-1707
|
@@ -27,11 +33,13 @@ var KeyboardSupport = {
|
|
27
33
|
ArrowDown: 40
|
28
34
|
};
|
29
35
|
export var Handler = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
30
|
-
var
|
36
|
+
var size = _ref.size,
|
37
|
+
orientation = _ref.orientation,
|
38
|
+
stepSize = _ref.stepSize,
|
31
39
|
onChangeCommitted = _ref.onChangeCommitted,
|
32
40
|
onChange = _ref.onChange,
|
33
|
-
_ref$
|
34
|
-
|
41
|
+
_ref$position = _ref.position,
|
42
|
+
position = _ref$position === void 0 ? 0 : _ref$position,
|
35
43
|
min = _ref.min,
|
36
44
|
max = _ref.max,
|
37
45
|
_ref$bounds = _ref.bounds,
|
@@ -46,36 +54,35 @@ export var Handler = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
46
54
|
_ref$endOffset = _ref.endOffset,
|
47
55
|
endOffset = _ref$endOffset === void 0 ? 0 : _ref$endOffset,
|
48
56
|
value = _ref.value,
|
57
|
+
valuePlacement = _ref.valuePlacement,
|
49
58
|
rest = _objectWithoutProperties(_ref, _excluded);
|
59
|
+
var isVertical = orientation === 'vertical';
|
50
60
|
var lastOnChangeValue = useRef();
|
51
|
-
var _getOffsets = getOffsets(ref, side),
|
61
|
+
var _getOffsets = getOffsets(ref, side, isVertical),
|
52
62
|
_getOffsets2 = _slicedToArray(_getOffsets, 2),
|
53
|
-
|
54
|
-
|
63
|
+
startClientOffset = _getOffsets2[0],
|
64
|
+
endClientOffset = _getOffsets2[1];
|
55
65
|
var _bounds = _slicedToArray(bounds, 2),
|
56
|
-
|
57
|
-
|
58
|
-
var
|
59
|
-
var
|
60
|
-
var
|
61
|
-
x:
|
62
|
-
y: 0
|
66
|
+
startValueBound = _bounds[0],
|
67
|
+
endValueBound = _bounds[1];
|
68
|
+
var startPositionBound = startValueBound ? (startValueBound - min) * stepSize : null;
|
69
|
+
var endPositionBound = endValueBound ? (endValueBound - min) * stepSize : null;
|
70
|
+
var dragPosition = typeof position === 'number' ? {
|
71
|
+
x: isVertical ? 0 : position,
|
72
|
+
y: isVertical ? position : 0
|
63
73
|
} : undefined;
|
64
74
|
var tabIndex = disabled ? -1 : 0;
|
65
|
-
var computedBounds = {
|
66
|
-
|
67
|
-
right: (rightPositionBound !== null && rightPositionBound !== void 0 ? rightPositionBound : stepSize * (max - min)) - (offsetRight ? stepSize : 0)
|
68
|
-
};
|
69
|
-
var showCurrentValueCondition = showCurrentValue && (xPosition >= startOffset && xPosition <= max * stepSize - endOffset || xPosition === 0 && value !== 0);
|
75
|
+
var computedBounds = _defineProperty(_defineProperty({}, isVertical ? 'top' : 'left', (startPositionBound !== null && startPositionBound !== void 0 ? startPositionBound : 0) - (startClientOffset ? stepSize : 0)), isVertical ? 'bottom' : 'right', (endPositionBound !== null && endPositionBound !== void 0 ? endPositionBound : stepSize * (max - min)) - (endClientOffset ? stepSize : 0));
|
76
|
+
var showCurrentValueCondition = showCurrentValue && (position >= startOffset && position <= max * stepSize - endOffset || position === 0 && value !== 0);
|
70
77
|
var onDrag = function onDrag(_, data) {
|
71
|
-
var newValue = getSliderThumbValue(data.x, stepSize, min, max);
|
78
|
+
var newValue = getSliderThumbValue(isVertical ? data.y : data.x, stepSize, min, max);
|
72
79
|
if (lastOnChangeValue.current !== newValue) {
|
73
80
|
onChange === null || onChange === void 0 || onChange(newValue, data);
|
74
81
|
lastOnChangeValue.current = newValue;
|
75
82
|
}
|
76
83
|
};
|
77
84
|
var onStop = function onStop(_, data) {
|
78
|
-
var newValue = getSliderThumbValue(data.x, stepSize, min, max);
|
85
|
+
var newValue = getSliderThumbValue(isVertical ? data.y : data.x, stepSize, min, max);
|
79
86
|
onChangeCommitted && onChangeCommitted(newValue, data);
|
80
87
|
};
|
81
88
|
var onKeyPress = function onKeyPress(event) {
|
@@ -97,7 +104,7 @@ export var Handler = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
97
104
|
var data = {
|
98
105
|
x: 0,
|
99
106
|
deltaX: stepSize,
|
100
|
-
lastX:
|
107
|
+
lastX: position,
|
101
108
|
y: 0,
|
102
109
|
deltaY: 0,
|
103
110
|
lastY: 0,
|
@@ -106,19 +113,19 @@ export var Handler = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
106
113
|
switch (keyCode) {
|
107
114
|
case ArrowUp:
|
108
115
|
case ArrowRight:
|
109
|
-
data.x =
|
116
|
+
data.x = position + stepSize;
|
110
117
|
break;
|
111
118
|
case ArrowDown:
|
112
119
|
case ArrowLeft:
|
113
|
-
data.x =
|
120
|
+
data.x = position - stepSize;
|
114
121
|
data.deltaX = -stepSize;
|
115
122
|
break;
|
116
123
|
case PageUp:
|
117
|
-
data.x =
|
124
|
+
data.x = position + computedMultipleSteps;
|
118
125
|
data.deltaX = computedMultipleSteps;
|
119
126
|
break;
|
120
127
|
case PageDown:
|
121
|
-
data.x =
|
128
|
+
data.x = position - computedMultipleSteps;
|
122
129
|
data.deltaX = -computedMultipleSteps;
|
123
130
|
break;
|
124
131
|
case End:
|
@@ -144,24 +151,27 @@ export var Handler = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
144
151
|
onChangeCommitted && onChangeCommitted(computedValue, data);
|
145
152
|
};
|
146
153
|
return /*#__PURE__*/React.createElement(Draggable, {
|
147
|
-
axis:
|
154
|
+
axis: isVertical ? 'y' : 'x',
|
148
155
|
bounds: computedBounds,
|
149
|
-
grid: [stepSize, 1],
|
156
|
+
grid: isVertical ? [1, stepSize] : [stepSize, 1],
|
150
157
|
onStop: onStop,
|
151
158
|
onDrag: onDrag,
|
152
|
-
position:
|
159
|
+
position: dragPosition,
|
153
160
|
disabled: disabled
|
154
161
|
}, /*#__PURE__*/React.createElement(HandlerStyled, {
|
155
162
|
ref: ref,
|
156
163
|
style: {
|
157
164
|
zIndex: zIndex
|
158
165
|
},
|
166
|
+
className: cx(isVertical && classes.verticalOrientation, valuePlacement === 'left' && classes.valuePlacementLeft),
|
167
|
+
isLarge: size === 'l',
|
159
168
|
onKeyDown: onKeyPress
|
160
169
|
}, /*#__PURE__*/React.createElement(Thumb, _extends({
|
161
170
|
tabIndex: tabIndex,
|
162
171
|
min: min,
|
163
172
|
max: max,
|
164
173
|
value: value,
|
165
|
-
disabled: disabled
|
174
|
+
disabled: disabled,
|
175
|
+
orientation: orientation
|
166
176
|
}, rest)), showCurrentValueCondition && /*#__PURE__*/React.createElement(StyledValue, null, value)));
|
167
177
|
});
|
@@ -1,8 +1,11 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import { tokens } from '../../Slider.tokens';
|
3
|
-
export var HandlerStyled = /*#__PURE__*/styled.div.withConfig({
|
4
|
-
componentId: "plasma-new-hope__sc-a1py3c-0"
|
5
|
-
})(["cursor:pointer;position:absolute;z-index:1;top:0;left:0;"]);
|
2
|
+
import { classes, tokens } from '../../Slider.tokens';
|
6
3
|
export var StyledValue = /*#__PURE__*/styled.span.withConfig({
|
4
|
+
componentId: "plasma-new-hope__sc-a1py3c-0"
|
5
|
+
})(["position:absolute;z-index:1;top:var(", ");text-align:center;width:100%;margin-left:-0.125rem;display:flex;justify-content:center;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.currentValueTopOffset, tokens.currentValueFontFamily, tokens.currentValueFontSize, tokens.currentValueFontStyle, tokens.currentValueFontWeight, tokens.currentValueLetterSpacing, tokens.currentValueLineHeight);
|
6
|
+
export var HandlerStyled = /*#__PURE__*/styled.div.withConfig({
|
7
7
|
componentId: "plasma-new-hope__sc-a1py3c-1"
|
8
|
-
})(["position:absolute;z-index:1;top:
|
8
|
+
})(["cursor:pointer;position:absolute;z-index:1;top:0;left:0;bottom:0;display:flex;align-items:center;--thumb-size:", ";&.", "{left:0.125rem;right:0;align-items:flex-start;justify-content:center;", "{margin:0;top:0;bottom:0;right:0;left:calc(var(", ") - (var(", ") - var(--thumb-size)) / 2 + 0.25rem);align-items:center;justify-content:flex-start;}}&.", "{", "{left:auto;right:calc(var(", ") - (var(", ") - var(--thumb-size)) / 2 + 0.3125rem);justify-content:flex-end;}}"], function (_ref) {
|
9
|
+
var isLarge = _ref.isLarge;
|
10
|
+
return isLarge ? "var(".concat(tokens.thumbSizeLarge, ")") : "var(".concat(tokens.thumbSize, ")");
|
11
|
+
}, classes.verticalOrientation, StyledValue, tokens.size, tokens.size, classes.valuePlacementLeft, StyledValue, tokens.size, tokens.size);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["min", "max", "value", "ariaValueMin", "ariaLabel", "disabled"];
|
1
|
+
var _excluded = ["min", "max", "value", "ariaValueMin", "ariaLabel", "disabled", "orientation"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
@@ -12,6 +12,7 @@ export var Thumb = function Thumb(_ref) {
|
|
12
12
|
ariaValueMin = _ref$ariaValueMin === void 0 ? min : _ref$ariaValueMin,
|
13
13
|
ariaLabel = _ref.ariaLabel,
|
14
14
|
disabled = _ref.disabled,
|
15
|
+
orientation = _ref.orientation,
|
15
16
|
rest = _objectWithoutProperties(_ref, _excluded);
|
16
17
|
return /*#__PURE__*/React.createElement(ThumbBase, _extends({
|
17
18
|
role: "slider",
|
@@ -20,6 +21,6 @@ export var Thumb = function Thumb(_ref) {
|
|
20
21
|
"aria-valuemax": max,
|
21
22
|
"aria-valuenow": value,
|
22
23
|
disabled: disabled,
|
23
|
-
"aria-orientation":
|
24
|
+
"aria-orientation": orientation
|
24
25
|
}, rest));
|
25
26
|
};
|
@@ -3,8 +3,8 @@ import { addFocus } from '../../../../mixins';
|
|
3
3
|
import { tokens } from '../../Slider.tokens';
|
4
4
|
export var ThumbBase = /*#__PURE__*/styled.div.withConfig({
|
5
5
|
componentId: "plasma-new-hope__sc-13botku-0"
|
6
|
-
})(["width:var(
|
7
|
-
outlineOffset: '0.
|
6
|
+
})(["width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);min-height:var(--thumb-size);position:relative;left:-0.0625rem;top:-0.0625rem;border-radius:50%;box-sizing:border-box;background:var(", ");margin:0.0625rem;transition:border-color 0.1s ease-in-out;&:after{background:var(", ");margin:-0.0625rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}&:not([disabled]):hover:after,&:not([disabled]):active:after{background:var(", ");}&[disabled]{cursor:not-allowed;}&:focus{outline:none;}", ""], tokens.thumbBackgroundColor, tokens.thumbBorderColor, tokens.thumbFocusBorderColor, /*#__PURE__*/addFocus({
|
7
|
+
outlineOffset: '0.0625rem',
|
8
8
|
outlineSize: '0.125rem',
|
9
9
|
outlineRadius: '50%',
|
10
10
|
outlineColor: /*#__PURE__*/"var(".concat(tokens.thumbFocusBorderColor, ")")
|
@@ -6,8 +6,8 @@
|
|
6
6
|
* @param {number} max
|
7
7
|
* @return {number}
|
8
8
|
*/
|
9
|
-
export function getSliderThumbValue(
|
10
|
-
var newValue = Math.round(
|
9
|
+
export function getSliderThumbValue(handleCenterPosRelative, stepSize, min, max) {
|
10
|
+
var newValue = Math.round(handleCenterPosRelative / stepSize) + min;
|
11
11
|
return Math.min(Math.max(newValue, min), max);
|
12
12
|
}
|
13
13
|
|
@@ -18,11 +18,11 @@ export function getSliderThumbValue(handleCenterXRelative, stepSize, min, max) {
|
|
18
18
|
* @param {'left' | 'right'} side
|
19
19
|
* @return Array<number>
|
20
20
|
*/
|
21
|
-
export function getOffsets(ref, side) {
|
21
|
+
export function getOffsets(ref, side, isVertical) {
|
22
22
|
if (!ref || !('current' in ref) || !ref.current || !side) {
|
23
23
|
return [0, 0];
|
24
24
|
}
|
25
|
-
var size = ref.current.clientWidth;
|
25
|
+
var size = isVertical ? ref.current.clientHeight : ref.current.clientWidth;
|
26
26
|
if (side === 'left') {
|
27
27
|
return [0, size];
|
28
28
|
}
|
@@ -33,15 +33,33 @@ export function getOffsets(ref, side) {
|
|
33
33
|
}
|
34
34
|
export var sizeData = {
|
35
35
|
s: {
|
36
|
-
|
37
|
-
|
36
|
+
s: {
|
37
|
+
indent: 0.5,
|
38
|
+
fontSizeMultiplier: 16
|
39
|
+
},
|
40
|
+
l: {
|
41
|
+
indent: 0.625,
|
42
|
+
fontSizeMultiplier: 16
|
43
|
+
}
|
38
44
|
},
|
39
45
|
m: {
|
40
|
-
|
41
|
-
|
46
|
+
s: {
|
47
|
+
indent: 0.5,
|
48
|
+
fontSizeMultiplier: 16
|
49
|
+
},
|
50
|
+
l: {
|
51
|
+
indent: 0.625,
|
52
|
+
fontSizeMultiplier: 16
|
53
|
+
}
|
42
54
|
},
|
43
55
|
l: {
|
44
|
-
|
45
|
-
|
56
|
+
s: {
|
57
|
+
indent: 0.5,
|
58
|
+
fontSizeMultiplier: 16
|
59
|
+
},
|
60
|
+
l: {
|
61
|
+
indent: 0.625,
|
62
|
+
fontSizeMultiplier: 16
|
63
|
+
}
|
46
64
|
}
|
47
65
|
};
|
@@ -1,5 +1,5 @@
|
|
1
1
|
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); }
|
2
|
-
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "
|
2
|
+
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
4
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
5
5
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -28,7 +28,6 @@ import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, Styl
|
|
28
28
|
import { classes } from './TextArea.tokens';
|
29
29
|
import { base as viewCSS } from './variations/_view/base';
|
30
30
|
import { base as sizeCSS } from './variations/_size/base';
|
31
|
-
import { base as clearCSS } from './variations/_clear/base';
|
32
31
|
import { base as disabledCSS } from './variations/_disabled/base';
|
33
32
|
var innerPlaceholderUp = classes.innerPlaceholderUp,
|
34
33
|
focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor,
|
@@ -54,6 +53,7 @@ export var getDynamicLabelClasses = function getDynamicLabelClasses(props, focus
|
|
54
53
|
var readOnly = props.readOnly,
|
55
54
|
label = props.label,
|
56
55
|
labelPlacement = props.labelPlacement,
|
56
|
+
autoResize = props.autoResize,
|
57
57
|
rows = props.rows,
|
58
58
|
value = props.value,
|
59
59
|
size = props.size;
|
@@ -62,10 +62,10 @@ export var getDynamicLabelClasses = function getDynamicLabelClasses(props, focus
|
|
62
62
|
var withFocusedOuterUpPlaceholder = !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;
|
63
63
|
|
64
64
|
// Добавить класс отвечающий за поднятие и уменьшение плейсхолдера
|
65
|
-
var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
|
65
|
+
var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
|
66
66
|
|
67
67
|
// Добавить класс отвечающий за скрытие плейсхолдера
|
68
|
-
var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && rows || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
|
68
|
+
var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
|
69
69
|
return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];
|
70
70
|
};
|
71
71
|
export var textAreaRoot = function textAreaRoot(Root) {
|
@@ -96,8 +96,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
96
96
|
requiredPlacement = _props$requiredPlacem === void 0 ? 'right' : _props$requiredPlacem,
|
97
97
|
_props$optional = props.optional,
|
98
98
|
optional = _props$optional === void 0 ? false : _props$optional,
|
99
|
-
clear = props.clear,
|
100
|
-
hasDivider = props.hasDivider,
|
101
99
|
size = props.size,
|
102
100
|
view = props.view,
|
103
101
|
id = props.id,
|
@@ -130,8 +128,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
130
128
|
var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
|
131
129
|
var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
|
132
130
|
var placeholderLabel = hasInnerLabel ? label : placeholder;
|
133
|
-
var clearClass = clear ? classes.clear : undefined;
|
134
|
-
var hasDividerClass = hasDivider ? classes.hasDivider : undefined;
|
135
131
|
var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
|
136
132
|
useResizeObserver(outerRef, function (currentElement) {
|
137
133
|
var inlineWidth = currentElement.style.width;
|
@@ -141,7 +137,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
141
137
|
setHelperWidth("".concat(elementWidth / ROOT_FONT_SIZE, "rem"));
|
142
138
|
}
|
143
139
|
});
|
144
|
-
useAutoResize(autoResize
|
140
|
+
useAutoResize(autoResize, outerRef, value, minAuto, maxAuto);
|
145
141
|
var onFocusHandler = useCallback(function () {
|
146
142
|
setFocused(true);
|
147
143
|
}, []);
|
@@ -155,25 +151,27 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
155
151
|
}
|
156
152
|
onChange === null || onChange === void 0 || onChange(event);
|
157
153
|
}, [value, onChange]);
|
158
|
-
var dynamicLabelClasses = getDynamicLabelClasses({
|
154
|
+
var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
|
159
155
|
size: size,
|
160
156
|
readOnly: readOnly,
|
161
157
|
label: label,
|
162
158
|
labelPlacement: labelPlacement,
|
163
|
-
value: value || uncontrolledValue || defaultValue
|
159
|
+
value: value || uncontrolledValue || defaultValue
|
160
|
+
}, rows ? {
|
164
161
|
rows: rows
|
165
|
-
}
|
162
|
+
} : {
|
163
|
+
autoResize: autoResize
|
164
|
+
}), focused);
|
166
165
|
var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
|
167
166
|
return /*#__PURE__*/React.createElement(Root, {
|
168
167
|
view: overriddenView,
|
169
168
|
size: size,
|
170
169
|
disabled: disabled,
|
171
170
|
readOnly: readOnly,
|
172
|
-
clear: clear,
|
173
171
|
style: _objectSpread({
|
174
172
|
width: helperWidth
|
175
173
|
}, style),
|
176
|
-
className:
|
174
|
+
className: className
|
177
175
|
}, hasOuterLabel && /*#__PURE__*/React.createElement(StyledLabel, null, required && /*#__PURE__*/React.createElement(StyledIndicator, {
|
178
176
|
className: cx(classes.outerLabelPlacement, requiredPlacementClass)
|
179
177
|
}), label, optionalTextNode), /*#__PURE__*/React.createElement(StyledContainer, {
|
@@ -194,7 +192,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
194
192
|
applyCustomWidth: applyCustomWidth,
|
195
193
|
ref: outerRef,
|
196
194
|
disabled: disabled,
|
197
|
-
height: autoResize
|
195
|
+
height: autoResize ? minAuto : height,
|
198
196
|
width: width,
|
199
197
|
placeholder: placeholderLabel,
|
200
198
|
"aria-describedby": textareaHelperId,
|
@@ -227,10 +225,6 @@ export var textAreaConfig = {
|
|
227
225
|
view: {
|
228
226
|
css: viewCSS
|
229
227
|
},
|
230
|
-
clear: {
|
231
|
-
css: clearCSS,
|
232
|
-
attrs: true
|
233
|
-
},
|
234
228
|
disabled: {
|
235
229
|
css: disabledCSS,
|
236
230
|
attrs: true
|
@@ -104,35 +104,6 @@ export function App() {
|
|
104
104
|
}
|
105
105
|
```
|
106
106
|
|
107
|
-
### Clear
|
108
|
-
На отображение TextArea влияют свойства `clear` и `hasDivider`.
|
109
|
-
При этом `hasDivider` не может использоваться без `clear`.
|
110
|
-
Свойства `minAuto`, `maxAuto`, `autoResize`, `rows` и `cols`, `height` и `width` игнорируются.
|
111
|
-
Высота TextArea в таком случае регулируется по длине контента внутри:
|
112
|
-
|
113
|
-
```tsx live
|
114
|
-
import React from 'react';
|
115
|
-
import { TextArea } from '@salutejs/{{ package }}';
|
116
|
-
|
117
|
-
export function App() {
|
118
|
-
const [value, setValue] = React.useState('Значение');
|
119
|
-
|
120
|
-
return (
|
121
|
-
<div>
|
122
|
-
<TextArea
|
123
|
-
placeholder="Введите значение"
|
124
|
-
value={value}
|
125
|
-
onChange={(e) => {
|
126
|
-
setValue(e.target.value);
|
127
|
-
}}
|
128
|
-
clear
|
129
|
-
hasDivider
|
130
|
-
/>
|
131
|
-
</div>
|
132
|
-
);
|
133
|
-
}
|
134
|
-
```
|
135
|
-
|
136
107
|
### Подсказка
|
137
108
|
Для вывода подсказки снизу от поля используйте свойство `leftHelper` и/или `rightHelper`.
|
138
109
|
|
@@ -16,10 +16,7 @@ export var classes = {
|
|
16
16
|
/** Класс для компонента `StyledHelpers` */
|
17
17
|
styledHelpers: 'textarea-helpers',
|
18
18
|
innerLabelPlacement: 'label-placement-inner',
|
19
|
-
outerLabelPlacement: 'label-placement-outer'
|
20
|
-
/** Класс для view `clear` */
|
21
|
-
clear: 'textfield-clear',
|
22
|
-
hasDivider: 'hasDivider'
|
19
|
+
outerLabelPlacement: 'label-placement-outer'
|
23
20
|
};
|
24
21
|
export var tokens = {
|
25
22
|
/** Цвет фона для элемента textarea */
|
@@ -48,14 +45,12 @@ export var tokens = {
|
|
48
45
|
helpersBackgroundColorFocus: '--plasma-textarea-helpers-background-color-focus',
|
49
46
|
/** Цвет текста для элемента textarea */
|
50
47
|
inputColor: '--plasma-textarea-input-color',
|
51
|
-
clearInputColor: '--plasma-textarea-input-clear-color',
|
52
48
|
/** Цвет текста для элемента textarea в состоянии focus */
|
53
49
|
inputColorFocus: '--plasma-textarea-input-color-focus',
|
54
50
|
/** Цвет каретки для элемента textarea */
|
55
51
|
inputCaretColor: '--plasma-textarea-input-caret-color',
|
56
52
|
/** Цвет элемента placeholder */
|
57
53
|
placeholderColor: '--plasma-textarea-placeholder-color',
|
58
|
-
clearPlaceholderColor: '--plasma-textfield__clear-placeholder-color',
|
59
54
|
/** Цвет элемента placeholder в состоянии focus */
|
60
55
|
placeholderColorFocus: '--plasma-textarea-placeholder-color-focus',
|
61
56
|
/** Цвет элемента optional */
|
@@ -96,7 +91,6 @@ export var tokens = {
|
|
96
91
|
inputPaddingLeft: '--plasma-textarea-input-padding-left',
|
97
92
|
/** Отступ сверху для блока подписей */
|
98
93
|
helpersPaddingTop: '--plasma-textarea-helpers-padding-top',
|
99
|
-
clearHelpersPaddingTop: '--plasma-textarea-clear-helpers-padding-top',
|
100
94
|
/** Отступ справа для блока подписей */
|
101
95
|
helpersPaddingRight: '--plasma-textarea-helpers-padding-right',
|
102
96
|
/** Отступ снизу для блока подписей */
|
@@ -127,7 +121,6 @@ export var tokens = {
|
|
127
121
|
labelOuterLineHeight: '--plasma-textarea-label-outer-line-height',
|
128
122
|
/** Отступ сверху для элемента label, когда он внутри и уменьшен */
|
129
123
|
labelMarginBottom: '--plasma-textarea-label-margin-bottom',
|
130
|
-
clearLabelMarginBottom: '--plasma-textarea-clear-label-margin-bottom',
|
131
124
|
/** Шрифт для элемента label, когда он внутри и уменьшен */
|
132
125
|
labelInnerFontFamily: '--plasma-textarea-label-inner-font-family',
|
133
126
|
/** Размер шрифта для элемента label, когда он внутри и уменьшен */
|
@@ -179,11 +172,5 @@ export var tokens = {
|
|
179
172
|
indicatorLabelPlacementInner: '--plasma-textarea-indicator-placement-inner',
|
180
173
|
indicatorLabelPlacementOuter: '--plasma-textarea-indicator-placement-outer',
|
181
174
|
indicatorLabelPlacementInnerRight: '--plasma-textarea-indicator-placement-inner-right',
|
182
|
-
indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
|
183
|
-
clearIndicatorLabelPlacementInner: '--plasma-textarea__clear-indicator-placement-inner',
|
184
|
-
clearIndicatorLabelPlacementInnerRight: '--plasma-textarea__clear-indicator-placement-inner-right',
|
185
|
-
dividerColor: '--plasma-textfield-divider-color',
|
186
|
-
dividerColorHover: '--plasma-textfield-divider-color-hover',
|
187
|
-
dividerColorFocus: '--plasma-textfield-divider-color-focus',
|
188
|
-
dividerColorReadOnly: '--plasma-textfield-divider-color-readonly'
|
175
|
+
indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
|
189
176
|
};
|
@@ -3,5 +3,5 @@ import { tokens, classes } from '../../TextArea.tokens';
|
|
3
3
|
var styledContainer = classes.styledContainer,
|
4
4
|
styledTextAreaWrapper = classes.styledTextAreaWrapper,
|
5
5
|
styledHelpers = classes.styledHelpers;
|
6
|
-
var exclusionSelectors =
|
6
|
+
var exclusionSelectors = 'not([disabled]):not([readonly]):not(:focus-within)';
|
7
7
|
export var base = /*#__PURE__*/css([".", "{transition:box-shadow 0.1s ease-in-out;border-radius:var(", ");border:var(", ") solid var(", ");}.", "{transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{border:var(", ") solid var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");}&:hover:", " .", "{border:var(", ") solid var(", ");}&:hover:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:hover:", " .", " + .", "{background-color:var(", ");}&:active:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:active:", " .", " + .", "{background-color:var(", ");}"], /*#__PURE__*/String(styledContainer), tokens.borderRadius, tokens.borderSize, tokens.borderColor, /*#__PURE__*/String(styledTextAreaWrapper), tokens.borderSize, tokens.inputBorderColor, /*#__PURE__*/String(styledTextAreaWrapper), tokens.inputBackgroundColorFocus, tokens.borderSize, tokens.inputBorderColorFocus, /*#__PURE__*/String(styledContainer), tokens.borderSize, tokens.borderColorFocus, /*#__PURE__*/String(styledHelpers), tokens.helpersBackgroundColorFocus, exclusionSelectors, /*#__PURE__*/String(styledContainer), tokens.borderSize, tokens.borderColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), tokens.borderSize, tokens.inputBorderColorHover, tokens.inputBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), tokens.helpersBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), tokens.borderSize, tokens.inputBorderColorActive, tokens.inputBackgroundColorActive, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), tokens.helpersBackgroundColorActive);
|