@fluentui/react-slider 9.0.0-beta.2 → 9.0.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +939 -1
- package/CHANGELOG.md +386 -128
- package/MIGRATION.md +42 -47
- package/README.md +18 -18
- package/Spec.md +99 -0
- package/dist/index.d.ts +123 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/Slider.js.map +1 -1
- package/lib/components/Slider/Slider.js +7 -7
- package/lib/components/Slider/Slider.js.map +1 -1
- package/lib/components/Slider/Slider.types.js.map +1 -1
- package/lib/components/Slider/index.js +2 -2
- package/lib/components/Slider/index.js.map +1 -1
- package/lib/components/Slider/renderSlider.js +10 -8
- package/lib/components/Slider/renderSlider.js.map +1 -1
- package/lib/components/Slider/useSlider.js +33 -84
- package/lib/components/Slider/useSlider.js.map +1 -1
- package/lib/components/Slider/useSliderState.js +47 -186
- package/lib/components/Slider/useSliderState.js.map +1 -1
- package/lib/components/Slider/useSliderStyles.js +245 -335
- package/lib/components/Slider/useSliderStyles.js.map +1 -1
- package/lib/index.js +1 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Slider.js +1 -1
- package/lib-commonjs/Slider.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.js +8 -8
- package/lib-commonjs/components/Slider/Slider.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.types.js.map +1 -1
- package/lib-commonjs/components/Slider/index.js +18 -6
- package/lib-commonjs/components/Slider/index.js.map +1 -1
- package/lib-commonjs/components/Slider/renderSlider.js +14 -14
- package/lib-commonjs/components/Slider/renderSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSlider.js +35 -87
- package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderState.js +48 -190
- package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderStyles.js +248 -338
- package/lib-commonjs/components/Slider/useSliderStyles.js.map +1 -1
- package/lib-commonjs/index.js +44 -4
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +21 -23
- package/dist/react-slider.d.ts +0 -239
- package/lib/RangedSlider.d.ts +0 -1
- package/lib/RangedSlider.js +0 -2
- package/lib/RangedSlider.js.map +0 -1
- package/lib/Slider.d.ts +0 -1
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -12
- package/lib/common/isConformant.js.map +0 -1
- package/lib/components/RangedSlider/RangedSlider.d.ts +0 -6
- package/lib/components/RangedSlider/RangedSlider.js +0 -15
- package/lib/components/RangedSlider/RangedSlider.js.map +0 -1
- package/lib/components/RangedSlider/RangedSlider.types.d.ts +0 -53
- package/lib/components/RangedSlider/RangedSlider.types.js +0 -2
- package/lib/components/RangedSlider/RangedSlider.types.js.map +0 -1
- package/lib/components/RangedSlider/index.d.ts +0 -6
- package/lib/components/RangedSlider/index.js +0 -7
- package/lib/components/RangedSlider/index.js.map +0 -1
- package/lib/components/RangedSlider/renderRangedSlider.d.ts +0 -5
- package/lib/components/RangedSlider/renderRangedSlider.js +0 -20
- package/lib/components/RangedSlider/renderRangedSlider.js.map +0 -1
- package/lib/components/RangedSlider/useRangedSlider.d.ts +0 -6
- package/lib/components/RangedSlider/useRangedSlider.js +0 -116
- package/lib/components/RangedSlider/useRangedSlider.js.map +0 -1
- package/lib/components/RangedSlider/useRangedSliderState.d.ts +0 -2
- package/lib/components/RangedSlider/useRangedSliderState.js +0 -271
- package/lib/components/RangedSlider/useRangedSliderState.js.map +0 -1
- package/lib/components/RangedSlider/useRangedSliderStyles.d.ts +0 -4
- package/lib/components/RangedSlider/useRangedSliderStyles.js +0 -92
- package/lib/components/RangedSlider/useRangedSliderStyles.js.map +0 -1
- package/lib/components/Slider/Slider.d.ts +0 -6
- package/lib/components/Slider/Slider.types.d.ts +0 -126
- package/lib/components/Slider/index.d.ts +0 -6
- package/lib/components/Slider/renderSlider.d.ts +0 -5
- package/lib/components/Slider/useSlider.d.ts +0 -10
- package/lib/components/Slider/useSliderState.d.ts +0 -3
- package/lib/components/Slider/useSliderStyles.d.ts +0 -43
- package/lib/index.d.ts +0 -2
- package/lib/utils/calculateSteps.d.ts +0 -5
- package/lib/utils/calculateSteps.js +0 -27
- package/lib/utils/calculateSteps.js.map +0 -1
- package/lib/utils/findClosestThumb.d.ts +0 -4
- package/lib/utils/findClosestThumb.js +0 -7
- package/lib/utils/findClosestThumb.js.map +0 -1
- package/lib/utils/getKeydownValue.d.ts +0 -6
- package/lib/utils/getKeydownValue.js +0 -35
- package/lib/utils/getKeydownValue.js.map +0 -1
- package/lib/utils/getMarkPercent.d.ts +0 -12
- package/lib/utils/getMarkPercent.js +0 -27
- package/lib/utils/getMarkPercent.js.map +0 -1
- package/lib/utils/getMarkValues.d.ts +0 -13
- package/lib/utils/getMarkValues.js +0 -29
- package/lib/utils/getMarkValues.js.map +0 -1
- package/lib/utils/getPercent.d.ts +0 -8
- package/lib/utils/getPercent.js +0 -11
- package/lib/utils/getPercent.js.map +0 -1
- package/lib/utils/index.d.ts +0 -9
- package/lib/utils/index.js +0 -10
- package/lib/utils/index.js.map +0 -1
- package/lib/utils/on.d.ts +0 -11
- package/lib/utils/on.js +0 -17
- package/lib/utils/on.js.map +0 -1
- package/lib/utils/renderMarks.d.ts +0 -13
- package/lib/utils/renderMarks.js +0 -31
- package/lib/utils/renderMarks.js.map +0 -1
- package/lib/utils/validateRangedThumbValues.d.ts +0 -4
- package/lib/utils/validateRangedThumbValues.js +0 -13
- package/lib/utils/validateRangedThumbValues.js.map +0 -1
- package/lib-commonjs/RangedSlider.d.ts +0 -1
- package/lib-commonjs/RangedSlider.js +0 -10
- package/lib-commonjs/RangedSlider.js.map +0 -1
- package/lib-commonjs/Slider.d.ts +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -23
- package/lib-commonjs/common/isConformant.js.map +0 -1
- package/lib-commonjs/components/RangedSlider/RangedSlider.d.ts +0 -6
- package/lib-commonjs/components/RangedSlider/RangedSlider.js +0 -26
- package/lib-commonjs/components/RangedSlider/RangedSlider.js.map +0 -1
- package/lib-commonjs/components/RangedSlider/RangedSlider.types.d.ts +0 -53
- package/lib-commonjs/components/RangedSlider/RangedSlider.types.js +0 -6
- package/lib-commonjs/components/RangedSlider/RangedSlider.types.js.map +0 -1
- package/lib-commonjs/components/RangedSlider/index.d.ts +0 -6
- package/lib-commonjs/components/RangedSlider/index.js +0 -20
- package/lib-commonjs/components/RangedSlider/index.js.map +0 -1
- package/lib-commonjs/components/RangedSlider/renderRangedSlider.d.ts +0 -5
- package/lib-commonjs/components/RangedSlider/renderRangedSlider.js +0 -32
- package/lib-commonjs/components/RangedSlider/renderRangedSlider.js.map +0 -1
- package/lib-commonjs/components/RangedSlider/useRangedSlider.d.ts +0 -6
- package/lib-commonjs/components/RangedSlider/useRangedSlider.js +0 -128
- package/lib-commonjs/components/RangedSlider/useRangedSlider.js.map +0 -1
- package/lib-commonjs/components/RangedSlider/useRangedSliderState.d.ts +0 -2
- package/lib-commonjs/components/RangedSlider/useRangedSliderState.js +0 -286
- package/lib-commonjs/components/RangedSlider/useRangedSliderState.js.map +0 -1
- package/lib-commonjs/components/RangedSlider/useRangedSliderStyles.d.ts +0 -4
- package/lib-commonjs/components/RangedSlider/useRangedSliderStyles.js +0 -104
- package/lib-commonjs/components/RangedSlider/useRangedSliderStyles.js.map +0 -1
- package/lib-commonjs/components/Slider/Slider.d.ts +0 -6
- package/lib-commonjs/components/Slider/Slider.types.d.ts +0 -126
- package/lib-commonjs/components/Slider/index.d.ts +0 -6
- package/lib-commonjs/components/Slider/renderSlider.d.ts +0 -5
- package/lib-commonjs/components/Slider/useSlider.d.ts +0 -10
- package/lib-commonjs/components/Slider/useSliderState.d.ts +0 -3
- package/lib-commonjs/components/Slider/useSliderStyles.d.ts +0 -43
- package/lib-commonjs/index.d.ts +0 -2
- package/lib-commonjs/utils/calculateSteps.d.ts +0 -5
- package/lib-commonjs/utils/calculateSteps.js +0 -37
- package/lib-commonjs/utils/calculateSteps.js.map +0 -1
- package/lib-commonjs/utils/findClosestThumb.d.ts +0 -4
- package/lib-commonjs/utils/findClosestThumb.js +0 -16
- package/lib-commonjs/utils/findClosestThumb.js.map +0 -1
- package/lib-commonjs/utils/getKeydownValue.d.ts +0 -6
- package/lib-commonjs/utils/getKeydownValue.js +0 -45
- package/lib-commonjs/utils/getKeydownValue.js.map +0 -1
- package/lib-commonjs/utils/getMarkPercent.d.ts +0 -12
- package/lib-commonjs/utils/getMarkPercent.js +0 -36
- package/lib-commonjs/utils/getMarkPercent.js.map +0 -1
- package/lib-commonjs/utils/getMarkValues.d.ts +0 -13
- package/lib-commonjs/utils/getMarkValues.js +0 -39
- package/lib-commonjs/utils/getMarkValues.js.map +0 -1
- package/lib-commonjs/utils/getPercent.d.ts +0 -8
- package/lib-commonjs/utils/getPercent.js +0 -20
- package/lib-commonjs/utils/getPercent.js.map +0 -1
- package/lib-commonjs/utils/index.d.ts +0 -9
- package/lib-commonjs/utils/index.js +0 -26
- package/lib-commonjs/utils/index.js.map +0 -1
- package/lib-commonjs/utils/on.d.ts +0 -11
- package/lib-commonjs/utils/on.js +0 -26
- package/lib-commonjs/utils/on.js.map +0 -1
- package/lib-commonjs/utils/renderMarks.d.ts +0 -13
- package/lib-commonjs/utils/renderMarks.js +0 -42
- package/lib-commonjs/utils/renderMarks.js.map +0 -1
- package/lib-commonjs/utils/validateRangedThumbValues.d.ts +0 -4
- package/lib-commonjs/utils/validateRangedThumbValues.js +0 -23
- package/lib-commonjs/utils/validateRangedThumbValues.js.map +0 -1
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useRangedSliderStyles = exports.upperThumbClassName = exports.lowerThumbClassName = void 0;
|
|
7
|
-
|
|
8
|
-
var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
|
|
9
|
-
|
|
10
|
-
var useSliderStyles_1 = /*#__PURE__*/require("../Slider/useSliderStyles");
|
|
11
|
-
|
|
12
|
-
var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
13
|
-
|
|
14
|
-
exports.lowerThumbClassName = /*#__PURE__*/react_make_styles_1.mergeClasses(useSliderStyles_1.thumbClassName, "" + (useSliderStyles_1.thumbClassName + '-lower'));
|
|
15
|
-
exports.upperThumbClassName = /*#__PURE__*/react_make_styles_1.mergeClasses(useSliderStyles_1.thumbClassName, "" + (useSliderStyles_1.thumbClassName + '-upper'));
|
|
16
|
-
/**
|
|
17
|
-
* Styles for the Input slot
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
var useInputStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
21
|
-
"input": {
|
|
22
|
-
"abs64n": "fk73vx1",
|
|
23
|
-
"qhf8xq": "f1euv43f",
|
|
24
|
-
"z8tnut": "f1g0x7ka",
|
|
25
|
-
"z189sj": ["fhxju0i", "f1cnd47f"],
|
|
26
|
-
"Byoj8tv": "f1qch9an",
|
|
27
|
-
"uwmqm3": ["f1cnd47f", "fhxju0i"],
|
|
28
|
-
"B6of3ja": "f1hu3pq6",
|
|
29
|
-
"t21cq0": ["f11qmguv", "f1tyq0we"],
|
|
30
|
-
"jrapky": "f19f4twv",
|
|
31
|
-
"Frg6f3": ["f1tyq0we", "f11qmguv"],
|
|
32
|
-
"a9b677": "f1j7mq28",
|
|
33
|
-
"Bqenvij": "frevy5r",
|
|
34
|
-
"Bkecrkj": "f1aehjj5"
|
|
35
|
-
},
|
|
36
|
-
"lowerInputFocusIndicator": {
|
|
37
|
-
"B486eqv": "f2hkw1w",
|
|
38
|
-
"Ebv6cd": "fd2w4cn",
|
|
39
|
-
"B497uk": "f199e773",
|
|
40
|
-
"m64g3n": "fath6b7",
|
|
41
|
-
"B0lnyh9": ["f1rqdbdw", "f1efr0gb"],
|
|
42
|
-
"Blki8xq": "fpnr40n",
|
|
43
|
-
"Bd1evov": ["f1efr0gb", "f1rqdbdw"],
|
|
44
|
-
"Fgb6zi": "f19i54s7",
|
|
45
|
-
"Banjxdc": ["fyx624l", "f3n4tzc"],
|
|
46
|
-
"ti1vqq": "f16jpg2e",
|
|
47
|
-
"Fuyjs8": ["f3n4tzc", "fyx624l"],
|
|
48
|
-
"B6i86k1": "f1mlqpil",
|
|
49
|
-
"B8qyzgl": ["ftp0ls1", "f1ptobcw"],
|
|
50
|
-
"Bxs9upu": "f9zkcaa",
|
|
51
|
-
"Bk1fuib": ["f1ptobcw", "ftp0ls1"]
|
|
52
|
-
},
|
|
53
|
-
"upperInputFocusIndicator": {
|
|
54
|
-
"B486eqv": "f2hkw1w",
|
|
55
|
-
"Bn6l4mq": "finoacs",
|
|
56
|
-
"B66uzhn": "f1crvwtz",
|
|
57
|
-
"Jyp86x": "f1oubq1y",
|
|
58
|
-
"Btqmz47": ["f1vzav56", "fkhdjdp"],
|
|
59
|
-
"Jpst9r": "fh3154d",
|
|
60
|
-
"mzz26j": ["fkhdjdp", "f1vzav56"],
|
|
61
|
-
"B7bxqjh": "f1wl3957",
|
|
62
|
-
"Bmc3fks": ["f1yntci", "fmyyke4"],
|
|
63
|
-
"Bottid4": "fiah2k2",
|
|
64
|
-
"Bt2rcha": ["fmyyke4", "f1yntci"],
|
|
65
|
-
"B9hc37i": "f13icprd",
|
|
66
|
-
"pphavz": ["f18zmcl7", "fefztlt"],
|
|
67
|
-
"Bionyo9": "fl7j1dv",
|
|
68
|
-
"pznqo3": ["fefztlt", "f18zmcl7"]
|
|
69
|
-
}
|
|
70
|
-
}, {
|
|
71
|
-
"d": [".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1j7mq28{width:0px;}", ".frevy5r{height:0px;}", ".f1aehjj5{pointer-events:none;}", "[data-keyboard-nav] .fd2w4cn:focus+.ms-Slider-thumb-lower:before{outline-style:none;}", "[data-keyboard-nav] .f199e773:focus+.ms-Slider-thumb-lower:before{box-sizing:border-box;}", "[data-keyboard-nav] .fath6b7:focus+.ms-Slider-thumb-lower:before{border-top-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1rqdbdw:focus+.ms-Slider-thumb-lower:before{border-right-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1efr0gb:focus+.ms-Slider-thumb-lower:before{border-left-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .fpnr40n:focus+.ms-Slider-thumb-lower:before{border-bottom-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f19i54s7:focus+.ms-Slider-thumb-lower:before{border-top-style:solid;}", "[data-keyboard-nav] .fyx624l:focus+.ms-Slider-thumb-lower:before{border-right-style:solid;}", "[data-keyboard-nav] .f3n4tzc:focus+.ms-Slider-thumb-lower:before{border-left-style:solid;}", "[data-keyboard-nav] .f16jpg2e:focus+.ms-Slider-thumb-lower:before{border-bottom-style:solid;}", "[data-keyboard-nav] .f1mlqpil:focus+.ms-Slider-thumb-lower:before{border-top-color:black;}", "[data-keyboard-nav] .ftp0ls1:focus+.ms-Slider-thumb-lower:before{border-right-color:black;}", "[data-keyboard-nav] .f1ptobcw:focus+.ms-Slider-thumb-lower:before{border-left-color:black;}", "[data-keyboard-nav] .f9zkcaa:focus+.ms-Slider-thumb-lower:before{border-bottom-color:black;}", "[data-keyboard-nav] .finoacs:focus+.ms-Slider-thumb-upper:before{outline-style:none;}", "[data-keyboard-nav] .f1crvwtz:focus+.ms-Slider-thumb-upper:before{box-sizing:border-box;}", "[data-keyboard-nav] .f1oubq1y:focus+.ms-Slider-thumb-upper:before{border-top-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1vzav56:focus+.ms-Slider-thumb-upper:before{border-right-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .fkhdjdp:focus+.ms-Slider-thumb-upper:before{border-left-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .fh3154d:focus+.ms-Slider-thumb-upper:before{border-bottom-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1wl3957:focus+.ms-Slider-thumb-upper:before{border-top-style:solid;}", "[data-keyboard-nav] .f1yntci:focus+.ms-Slider-thumb-upper:before{border-right-style:solid;}", "[data-keyboard-nav] .fmyyke4:focus+.ms-Slider-thumb-upper:before{border-left-style:solid;}", "[data-keyboard-nav] .fiah2k2:focus+.ms-Slider-thumb-upper:before{border-bottom-style:solid;}", "[data-keyboard-nav] .f13icprd:focus+.ms-Slider-thumb-upper:before{border-top-color:black;}", "[data-keyboard-nav] .f18zmcl7:focus+.ms-Slider-thumb-upper:before{border-right-color:black;}", "[data-keyboard-nav] .fefztlt:focus+.ms-Slider-thumb-upper:before{border-left-color:black;}", "[data-keyboard-nav] .fl7j1dv:focus+.ms-Slider-thumb-upper:before{border-bottom-color:black;}"],
|
|
72
|
-
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
var useRangedSliderStyles = function (state) {
|
|
76
|
-
var rootStyles = useSliderStyles_1.useRootStyles();
|
|
77
|
-
var sliderWrapperStyles = useSliderStyles_1.useSliderWrapper();
|
|
78
|
-
var railStyles = useSliderStyles_1.useRailStyles();
|
|
79
|
-
var trackWrapperStyles = useSliderStyles_1.useTrackWrapperStyles();
|
|
80
|
-
var trackStyles = useSliderStyles_1.useTrackStyles();
|
|
81
|
-
var marksWrapperStyles = useSliderStyles_1.useMarksWrapperStyles();
|
|
82
|
-
var thumbWrapperStyles = useSliderStyles_1.useThumbWrapperStyles();
|
|
83
|
-
var thumbStyles = useSliderStyles_1.useThumbStyles();
|
|
84
|
-
var activeRailStyles = useSliderStyles_1.useActiveRailStyles();
|
|
85
|
-
var inputStyles = useInputStyles();
|
|
86
|
-
state.root.className = react_make_styles_1.mergeClasses(rootStyles.root, rootStyles[state.size], state.vertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
|
|
87
|
-
state.sliderWrapper.className = react_make_styles_1.mergeClasses(sliderWrapperStyles.sliderWrapper, state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal, state.sliderWrapper.className);
|
|
88
|
-
state.rail.className = react_make_styles_1.mergeClasses(railStyles.rail, state.vertical ? railStyles.vertical : railStyles.horizontal, state.disabled ? railStyles.disabled : railStyles.enabled, state.rail.className);
|
|
89
|
-
state.sliderWrapper.className = react_make_styles_1.mergeClasses(sliderWrapperStyles.sliderWrapper, state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal, state.sliderWrapper.className);
|
|
90
|
-
state.trackWrapper.className = react_make_styles_1.mergeClasses(trackWrapperStyles.trackWrapper, state.vertical ? trackWrapperStyles.vertical : trackWrapperStyles.horizontal, state.trackWrapper.className);
|
|
91
|
-
state.track.className = react_make_styles_1.mergeClasses(useSliderStyles_1.trackClassName, trackStyles.track, state.vertical ? trackStyles.vertical : trackStyles.horizontal, state.disabled ? trackStyles.disabled : trackStyles.enabled, state.track.className);
|
|
92
|
-
state.marksWrapper.className = react_make_styles_1.mergeClasses(marksWrapperStyles.marksWrapper, state.vertical ? marksWrapperStyles.vertical : marksWrapperStyles.horizontal, state.marksWrapper.className);
|
|
93
|
-
state.lowerThumbWrapper.className = react_make_styles_1.mergeClasses(thumbWrapperStyles.thumbWrapper, state.vertical ? thumbWrapperStyles.vertical : thumbWrapperStyles.horizontal, state.lowerThumbWrapper.className);
|
|
94
|
-
state.lowerThumb.className = react_make_styles_1.mergeClasses(exports.lowerThumbClassName, thumbStyles.thumb, !state.vertical && thumbStyles.horizontal, state.disabled ? thumbStyles.disabled : thumbStyles.enabled, state.lowerThumb.className);
|
|
95
|
-
state.upperThumbWrapper.className = react_make_styles_1.mergeClasses(thumbWrapperStyles.thumbWrapper, state.vertical ? thumbWrapperStyles.vertical : thumbWrapperStyles.horizontal, state.upperThumbWrapper.className);
|
|
96
|
-
state.upperThumb.className = react_make_styles_1.mergeClasses(exports.upperThumbClassName, thumbStyles.thumb, !state.vertical && thumbStyles.horizontal, state.disabled ? thumbStyles.disabled : thumbStyles.enabled, state.upperThumb.className);
|
|
97
|
-
state.activeRail.className = react_make_styles_1.mergeClasses(activeRailStyles.activeRail, state.vertical ? activeRailStyles.vertical : activeRailStyles.horizontal, state.activeRail.className);
|
|
98
|
-
state.lowerInput.className = react_make_styles_1.mergeClasses(inputStyles.input, inputStyles.lowerInputFocusIndicator, state.lowerInput.className);
|
|
99
|
-
state.upperInput.className = react_make_styles_1.mergeClasses(inputStyles.input, inputStyles.upperInputFocusIndicator, state.upperInput.className);
|
|
100
|
-
return state;
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
exports.useRangedSliderStyles = useRangedSliderStyles;
|
|
104
|
-
//# sourceMappingURL=useRangedSliderStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/RangedSlider/useRangedSliderStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { SliderProps } from './Slider.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* The Slider component allows users to quickly select a value by dragging a thumb across a rail.
|
|
5
|
-
*/
|
|
6
|
-
export declare const Slider: ForwardRefComponent<SliderProps>;
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type SliderSlots = {
|
|
4
|
-
/**
|
|
5
|
-
* The root of the Slider.
|
|
6
|
-
*/
|
|
7
|
-
root: IntrinsicShorthandProps<'div'>;
|
|
8
|
-
/**
|
|
9
|
-
* The Slider's base. It is used to visibly display the min and max selectable values.
|
|
10
|
-
*/
|
|
11
|
-
rail: IntrinsicShorthandProps<'div'>;
|
|
12
|
-
/**
|
|
13
|
-
* The wrapper around the Slider component.
|
|
14
|
-
*/
|
|
15
|
-
sliderWrapper: IntrinsicShorthandProps<'div'>;
|
|
16
|
-
/**
|
|
17
|
-
* The wrapper around the Slider's track. It is primarily used to handle the positioning of the track.
|
|
18
|
-
*/
|
|
19
|
-
trackWrapper: IntrinsicShorthandProps<'div'>;
|
|
20
|
-
/**
|
|
21
|
-
* The bar showing the current selected area adjacent to the Slider's thumb.
|
|
22
|
-
*/
|
|
23
|
-
track: IntrinsicShorthandProps<'div'>;
|
|
24
|
-
/**
|
|
25
|
-
* The wrapper holding the marks and mark labels for the Slider.
|
|
26
|
-
*/
|
|
27
|
-
marksWrapper: IntrinsicShorthandProps<'div'>;
|
|
28
|
-
/**
|
|
29
|
-
* The wrapper around the Slider's thumb. It is primarily used to handle the dragging animation from translateX.
|
|
30
|
-
*/
|
|
31
|
-
thumbWrapper: IntrinsicShorthandProps<'div'>;
|
|
32
|
-
/**
|
|
33
|
-
* The draggable icon used to select a given value from the Slider.
|
|
34
|
-
* This is the element containing `role = 'slider'`.
|
|
35
|
-
*/
|
|
36
|
-
thumb: IntrinsicShorthandProps<'div'>;
|
|
37
|
-
/**
|
|
38
|
-
* The area in which the Slider's rail allows for the thumb to be dragged.
|
|
39
|
-
*/
|
|
40
|
-
activeRail: IntrinsicShorthandProps<'div'>;
|
|
41
|
-
/**
|
|
42
|
-
* The hidden input for the Slider.
|
|
43
|
-
*/
|
|
44
|
-
input: IntrinsicShorthandProps<'input'>;
|
|
45
|
-
};
|
|
46
|
-
export declare type SliderCommons = {
|
|
47
|
-
/**
|
|
48
|
-
* The starting value for an uncontrolled Slider.
|
|
49
|
-
* Mutually exclusive with `value` prop.
|
|
50
|
-
*/
|
|
51
|
-
defaultValue?: number;
|
|
52
|
-
/**
|
|
53
|
-
* The current value of the controlled Slider.
|
|
54
|
-
* Mutually exclusive with `defaultValue` prop.
|
|
55
|
-
*/
|
|
56
|
-
value?: number;
|
|
57
|
-
/**
|
|
58
|
-
* The min value of the Slider.
|
|
59
|
-
* @default 0
|
|
60
|
-
*/
|
|
61
|
-
min?: number;
|
|
62
|
-
/**
|
|
63
|
-
* The max value of the Slider.
|
|
64
|
-
* @default 100
|
|
65
|
-
*/
|
|
66
|
-
max?: number;
|
|
67
|
-
/**
|
|
68
|
-
* The number of steps that the Slider's `value` will increment upon change. When provided, the Slider
|
|
69
|
-
* will snap to the closest available value. This must be a positive value.
|
|
70
|
-
* @default 1
|
|
71
|
-
*/
|
|
72
|
-
step?: number;
|
|
73
|
-
/**
|
|
74
|
-
* The number of steps that the Slider's value will change by during a key press. When provided, the `keyboardSteps`
|
|
75
|
-
* will be separated from the pointer `steps` allowing for the value to go outside of pointer related
|
|
76
|
-
* snapping values.
|
|
77
|
-
*
|
|
78
|
-
* @default `step` or 1
|
|
79
|
-
*/
|
|
80
|
-
keyboardStep?: number;
|
|
81
|
-
/**
|
|
82
|
-
* Whether to render the Slider as disabled.
|
|
83
|
-
*
|
|
84
|
-
* @default `false` (renders enabled)
|
|
85
|
-
*/
|
|
86
|
-
disabled?: boolean;
|
|
87
|
-
/**
|
|
88
|
-
* Whether to render the Slider vertically.
|
|
89
|
-
* @default `false` (renders horizontally)
|
|
90
|
-
*/
|
|
91
|
-
vertical?: boolean;
|
|
92
|
-
/**
|
|
93
|
-
* When enabled, small marks are displayed across the Slider, showing potential steps.
|
|
94
|
-
*
|
|
95
|
-
* - If `true`, marks are visible at each `step`.
|
|
96
|
-
* - If `number[]`, marks will be displayed at each provided number. Numbers must be in ascending order.
|
|
97
|
-
* - If `{}[]`, mark is shown at the value location and displays any provided custom labels and marks.
|
|
98
|
-
*/
|
|
99
|
-
marks?: boolean | (number | {
|
|
100
|
-
value: number;
|
|
101
|
-
label?: string | JSX.Element;
|
|
102
|
-
mark?: JSX.Element;
|
|
103
|
-
})[];
|
|
104
|
-
/**
|
|
105
|
-
* The starting origin point for the Slider.
|
|
106
|
-
* @default min
|
|
107
|
-
*/
|
|
108
|
-
origin?: number;
|
|
109
|
-
/**
|
|
110
|
-
* The size of the Slider.
|
|
111
|
-
* @default 'medium'
|
|
112
|
-
*/
|
|
113
|
-
size?: 'small' | 'medium';
|
|
114
|
-
/**
|
|
115
|
-
* Triggers a callback when the value has been changed. This will be called on every individual step.
|
|
116
|
-
*/
|
|
117
|
-
onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
|
|
118
|
-
value: number;
|
|
119
|
-
}) => void;
|
|
120
|
-
/**
|
|
121
|
-
* The Slider's current value label to be read by the screen reader.
|
|
122
|
-
*/
|
|
123
|
-
ariaValueText?: (value: number) => string;
|
|
124
|
-
};
|
|
125
|
-
export declare type SliderProps = Omit<ComponentProps<SliderSlots>, 'onChange' | 'defaultValue'> & SliderCommons;
|
|
126
|
-
export declare type SliderState = ComponentState<SliderSlots> & SliderCommons;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { SliderProps, SliderSlots, SliderState } from './Slider.types';
|
|
3
|
-
/**
|
|
4
|
-
* Array of all shorthand properties listed in sliderShorthandProps
|
|
5
|
-
*/
|
|
6
|
-
export declare const sliderShorthandProps: (keyof SliderSlots)[];
|
|
7
|
-
/**
|
|
8
|
-
* Given user props, returns state and render function for a Slider.
|
|
9
|
-
*/
|
|
10
|
-
export declare const useSlider: (props: SliderProps, ref: React.Ref<HTMLElement>) => SliderState;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import type { SliderState } from './Slider.types';
|
|
2
|
-
export declare const thumbClassName = "ms-Slider-thumb";
|
|
3
|
-
export declare const trackClassName = "ms-Slider-track";
|
|
4
|
-
/**
|
|
5
|
-
* Styles for the root slot
|
|
6
|
-
*/
|
|
7
|
-
export declare const useRootStyles: () => Record<"small" | "disabled" | "medium" | "root" | "vertical" | "horizontal" | "enabled" | "focusIndicator", string>;
|
|
8
|
-
/**
|
|
9
|
-
* Styles for the slider wrapper slot
|
|
10
|
-
*/
|
|
11
|
-
export declare const useSliderWrapper: () => Record<"sliderWrapper" | "vertical" | "horizontal", string>;
|
|
12
|
-
/**
|
|
13
|
-
* Styles for the rail slot
|
|
14
|
-
*/
|
|
15
|
-
export declare const useRailStyles: () => Record<"disabled" | "rail" | "vertical" | "horizontal" | "enabled", string>;
|
|
16
|
-
/**
|
|
17
|
-
* Styles for the trackWrapper slot
|
|
18
|
-
*/
|
|
19
|
-
export declare const useTrackWrapperStyles: () => Record<"trackWrapper" | "vertical" | "horizontal", string>;
|
|
20
|
-
/**
|
|
21
|
-
* Styles for the track slot
|
|
22
|
-
*/
|
|
23
|
-
export declare const useTrackStyles: () => Record<"track" | "disabled" | "vertical" | "horizontal" | "enabled", string>;
|
|
24
|
-
/**
|
|
25
|
-
* Styles for the mark slot
|
|
26
|
-
*/
|
|
27
|
-
export declare const useMarksWrapperStyles: () => Record<"disabled" | "marksWrapper" | "vertical" | "horizontal", string>;
|
|
28
|
-
/**
|
|
29
|
-
* Styles for the thumb slot
|
|
30
|
-
*/
|
|
31
|
-
export declare const useThumbWrapperStyles: () => Record<"thumbWrapper" | "vertical" | "horizontal", string>;
|
|
32
|
-
/**
|
|
33
|
-
* Styles for the thumb slot
|
|
34
|
-
*/
|
|
35
|
-
export declare const useThumbStyles: () => Record<"disabled" | "thumb" | "horizontal" | "enabled", string>;
|
|
36
|
-
/**
|
|
37
|
-
* Styles for the activeRail slot
|
|
38
|
-
*/
|
|
39
|
-
export declare const useActiveRailStyles: () => Record<"activeRail" | "vertical" | "horizontal", string>;
|
|
40
|
-
/**
|
|
41
|
-
* Apply styling to the Slider slots based on the state
|
|
42
|
-
*/
|
|
43
|
-
export declare const useSliderStyles: (state: SliderState) => SliderState;
|
package/lib-commonjs/index.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Calculates the `step` position based off of a `Mouse` or `Touch` event relative to the size of the rail.
|
|
4
|
-
*/
|
|
5
|
-
export declare const calculateSteps: (ev: React.PointerEvent<HTMLDivElement>, railRef: React.RefObject<HTMLDivElement>, min: number, max: number, step: number, vertical: boolean, dir: 'ltr' | 'rtl') => number;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.calculateSteps = void 0;
|
|
7
|
-
|
|
8
|
-
var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
-
/**
|
|
10
|
-
* Calculates the `step` position based off of a `Mouse` or `Touch` event relative to the size of the rail.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var calculateSteps = function (ev, railRef, min, max, step, vertical, dir) {
|
|
15
|
-
var _a;
|
|
16
|
-
|
|
17
|
-
var currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
18
|
-
var sliderSize = (vertical ? currentBounds.height : currentBounds.width) || 0;
|
|
19
|
-
var position;
|
|
20
|
-
|
|
21
|
-
if (vertical) {
|
|
22
|
-
position = currentBounds.bottom;
|
|
23
|
-
} else if (dir === 'rtl') {
|
|
24
|
-
position = currentBounds.right;
|
|
25
|
-
} else {
|
|
26
|
-
position = currentBounds.left;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
var totalSteps = (max - min) / step;
|
|
30
|
-
var stepLength = sliderSize / totalSteps;
|
|
31
|
-
var thumbPosition = vertical ? ev.clientY : ev.clientX;
|
|
32
|
-
var distance = dir === 'rtl' || vertical ? position - thumbPosition : thumbPosition - position;
|
|
33
|
-
return react_utilities_1.clamp(min + step * (distance / stepLength), min, max);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
exports.calculateSteps = calculateSteps;
|
|
37
|
-
//# sourceMappingURL=calculateSteps.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/calculateSteps.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACI,IAAM,cAAc,GAAG,UAC5B,EAD4B,EAE5B,OAF4B,EAG5B,GAH4B,EAI5B,GAJ4B,EAK5B,IAL4B,EAM5B,QAN4B,EAO5B,GAP4B,EAOV;;;AAElB,MAAM,aAAa,GAAA,CAAA,EAAA,GAAG,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,OAAZ,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,qBAAF,EAAtC;AACA,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,aAAc,CAAC,MAAlB,GAA2B,aAAc,CAAC,KAAnD,KAA6D,CAAhF;AACA,MAAI,QAAJ;;AAEA,MAAI,QAAJ,EAAc;AACZ,IAAA,QAAQ,GAAG,aAAc,CAAC,MAA1B;AACD,GAFD,MAEO,IAAI,GAAG,KAAK,KAAZ,EAAmB;AACxB,IAAA,QAAQ,GAAG,aAAc,CAAC,KAA1B;AACD,GAFM,MAEA;AACL,IAAA,QAAQ,GAAG,aAAc,CAAC,IAA1B;AACD;;AAED,MAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAP,IAAc,IAAjC;AACA,MAAM,UAAU,GAAG,UAAU,GAAG,UAAhC;AACA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,CAAC,OAAN,GAAgB,EAAE,CAAC,OAAjD;AACA,MAAM,QAAQ,GAAG,GAAG,KAAK,KAAR,IAAiB,QAAjB,GAA4B,QAAQ,GAAG,aAAvC,GAAuD,aAAa,GAAG,QAAxF;AAEA,SAAO,iBAAA,CAAA,KAAA,CAAM,GAAG,GAAG,IAAI,IAAI,QAAQ,GAAG,UAAf,CAAhB,EAA4C,GAA5C,EAAiD,GAAjD,CAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.findClosestThumb = void 0;
|
|
7
|
-
/**
|
|
8
|
-
* Finds the closest thumb based of a given value and returns it's key.
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
var findClosestThumb = function (thumbArray, incomingValue) {
|
|
12
|
-
return Math.abs(incomingValue - thumbArray[0]) <= Math.abs(thumbArray[1] - incomingValue) ? 'lowerValue' : 'upperValue';
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
exports.findClosestThumb = findClosestThumb;
|
|
16
|
-
//# sourceMappingURL=findClosestThumb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/findClosestThumb.ts"],"names":[],"mappings":";;;;;;AAAA;;AAEG;;AACI,IAAM,gBAAgB,GAAG,UAAC,UAAD,EAA+B,aAA/B,EAAoD;AAClF,SAAO,IAAI,CAAC,GAAL,CAAS,aAAa,GAAG,UAAU,CAAC,CAAD,CAAnC,KAA2C,IAAI,CAAC,GAAL,CAAS,UAAU,CAAC,CAAD,CAAV,GAAgB,aAAzB,CAA3C,GACH,YADG,GAEH,YAFJ;AAGD,CAJM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Determines the incoming value for the Slider based off of a keyboard event.
|
|
4
|
-
* It automatically flips the key direction if the dir parameter is rtl.
|
|
5
|
-
*/
|
|
6
|
-
export declare const getKeydownValue: (ev: React.KeyboardEvent<HTMLDivElement>, currentValue: number, min: number, max: number, dir: 'ltr' | 'rtl', keyboardStep: number) => number;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getKeydownValue = void 0;
|
|
7
|
-
|
|
8
|
-
var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
-
/**
|
|
10
|
-
* Determines the incoming value for the Slider based off of a keyboard event.
|
|
11
|
-
* It automatically flips the key direction if the dir parameter is rtl.
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var getKeydownValue = function (ev, currentValue, min, max, dir, keyboardStep) {
|
|
16
|
-
var normalizedKey = react_utilities_1.getRTLSafeKey(ev.key, dir);
|
|
17
|
-
var arrowStep = ev.shiftKey ? keyboardStep * 10 : keyboardStep;
|
|
18
|
-
|
|
19
|
-
switch (normalizedKey) {
|
|
20
|
-
case 'ArrowDown':
|
|
21
|
-
case 'ArrowLeft':
|
|
22
|
-
return currentValue - arrowStep;
|
|
23
|
-
|
|
24
|
-
case 'ArrowUp':
|
|
25
|
-
case 'ArrowRight':
|
|
26
|
-
return currentValue + arrowStep;
|
|
27
|
-
|
|
28
|
-
case 'PageDown':
|
|
29
|
-
return currentValue - keyboardStep * 10;
|
|
30
|
-
|
|
31
|
-
case 'PageUp':
|
|
32
|
-
return currentValue + keyboardStep * 10;
|
|
33
|
-
|
|
34
|
-
case 'Home':
|
|
35
|
-
return min;
|
|
36
|
-
|
|
37
|
-
case 'End':
|
|
38
|
-
return max;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
return currentValue;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
exports.getKeydownValue = getKeydownValue;
|
|
45
|
-
//# sourceMappingURL=getKeydownValue.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/getKeydownValue.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACI,IAAM,eAAe,GAAG,UAC7B,EAD6B,EAE7B,YAF6B,EAG7B,GAH6B,EAI7B,GAJ6B,EAK7B,GAL6B,EAM7B,YAN6B,EAMT;AAEpB,MAAM,aAAa,GAAG,iBAAA,CAAA,aAAA,CAAc,EAAE,CAAC,GAAjB,EAAsB,GAAtB,CAAtB;AAEA,MAAM,SAAS,GAAG,EAAE,CAAC,QAAH,GAAc,YAAY,GAAG,EAA7B,GAAkC,YAApD;;AAEA,UAAQ,aAAR;AACE,SAAK,WAAL;AACA,SAAK,WAAL;AACE,aAAO,YAAY,GAAG,SAAtB;;AACF,SAAK,SAAL;AACA,SAAK,YAAL;AACE,aAAO,YAAY,GAAG,SAAtB;;AACF,SAAK,UAAL;AACE,aAAO,YAAY,GAAG,YAAY,GAAG,EAArC;;AACF,SAAK,QAAL;AACE,aAAO,YAAY,GAAG,YAAY,GAAG,EAArC;;AACF,SAAK,MAAL;AACE,aAAO,GAAP;;AACF,SAAK,KAAL;AACE,aAAO,GAAP;AAdJ;;AAiBA,SAAO,YAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Gets the current percentage position for the marks with respect to adjacent marks.
|
|
3
|
-
* This is used primarily for positioning with [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid).
|
|
4
|
-
*
|
|
5
|
-
* Example
|
|
6
|
-
* - `Rail: width = 100px`
|
|
7
|
-
* - `Marks: [0, 25, 50, 75, 100]`
|
|
8
|
-
* - `getMarkPercent: 0%, 25%, 25%, 25%, 25%`
|
|
9
|
-
*
|
|
10
|
-
* @param markValues The marks percentage position relative to their individual positions.
|
|
11
|
-
*/
|
|
12
|
-
export declare const getMarkPercent: (markValues: number[]) => string[];
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getMarkPercent = void 0;
|
|
7
|
-
/**
|
|
8
|
-
* Gets the current percentage position for the marks with respect to adjacent marks.
|
|
9
|
-
* This is used primarily for positioning with [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid).
|
|
10
|
-
*
|
|
11
|
-
* Example
|
|
12
|
-
* - `Rail: width = 100px`
|
|
13
|
-
* - `Marks: [0, 25, 50, 75, 100]`
|
|
14
|
-
* - `getMarkPercent: 0%, 25%, 25%, 25%, 25%`
|
|
15
|
-
*
|
|
16
|
-
* @param markValues The marks percentage position relative to their individual positions.
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
var getMarkPercent = function (markValues) {
|
|
20
|
-
var result = []; // For CSS grid to work the percents array must be remapped by the previous percent - the current percent
|
|
21
|
-
|
|
22
|
-
if (markValues.length > 0) {
|
|
23
|
-
result.push(markValues[0] + '% ');
|
|
24
|
-
var prevPercent = markValues[0];
|
|
25
|
-
|
|
26
|
-
for (var i = 1; i < markValues.length; i++) {
|
|
27
|
-
result.push(markValues[i] - prevPercent + '% ');
|
|
28
|
-
prevPercent = markValues[i];
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
exports.getMarkPercent = getMarkPercent;
|
|
36
|
-
//# sourceMappingURL=getMarkPercent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/getMarkPercent.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;AAUG;;AACI,IAAM,cAAc,GAAG,UAAC,UAAD,EAAqB;AACjD,MAAM,MAAM,GAAa,EAAzB,CADiD,CAGjD;;AACA,MAAI,UAAU,CAAC,MAAX,GAAoB,CAAxB,EAA2B;AACzB,IAAA,MAAM,CAAC,IAAP,CAAY,UAAU,CAAC,CAAD,CAAV,GAAgB,IAA5B;AACA,QAAI,WAAW,GAAG,UAAU,CAAC,CAAD,CAA5B;;AACA,SAAK,IAAI,CAAC,GAAG,CAAb,EAAgB,CAAC,GAAG,UAAU,CAAC,MAA/B,EAAuC,CAAC,EAAxC,EAA4C;AAC1C,MAAA,MAAM,CAAC,IAAP,CAAY,UAAU,CAAC,CAAD,CAAV,GAAgB,WAAhB,GAA8B,IAA1C;AACA,MAAA,WAAW,GAAG,UAAU,CAAC,CAAD,CAAxB;AACD;AACF;;AAED,SAAO,MAAP;AACD,CAdM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Gets the current percentage position for the marks with relative to the rail.
|
|
3
|
-
*
|
|
4
|
-
* Example
|
|
5
|
-
* - `Rail: width = 100px`
|
|
6
|
-
* - `Marks: [0, 25, 50, 75, 100]`
|
|
7
|
-
* - `getMarkValue: 0%, 25%, 50%, 75%, 100%`
|
|
8
|
-
*/
|
|
9
|
-
export declare const getMarkValue: (marks: boolean | (number | {
|
|
10
|
-
value: number;
|
|
11
|
-
label?: string | JSX.Element;
|
|
12
|
-
mark?: JSX.Element;
|
|
13
|
-
})[] | undefined, min: number, max: number, step: number) => number[];
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getMarkValue = void 0;
|
|
7
|
-
|
|
8
|
-
var getPercent_1 = /*#__PURE__*/require("./getPercent");
|
|
9
|
-
/**
|
|
10
|
-
* Gets the current percentage position for the marks with relative to the rail.
|
|
11
|
-
*
|
|
12
|
-
* Example
|
|
13
|
-
* - `Rail: width = 100px`
|
|
14
|
-
* - `Marks: [0, 25, 50, 75, 100]`
|
|
15
|
-
* - `getMarkValue: 0%, 25%, 50%, 75%, 100%`
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var getMarkValue = function (marks, min, max, step) {
|
|
20
|
-
var valueArray = []; // 1. We receive a boolean: mark for every step.
|
|
21
|
-
|
|
22
|
-
if (typeof marks === 'boolean' && marks === true) {
|
|
23
|
-
for (var i = 0; i < (max - min) / step + 1; i++) {
|
|
24
|
-
valueArray.push(getPercent_1.getPercent(min + step * i, min, max));
|
|
25
|
-
}
|
|
26
|
-
} else if (Array.isArray(marks) && marks.length > 0) {
|
|
27
|
-
return marks.map(function (marksItem) {
|
|
28
|
-
return typeof marksItem === 'number' ? // 2. We receive an array with numbers: mark for every value in array.
|
|
29
|
-
getPercent_1.getPercent(min + marksItem, min, max) : // 3. We receive an array with objects containing numbers and strings:
|
|
30
|
-
// mark and label for every value + string in each object.
|
|
31
|
-
getPercent_1.getPercent(min + marksItem.value, min, max);
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
return valueArray;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
exports.getMarkValue = getMarkValue;
|
|
39
|
-
//# sourceMappingURL=getMarkValues.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/getMarkValues.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;;;;;;AAOG;;;AACI,IAAM,YAAY,GAAG,UAC1B,KAD0B,EAE1B,GAF0B,EAG1B,GAH0B,EAI1B,IAJ0B,EAId;AAEZ,MAAM,UAAU,GAAa,EAA7B,CAFY,CAIZ;;AACA,MAAI,OAAO,KAAP,KAAiB,SAAjB,IAA8B,KAAK,KAAK,IAA5C,EAAkD;AAChD,SAAK,IAAI,CAAC,GAAG,CAAb,EAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,GAAP,IAAc,IAAd,GAAqB,CAAzC,EAA4C,CAAC,EAA7C,EAAiD;AAC/C,MAAA,UAAU,CAAC,IAAX,CAAgB,YAAA,CAAA,UAAA,CAAW,GAAG,GAAG,IAAI,GAAG,CAAxB,EAA2B,GAA3B,EAAgC,GAAhC,CAAhB;AACD;AACF,GAJD,MAIO,IAAI,KAAK,CAAC,OAAN,CAAc,KAAd,KAAwB,KAAK,CAAC,MAAN,GAAe,CAA3C,EAA8C;AACnD,WAAO,KAAK,CAAC,GAAN,CAAU,UAAA,SAAA,EAAS;AACxB,aAAA,OAAO,SAAP,KAAqB,QAArB,GACI;AACA,MAAA,YAAA,CAAA,UAAA,CAAW,GAAG,GAAG,SAAjB,EAA4B,GAA5B,EAAiC,GAAjC,CAFJ,GAGI;AACA;AACA,MAAA,YAAA,CAAA,UAAA,CAAW,GAAG,GAAG,SAAS,CAAC,KAA3B,EAAkC,GAAlC,EAAuC,GAAvC,CALJ;AAK+C,KAN1C,CAAP;AAQD;;AACD,SAAO,UAAP;AACD,CAxBM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourceRoot":""}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Gets the current percent of specified value between a min and max
|
|
3
|
-
*
|
|
4
|
-
* @param value - the value to find the percent
|
|
5
|
-
* @param min - the lowest valid value
|
|
6
|
-
* @param max - the highest valid value
|
|
7
|
-
*/
|
|
8
|
-
export declare const getPercent: (value: number, min: number, max: number) => number;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getPercent = void 0;
|
|
7
|
-
/**
|
|
8
|
-
* Gets the current percent of specified value between a min and max
|
|
9
|
-
*
|
|
10
|
-
* @param value - the value to find the percent
|
|
11
|
-
* @param min - the lowest valid value
|
|
12
|
-
* @param max - the highest valid value
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
|
-
var getPercent = function (value, min, max) {
|
|
16
|
-
return max === min ? 0 : (value - min) / (max - min) * 100;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
exports.getPercent = getPercent;
|
|
20
|
-
//# sourceMappingURL=getPercent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/getPercent.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;AAMG;;AACI,IAAM,UAAU,GAAG,UAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,EAAwC;AAChE,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export * from './calculateSteps';
|
|
2
|
-
export * from './findClosestThumb';
|
|
3
|
-
export * from './getKeydownValue';
|
|
4
|
-
export * from './getMarkPercent';
|
|
5
|
-
export * from './getMarkValues';
|
|
6
|
-
export * from './getPercent';
|
|
7
|
-
export * from './on';
|
|
8
|
-
export * from './renderMarks';
|
|
9
|
-
export * from './validateRangedThumbValues';
|