@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
|
@@ -3,211 +3,69 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useSliderState_unstable = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
const useSliderStyles_1 = /*#__PURE__*/require("./useSliderStyles");
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
const {
|
|
15
|
+
sliderStepsPercentVar,
|
|
16
|
+
sliderProgressVar,
|
|
17
|
+
sliderDirectionVar
|
|
18
|
+
} = useSliderStyles_1.sliderCSSVars;
|
|
15
19
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
exports.animationTime = '0.1s';
|
|
20
|
-
|
|
21
|
-
var useSliderState = function (state) {
|
|
22
|
-
var _a, _b;
|
|
23
|
-
|
|
24
|
-
var value = state.value,
|
|
25
|
-
_c = state.defaultValue,
|
|
26
|
-
defaultValue = _c === void 0 ? 0 : _c,
|
|
27
|
-
_d = state.min,
|
|
28
|
-
min = _d === void 0 ? 0 : _d,
|
|
29
|
-
_e = state.max,
|
|
30
|
-
max = _e === void 0 ? 100 : _e,
|
|
31
|
-
_f = state.step,
|
|
32
|
-
step = _f === void 0 ? 1 : _f,
|
|
33
|
-
_g = state.keyboardStep,
|
|
34
|
-
keyboardStep = _g === void 0 ? state.step || 1 : _g,
|
|
35
|
-
_h = state.disabled,
|
|
36
|
-
disabled = _h === void 0 ? false : _h,
|
|
37
|
-
ariaValueText = state.ariaValueText,
|
|
38
|
-
onChange = state.onChange,
|
|
39
|
-
marks = state.marks,
|
|
40
|
-
_j = state.vertical,
|
|
41
|
-
vertical = _j === void 0 ? false : _j,
|
|
42
|
-
origin = state.origin;
|
|
43
|
-
var _k = state.root,
|
|
44
|
-
onPointerDownCallback = _k.onPointerDown,
|
|
45
|
-
onKeyDownCallback = _k.onKeyDown;
|
|
46
|
-
var dir = react_shared_contexts_1.useFluent().dir;
|
|
47
|
-
|
|
48
|
-
var _l = react_utilities_1.useBoolean(false),
|
|
49
|
-
stepAnimation = _l[0],
|
|
50
|
-
_m = _l[1],
|
|
51
|
-
showStepAnimation = _m.setTrue,
|
|
52
|
-
hideStepAnimation = _m.setFalse;
|
|
53
|
-
|
|
54
|
-
var _o = React.useState(value ? value : defaultValue),
|
|
55
|
-
renderedPosition = _o[0],
|
|
56
|
-
setRenderedPosition = _o[1];
|
|
20
|
+
const getPercent = (value, min, max) => {
|
|
21
|
+
return max === min ? 0 : (value - min) / (max - min) * 100;
|
|
22
|
+
};
|
|
57
23
|
|
|
58
|
-
|
|
59
|
-
|
|
24
|
+
const useSliderState_unstable = (state, props) => {
|
|
25
|
+
const {
|
|
26
|
+
defaultValue = 0,
|
|
27
|
+
min = 0,
|
|
28
|
+
max = 100,
|
|
29
|
+
step,
|
|
30
|
+
value
|
|
31
|
+
} = props;
|
|
32
|
+
const {
|
|
33
|
+
dir
|
|
34
|
+
} = react_shared_contexts_1.useFluent_unstable();
|
|
35
|
+
const [currentValue, setCurrentValue] = react_utilities_1.useControllableState({
|
|
36
|
+
state: value !== undefined ? react_utilities_1.clamp(value, min, max) : undefined,
|
|
60
37
|
defaultState: react_utilities_1.clamp(defaultValue, min, max),
|
|
61
38
|
initialState: 0
|
|
62
|
-
}),
|
|
63
|
-
currentValue = _p[0],
|
|
64
|
-
setCurrentValue = _p[1];
|
|
65
|
-
|
|
66
|
-
var railRef = React.useRef(null);
|
|
67
|
-
var inputRef = React.useRef(null);
|
|
68
|
-
var disposables = React.useRef([]);
|
|
69
|
-
/**
|
|
70
|
-
* Updates the controlled `currentValue` to the new `incomingValue` and clamps it.
|
|
71
|
-
*/
|
|
72
|
-
|
|
73
|
-
var updateValue = react_utilities_1.useEventCallback(function (incomingValue, ev) {
|
|
74
|
-
var clampedValue = react_utilities_1.clamp(incomingValue, min, max);
|
|
75
|
-
|
|
76
|
-
if (clampedValue !== min && clampedValue !== max) {
|
|
77
|
-
ev.stopPropagation();
|
|
78
|
-
|
|
79
|
-
if (ev.type === 'keydown') {
|
|
80
|
-
ev.preventDefault();
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
|
85
|
-
value: clampedValue
|
|
86
|
-
});
|
|
87
|
-
setCurrentValue(clampedValue);
|
|
88
39
|
});
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
var onPointerMove = React.useCallback(function (ev) {
|
|
103
|
-
var position = index_1.calculateSteps(ev, railRef, min, max, step, vertical, dir);
|
|
104
|
-
var currentStepPosition = Math.round(position / step) * step;
|
|
105
|
-
setRenderedPosition(position);
|
|
106
|
-
updateValue(currentStepPosition, ev);
|
|
107
|
-
}, [dir, max, min, step, updateValue, vertical]);
|
|
108
|
-
var onPointerUp = React.useCallback(function (ev) {
|
|
109
|
-
disposables.current.forEach(function (dispose) {
|
|
110
|
-
return dispose();
|
|
111
|
-
});
|
|
112
|
-
disposables.current = [];
|
|
113
|
-
showStepAnimation(); // When undefined, the position fallbacks to the currentValue state.
|
|
114
|
-
|
|
115
|
-
setRenderedPosition(undefined);
|
|
116
|
-
inputRef.current.focus();
|
|
117
|
-
}, [showStepAnimation]);
|
|
118
|
-
var onPointerDown = React.useCallback(function (ev) {
|
|
119
|
-
var _a;
|
|
120
|
-
|
|
121
|
-
var pointerId = ev.pointerId;
|
|
122
|
-
var target = ev.target;
|
|
123
|
-
(_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
|
124
|
-
hideStepAnimation();
|
|
125
|
-
onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev); // eslint-disable-next-line deprecation/deprecation -- Should be remove an replaced with a useEvent hook.
|
|
126
|
-
|
|
127
|
-
disposables.current.push(index_1.on(target, 'pointermove', onPointerMove), index_1.on(target, 'pointerup', onPointerUp), function () {
|
|
128
|
-
var _a;
|
|
129
|
-
|
|
130
|
-
(_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
|
131
|
-
});
|
|
132
|
-
onPointerMove(ev);
|
|
133
|
-
}, [hideStepAnimation, onPointerDownCallback, onPointerMove, onPointerUp]);
|
|
134
|
-
var onKeyDown = React.useCallback(function (ev) {
|
|
135
|
-
hideStepAnimation();
|
|
136
|
-
onKeyDownCallback === null || onKeyDownCallback === void 0 ? void 0 : onKeyDownCallback(ev);
|
|
137
|
-
var incomingValue = index_1.getKeydownValue(ev, currentValue, min, max, dir, keyboardStep);
|
|
138
|
-
|
|
139
|
-
if (currentValue !== incomingValue) {
|
|
140
|
-
updatePosition(incomingValue, ev);
|
|
40
|
+
const valuePercent = getPercent(currentValue, min, max);
|
|
41
|
+
const inputOnChange = state.input.onChange;
|
|
42
|
+
const propsOnChange = props.onChange;
|
|
43
|
+
const onChange = react_utilities_1.useEventCallback(ev => {
|
|
44
|
+
const newValue = Number(ev.target.value);
|
|
45
|
+
setCurrentValue(react_utilities_1.clamp(newValue, min, max));
|
|
46
|
+
|
|
47
|
+
if (inputOnChange && inputOnChange !== propsOnChange) {
|
|
48
|
+
inputOnChange(ev);
|
|
49
|
+
} else if (propsOnChange) {
|
|
50
|
+
propsOnChange(ev, {
|
|
51
|
+
value: newValue
|
|
52
|
+
});
|
|
141
53
|
}
|
|
142
|
-
}, [currentValue, dir, hideStepAnimation, keyboardStep, max, min, onKeyDownCallback, updatePosition]);
|
|
143
|
-
|
|
144
|
-
var getTrackBorderRadius = function () {
|
|
145
|
-
if (origin !== undefined && origin !== (max || min)) {
|
|
146
|
-
if (vertical) {
|
|
147
|
-
return originPercent > valuePercent ? '99px 99px 0px 0px' : '0px 0px 99px 99px';
|
|
148
|
-
} else {
|
|
149
|
-
return (dir === 'rtl' ? valuePercent > originPercent : valuePercent < originPercent) ? '99px 0px 0px 99px' : '0px 99px 99px 0px';
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
return '99px';
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
react_utilities_1.useUnmount(function () {
|
|
157
|
-
disposables.current.forEach(function (dispose) {
|
|
158
|
-
return dispose();
|
|
159
|
-
});
|
|
160
|
-
disposables.current = [];
|
|
161
54
|
});
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
return index_1.getMarkValue(marks, min, max, step);
|
|
168
|
-
}, [marks, max, min, step]);
|
|
169
|
-
var markPercent = React.useMemo(function () {
|
|
170
|
-
return index_1.getMarkPercent(markValues);
|
|
171
|
-
}, [markValues]);
|
|
172
|
-
|
|
173
|
-
var thumbWrapperStyles = tslib_1.__assign({
|
|
174
|
-
transform: vertical ? "translateY(" + valuePercent + "%)" : "translateX(" + (dir === 'rtl' ? -valuePercent : valuePercent) + "%)",
|
|
175
|
-
transition: stepAnimation ? "transform ease-in-out " + exports.animationTime : 'none'
|
|
176
|
-
}, state.thumbWrapper.style);
|
|
177
|
-
|
|
178
|
-
var trackStyles = tslib_1.__assign((_a = {}, _a[vertical ? 'top' : dir === 'rtl' ? 'right' : 'left'] = origin !== undefined ? Math.min(valuePercent, originPercent) + "%" : 0, _a[vertical ? 'height' : 'width'] = origin !== undefined ? Math.max(originPercent - valuePercent, valuePercent - originPercent) + "%" : valuePercent + "%", _a.borderRadius = getTrackBorderRadius(), // When a transition is applied with the origin, a visible animation plays when it goes below the min.
|
|
179
|
-
_a.transition = stepAnimation ? (vertical ? 'height' : 'width') + " ease-in-out " + exports.animationTime + (origin !== undefined ? ', ' + vertical ? 'top' : dir === 'rtl' ? 'right' : 'left' + 'ease-in-out ' + exports.animationTime : '') : 'none', _a), state.track.style);
|
|
180
|
-
|
|
181
|
-
var marksWrapperStyles = marks ? tslib_1.__assign((_b = {}, _b[vertical ? 'gridTemplateRows' : 'gridTemplateColumns'] = markPercent.join(''), _b), state.marksWrapper.style) : {}; // Root props
|
|
182
|
-
|
|
183
|
-
if (!disabled) {
|
|
184
|
-
state.root.onPointerDown = onPointerDown;
|
|
185
|
-
state.root.onKeyDown = onKeyDown;
|
|
186
|
-
} // Track Props
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
state.track.style = trackStyles; // Mark props
|
|
190
|
-
|
|
191
|
-
if (marks) {
|
|
192
|
-
state.marksWrapper.children = index_1.renderMarks(markValues, marks);
|
|
193
|
-
state.marksWrapper.style = marksWrapperStyles;
|
|
194
|
-
} // Thumb Wrapper Props
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
state.thumbWrapper.style = thumbWrapperStyles; // Active Rail Props
|
|
55
|
+
const rootVariables = {
|
|
56
|
+
[sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
|
|
57
|
+
[sliderStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',
|
|
58
|
+
[sliderProgressVar]: `${valuePercent}%`
|
|
59
|
+
}; // Root props
|
|
198
60
|
|
|
199
|
-
state.
|
|
61
|
+
state.root.style = { ...rootVariables,
|
|
62
|
+
...state.root.style
|
|
63
|
+
}; // Input Props
|
|
200
64
|
|
|
201
|
-
state.input.ref = react_utilities_1.useMergedRefs(state.input.ref, inputRef);
|
|
202
65
|
state.input.value = currentValue;
|
|
203
|
-
state.input.
|
|
204
|
-
state.input.max = max;
|
|
205
|
-
ariaValueText && (state.input['aria-valuetext'] = ariaValueText(currentValue));
|
|
206
|
-
state.input.disabled = disabled;
|
|
207
|
-
state.input.step = step;
|
|
208
|
-
state.input.onChange = onInputChange;
|
|
66
|
+
state.input.onChange = onChange;
|
|
209
67
|
return state;
|
|
210
68
|
};
|
|
211
69
|
|
|
212
|
-
exports.
|
|
70
|
+
exports.useSliderState_unstable = useSliderState_unstable;
|
|
213
71
|
//# sourceMappingURL=useSliderState.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAGA,MAAM;EAAE,qBAAF;EAAyB,iBAAzB;EAA4C;AAA5C,IAAmE,iBAAA,CAAA,aAAzE;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;EAC7D,OAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;;AAIO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAqB,KAArB,KAA2C;EAChF,MAAM;IAAE,YAAY,GAAG,CAAjB;IAAoB,GAAG,GAAG,CAA1B;IAA6B,GAAG,GAAG,GAAnC;IAAwC,IAAxC;IAA8C;EAA9C,IAAwD,KAA9D;EACA,MAAM;IAAE;EAAF,IAAU,uBAAA,CAAA,kBAAA,EAAhB;EACA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,iBAAA,CAAA,oBAAA,CAAqB;IAC3D,KAAK,EAAE,KAAK,KAAK,SAAV,GAAsB,iBAAA,CAAA,KAAA,CAAM,KAAN,EAAa,GAAb,EAAkB,GAAlB,CAAtB,GAA+C,SADK;IAE3D,YAAY,EAAE,iBAAA,CAAA,KAAA,CAAM,YAAN,EAAoB,GAApB,EAAyB,GAAzB,CAF6C;IAG3D,YAAY,EAAE;EAH6C,CAArB,CAAxC;EAKA,MAAM,YAAY,GAAG,UAAU,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAA/B;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAN,CAAY,QAAlC;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,QAA5B;EAEA,MAAM,QAAQ,GAA+C,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IACjF,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAH,CAAU,KAAX,CAAvB;IACA,eAAe,CAAC,iBAAA,CAAA,KAAA,CAAM,QAAN,EAAgB,GAAhB,EAAqB,GAArB,CAAD,CAAf;;IAEA,IAAI,aAAa,IAAI,aAAa,KAAK,aAAvC,EAAsD;MACpD,aAAa,CAAC,EAAD,CAAb;IACD,CAFD,MAEO,IAAI,aAAJ,EAAmB;MACxB,aAAa,CAAC,EAAD,EAAK;QAAE,KAAK,EAAE;MAAT,CAAL,CAAb;IACD;EACF,CAT4D,CAA7D;EAWA,MAAM,aAAa,GAAG;IACpB,CAAC,kBAAD,GAAsB,KAAK,CAAC,QAAN,GAAiB,MAAjB,GAA0B,GAAG,KAAK,KAAR,GAAgB,OAAhB,GAA0B,QADtD;IAEpB,CAAC,qBAAD,GAAyB,IAAI,IAAI,IAAI,GAAG,CAAf,GAAmB,GAAI,IAAI,GAAG,GAAR,IAAgB,GAAG,GAAG,GAAtB,CAA0B,GAAhD,GAAsD,EAF3D;IAGpB,CAAC,iBAAD,GAAqB,GAAG,YAAY;EAHhB,CAAtB,CAxBgF,CA8BhF;;EACA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,aADc;IAEjB,GAAG,KAAK,CAAC,IAAN,CAAW;EAFG,CAAnB,CA/BgF,CAoChF;;EACA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,YAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;EAEA,OAAO,KAAP;AACD,CAzCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: value !== undefined ? clamp(value, min, max) : undefined,\n defaultState: clamp(defaultValue, min, max),\n initialState: 0,\n });\n const valuePercent = getPercent(currentValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|