@fluentui/react-slider 9.0.0-beta.5 → 9.0.0-beta.6
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 +92 -9
- package/CHANGELOG.md +29 -10
- package/dist/react-slider.d.ts +31 -140
- package/lib/components/Slider/Slider.js +6 -6
- package/lib/components/Slider/Slider.js.map +1 -1
- package/lib/components/Slider/Slider.types.d.ts +26 -55
- package/lib/components/Slider/index.d.ts +2 -2
- package/lib/components/Slider/index.js +2 -2
- package/lib/components/Slider/index.js.map +1 -1
- package/lib/components/Slider/renderSlider.d.ts +1 -1
- package/lib/components/Slider/renderSlider.js +7 -4
- package/lib/components/Slider/renderSlider.js.map +1 -1
- package/lib/components/Slider/useSlider.d.ts +2 -6
- package/lib/components/Slider/useSlider.js +28 -57
- package/lib/components/Slider/useSlider.js.map +1 -1
- package/lib/components/Slider/useSliderState.d.ts +1 -2
- package/lib/components/Slider/useSliderState.js +37 -159
- package/lib/components/Slider/useSliderState.js.map +1 -1
- package/lib/components/Slider/useSliderStyles.d.ts +9 -35
- package/lib/components/Slider/useSliderStyles.js +142 -301
- package/lib/components/Slider/useSliderStyles.js.map +1 -1
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.js +3 -3
- package/lib-commonjs/components/Slider/Slider.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.types.d.ts +26 -55
- package/lib-commonjs/components/Slider/index.d.ts +2 -2
- package/lib-commonjs/components/Slider/index.js +5 -5
- package/lib-commonjs/components/Slider/index.js.map +1 -1
- package/lib-commonjs/components/Slider/renderSlider.d.ts +1 -1
- package/lib-commonjs/components/Slider/renderSlider.js +9 -7
- package/lib-commonjs/components/Slider/renderSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSlider.d.ts +2 -6
- package/lib-commonjs/components/Slider/useSlider.js +29 -58
- package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderState.d.ts +1 -2
- package/lib-commonjs/components/Slider/useSliderState.js +39 -163
- package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderStyles.d.ts +9 -35
- package/lib-commonjs/components/Slider/useSliderStyles.js +149 -307
- package/lib-commonjs/components/Slider/useSliderStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +0 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +12 -13
- package/lib/RangedSlider.d.ts +0 -1
- package/lib/RangedSlider.js +0 -2
- package/lib/RangedSlider.js.map +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 -19
- 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 -115
- 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 -258
- package/lib/components/RangedSlider/useRangedSliderState.js.map +0 -1
- package/lib/components/RangedSlider/useRangedSliderStyles.d.ts +0 -5
- package/lib/components/RangedSlider/useRangedSliderStyles.js +0 -93
- package/lib/components/RangedSlider/useRangedSliderStyles.js.map +0 -1
- 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 -27
- 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 -15
- package/lib/utils/on.js.map +0 -1
- package/lib/utils/renderMarks.d.ts +0 -11
- package/lib/utils/renderMarks.js +0 -24
- package/lib/utils/renderMarks.js.map +0 -1
- package/lib/utils/validateRangedThumbValues.d.ts +0 -4
- package/lib/utils/validateRangedThumbValues.js +0 -7
- 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/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 -34
- 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 -30
- 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 -126
- 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 -272
- package/lib-commonjs/components/RangedSlider/useRangedSliderState.js.map +0 -1
- package/lib-commonjs/components/RangedSlider/useRangedSliderStyles.d.ts +0 -5
- package/lib-commonjs/components/RangedSlider/useRangedSliderStyles.js +0 -105
- package/lib-commonjs/components/RangedSlider/useRangedSliderStyles.js.map +0 -1
- 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 -37
- 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 -24
- package/lib-commonjs/utils/on.js.map +0 -1
- package/lib-commonjs/utils/renderMarks.d.ts +0 -11
- package/lib-commonjs/utils/renderMarks.js +0 -36
- 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 -17
- package/lib-commonjs/utils/validateRangedThumbValues.js.map +0 -1
|
@@ -1,258 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useFluent } from '@fluentui/react-shared-contexts';
|
|
3
|
-
import { clamp, useBoolean, useControllableState, useEventCallback, useUnmount, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
|
-
import { calculateSteps, findClosestThumb, getKeydownValue, getMarkPercent, getMarkValue, getPercent, on, renderMarks, validateRangedThumbValues } from '../../utils/index';
|
|
5
|
-
import { animationTime } from '../Slider/useSliderState';
|
|
6
|
-
export const useRangedSliderState = state => {
|
|
7
|
-
const {
|
|
8
|
-
max = 100,
|
|
9
|
-
min = 0,
|
|
10
|
-
step = 1
|
|
11
|
-
} = state;
|
|
12
|
-
const {
|
|
13
|
-
ariaValueText,
|
|
14
|
-
defaultValue = [min, max],
|
|
15
|
-
disabled = false,
|
|
16
|
-
keyboardStep = step,
|
|
17
|
-
marks,
|
|
18
|
-
onChange,
|
|
19
|
-
value,
|
|
20
|
-
vertical = false
|
|
21
|
-
} = state;
|
|
22
|
-
const {
|
|
23
|
-
onKeyDown: onKeyDownCallback,
|
|
24
|
-
onPointerDown: onPointerDownCallback
|
|
25
|
-
} = state.root;
|
|
26
|
-
const {
|
|
27
|
-
dir
|
|
28
|
-
} = useFluent();
|
|
29
|
-
const lowerInputRef = React.useRef(null);
|
|
30
|
-
const upperInputRef = React.useRef(null);
|
|
31
|
-
const railRef = React.useRef(null);
|
|
32
|
-
const internalState = React.useRef({
|
|
33
|
-
internalValue: value ? validateRangedThumbValues(value, min, max) : validateRangedThumbValues(defaultValue, min, max),
|
|
34
|
-
lockedValue: 0,
|
|
35
|
-
activeThumb: 'lowerValue',
|
|
36
|
-
disposables: []
|
|
37
|
-
});
|
|
38
|
-
const [stepAnimation, {
|
|
39
|
-
setTrue: showStepAnimation,
|
|
40
|
-
setFalse: hideStepAnimation
|
|
41
|
-
}] = useBoolean(false);
|
|
42
|
-
const [renderedPosition, setRenderedPosition] = React.useState(value ? validateRangedThumbValues(value, min, max) : validateRangedThumbValues(defaultValue, min, max));
|
|
43
|
-
const [currentValue, setCurrentValue] = useControllableState({
|
|
44
|
-
state: value && validateRangedThumbValues(value, min, max),
|
|
45
|
-
defaultState: validateRangedThumbValues(defaultValue, min, max),
|
|
46
|
-
initialState: [min, max]
|
|
47
|
-
});
|
|
48
|
-
/**
|
|
49
|
-
* Updates the active thumb of the RangedSlider
|
|
50
|
-
*/
|
|
51
|
-
|
|
52
|
-
const updateActiveThumb = React.useCallback(incomingValue => {
|
|
53
|
-
switch (internalState.current.activeThumb) {
|
|
54
|
-
case 'lowerValue':
|
|
55
|
-
if (incomingValue > internalState.current.internalValue[1]) {
|
|
56
|
-
internalState.current.activeThumb = 'upperValue';
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
break;
|
|
60
|
-
|
|
61
|
-
case 'upperValue':
|
|
62
|
-
if (incomingValue < internalState.current.internalValue[0]) {
|
|
63
|
-
internalState.current.activeThumb = 'lowerValue';
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
break;
|
|
67
|
-
}
|
|
68
|
-
}, []);
|
|
69
|
-
/**
|
|
70
|
-
* Updates the controlled `currentValue` to the new `incomingValue` and clamps it.
|
|
71
|
-
*/
|
|
72
|
-
|
|
73
|
-
const updateValue = useEventCallback((incomingValue, ev) => {
|
|
74
|
-
const clampedValue = clamp(incomingValue, min, max);
|
|
75
|
-
const newValue = [internalState.current.activeThumb === 'lowerValue' ? clampedValue : internalState.current.lockedValue, internalState.current.activeThumb === 'upperValue' ? clampedValue : internalState.current.lockedValue];
|
|
76
|
-
|
|
77
|
-
if (clampedValue !== min && clampedValue !== max) {
|
|
78
|
-
ev.stopPropagation();
|
|
79
|
-
|
|
80
|
-
if (ev.type === 'keydown') {
|
|
81
|
-
ev.preventDefault();
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
internalState.current.internalValue = newValue;
|
|
86
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
|
87
|
-
value: newValue
|
|
88
|
-
});
|
|
89
|
-
setCurrentValue(newValue);
|
|
90
|
-
});
|
|
91
|
-
/**
|
|
92
|
-
* Updates the controlled `currentValue` and `renderedPosition` of the RangedSlider.
|
|
93
|
-
*/
|
|
94
|
-
|
|
95
|
-
const updatePosition = React.useCallback((incomingValue, ev) => {
|
|
96
|
-
updateActiveThumb(clamp(incomingValue, min, max));
|
|
97
|
-
internalState.current.internalValue = [internalState.current.activeThumb === 'lowerValue' ? clamp(incomingValue, min, max) : internalState.current.internalValue[0], internalState.current.activeThumb === 'upperValue' ? clamp(incomingValue, min, max) : internalState.current.internalValue[1]];
|
|
98
|
-
internalState.current.lockedValue = internalState.current.activeThumb === 'lowerValue' ? internalState.current.internalValue[1] : internalState.current.internalValue[0];
|
|
99
|
-
|
|
100
|
-
if (internalState.current.activeThumb === 'lowerValue') {
|
|
101
|
-
lowerInputRef.current.focus();
|
|
102
|
-
} else {
|
|
103
|
-
upperInputRef.current.focus();
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
setRenderedPosition(internalState.current.internalValue);
|
|
107
|
-
updateValue(incomingValue, ev);
|
|
108
|
-
}, [max, min, updateActiveThumb, updateValue]);
|
|
109
|
-
/**
|
|
110
|
-
* Updates the internal `renderedPosition` of the RangedSlider.
|
|
111
|
-
*/
|
|
112
|
-
|
|
113
|
-
const updatedRenderedPosition = React.useCallback(incomingValue => {
|
|
114
|
-
setRenderedPosition([internalState.current.activeThumb === 'lowerValue' ? incomingValue : internalState.current.internalValue[0], internalState.current.activeThumb === 'upperValue' ? incomingValue : internalState.current.internalValue[1]]);
|
|
115
|
-
}, []);
|
|
116
|
-
const onPointerMove = React.useCallback(ev => {
|
|
117
|
-
const position = calculateSteps(ev, railRef, min, max, step, vertical, dir);
|
|
118
|
-
const currentStepPosition = Math.round(position / step) * step;
|
|
119
|
-
updateActiveThumb(currentStepPosition);
|
|
120
|
-
updatedRenderedPosition(position);
|
|
121
|
-
updateValue(currentStepPosition, ev);
|
|
122
|
-
}, [dir, max, min, step, updateActiveThumb, updateValue, updatedRenderedPosition, vertical]);
|
|
123
|
-
const onPointerUp = React.useCallback(ev => {
|
|
124
|
-
internalState.current.disposables.forEach(dispose => dispose());
|
|
125
|
-
internalState.current.disposables = [];
|
|
126
|
-
showStepAnimation(); // When undefined, the position falls back to the currentValue state.
|
|
127
|
-
|
|
128
|
-
setRenderedPosition(undefined);
|
|
129
|
-
|
|
130
|
-
if (internalState.current.activeThumb === 'lowerValue') {
|
|
131
|
-
lowerInputRef.current.focus();
|
|
132
|
-
} else {
|
|
133
|
-
upperInputRef.current.focus();
|
|
134
|
-
}
|
|
135
|
-
}, [showStepAnimation]);
|
|
136
|
-
const onPointerDown = React.useCallback(ev => {
|
|
137
|
-
var _a;
|
|
138
|
-
|
|
139
|
-
const {
|
|
140
|
-
pointerId
|
|
141
|
-
} = ev;
|
|
142
|
-
const target = ev.target;
|
|
143
|
-
(_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
|
144
|
-
onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
|
|
145
|
-
hideStepAnimation();
|
|
146
|
-
internalState.current.activeThumb = findClosestThumb(internalState.current.internalValue, calculateSteps(ev, railRef, min, max, step, vertical, dir));
|
|
147
|
-
internalState.current.lockedValue = internalState.current.activeThumb === 'lowerValue' ? internalState.current.internalValue[1] : internalState.current.internalValue[0];
|
|
148
|
-
internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), () => {
|
|
149
|
-
var _a;
|
|
150
|
-
|
|
151
|
-
(_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
|
152
|
-
});
|
|
153
|
-
onPointerMove(ev);
|
|
154
|
-
}, [dir, hideStepAnimation, max, min, onPointerDownCallback, onPointerMove, onPointerUp, step, vertical]);
|
|
155
|
-
const onInputChange = React.useCallback(ev => {
|
|
156
|
-
updatePosition(Number(ev.target.value), ev);
|
|
157
|
-
}, [updatePosition]);
|
|
158
|
-
const onKeyDown = React.useCallback(ev => {
|
|
159
|
-
const activeThumbIndex = internalState.current.activeThumb === 'lowerValue' ? 0 : 1;
|
|
160
|
-
hideStepAnimation();
|
|
161
|
-
const incomingValue = getKeydownValue(ev, currentValue[activeThumbIndex], min, max, dir, keyboardStep);
|
|
162
|
-
|
|
163
|
-
if (incomingValue !== min && incomingValue !== max) {
|
|
164
|
-
ev.stopPropagation();
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
onKeyDownCallback === null || onKeyDownCallback === void 0 ? void 0 : onKeyDownCallback(ev);
|
|
168
|
-
|
|
169
|
-
if (currentValue[activeThumbIndex] !== incomingValue) {
|
|
170
|
-
updatePosition(incomingValue, ev);
|
|
171
|
-
}
|
|
172
|
-
}, [currentValue, dir, hideStepAnimation, keyboardStep, max, min, onKeyDownCallback, updatePosition]);
|
|
173
|
-
const onKeyDownLower = React.useCallback(ev => {
|
|
174
|
-
internalState.current.activeThumb = 'lowerValue';
|
|
175
|
-
onKeyDown(ev);
|
|
176
|
-
}, [onKeyDown]);
|
|
177
|
-
const onKeyDownUpper = React.useCallback(ev => {
|
|
178
|
-
internalState.current.activeThumb = 'upperValue';
|
|
179
|
-
onKeyDown(ev);
|
|
180
|
-
}, [onKeyDown]);
|
|
181
|
-
useUnmount(() => {
|
|
182
|
-
internalState.current.disposables.forEach(dispose => dispose());
|
|
183
|
-
internalState.current.disposables = [];
|
|
184
|
-
});
|
|
185
|
-
const lowerValuePercent = getPercent(renderedPosition !== undefined ? renderedPosition[0] : currentValue[0], min, max);
|
|
186
|
-
const upperValuePercent = getPercent(renderedPosition !== undefined ? renderedPosition[1] : currentValue[1], min, max);
|
|
187
|
-
const markValues = React.useMemo(() => getMarkValue(marks, min, max, step), [marks, max, min, step]);
|
|
188
|
-
const markPercent = React.useMemo(() => getMarkPercent(markValues), [markValues]);
|
|
189
|
-
const lowerThumbWrapperStyles = {
|
|
190
|
-
transform: vertical ? `translateY(${lowerValuePercent}%)` : `translateX(${dir === 'rtl' ? -lowerValuePercent : lowerValuePercent}%)`,
|
|
191
|
-
transition: stepAnimation ? `transform ease-in-out ${animationTime}` : 'none',
|
|
192
|
-
...state.lowerThumbWrapper.style
|
|
193
|
-
};
|
|
194
|
-
const upperThumbWrapperStyles = {
|
|
195
|
-
transform: vertical ? `translateY(${upperValuePercent}%)` : `translateX(${dir === 'rtl' ? -upperValuePercent : upperValuePercent}%)`,
|
|
196
|
-
transition: stepAnimation ? `transform ease-in-out ${animationTime}` : 'none',
|
|
197
|
-
...state.upperThumbWrapper.style
|
|
198
|
-
};
|
|
199
|
-
const marksWrapperStyles = marks ? {
|
|
200
|
-
[vertical ? 'gridTemplateRows' : 'gridTemplateColumns']: markPercent.join(''),
|
|
201
|
-
...state.marksWrapper.style
|
|
202
|
-
} : {};
|
|
203
|
-
const trackStyles = {
|
|
204
|
-
[vertical ? 'top' : dir === 'rtl' ? 'right' : 'left']: `${Math.min(lowerValuePercent, upperValuePercent)}%`,
|
|
205
|
-
[vertical ? 'height' : 'width']: `${Math.max(upperValuePercent - lowerValuePercent, lowerValuePercent - upperValuePercent)}%`,
|
|
206
|
-
transition: stepAnimation ? `${vertical ? 'height' : 'width'} ease-in-out ${animationTime}${', ' + vertical ? 'top' : dir === 'rtl' ? 'right' : 'left' + 'ease-in-out ' + animationTime}` : 'none',
|
|
207
|
-
...state.track.style
|
|
208
|
-
}; // Root props
|
|
209
|
-
|
|
210
|
-
if (!disabled) {
|
|
211
|
-
state.root.onPointerDown = onPointerDown;
|
|
212
|
-
} // Track Props
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
state.track.style = trackStyles; // Mark props
|
|
216
|
-
|
|
217
|
-
if (marks) {
|
|
218
|
-
state.marksWrapper.children = renderMarks(markValues, marks);
|
|
219
|
-
state.marksWrapper.style = marksWrapperStyles;
|
|
220
|
-
} // Lower Thumb Wrapper Props
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
state.lowerThumbWrapper.style = lowerThumbWrapperStyles; // Upper Thumb Wrapper Props
|
|
224
|
-
|
|
225
|
-
state.upperThumbWrapper.style = upperThumbWrapperStyles; // Active Rail Props
|
|
226
|
-
|
|
227
|
-
state.activeRail.ref = railRef; // Lower Input Props
|
|
228
|
-
|
|
229
|
-
state.lowerInput.ref = useMergedRefs(state.lowerInput.ref, lowerInputRef);
|
|
230
|
-
state.lowerInput.value = currentValue[0];
|
|
231
|
-
state.lowerInput.min = min;
|
|
232
|
-
state.lowerInput.max = max;
|
|
233
|
-
ariaValueText && (state.lowerInput['aria-valuetext'] = ariaValueText(currentValue[0]));
|
|
234
|
-
state.lowerInput.disabled = disabled;
|
|
235
|
-
state.lowerInput.step = step;
|
|
236
|
-
|
|
237
|
-
if (!disabled) {
|
|
238
|
-
state.lowerInput.onKeyDown = onKeyDownLower;
|
|
239
|
-
state.lowerInput.onChange = onInputChange;
|
|
240
|
-
} // Upper Input Props
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
state.upperInput.ref = useMergedRefs(state.upperInput.ref, upperInputRef);
|
|
244
|
-
state.upperInput.value = currentValue[1];
|
|
245
|
-
state.upperInput.min = min;
|
|
246
|
-
state.upperInput.max = max;
|
|
247
|
-
ariaValueText && (state.upperInput['aria-valuetext'] = ariaValueText(currentValue[1]));
|
|
248
|
-
state.upperInput.disabled = disabled;
|
|
249
|
-
state.upperInput.step = step;
|
|
250
|
-
|
|
251
|
-
if (!disabled) {
|
|
252
|
-
state.upperInput.onKeyDown = onKeyDownUpper;
|
|
253
|
-
state.upperInput.onChange = onInputChange;
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
return state;
|
|
257
|
-
};
|
|
258
|
-
//# sourceMappingURL=useRangedSliderState.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/RangedSlider/useRangedSliderState.tsx"],"names":[],"mappings":"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","sourceRoot":""}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type { RangedSliderState } from './RangedSlider.types';
|
|
2
|
-
export declare const rangedSliderClassName = "fui-RangedSlider";
|
|
3
|
-
export declare const lowerThumbClassName: string;
|
|
4
|
-
export declare const upperThumbClassName: string;
|
|
5
|
-
export declare const useRangedSliderStyles: (state: RangedSliderState) => RangedSliderState;
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { mergeClasses, __styles } from '@fluentui/react-make-styles';
|
|
2
|
-
import { thumbClassName, trackClassName, useActiveRailStyles, useMarksWrapperStyles, useRailStyles, useRootStyles, useSliderWrapper, useThumbStyles, useThumbWrapperStyles, useTrackStyles, useTrackWrapperStyles } from '../Slider/useSliderStyles';
|
|
3
|
-
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
4
|
-
export const rangedSliderClassName = 'fui-RangedSlider';
|
|
5
|
-
export const lowerThumbClassName = `${thumbClassName} ${thumbClassName + '-lower'}`;
|
|
6
|
-
export const upperThumbClassName = `${thumbClassName} ${thumbClassName + '-upper'}`;
|
|
7
|
-
/**
|
|
8
|
-
* Styles for the Input slot
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
const useInputStyles = /*#__PURE__*/__styles({
|
|
12
|
-
"input": {
|
|
13
|
-
"abs64n": "fk73vx1",
|
|
14
|
-
"qhf8xq": "f1euv43f",
|
|
15
|
-
"z8tnut": "f1g0x7ka",
|
|
16
|
-
"z189sj": ["fhxju0i", "f1cnd47f"],
|
|
17
|
-
"Byoj8tv": "f1qch9an",
|
|
18
|
-
"uwmqm3": ["f1cnd47f", "fhxju0i"],
|
|
19
|
-
"B6of3ja": "f1hu3pq6",
|
|
20
|
-
"t21cq0": ["f11qmguv", "f1tyq0we"],
|
|
21
|
-
"jrapky": "f19f4twv",
|
|
22
|
-
"Frg6f3": ["f1tyq0we", "f11qmguv"],
|
|
23
|
-
"a9b677": "f1j7mq28",
|
|
24
|
-
"Bqenvij": "frevy5r",
|
|
25
|
-
"Bkecrkj": "f1aehjj5"
|
|
26
|
-
},
|
|
27
|
-
"lowerInputFocusIndicator": {
|
|
28
|
-
"B486eqv": "f2hkw1w",
|
|
29
|
-
"dklp7m": "fxsukxy",
|
|
30
|
-
"Br35hai": "f11gp2hs",
|
|
31
|
-
"kqmr70": "f5rqedo",
|
|
32
|
-
"B1xd1h": ["f1i1sfzn", "f3pp443"],
|
|
33
|
-
"z86jko": "f1xfk6dk",
|
|
34
|
-
"Bhnkkka": ["f3pp443", "f1i1sfzn"],
|
|
35
|
-
"F6r6ay": "f219ggj",
|
|
36
|
-
"B03toen": ["f161lxvn", "f1974sb1"],
|
|
37
|
-
"Brhgznf": "f1p6o7ot",
|
|
38
|
-
"rfiegf": ["f1974sb1", "f161lxvn"],
|
|
39
|
-
"uzwivm": "f1hzafta",
|
|
40
|
-
"xnnlmc": ["frnl454", "f156saj0"],
|
|
41
|
-
"B8dmhrm": "f17yr102",
|
|
42
|
-
"Eey93u": ["f156saj0", "frnl454"]
|
|
43
|
-
},
|
|
44
|
-
"upperInputFocusIndicator": {
|
|
45
|
-
"B486eqv": "f2hkw1w",
|
|
46
|
-
"nwizmm": "f6cpxuu",
|
|
47
|
-
"Bjff8dm": "f1t865gz",
|
|
48
|
-
"linykl": "friegbb",
|
|
49
|
-
"Btn1nba": ["f1ihle39", "f1r97m4b"],
|
|
50
|
-
"tumibo": "f1q5jq5h",
|
|
51
|
-
"jbfdb": ["f1r97m4b", "f1ihle39"],
|
|
52
|
-
"e05q9l": "f1iilg2j",
|
|
53
|
-
"idectk": ["fjkkuqp", "fjufifi"],
|
|
54
|
-
"d3qq8f": "f1c1vjn5",
|
|
55
|
-
"hiff41": ["fjufifi", "fjkkuqp"],
|
|
56
|
-
"B25siwn": "f1lsdgqj",
|
|
57
|
-
"B8tvtjq": ["f19fzwyd", "f19xbq88"],
|
|
58
|
-
"Bukt9is": "f1fje8ev",
|
|
59
|
-
"B9t3ikz": ["f19xbq88", "f19fzwyd"]
|
|
60
|
-
}
|
|
61
|
-
}, {
|
|
62
|
-
"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] .fxsukxy:focus+.fui-Slider-thumb-lower:before{outline-style:none;}", "[data-keyboard-nav] .f11gp2hs:focus+.fui-Slider-thumb-lower:before{box-sizing:border-box;}", "[data-keyboard-nav] .f5rqedo:focus+.fui-Slider-thumb-lower:before{border-top-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1i1sfzn:focus+.fui-Slider-thumb-lower:before{border-right-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f3pp443:focus+.fui-Slider-thumb-lower:before{border-left-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1xfk6dk:focus+.fui-Slider-thumb-lower:before{border-bottom-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f219ggj:focus+.fui-Slider-thumb-lower:before{border-top-style:solid;}", "[data-keyboard-nav] .f161lxvn:focus+.fui-Slider-thumb-lower:before{border-right-style:solid;}", "[data-keyboard-nav] .f1974sb1:focus+.fui-Slider-thumb-lower:before{border-left-style:solid;}", "[data-keyboard-nav] .f1p6o7ot:focus+.fui-Slider-thumb-lower:before{border-bottom-style:solid;}", "[data-keyboard-nav] .f1hzafta:focus+.fui-Slider-thumb-lower:before{border-top-color:black;}", "[data-keyboard-nav] .frnl454:focus+.fui-Slider-thumb-lower:before{border-right-color:black;}", "[data-keyboard-nav] .f156saj0:focus+.fui-Slider-thumb-lower:before{border-left-color:black;}", "[data-keyboard-nav] .f17yr102:focus+.fui-Slider-thumb-lower:before{border-bottom-color:black;}", "[data-keyboard-nav] .f6cpxuu:focus+.fui-Slider-thumb-upper:before{outline-style:none;}", "[data-keyboard-nav] .f1t865gz:focus+.fui-Slider-thumb-upper:before{box-sizing:border-box;}", "[data-keyboard-nav] .friegbb:focus+.fui-Slider-thumb-upper:before{border-top-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1ihle39:focus+.fui-Slider-thumb-upper:before{border-right-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1r97m4b:focus+.fui-Slider-thumb-upper:before{border-left-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1q5jq5h:focus+.fui-Slider-thumb-upper:before{border-bottom-width:calc(var(--slider-thumb-size) * .05);}", "[data-keyboard-nav] .f1iilg2j:focus+.fui-Slider-thumb-upper:before{border-top-style:solid;}", "[data-keyboard-nav] .fjkkuqp:focus+.fui-Slider-thumb-upper:before{border-right-style:solid;}", "[data-keyboard-nav] .fjufifi:focus+.fui-Slider-thumb-upper:before{border-left-style:solid;}", "[data-keyboard-nav] .f1c1vjn5:focus+.fui-Slider-thumb-upper:before{border-bottom-style:solid;}", "[data-keyboard-nav] .f1lsdgqj:focus+.fui-Slider-thumb-upper:before{border-top-color:black;}", "[data-keyboard-nav] .f19fzwyd:focus+.fui-Slider-thumb-upper:before{border-right-color:black;}", "[data-keyboard-nav] .f19xbq88:focus+.fui-Slider-thumb-upper:before{border-left-color:black;}", "[data-keyboard-nav] .f1fje8ev:focus+.fui-Slider-thumb-upper:before{border-bottom-color:black;}"],
|
|
63
|
-
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
export const useRangedSliderStyles = state => {
|
|
67
|
-
const rootStyles = useRootStyles();
|
|
68
|
-
const sliderWrapperStyles = useSliderWrapper();
|
|
69
|
-
const railStyles = useRailStyles();
|
|
70
|
-
const trackWrapperStyles = useTrackWrapperStyles();
|
|
71
|
-
const trackStyles = useTrackStyles();
|
|
72
|
-
const marksWrapperStyles = useMarksWrapperStyles();
|
|
73
|
-
const thumbWrapperStyles = useThumbWrapperStyles();
|
|
74
|
-
const thumbStyles = useThumbStyles();
|
|
75
|
-
const activeRailStyles = useActiveRailStyles();
|
|
76
|
-
const inputStyles = useInputStyles();
|
|
77
|
-
state.root.className = mergeClasses(rangedSliderClassName, rootStyles.root, rootStyles[state.size], state.vertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
|
|
78
|
-
state.sliderWrapper.className = mergeClasses(sliderWrapperStyles.sliderWrapper, state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal, state.sliderWrapper.className);
|
|
79
|
-
state.rail.className = mergeClasses(railStyles.rail, state.vertical ? railStyles.vertical : railStyles.horizontal, state.disabled ? railStyles.disabled : railStyles.enabled, state.rail.className);
|
|
80
|
-
state.sliderWrapper.className = mergeClasses(sliderWrapperStyles.sliderWrapper, state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal, state.sliderWrapper.className);
|
|
81
|
-
state.trackWrapper.className = mergeClasses(trackWrapperStyles.trackWrapper, state.vertical ? trackWrapperStyles.vertical : trackWrapperStyles.horizontal, state.trackWrapper.className);
|
|
82
|
-
state.track.className = mergeClasses(trackClassName, trackStyles.track, state.vertical ? trackStyles.vertical : trackStyles.horizontal, state.disabled ? trackStyles.disabled : trackStyles.enabled, state.track.className);
|
|
83
|
-
state.marksWrapper.className = mergeClasses(marksWrapperStyles.marksWrapper, state.vertical ? marksWrapperStyles.vertical : marksWrapperStyles.horizontal, state.marksWrapper.className);
|
|
84
|
-
state.lowerThumbWrapper.className = mergeClasses(thumbWrapperStyles.thumbWrapper, state.vertical ? thumbWrapperStyles.vertical : thumbWrapperStyles.horizontal, state.lowerThumbWrapper.className);
|
|
85
|
-
state.lowerThumb.className = mergeClasses(lowerThumbClassName, thumbStyles.thumb, !state.vertical && thumbStyles.horizontal, state.disabled ? thumbStyles.disabled : thumbStyles.enabled, state.lowerThumb.className);
|
|
86
|
-
state.upperThumbWrapper.className = mergeClasses(thumbWrapperStyles.thumbWrapper, state.vertical ? thumbWrapperStyles.vertical : thumbWrapperStyles.horizontal, state.upperThumbWrapper.className);
|
|
87
|
-
state.upperThumb.className = mergeClasses(upperThumbClassName, thumbStyles.thumb, !state.vertical && thumbStyles.horizontal, state.disabled ? thumbStyles.disabled : thumbStyles.enabled, state.upperThumb.className);
|
|
88
|
-
state.activeRail.className = mergeClasses(activeRailStyles.activeRail, state.vertical ? activeRailStyles.vertical : activeRailStyles.horizontal, state.activeRail.className);
|
|
89
|
-
state.lowerInput.className = mergeClasses(inputStyles.input, inputStyles.lowerInputFocusIndicator, state.lowerInput.className);
|
|
90
|
-
state.upperInput.className = mergeClasses(inputStyles.input, inputStyles.upperInputFocusIndicator, state.upperInput.className);
|
|
91
|
-
return state;
|
|
92
|
-
};
|
|
93
|
-
//# sourceMappingURL=useRangedSliderStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/RangedSlider/useRangedSliderStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
|
@@ -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,27 +0,0 @@
|
|
|
1
|
-
import { clamp } from '@fluentui/react-utilities';
|
|
2
|
-
/**
|
|
3
|
-
* Calculates the `step` position based off of a `Mouse` or `Touch` event relative to the size of the rail.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
export const calculateSteps = (ev, railRef, min, max, step, vertical, dir) => {
|
|
7
|
-
var _a;
|
|
8
|
-
|
|
9
|
-
const currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
10
|
-
const sliderSize = (vertical ? currentBounds.height : currentBounds.width) || 0;
|
|
11
|
-
let position;
|
|
12
|
-
|
|
13
|
-
if (vertical) {
|
|
14
|
-
position = currentBounds.bottom;
|
|
15
|
-
} else if (dir === 'rtl') {
|
|
16
|
-
position = currentBounds.right;
|
|
17
|
-
} else {
|
|
18
|
-
position = currentBounds.left;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const totalSteps = (max - min) / step;
|
|
22
|
-
const stepLength = sliderSize / totalSteps;
|
|
23
|
-
const thumbPosition = vertical ? ev.clientY : ev.clientX;
|
|
24
|
-
const distance = dir === 'rtl' || vertical ? position - thumbPosition : thumbPosition - position;
|
|
25
|
-
return clamp(min + step * (distance / stepLength), min, max);
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=calculateSteps.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/calculateSteps.ts"],"names":[],"mappings":"AACA,SAAS,KAAT,QAAsB,2BAAtB;AAEA;;AAEG;;AACH,OAAO,MAAM,cAAc,GAAG,CAC5B,EAD4B,EAE5B,OAF4B,EAG5B,GAH4B,EAI5B,GAJ4B,EAK5B,IAL4B,EAM5B,QAN4B,EAO5B,GAP4B,KAQlB;;;AACV,QAAM,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,QAAM,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,QAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAP,IAAc,IAAjC;AACA,QAAM,UAAU,GAAG,UAAU,GAAG,UAAhC;AACA,QAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,CAAC,OAAN,GAAgB,EAAE,CAAC,OAAjD;AACA,QAAM,QAAQ,GAAG,GAAG,KAAK,KAAR,IAAiB,QAAjB,GAA4B,QAAQ,GAAG,aAAvC,GAAuD,aAAa,GAAG,QAAxF;AAEA,SAAO,KAAK,CAAC,GAAG,GAAG,IAAI,IAAI,QAAQ,GAAG,UAAf,CAAX,EAAuC,GAAvC,EAA4C,GAA5C,CAAZ;AACD,CA3BM","sourceRoot":""}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Finds the closest thumb based of a given value and returns it's key.
|
|
3
|
-
*/
|
|
4
|
-
export const findClosestThumb = (thumbArray, incomingValue) => {
|
|
5
|
-
return Math.abs(incomingValue - thumbArray[0]) <= Math.abs(thumbArray[1] - incomingValue) ? 'lowerValue' : 'upperValue';
|
|
6
|
-
};
|
|
7
|
-
//# sourceMappingURL=findClosestThumb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/findClosestThumb.ts"],"names":[],"mappings":"AAAA;;AAEG;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,UAAD,EAA+B,aAA/B,KAAwD;AACtF,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","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,35 +0,0 @@
|
|
|
1
|
-
import { getRTLSafeKey } from '@fluentui/react-utilities';
|
|
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
|
-
|
|
7
|
-
export const getKeydownValue = (ev, currentValue, min, max, dir, keyboardStep) => {
|
|
8
|
-
const normalizedKey = getRTLSafeKey(ev.key, dir);
|
|
9
|
-
const arrowStep = ev.shiftKey ? keyboardStep * 10 : keyboardStep;
|
|
10
|
-
|
|
11
|
-
switch (normalizedKey) {
|
|
12
|
-
case 'ArrowDown':
|
|
13
|
-
case 'ArrowLeft':
|
|
14
|
-
return currentValue - arrowStep;
|
|
15
|
-
|
|
16
|
-
case 'ArrowUp':
|
|
17
|
-
case 'ArrowRight':
|
|
18
|
-
return currentValue + arrowStep;
|
|
19
|
-
|
|
20
|
-
case 'PageDown':
|
|
21
|
-
return currentValue - keyboardStep * 10;
|
|
22
|
-
|
|
23
|
-
case 'PageUp':
|
|
24
|
-
return currentValue + keyboardStep * 10;
|
|
25
|
-
|
|
26
|
-
case 'Home':
|
|
27
|
-
return min;
|
|
28
|
-
|
|
29
|
-
case 'End':
|
|
30
|
-
return max;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
return currentValue;
|
|
34
|
-
};
|
|
35
|
-
//# sourceMappingURL=getKeydownValue.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/getKeydownValue.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,2BAA9B;AAEA;;;AAGG;;AACH,OAAO,MAAM,eAAe,GAAG,CAC7B,EAD6B,EAE7B,YAF6B,EAG7B,GAH6B,EAI7B,GAJ6B,EAK7B,GAL6B,EAM7B,YAN6B,KAOnB;AACV,QAAM,aAAa,GAAG,aAAa,CAAC,EAAE,CAAC,GAAJ,EAAS,GAAT,CAAnC;AAEA,QAAM,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","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,27 +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 const getMarkPercent = markValues => {
|
|
13
|
-
const result = []; // For CSS grid to work the percents array must be remapped by the previous percent - the current percent
|
|
14
|
-
|
|
15
|
-
if (markValues.length > 0) {
|
|
16
|
-
result.push(markValues[0] + '% ');
|
|
17
|
-
let prevPercent = markValues[0];
|
|
18
|
-
|
|
19
|
-
for (let i = 1; i < markValues.length; i++) {
|
|
20
|
-
result.push(markValues[i] - prevPercent + '% ');
|
|
21
|
-
prevPercent = markValues[i];
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
return result;
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=getMarkPercent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/getMarkPercent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;AAUG;AACH,OAAO,MAAM,cAAc,GAAI,UAAD,IAAyB;AACrD,QAAM,MAAM,GAAa,EAAzB,CADqD,CAGrD;;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","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,27 +0,0 @@
|
|
|
1
|
-
import { getPercent } from './getPercent';
|
|
2
|
-
/**
|
|
3
|
-
* Gets the current percentage position for the marks with relative to the rail.
|
|
4
|
-
*
|
|
5
|
-
* Example
|
|
6
|
-
* - `Rail: width = 100px`
|
|
7
|
-
* - `Marks: [0, 25, 50, 75, 100]`
|
|
8
|
-
* - `getMarkValue: 0%, 25%, 50%, 75%, 100%`
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
export const getMarkValue = (marks, min, max, step) => {
|
|
12
|
-
const valueArray = []; // 1. We receive a boolean: mark for every step.
|
|
13
|
-
|
|
14
|
-
if (typeof marks === 'boolean' && marks === true) {
|
|
15
|
-
for (let i = 0; i < (max - min) / step + 1; i++) {
|
|
16
|
-
valueArray.push(getPercent(min + step * i, min, max));
|
|
17
|
-
}
|
|
18
|
-
} else if (Array.isArray(marks) && marks.length > 0) {
|
|
19
|
-
return marks.map(marksItem => typeof marksItem === 'number' ? // 2. We receive an array with numbers: mark for every value in array.
|
|
20
|
-
getPercent(min + marksItem, min, max) : // 3. We receive an array with objects containing numbers and strings:
|
|
21
|
-
// mark and label for every value + string in each object.
|
|
22
|
-
getPercent(min + marksItem.value, min, max));
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
return valueArray;
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=getMarkValues.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/getMarkValues.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;;;;;;AAOG;;AACH,OAAO,MAAM,YAAY,GAAG,CAC1B,KAD0B,EAE1B,GAF0B,EAG1B,GAH0B,EAI1B,IAJ0B,KAKxB;AACF,QAAM,UAAU,GAAa,EAA7B,CADE,CAGF;;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,UAAU,CAAC,GAAG,GAAG,IAAI,GAAG,CAAd,EAAiB,GAAjB,EAAsB,GAAtB,CAA1B;AACD;AACF,GAJD,MAIO,IAAI,KAAK,CAAC,OAAN,CAAc,KAAd,KAAwB,KAAK,CAAC,MAAN,GAAe,CAA3C,EAA8C;AACnD,WAAO,KAAK,CAAC,GAAN,CAAU,SAAS,IACxB,OAAO,SAAP,KAAqB,QAArB,GACI;AACA,IAAA,UAAU,CAAC,GAAG,GAAG,SAAP,EAAkB,GAAlB,EAAuB,GAAvB,CAFd,GAGI;AACA;AACA,IAAA,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,KAAjB,EAAwB,GAAxB,EAA6B,GAA7B,CANT,CAAP;AAQD;;AACD,SAAO,UAAP;AACD,CAxBM","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;
|
package/lib/utils/getPercent.js
DELETED
|
@@ -1,11 +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 const getPercent = (value, min, max) => {
|
|
9
|
-
return max === min ? 0 : (value - min) / (max - min) * 100;
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=getPercent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/getPercent.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAO,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;AACpE,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFM","sourceRoot":""}
|
package/lib/utils/index.d.ts
DELETED
|
@@ -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';
|