@salutejs/plasma-new-hope 0.171.0-canary.1492.11402523696.0 → 0.172.0-canary.1452.11439149903.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +19 -13
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/cjs/components/Slider/Slider.css +15 -13
- package/cjs/components/Slider/Slider.js +11 -3
- package/cjs/components/Slider/Slider.js.map +1 -1
- package/cjs/components/Slider/Slider.tokens.js +23 -17
- package/cjs/components/Slider/Slider.tokens.js.map +1 -1
- package/cjs/components/Slider/components/Double/Double.css +8 -8
- package/cjs/components/Slider/components/Double/Double.js +58 -23
- package/cjs/components/Slider/components/Double/Double.js.map +1 -1
- package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +77 -0
- package/cjs/components/Slider/components/Single/Single.css +14 -14
- package/cjs/components/Slider/components/Single/Single.js +63 -33
- 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_14wadfy.css +6 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.css +5 -5
- package/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -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_1qt1224.css +5 -0
- package/cjs/components/Slider/ui/Handler/Handler.css +3 -3
- package/cjs/components/Slider/ui/Handler/Handler.js +49 -88
- 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_irtcgm.css +2 -0
- package/cjs/components/Slider/ui/Handler/computeKeyPressData.js +122 -0
- package/cjs/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -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_uyn20e.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 +1 -1
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/hooks/useAutoResize.js +2 -2
- package/cjs/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/cjs/index.css +15 -13
- package/cjs/utils/index.js.map +1 -1
- package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +32 -0
- package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +19 -13
- package/emotion/cjs/components/Slider/Slider.js +10 -2
- package/emotion/cjs/components/Slider/Slider.tokens.js +23 -17
- package/emotion/cjs/components/Slider/components/Double/Double.js +54 -19
- package/emotion/cjs/components/Slider/components/Single/Single.js +63 -33
- package/emotion/cjs/components/Slider/components/Single/Single.styles.js +18 -9
- package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
- package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +10 -10
- package/emotion/cjs/components/Slider/ui/Handler/Handler.js +52 -88
- package/emotion/cjs/components/Slider/ui/Handler/Handler.styles.js +9 -15
- package/emotion/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
- 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 +2 -2
- package/emotion/cjs/components/TextArea/hooks/useAutoResize.js +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
- package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
- package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
- package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
- package/emotion/cjs/examples/plasma_web/components/Slider/Slider.config.js +7 -7
- package/emotion/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
- package/emotion/es/components/Accordion/Accordion.template-doc.mdx +32 -0
- package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.js +20 -14
- package/emotion/es/components/Slider/Slider.js +11 -2
- package/emotion/es/components/Slider/Slider.tokens.js +23 -17
- package/emotion/es/components/Slider/components/Double/Double.js +54 -19
- package/emotion/es/components/Slider/components/Single/Single.js +64 -34
- package/emotion/es/components/Slider/components/Single/Single.styles.js +17 -8
- package/emotion/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
- package/emotion/es/components/Slider/components/SliderBase/SliderBase.styles.js +11 -11
- package/emotion/es/components/Slider/ui/Handler/Handler.js +51 -86
- package/emotion/es/components/Slider/ui/Handler/Handler.styles.js +10 -16
- package/emotion/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
- 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 +2 -2
- package/emotion/es/components/TextArea/hooks/useAutoResize.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
- package/emotion/es/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
- package/emotion/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
- package/emotion/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
- package/emotion/es/examples/plasma_web/components/Slider/Slider.config.js +7 -7
- package/emotion/es/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +20 -14
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/es/components/Slider/Slider.css +15 -13
- package/es/components/Slider/Slider.js +11 -3
- package/es/components/Slider/Slider.js.map +1 -1
- package/es/components/Slider/Slider.tokens.js +23 -17
- package/es/components/Slider/Slider.tokens.js.map +1 -1
- package/es/components/Slider/components/Double/Double.css +8 -8
- package/es/components/Slider/components/Double/Double.js +54 -19
- package/es/components/Slider/components/Double/Double.js.map +1 -1
- package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +77 -0
- package/es/components/Slider/components/Single/Single.css +14 -14
- package/es/components/Slider/components/Single/Single.js +64 -34
- 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_14wadfy.css +6 -0
- package/es/components/Slider/components/SliderBase/SliderBase.css +5 -5
- package/es/components/Slider/components/SliderBase/SliderBase.js +31 -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_1qt1224.css +5 -0
- package/es/components/Slider/ui/Handler/Handler.css +3 -3
- package/es/components/Slider/ui/Handler/Handler.js +48 -87
- 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_irtcgm.css +2 -0
- package/es/components/Slider/ui/Handler/computeKeyPressData.js +118 -0
- package/es/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -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_uyn20e.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 +1 -1
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/hooks/useAutoResize.js +2 -2
- package/es/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/es/index.css +15 -13
- package/es/utils/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +32 -0
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +19 -13
- package/styled-components/cjs/components/Slider/Slider.js +10 -2
- package/styled-components/cjs/components/Slider/Slider.tokens.js +23 -17
- package/styled-components/cjs/components/Slider/components/Double/Double.js +54 -19
- package/styled-components/cjs/components/Slider/components/Single/Single.js +63 -33
- package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +6 -6
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +6 -6
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +52 -88
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +7 -4
- package/styled-components/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
- 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 +1 -1
- package/styled-components/cjs/components/TextArea/hooks/useAutoResize.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -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 +90 -16
- package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
- 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 +90 -15
- package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +32 -0
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +20 -14
- package/styled-components/es/components/Slider/Slider.js +11 -2
- package/styled-components/es/components/Slider/Slider.tokens.js +23 -17
- package/styled-components/es/components/Slider/components/Double/Double.js +54 -19
- package/styled-components/es/components/Slider/components/Single/Single.js +64 -34
- package/styled-components/es/components/Slider/components/Single/Single.styles.js +5 -5
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/styled-components/es/components/Slider/ui/Handler/Handler.js +51 -86
- package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -5
- package/styled-components/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
- 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 +1 -1
- package/styled-components/es/components/TextArea/hooks/useAutoResize.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -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 +90 -16
- package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
- 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 +90 -15
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts +17 -2
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts +17 -9
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts.map +1 -1
- package/types/components/Slider/Slider.d.ts.map +1 -1
- package/types/components/Slider/Slider.tokens.d.ts +22 -16
- 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 +1 -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 +75 -7
- 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 +3 -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 +5 -1
- package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts +12 -0
- package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts.map +1 -0
- 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/hooks/useAutoResize.d.ts +1 -1
- package/types/components/TextArea/hooks/useAutoResize.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/Slider/Slider.d.ts +80 -2
- package/types/examples/plasma_b2c/components/Slider/Slider.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/Slider/Slider.d.ts +80 -2
- package/types/examples/plasma_web/components/Slider/Slider.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_9s4eb3.css +0 -5
- 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/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
- package/es/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +0 -5
- 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
@@ -4,14 +4,18 @@ import styled from 'styled-components';
|
|
4
4
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
5
5
|
import type { StoryObj, Meta } from '@storybook/react';
|
6
6
|
|
7
|
+
import { IconMic } from '../../../../components/_Icon';
|
7
8
|
import { WithTheme } from '../../../_helpers';
|
8
9
|
|
9
10
|
import { Slider } from './Slider';
|
10
11
|
|
11
12
|
const sizes = ['l', 'm', 's'];
|
13
|
+
const pointerSizes = ['small', 'large', 'none'];
|
12
14
|
const views = ['default', 'accent', 'gradient'];
|
13
|
-
const
|
14
|
-
const
|
15
|
+
const sliderAligns = ['center', 'left', 'right', 'none'];
|
16
|
+
const labelPlacements = ['top', 'left'];
|
17
|
+
const scaleAligns = ['side', 'bottom'];
|
18
|
+
const orientations: Array<string> = ['vertical', 'horizontal'];
|
15
19
|
|
16
20
|
const meta: Meta<typeof Slider> = {
|
17
21
|
title: 'plasma_web/Slider',
|
@@ -30,9 +34,24 @@ const meta: Meta<typeof Slider> = {
|
|
30
34
|
type: 'inline-radio',
|
31
35
|
},
|
32
36
|
},
|
37
|
+
pointerSize: {
|
38
|
+
options: pointerSizes,
|
39
|
+
control: {
|
40
|
+
type: 'inline-radio',
|
41
|
+
},
|
42
|
+
},
|
43
|
+
orientation: {
|
44
|
+
options: orientations,
|
45
|
+
control: {
|
46
|
+
type: 'select',
|
47
|
+
},
|
48
|
+
},
|
33
49
|
...disableProps([
|
34
50
|
'value',
|
35
51
|
'onChangeCommitted',
|
52
|
+
'onChangeTextField',
|
53
|
+
'onBlurTextField',
|
54
|
+
'onKeyDownTextField',
|
36
55
|
'ariaLabel',
|
37
56
|
'onChange',
|
38
57
|
'fontSizeMultiplier',
|
@@ -52,8 +71,9 @@ type StorySingleProps = StoryProps;
|
|
52
71
|
type StorySingle = StoryObj<StorySingleProps>;
|
53
72
|
type StoryDouble = StoryObj<StoryProps>;
|
54
73
|
|
55
|
-
const SliderWrapper = styled.div
|
56
|
-
width: 25rem;
|
74
|
+
const SliderWrapper = styled.div<{ isVertical?: boolean }>`
|
75
|
+
width: ${({ isVertical }) => (isVertical ? 'auto' : '25rem')};
|
76
|
+
height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
|
57
77
|
`;
|
58
78
|
|
59
79
|
const StoryDefault = (args: StorySingleProps) => {
|
@@ -67,41 +87,86 @@ const StoryDefault = (args: StorySingleProps) => {
|
|
67
87
|
setValue(values);
|
68
88
|
};
|
69
89
|
|
90
|
+
const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
|
91
|
+
const isVertical = orientation === 'vertical';
|
92
|
+
|
70
93
|
return (
|
71
|
-
<SliderWrapper>
|
72
|
-
<Slider
|
94
|
+
<SliderWrapper isVertical={isVertical}>
|
95
|
+
<Slider
|
96
|
+
value={value}
|
97
|
+
orientation={orientation}
|
98
|
+
labelPlacement={labelPlacement}
|
99
|
+
labelContent={showIcon ? <IconMic size={rest.size === 's' ? 'xs' : 's'} /> : null}
|
100
|
+
onChangeCommitted={onChangeCommittedHandle}
|
101
|
+
onChange={onChangeHandle}
|
102
|
+
{...rest}
|
103
|
+
/>
|
73
104
|
</SliderWrapper>
|
74
105
|
);
|
75
106
|
};
|
76
107
|
|
77
108
|
export const Default: StorySingle = {
|
78
109
|
argTypes: {
|
110
|
+
sliderAlign: {
|
111
|
+
options: sliderAligns,
|
112
|
+
control: {
|
113
|
+
type: 'inline-radio',
|
114
|
+
},
|
115
|
+
if: { arg: 'orientation', eq: 'vertical' },
|
116
|
+
},
|
79
117
|
labelPlacement: {
|
80
118
|
options: labelPlacements,
|
81
119
|
control: {
|
82
120
|
type: 'inline-radio',
|
83
121
|
},
|
122
|
+
if: { arg: 'orientation', eq: 'horizontal' },
|
123
|
+
},
|
124
|
+
labelReversed: {
|
125
|
+
control: {
|
126
|
+
type: 'boolean',
|
127
|
+
expanded: true,
|
128
|
+
},
|
129
|
+
if: { arg: 'orientation', eq: 'vertical' },
|
130
|
+
},
|
131
|
+
scaleAlign: {
|
132
|
+
options: scaleAligns,
|
133
|
+
control: {
|
134
|
+
type: 'inline-radio',
|
135
|
+
},
|
136
|
+
if: { arg: 'orientation', eq: 'horizontal' },
|
84
137
|
},
|
85
|
-
|
86
|
-
options:
|
138
|
+
orientation: {
|
139
|
+
options: orientations,
|
87
140
|
control: {
|
88
141
|
type: 'inline-radio',
|
89
142
|
},
|
90
143
|
},
|
144
|
+
reversed: {
|
145
|
+
control: {
|
146
|
+
type: 'boolean',
|
147
|
+
},
|
148
|
+
if: { arg: 'orientation', eq: 'vertical' },
|
149
|
+
},
|
91
150
|
},
|
92
151
|
args: {
|
93
152
|
view: 'default',
|
94
153
|
size: 'm',
|
154
|
+
pointerSize: 'small',
|
95
155
|
min: 0,
|
96
156
|
max: 100,
|
97
|
-
|
98
|
-
ariaLabel: 'Цена
|
157
|
+
orientation: 'horizontal',
|
158
|
+
ariaLabel: 'Цена микрофона',
|
99
159
|
multipleStepSize: 10,
|
100
|
-
label: 'Цена
|
101
|
-
labelPlacement: '
|
102
|
-
|
103
|
-
|
160
|
+
label: 'Цена микрофона',
|
161
|
+
labelPlacement: 'top',
|
162
|
+
sliderAlign: 'center',
|
163
|
+
scaleAlign: 'bottom',
|
164
|
+
showScale: true,
|
104
165
|
showCurrentValue: false,
|
166
|
+
showIcon: true,
|
167
|
+
reversed: false,
|
168
|
+
labelReversed: false,
|
169
|
+
disabled: false,
|
105
170
|
},
|
106
171
|
render: (args) => <StoryDefault {...args} />,
|
107
172
|
};
|
@@ -141,7 +206,7 @@ const StoryMultipleValues = (args: StoryProps) => {
|
|
141
206
|
};
|
142
207
|
|
143
208
|
return (
|
144
|
-
<SliderWrapper>
|
209
|
+
<SliderWrapper isVertical={args.orientation === 'vertical'}>
|
145
210
|
<Slider
|
146
211
|
value={value}
|
147
212
|
onKeyDownTextField={onKeyDownTextField}
|
@@ -158,6 +223,7 @@ export const MultipleValues: StoryDouble = {
|
|
158
223
|
args: {
|
159
224
|
view: 'default',
|
160
225
|
size: 'm',
|
226
|
+
pointerSize: 'small',
|
161
227
|
min: 0,
|
162
228
|
max: 100,
|
163
229
|
disabled: false,
|
@@ -165,5 +231,14 @@ export const MultipleValues: StoryDouble = {
|
|
165
231
|
ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
|
166
232
|
multipleStepSize: 10,
|
167
233
|
},
|
234
|
+
argTypes: {
|
235
|
+
pointerSize: {
|
236
|
+
options: ['small', 'large'],
|
237
|
+
control: {
|
238
|
+
type: 'inline-radio',
|
239
|
+
},
|
240
|
+
},
|
241
|
+
...disableProps(['orientation']),
|
242
|
+
},
|
168
243
|
render: (args) => <StoryMultipleValues {...args} />,
|
169
244
|
};
|
@@ -135,6 +135,38 @@ import TabItem from '@theme/TabItem';
|
|
135
135
|
</TabItem>
|
136
136
|
</Tabs>
|
137
137
|
|
138
|
+
### Использование Accordion в Controlled варианте
|
139
|
+
|
140
|
+
```tsx live
|
141
|
+
import React, { useState } from 'react';
|
142
|
+
import { Accordion, AccordionItem, IconButton } from '@salutejs/{{ package }}';
|
143
|
+
import { IconPlus } from '@salutejs/plasma-icons';
|
144
|
+
|
145
|
+
export function App() {
|
146
|
+
const [activeFirst, setActiveFirst] = useState(false);
|
147
|
+
const [activeSecond, setActiveSecond] = useState(false);
|
148
|
+
const [activeThree, setActiveThree] = useState(false);
|
149
|
+
|
150
|
+
const contentRight = (active, setActive) => {
|
151
|
+
return (
|
152
|
+
<IconButton view="secondary" size="s" onClick={() => setActive(!active)}>
|
153
|
+
<IconPlus size="xs" />
|
154
|
+
</IconButton>
|
155
|
+
)
|
156
|
+
}
|
157
|
+
|
158
|
+
return (
|
159
|
+
<div>
|
160
|
+
<Accordion size="s" singleActive={true}>
|
161
|
+
<AccordionItem opened={activeFirst} contentRight={contentRight(activeFirst, setActiveFirst)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
|
162
|
+
<AccordionItem opened={activeSecond} contentRight={contentRight(activeSecond, setActiveSecond)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
|
163
|
+
<AccordionItem opened={activeThree} contentRight={contentRight(activeThree, setActiveThree)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
|
164
|
+
</Accordion>
|
165
|
+
</div>
|
166
|
+
);
|
167
|
+
}
|
168
|
+
```
|
169
|
+
|
138
170
|
### Использование Accordion SingleActive
|
139
171
|
|
140
172
|
```tsx live
|
@@ -11,12 +11,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
11
11
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
12
12
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
13
13
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
14
|
-
import React, { useState, useRef, useEffect } from 'react';
|
14
|
+
import React, { useState, useRef, forwardRef, useEffect } from 'react';
|
15
15
|
import { convertRoundnessMatrix } from '../../../../utils/roundness';
|
16
16
|
import { classes, tokens } from '../../Accordion.tokens';
|
17
17
|
import { cx } from '../../../../utils';
|
18
18
|
import { StyledAccordionItem, StyledAccordionHeader, StyledAccordionBody, StyledAccordionTitle, StyledAccordionContentLeft, StyledAccordionHeaderLeft, StyledAccordionContentRight, StyledArrow, StyledMinus, StyledPlus, StyledAccordionBodyAnimate } from './AccordionItem.styles';
|
19
|
-
export var AccordionItem = function
|
19
|
+
export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
|
20
20
|
var _ref2;
|
21
21
|
var value = _ref.value,
|
22
22
|
contentRight = _ref.contentRight,
|
@@ -34,8 +34,10 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
34
34
|
disabled = _ref.disabled,
|
35
35
|
_ref$alignWithTitle = _ref.alignWithTitle,
|
36
36
|
alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
|
37
|
+
opened = _ref.opened,
|
37
38
|
view = _ref.view,
|
38
|
-
onChange = _ref.onChange
|
39
|
+
onChange = _ref.onChange,
|
40
|
+
onClick = _ref.onClick;
|
39
41
|
var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index) !== null && _ref2 !== void 0 ? _ref2 : 0;
|
40
42
|
var _useState = useState(),
|
41
43
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -48,6 +50,9 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
48
50
|
if (onChange) {
|
49
51
|
onChange(key, !value);
|
50
52
|
}
|
53
|
+
if (onClick) {
|
54
|
+
onClick(key, !value);
|
55
|
+
}
|
51
56
|
};
|
52
57
|
var leftContentRef = useRef(null);
|
53
58
|
useEffect(function () {
|
@@ -56,11 +61,11 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
56
61
|
var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
|
57
62
|
setLeftPadding(leftPaddingBody);
|
58
63
|
}, [value, type, leftContentRef, setLeftPadding]);
|
59
|
-
var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
|
60
|
-
var
|
64
|
+
var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
|
65
|
+
var StyledAnimationPlus = function StyledAnimationPlus() {
|
61
66
|
return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
|
62
67
|
size: "xs",
|
63
|
-
color: "
|
68
|
+
color: "inherit"
|
64
69
|
})), /*#__PURE__*/React.createElement(StyledMinus, {
|
65
70
|
size: "xs",
|
66
71
|
color: "inhert",
|
@@ -71,14 +76,15 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
71
76
|
var disabledClass = disabled ? classes.accordionDisabled : '';
|
72
77
|
var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/React.createElement(StyledArrow, {
|
73
78
|
size: "xs",
|
74
|
-
color: "
|
79
|
+
color: "inherit"
|
75
80
|
})) : undefined;
|
76
|
-
var leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
|
77
|
-
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(
|
78
|
-
var rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;
|
81
|
+
var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
|
82
|
+
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
|
83
|
+
var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
|
79
84
|
return /*#__PURE__*/React.createElement(StyledAccordionItem, {
|
80
85
|
className: cx(classes.accordionItem, className, disabledClass),
|
81
86
|
key: key,
|
87
|
+
ref: outerRef,
|
82
88
|
style: _objectSpread({
|
83
89
|
borderRadius: accordionBorderRadius
|
84
90
|
}, style)
|
@@ -86,17 +92,17 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
86
92
|
role: "tab",
|
87
93
|
tabIndex: 0,
|
88
94
|
onClick: handleOpen,
|
89
|
-
"aria-expanded": value,
|
95
|
+
"aria-expanded": opened !== null && opened !== void 0 ? opened : value,
|
90
96
|
"aria-controls": "accordion-item-section".concat(key),
|
91
97
|
id: "accordion-item-".concat(key)
|
92
98
|
}, /*#__PURE__*/React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(StyledAccordionContentLeft, {
|
93
99
|
ref: leftContentRef,
|
94
100
|
className: leftContentRotate
|
95
|
-
}, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
|
101
|
+
}, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), contentRight || /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
|
96
102
|
className: rightContentRotate
|
97
103
|
}, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
|
98
104
|
"aria-labelledby": "accordion-item-".concat(key),
|
99
|
-
"aria-hidden": !value,
|
105
|
+
"aria-hidden": !(opened !== null && opened !== void 0 ? opened : value),
|
100
106
|
id: "accordion-item-section".concat(key),
|
101
107
|
className: cx(openedBodyClass),
|
102
108
|
style: {
|
@@ -105,4 +111,4 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
105
111
|
}, /*#__PURE__*/React.createElement(StyledAccordionBody, {
|
106
112
|
className: classes.accordionItemBody
|
107
113
|
}, children)));
|
108
|
-
};
|
114
|
+
});
|
@@ -4,10 +4,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
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; }
|
5
5
|
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); }
|
6
6
|
import React, { forwardRef } from 'react';
|
7
|
+
import { cx } from '../../utils';
|
7
8
|
import { base as viewCSS } from './variations/_view/base';
|
8
9
|
import { base as sizeCSS } from './variations/_size/base';
|
9
10
|
import { base as disabledCSS } from './variations/_disabled/base';
|
10
11
|
import { SingleSlider, DoubleUncontrolled } from './components';
|
12
|
+
import { classes } from './Slider.tokens';
|
13
|
+
|
11
14
|
// TODO: проверить, можно ли обойтись без каста типов
|
12
15
|
|
13
16
|
var isSingleValueProps = function isSingleValueProps(props, type) {
|
@@ -21,9 +24,15 @@ export var sliderRoot = function sliderRoot(Root) {
|
|
21
24
|
var _ref$type = _ref.type,
|
22
25
|
type = _ref$type === void 0 ? 'single' : _ref$type,
|
23
26
|
props = _objectWithoutProperties(_ref, _excluded);
|
24
|
-
|
27
|
+
if (isSingleValueProps(props, type)) {
|
28
|
+
return /*#__PURE__*/React.createElement(Root, _extends({}, props, {
|
29
|
+
className: cx(props.orientation === 'vertical' && classes.verticalOrientation, props.className),
|
30
|
+
ref: ref
|
31
|
+
}), /*#__PURE__*/React.createElement(SingleSlider, props));
|
32
|
+
}
|
33
|
+
return /*#__PURE__*/React.createElement(Root, _extends({
|
25
34
|
ref: ref
|
26
|
-
}
|
35
|
+
}, props), isDoubleValueProps(props, type) && /*#__PURE__*/React.createElement(DoubleUncontrolled, props));
|
27
36
|
});
|
28
37
|
};
|
29
38
|
export var sliderConfig = {
|
@@ -1,6 +1,12 @@
|
|
1
1
|
export var classes = {
|
2
2
|
labelPlacementOuter: 'slider-label-placement-outer',
|
3
3
|
labelPlacementInner: 'slider-label-placement-inner',
|
4
|
+
labelPlacementBottom: 'slider-label-placement-bottom',
|
5
|
+
labelAlignLeft: 'slider-label-align-left',
|
6
|
+
labelAlignCenter: 'slider-label-align-center',
|
7
|
+
labelAlignRight: 'slider-label-align-right',
|
8
|
+
labelAlignNone: 'slider-label-align-none',
|
9
|
+
labelContentReversed: 'slider-label-content-reversed',
|
4
10
|
rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
|
5
11
|
rangeValuesPlacementInner: 'slider-range-values-placement-inner',
|
6
12
|
maxRangeValue: 'slider-max-range-value',
|
@@ -9,13 +15,17 @@ export var classes = {
|
|
9
15
|
textFieldActive: 'slider-text-field-active',
|
10
16
|
firstTextField: 'slider-first-text-field',
|
11
17
|
secondTextField: 'slider-second-text-field',
|
12
|
-
activeRangeValue: 'slider-active-range-value'
|
18
|
+
activeRangeValue: 'slider-active-range-value',
|
19
|
+
verticalOrientation: 'slider-vertical-orientation',
|
20
|
+
valuePlacementLeft: 'slider-value-placement-left',
|
21
|
+
reversed: 'slider-reversed'
|
13
22
|
};
|
14
23
|
export var tokens = {
|
15
|
-
|
24
|
+
size: '--plasma-slider-size',
|
16
25
|
labelWrapperGap: '--plasma-slider-label-wrapper-gap',
|
17
26
|
labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
|
18
27
|
labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
|
28
|
+
labelWrapperVerticalMargin: '--plasma-slider-label-wrapper-vertical-margin',
|
19
29
|
labelColor: '--plasma-slider-label-color',
|
20
30
|
labelFontFamily: '--plasma-slider-label-font-family',
|
21
31
|
labelFontSize: '--plasma-slider-label-font-size',
|
@@ -23,31 +33,27 @@ export var tokens = {
|
|
23
33
|
labelFontWeight: '--plasma-slider-label-font-weight',
|
24
34
|
labelLetterSpacing: '--plasma-slider-label-letter-spacing',
|
25
35
|
labelLineHeight: '--plasma-slider-label-line-height',
|
26
|
-
rangeMinValueMargin: '--plasma-slider-range-min-value-margin',
|
27
|
-
rangeMaxValueMargin: '--plasma-slider-range-max-value-margin',
|
28
36
|
rangeValueBottomOffset: '--plasma-slider-range-value-bottom-offset',
|
37
|
+
rangeValueHorizontalMargin: '--plasma-slider-range-value-horizontal-margin',
|
38
|
+
rangeValueLeftRightMargin: '--plasma-slider-range-value-left-right-margin',
|
39
|
+
rangeValueVerticalMargin: '--plasma-slider-range-value-vertical-margin',
|
29
40
|
rangeValueColor: '--plasma-slider-range-value-color',
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
41
|
+
valueFontFamily: '--plasma-slider-value-font-family',
|
42
|
+
valueFontSize: '--plasma-slider-value-font-size',
|
43
|
+
valueFontStyle: '--plasma-slider-value-font-style',
|
44
|
+
valueFontWeight: '--plasma-slider-value-font-weight',
|
45
|
+
valueLetterSpacing: '--plasma-slider-value-letter-spacing',
|
46
|
+
valueLineHeight: '--plasma-slider-value-line-height',
|
36
47
|
doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
|
37
48
|
thumbSize: '--plasma-slider-thumb-size',
|
49
|
+
thumbSizeLarge: '--plasma-slider-thumb-size-large',
|
38
50
|
thumbBorder: '--plasma-slider-thumb-border',
|
39
51
|
thumbBorderColor: '--plasma-slider-thumb-border-color',
|
40
52
|
thumbBackgroundColor: '--plasma-slider-thumb-background-color',
|
41
53
|
thumbFocusBorderColor: '--plasma-slider-thumb-focus-border-color',
|
42
54
|
currentValueTopOffset: '--plasma-slider-current-value-top-offset',
|
43
|
-
currentValueFontFamily: '--plasma-slider-current-value-font-family',
|
44
|
-
currentValueFontSize: '--plasma-slider-current-value-font-size',
|
45
|
-
currentValueFontStyle: '--plasma-slider-current-value-font-style',
|
46
|
-
currentValueFontWeight: '--plasma-slider-current-value-font-weight',
|
47
|
-
currentValueLetterSpacing: '--plasma-slider-current-value-letter-spacing',
|
48
|
-
currentValueLineHeight: '--plasma-slider-current-value-line-height',
|
49
55
|
railBackgroundColor: '--plasma-slider-rail-background-color',
|
50
|
-
|
56
|
+
railThickness: '--plasma-slider-rail-thickness',
|
51
57
|
railBorderRadius: '--plasma-slider-rail-border-radius',
|
52
58
|
railIndent: '--plasma-slider-rail-indent',
|
53
59
|
fillColor: '--plasma-slider-fill-color',
|
@@ -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 = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
|
2
|
+
var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "pointerSize", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
|
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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
@@ -38,6 +38,8 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
38
38
|
labelContentLeft = _ref.labelContentLeft,
|
39
39
|
_ref$size = _ref.size,
|
40
40
|
size = _ref$size === void 0 ? 'm' : _ref$size,
|
41
|
+
_ref$pointerSize = _ref.pointerSize,
|
42
|
+
pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
|
41
43
|
onChangeCommitted = _ref.onChangeCommitted,
|
42
44
|
onChangeTextField = _ref.onChangeTextField,
|
43
45
|
onBlurTextField = _ref.onBlurTextField,
|
@@ -64,20 +66,30 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
64
66
|
setState = _useState2[1];
|
65
67
|
var _useState3 = useState(false),
|
66
68
|
_useState4 = _slicedToArray(_useState3, 2),
|
67
|
-
|
68
|
-
|
69
|
+
firstInputHovered = _useState4[0],
|
70
|
+
setFirstInputHovered = _useState4[1];
|
69
71
|
var _useState5 = useState(false),
|
70
72
|
_useState6 = _slicedToArray(_useState5, 2),
|
71
|
-
|
72
|
-
|
73
|
-
var _useState7 = useState(
|
73
|
+
firstInputFocused = _useState6[0],
|
74
|
+
setFirstInputFocused = _useState6[1];
|
75
|
+
var _useState7 = useState(false),
|
74
76
|
_useState8 = _slicedToArray(_useState7, 2),
|
75
|
-
|
76
|
-
|
77
|
-
var _useState9 = useState(
|
77
|
+
secondInputHovered = _useState8[0],
|
78
|
+
setSecondInputHovered = _useState8[1];
|
79
|
+
var _useState9 = useState(false),
|
78
80
|
_useState10 = _slicedToArray(_useState9, 2),
|
79
|
-
|
80
|
-
|
81
|
+
secondInputFocused = _useState10[0],
|
82
|
+
setSecondInputFocused = _useState10[1];
|
83
|
+
var firstInputActive = firstInputHovered || firstInputFocused;
|
84
|
+
var secondInputActive = secondInputHovered || secondInputFocused;
|
85
|
+
var _useState11 = useState(value[0]),
|
86
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
87
|
+
firstValue = _useState12[0],
|
88
|
+
setFirstValue = _useState12[1];
|
89
|
+
var _useState13 = useState(value[1]),
|
90
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
91
|
+
secondValue = _useState14[0],
|
92
|
+
setSecondValue = _useState14[1];
|
81
93
|
var firstHandleRef = useRef(null);
|
82
94
|
var secondHandleRef = useRef(null);
|
83
95
|
var firstHandleValue = useRef(value[0]);
|
@@ -102,6 +114,16 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
102
114
|
});
|
103
115
|
});
|
104
116
|
}, [value, stepSize, min, max, setFirstValue, setSecondValue]);
|
117
|
+
useEffect(function () {
|
118
|
+
var onMouseUp = function onMouseUp() {
|
119
|
+
setFirstInputFocused(false);
|
120
|
+
setSecondInputFocused(false);
|
121
|
+
};
|
122
|
+
window.addEventListener('mouseup', onMouseUp);
|
123
|
+
return function () {
|
124
|
+
window.removeEventListener('mouseup', onMouseUp);
|
125
|
+
};
|
126
|
+
}, []);
|
105
127
|
var setStepSize = useCallback(function (newStepSize) {
|
106
128
|
setState(function (prevState) {
|
107
129
|
return _objectSpread(_objectSpread({}, prevState), {}, {
|
@@ -243,16 +265,20 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
243
265
|
ariaLabelLeft = _ref3[0],
|
244
266
|
ariaLabelRight = _ref3[1];
|
245
267
|
var currentFirstSliderValue = Math.max(state.firstValue, min);
|
268
|
+
var settings = sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
|
246
269
|
return /*#__PURE__*/React.createElement(DoubleWrapper, null, hasLabelContent && /*#__PURE__*/React.createElement(LabelWrapper, null, labelContentLeft && /*#__PURE__*/React.createElement(LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(SliderWrapper, null, /*#__PURE__*/React.createElement(SliderBase, _extends({
|
247
270
|
min: min,
|
248
271
|
max: max,
|
272
|
+
size: size,
|
249
273
|
disabled: disabled,
|
250
274
|
setStepSize: setStepSize,
|
251
275
|
railFillWidth: state.railFillWidth,
|
252
|
-
settings:
|
253
|
-
railFillXPosition: state.railFillXPosition
|
276
|
+
settings: settings,
|
277
|
+
railFillXPosition: state.railFillXPosition,
|
278
|
+
orientation: "horizontal"
|
254
279
|
}, rest), /*#__PURE__*/React.createElement(Handler, {
|
255
280
|
ref: firstHandleRef,
|
281
|
+
size: pointerSize,
|
256
282
|
stepSize: state.stepSize,
|
257
283
|
multipleStepSize: multipleStepSize,
|
258
284
|
onChangeCommitted: onFirstHandleChangeCommitted,
|
@@ -262,18 +288,23 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
262
288
|
disabled: disabled,
|
263
289
|
bounds: [min, state.secondValue],
|
264
290
|
side: "left",
|
265
|
-
|
291
|
+
orientation: "horizontal",
|
292
|
+
position: state.xFirstHandle,
|
266
293
|
zIndex: state.firstHandleZIndex,
|
267
294
|
value: currentFirstSliderValue,
|
268
295
|
ariaLabel: ariaLabelLeft,
|
296
|
+
onMouseDown: function onMouseDown() {
|
297
|
+
return setFirstInputFocused(true);
|
298
|
+
},
|
269
299
|
onMouseEnter: function onMouseEnter() {
|
270
|
-
return
|
300
|
+
return setFirstInputHovered(true);
|
271
301
|
},
|
272
302
|
onMouseLeave: function onMouseLeave() {
|
273
|
-
return
|
303
|
+
return setFirstInputHovered(false);
|
274
304
|
}
|
275
305
|
}), /*#__PURE__*/React.createElement(Handler, {
|
276
306
|
ref: secondHandleRef,
|
307
|
+
size: pointerSize,
|
277
308
|
stepSize: state.stepSize,
|
278
309
|
multipleStepSize: multipleStepSize,
|
279
310
|
onChangeCommitted: onSecondHandleChangeCommitted,
|
@@ -284,15 +315,19 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
284
315
|
disabled: disabled,
|
285
316
|
bounds: [state.firstValue, max],
|
286
317
|
side: "right",
|
287
|
-
|
318
|
+
orientation: "horizontal",
|
319
|
+
position: state.xSecondHandle,
|
288
320
|
zIndex: state.secondHandleZIndex,
|
289
321
|
value: Math.max(state.secondValue, min),
|
290
322
|
ariaLabel: ariaLabelRight,
|
323
|
+
onMouseDown: function onMouseDown() {
|
324
|
+
return setSecondInputFocused(true);
|
325
|
+
},
|
291
326
|
onMouseEnter: function onMouseEnter() {
|
292
|
-
return
|
327
|
+
return setSecondInputHovered(true);
|
293
328
|
},
|
294
329
|
onMouseLeave: function onMouseLeave() {
|
295
|
-
return
|
330
|
+
return setSecondInputHovered(false);
|
296
331
|
}
|
297
332
|
})), /*#__PURE__*/React.createElement(InputsWrapper, null, /*#__PURE__*/React.createElement(StyledInput, {
|
298
333
|
className: cx(classes.firstTextField, firstInputActiveClass),
|