@react-native-aria/slider 0.2.5 → 0.2.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/lib/commonjs/useSlider.js +3 -2
- package/lib/commonjs/useSlider.js.map +1 -1
- package/lib/commonjs/useSlider.web.js +5 -5
- package/lib/commonjs/useSlider.web.js.map +1 -1
- package/lib/commonjs/useSliderThumb.js +2 -2
- package/lib/commonjs/useSliderThumb.js.map +1 -1
- package/lib/commonjs/useSliderThumb.web.js +2 -2
- package/lib/commonjs/useSliderThumb.web.js.map +1 -1
- package/lib/module/useSlider.js +3 -2
- package/lib/module/useSlider.js.map +1 -1
- package/lib/module/useSlider.web.js +5 -5
- package/lib/module/useSlider.web.js.map +1 -1
- package/lib/module/useSliderThumb.js +2 -2
- package/lib/module/useSliderThumb.js.map +1 -1
- package/lib/module/useSliderThumb.web.js +2 -2
- package/lib/module/useSliderThumb.web.js.map +1 -1
- package/lib/typescript/useSlider.d.ts +1 -1
- package/lib/typescript/useSlider.web.d.ts +1 -1
- package/lib/typescript/useSliderThumb.d.ts +1 -1
- package/lib/typescript/useSliderThumb.web.d.ts +1 -1
- package/package.json +1 -1
- package/src/useSlider.ts +4 -2
- package/src/useSlider.web.ts +17 -5
- package/src/useSliderThumb.ts +3 -2
- package/src/useSliderThumb.web.ts +3 -2
@@ -23,7 +23,7 @@ var _utils2 = require("@react-native-aria/utils");
|
|
23
23
|
* accepts click and drag motions, so that the closest thumb will follow clicks and drags on
|
24
24
|
* the track.
|
25
25
|
*/
|
26
|
-
function useSlider(props, state, trackLayout) {
|
26
|
+
function useSlider(props, state, trackLayout, isReversed) {
|
27
27
|
var _labelProps$id;
|
28
28
|
|
29
29
|
let {
|
@@ -38,6 +38,7 @@ function useSlider(props, state, trackLayout) {
|
|
38
38
|
|
39
39
|
let onDownTrack = (e, id, clientX, clientY) => {
|
40
40
|
const direction = (0, _utils2.isRTL)() ? 'rtl' : undefined;
|
41
|
+
const reverseX = isReversed || direction === 'rtl';
|
41
42
|
|
42
43
|
if (!props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {
|
43
44
|
let size = isVertical ? trackLayout.height : trackLayout.width; // Find the closest thumb
|
@@ -47,7 +48,7 @@ function useSlider(props, state, trackLayout) {
|
|
47
48
|
const offset = clickPosition - trackPosition;
|
48
49
|
let percent = offset / size;
|
49
50
|
|
50
|
-
if (
|
51
|
+
if (reverseX || isVertical) {
|
51
52
|
percent = 1 - percent;
|
52
53
|
}
|
53
54
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSlider.ts"],"names":["useSlider","props","state","trackLayout","labelProps","fieldProps","isVertical","orientation","sliderIds","set","id","currentPointer","undefined","onDownTrack","e","clientX","clientY","direction","isDisabled","values","every","_","i","isThumbDragging","size","height","width","trackPosition","clickPosition","offset","percent","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","current","setThumbDragging","setThumbValue","groupProps","trackProps","onPress","locationX","locationY","nativeEvent","outputProps"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,SAAT,CACLC,KADK,EAELC,KAFK,EAGLC,WAHK,
|
1
|
+
{"version":3,"sources":["useSlider.ts"],"names":["useSlider","props","state","trackLayout","isReversed","labelProps","fieldProps","isVertical","orientation","sliderIds","set","id","currentPointer","undefined","onDownTrack","e","clientX","clientY","direction","reverseX","isDisabled","values","every","_","i","isThumbDragging","size","height","width","trackPosition","clickPosition","offset","percent","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","current","setThumbDragging","setThumbValue","groupProps","trackProps","onPress","locationX","locationY","nativeEvent","outputProps"],"mappings":"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","sourcesContent":["import { sliderIds } from './utils';\nimport { AriaSliderProps } from '@react-types/slider';\nimport React, { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderAria {\n /** Props for the label element. */\n labelProps: any;\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: any;\n\n /** Props for the track element. */\n trackProps: any;\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element. The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be. It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider(\n props: AriaSliderProps,\n state: SliderState,\n trackLayout: any,\n isReversed?: boolean\n): SliderAria {\n let { labelProps, fieldProps } = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n sliderIds.set(state, labelProps.id ?? fieldProps.id);\n let currentPointer = useRef<number | null | undefined>(undefined);\n\n let onDownTrack = (\n e: React.UIEvent,\n id: number,\n clientX: number,\n clientY: number\n ) => {\n const direction = isRTL() ? 'rtl' : undefined;\n const reverseX = isReversed || direction === 'rtl';\n if (\n !props.isDisabled &&\n state.values.every((_, i) => !state.isThumbDragging(i))\n ) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n // Find the closest thumb\n const trackPosition = trackLayout[isVertical ? 'y' : 'x'];\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (reverseX || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex((v) => value - v < 0);\n if (split === 0) {\n // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) {\n // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n state.setThumbDragging(closestThumb, true);\n state.setThumbValue(closestThumb, value);\n state.setThumbDragging(closestThumb, false);\n }\n }\n };\n\n return {\n labelProps,\n groupProps: {},\n trackProps: {\n onPress: (e: any) => {\n const { locationX, locationY } = e.nativeEvent;\n onDownTrack(e, undefined, locationX, locationY);\n },\n },\n outputProps: {},\n };\n}\n"]}
|
@@ -19,7 +19,7 @@ var _utils3 = require("@react-native-aria/utils");
|
|
19
19
|
|
20
20
|
var _useMove = require("./useMove");
|
21
21
|
|
22
|
-
function useSliderWeb(props, state, trackLayout) {
|
22
|
+
function useSliderWeb(props, state, trackLayout, isReversed) {
|
23
23
|
var _labelProps$id;
|
24
24
|
|
25
25
|
let {
|
@@ -42,7 +42,7 @@ function useSliderWeb(props, state, trackLayout) {
|
|
42
42
|
const realTimeTrackDraggingIndex = (0, _react.useRef)(null);
|
43
43
|
const stateRef = (0, _react.useRef)(null);
|
44
44
|
stateRef.current = state;
|
45
|
-
const reverseX = direction === 'rtl';
|
45
|
+
const reverseX = isReversed || direction === 'rtl';
|
46
46
|
const currentPosition = (0, _react.useRef)(null);
|
47
47
|
const {
|
48
48
|
moveProps
|
@@ -95,7 +95,7 @@ function useSliderWeb(props, state, trackLayout) {
|
|
95
95
|
const offset = clickPosition - trackPosition;
|
96
96
|
let percent = offset / size;
|
97
97
|
|
98
|
-
if (
|
98
|
+
if (reverseX || isVertical) {
|
99
99
|
percent = 1 - percent;
|
100
100
|
}
|
101
101
|
|
@@ -211,11 +211,11 @@ function useSliderWeb(props, state, trackLayout) {
|
|
211
211
|
};
|
212
212
|
}
|
213
213
|
|
214
|
-
const useSlider = (props, state, ref) => {
|
214
|
+
const useSlider = (props, state, ref, isReversed) => {
|
215
215
|
let {
|
216
216
|
groupProps: webGroupProps,
|
217
217
|
...rest
|
218
|
-
} = useSliderWeb(props, state, ref);
|
218
|
+
} = useSliderWeb(props, state, ref, isReversed);
|
219
219
|
let groupProps = (0, _utils3.mapDomPropsToRN)(webGroupProps);
|
220
220
|
let labelProps = (0, _utils3.mapDomPropsToRN)(rest.labelProps);
|
221
221
|
return {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSlider.web.ts"],"names":["useSliderWeb","props","state","trackLayout","labelProps","fieldProps","isVertical","orientation","sliderIds","set","id","direction","undefined","addGlobalListener","removeGlobalListener","realTimeTrackDraggingIndex","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","percent","setThumbPercent","onMoveEnd","setThumbDragging","currentPointer","onDownTrack","e","clientX","clientY","isDisabled","values","every","_","i","isThumbDragging","trackPosition","clickPosition","offset","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","setThumbValue","window","onUpTrack","pointerId","changedTouches","identifier","htmlFor","onClick","document","getElementById","focus","groupProps","role","trackProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","pointerType","onTouchStart","outputProps","map","index","join","useSlider","ref","webGroupProps","rest"],"mappings":"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","sourcesContent":["import { AriaSliderProps } from '@react-types/slider';\nimport { clamp, mergeProps, useGlobalListeners } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, { useRef } from 'react';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';\nimport { useMove } from './useMove';\n\ninterface SliderAria {\n /** Props for the label element. */\n labelProps: any;\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: any;\n\n /** Props for the track element. */\n trackProps: any;\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: any;\n}\n\nfunction useSliderWeb(\n props: AriaSliderProps,\n state: SliderState,\n trackLayout: {\n height: number;\n width: number;\n top: number;\n left: number;\n x: number;\n y: number;\n }\n): SliderAria {\n let { labelProps, fieldProps } = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n // Attach id of the label to the state so it can be accessed by useSliderThumb.\n sliderIds.set(state, labelProps.id ?? fieldProps.id);\n\n const direction = isRTL() ? 'rtl' : undefined;\n\n let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n // When the user clicks or drags the track, we want the motion to set and drag the\n // closest thumb. Hence we also need to install useMove() on the track element.\n // Here, we keep track of which index is the \"closest\" to the drag start point.\n // It is set onMouseDown/onTouchDown; see trackProps below.\n const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n const reverseX = direction === 'rtl';\n const currentPosition = useRef<number>(null);\n const { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n },\n onMove({ deltaX, deltaY }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(realTimeTrackDraggingIndex.current) *\n size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n\n if (realTimeTrackDraggingIndex.current != null) {\n const percent = clamp(currentPosition.current / size, 0, 1);\n stateRef.current.setThumbPercent(\n realTimeTrackDraggingIndex.current,\n percent\n );\n }\n },\n onMoveEnd() {\n if (realTimeTrackDraggingIndex.current != null) {\n stateRef.current.setThumbDragging(\n realTimeTrackDraggingIndex.current,\n false\n );\n realTimeTrackDraggingIndex.current = null;\n }\n },\n });\n\n let currentPointer = useRef<number | null | undefined>(undefined);\n let onDownTrack = (\n e: React.UIEvent,\n id: number,\n clientX: number,\n clientY: number\n ) => {\n // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n if (\n !props.isDisabled &&\n state.values.every((_, i) => !state.isThumbDragging(i))\n ) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n // Find the closest thumb\n const trackPosition = trackLayout[isVertical ? 'top' : 'left'];\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (direction === 'rtl' || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex((v) => value - v < 0);\n if (split === 0) {\n // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) {\n // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n\n realTimeTrackDraggingIndex.current = closestThumb;\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n\n state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n state.setThumbValue(closestThumb, value);\n\n addGlobalListener(window, 'mouseup', onUpTrack, false);\n addGlobalListener(window, 'touchend', onUpTrack, false);\n addGlobalListener(window, 'pointerup', onUpTrack, false);\n } else {\n realTimeTrackDraggingIndex.current = null;\n }\n }\n };\n\n let onUpTrack = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n\n removeGlobalListener(window, 'mouseup', onUpTrack, false);\n removeGlobalListener(window, 'touchend', onUpTrack, false);\n removeGlobalListener(window, 'pointerup', onUpTrack, false);\n }\n };\n\n if (labelProps.htmlFor) {\n // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n // causes this to override the `aria-labelledby` on the thumb. This causes the first\n // thumb to only be announced as the slider label rather than its individual name as well.\n // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n delete labelProps.htmlFor;\n labelProps.onClick = () => {\n // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n // so do it manually. In addition, make sure we show the focus ring.\n document.getElementById(getSliderThumbId(state, 0))?.focus();\n setInteractionModality('keyboard');\n };\n }\n\n return {\n labelProps,\n // The root element of the Slider will have role=\"group\" to group together\n // all the thumb inputs in the Slider. The label of the Slider will\n // be used to label the group.\n groupProps: {\n role: 'group',\n ...fieldProps,\n },\n trackProps: mergeProps(\n {\n onMouseDown(e: React.MouseEvent<HTMLElement>) {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDownTrack(e, undefined, e.clientX, e.clientY);\n },\n onPointerDown(e: React.PointerEvent<HTMLElement>) {\n if (\n e.pointerType === 'mouse' &&\n (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n ) {\n return;\n }\n onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n },\n onTouchStart(e: React.TouchEvent<HTMLElement>) {\n onDownTrack(\n e,\n e.changedTouches[0].identifier,\n e.changedTouches[0].clientX,\n e.changedTouches[0].clientY\n );\n },\n },\n moveProps\n ),\n outputProps: {\n 'htmlFor': state.values\n .map((_, index) => getSliderThumbId(state, index))\n .join(' '),\n 'aria-live': 'off',\n },\n };\n}\n\nexport const useSlider = (props: any, state: any, ref: any) => {\n let { groupProps: webGroupProps, ...rest } = useSliderWeb(props, state, ref);\n let groupProps = mapDomPropsToRN(webGroupProps);\n let labelProps = mapDomPropsToRN(rest.labelProps);\n return { groupProps, ...rest, labelProps };\n};\n"]}
|
1
|
+
{"version":3,"sources":["useSlider.web.ts"],"names":["useSliderWeb","props","state","trackLayout","isReversed","labelProps","fieldProps","isVertical","orientation","sliderIds","set","id","direction","undefined","addGlobalListener","removeGlobalListener","realTimeTrackDraggingIndex","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","percent","setThumbPercent","onMoveEnd","setThumbDragging","currentPointer","onDownTrack","e","clientX","clientY","isDisabled","values","every","_","i","isThumbDragging","trackPosition","clickPosition","offset","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","setThumbValue","window","onUpTrack","pointerId","changedTouches","identifier","htmlFor","onClick","document","getElementById","focus","groupProps","role","trackProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","pointerType","onTouchStart","outputProps","map","index","join","useSlider","ref","webGroupProps","rest"],"mappings":"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","sourcesContent":["import { AriaSliderProps } from '@react-types/slider';\nimport { clamp, mergeProps, useGlobalListeners } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, { useRef } from 'react';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';\nimport { useMove } from './useMove';\n\ninterface SliderAria {\n /** Props for the label element. */\n labelProps: any;\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: any;\n\n /** Props for the track element. */\n trackProps: any;\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: any;\n}\n\nfunction useSliderWeb(\n props: AriaSliderProps,\n state: SliderState,\n trackLayout: {\n height: number;\n width: number;\n top: number;\n left: number;\n x: number;\n y: number;\n },\n isReversed?: boolean\n): SliderAria {\n let { labelProps, fieldProps } = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n // Attach id of the label to the state so it can be accessed by useSliderThumb.\n sliderIds.set(state, labelProps.id ?? fieldProps.id);\n\n const direction = isRTL() ? 'rtl' : undefined;\n\n let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n // When the user clicks or drags the track, we want the motion to set and drag the\n // closest thumb. Hence we also need to install useMove() on the track element.\n // Here, we keep track of which index is the \"closest\" to the drag start point.\n // It is set onMouseDown/onTouchDown; see trackProps below.\n const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n const reverseX = isReversed || direction === 'rtl';\n\n const currentPosition = useRef<number>(null);\n const { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n },\n onMove({ deltaX, deltaY }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(realTimeTrackDraggingIndex.current) *\n size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n\n if (realTimeTrackDraggingIndex.current != null) {\n const percent = clamp(currentPosition.current / size, 0, 1);\n stateRef.current.setThumbPercent(\n realTimeTrackDraggingIndex.current,\n percent\n );\n }\n },\n onMoveEnd() {\n if (realTimeTrackDraggingIndex.current != null) {\n stateRef.current.setThumbDragging(\n realTimeTrackDraggingIndex.current,\n false\n );\n realTimeTrackDraggingIndex.current = null;\n }\n },\n });\n\n let currentPointer = useRef<number | null | undefined>(undefined);\n let onDownTrack = (\n e: React.UIEvent,\n id: number,\n clientX: number,\n clientY: number\n ) => {\n // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n if (\n !props.isDisabled &&\n state.values.every((_, i) => !state.isThumbDragging(i))\n ) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n // Find the closest thumb\n const trackPosition = trackLayout[isVertical ? 'top' : 'left'];\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (reverseX || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex((v) => value - v < 0);\n if (split === 0) {\n // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) {\n // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n\n realTimeTrackDraggingIndex.current = closestThumb;\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n\n state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n state.setThumbValue(closestThumb, value);\n\n addGlobalListener(window, 'mouseup', onUpTrack, false);\n addGlobalListener(window, 'touchend', onUpTrack, false);\n addGlobalListener(window, 'pointerup', onUpTrack, false);\n } else {\n realTimeTrackDraggingIndex.current = null;\n }\n }\n };\n\n let onUpTrack = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n\n removeGlobalListener(window, 'mouseup', onUpTrack, false);\n removeGlobalListener(window, 'touchend', onUpTrack, false);\n removeGlobalListener(window, 'pointerup', onUpTrack, false);\n }\n };\n\n if (labelProps.htmlFor) {\n // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n // causes this to override the `aria-labelledby` on the thumb. This causes the first\n // thumb to only be announced as the slider label rather than its individual name as well.\n // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n delete labelProps.htmlFor;\n labelProps.onClick = () => {\n // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n // so do it manually. In addition, make sure we show the focus ring.\n document.getElementById(getSliderThumbId(state, 0))?.focus();\n setInteractionModality('keyboard');\n };\n }\n\n return {\n labelProps,\n // The root element of the Slider will have role=\"group\" to group together\n // all the thumb inputs in the Slider. The label of the Slider will\n // be used to label the group.\n groupProps: {\n role: 'group',\n ...fieldProps,\n },\n trackProps: mergeProps(\n {\n onMouseDown(e: React.MouseEvent<HTMLElement>) {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDownTrack(e, undefined, e.clientX, e.clientY);\n },\n onPointerDown(e: React.PointerEvent<HTMLElement>) {\n if (\n e.pointerType === 'mouse' &&\n (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n ) {\n return;\n }\n onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n },\n onTouchStart(e: React.TouchEvent<HTMLElement>) {\n onDownTrack(\n e,\n e.changedTouches[0].identifier,\n e.changedTouches[0].clientX,\n e.changedTouches[0].clientY\n );\n },\n },\n moveProps\n ),\n outputProps: {\n 'htmlFor': state.values\n .map((_, index) => getSliderThumbId(state, index))\n .join(' '),\n 'aria-live': 'off',\n },\n };\n}\n\nexport const useSlider = (\n props: any,\n state: any,\n ref: any,\n isReversed?: boolean\n) => {\n let { groupProps: webGroupProps, ...rest } = useSliderWeb(\n props,\n state,\n ref,\n isReversed\n );\n let groupProps = mapDomPropsToRN(webGroupProps);\n let labelProps = mapDomPropsToRN(rest.labelProps);\n return { groupProps, ...rest, labelProps };\n};\n"]}
|
@@ -23,7 +23,7 @@ var _utils3 = require("@react-native-aria/utils");
|
|
23
23
|
* @param opts Options for this Slider thumb.
|
24
24
|
* @param state Slider state, created via `useSliderState`.
|
25
25
|
*/
|
26
|
-
function useSliderThumb(opts, state) {
|
26
|
+
function useSliderThumb(opts, state, isReversed) {
|
27
27
|
var _opts$ariaLabelledby;
|
28
28
|
|
29
29
|
let {
|
@@ -45,7 +45,7 @@ function useSliderThumb(opts, state) {
|
|
45
45
|
});
|
46
46
|
const stateRef = (0, _react.useRef)(null);
|
47
47
|
stateRef.current = state;
|
48
|
-
let reverseX = direction === 'rtl';
|
48
|
+
let reverseX = isReversed || direction === 'rtl';
|
49
49
|
let currentPosition = (0, _react.useRef)(null);
|
50
50
|
let {
|
51
51
|
moveProps
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSliderThumb.ts"],"names":["useSliderThumb","opts","state","index","isDisabled","trackLayout","isVertical","orientation","direction","undefined","labelId","sliderIds","get","labelProps","fieldProps","trim","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","disabled","accessibilityRole","accessibilityValue","now","accessibilityActions","name","label","thumbProps"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAoBA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,cAAT,CACLC,IADK,EAELC,KAFK,
|
1
|
+
{"version":3,"sources":["useSliderThumb.ts"],"names":["useSliderThumb","opts","state","isReversed","index","isDisabled","trackLayout","isVertical","orientation","direction","undefined","labelId","sliderIds","get","labelProps","fieldProps","trim","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","disabled","accessibilityRole","accessibilityValue","now","accessibilityActions","name","label","thumbProps"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport { clamp } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: any;\n\n /** Props for the visually hidden range input element. */\n inputProps: any;\n\n /** Props for the label element for this thumb (optional). */\n labelProps: any;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackLayout: any;\n /** A ref to the thumb input element. */\n inputRef: any;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: SliderThumbOptions,\n state: SliderState,\n isReversed?: boolean\n): SliderThumbAria {\n let { index, isDisabled, trackLayout } = opts;\n\n let isVertical = opts.orientation === 'vertical';\n const direction = isRTL() ? 'rtl' : undefined;\n\n let labelId = sliderIds.get(state);\n const { labelProps, fieldProps } = useLabel({\n ...opts,\n 'id': getSliderThumbId(state, index),\n 'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n });\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n let reverseX = isReversed || direction === 'rtl';\n let currentPosition = useRef<number>(null);\n let { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({ deltaX, deltaY }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(index) * size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n currentPosition.current += delta;\n stateRef.current.setThumbPercent(\n index,\n clamp(currentPosition.current / size, 0, 1)\n );\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n },\n });\n\n state.setThumbEditable(index, !isDisabled);\n\n const onAccessibilityAction = (event: any) => {\n const max = state.getThumbMinValue(index);\n const min = state.getThumbMaxValue(index);\n const value = state.getThumbValue(index);\n\n const incrementValue = Math.min(value + state.step ?? 1, max);\n const decrementValue = Math.max(value - state.step ?? 1, min);\n\n switch (event.nativeEvent.actionName) {\n case 'increment':\n state.setThumbValue(index, incrementValue);\n break;\n case 'decrement':\n state.setThumbValue(index, decrementValue);\n break;\n default:\n break;\n }\n };\n\n return {\n inputProps: {\n ...fieldProps,\n disabled: isDisabled,\n accessibilityRole: 'adjustable',\n accessibilityValue: {\n min: state.getThumbMinValue(index),\n max: state.getThumbMaxValue(index),\n now: state.getThumbValue(index),\n },\n accessibilityActions: [\n {\n name: 'increment',\n label: 'Increment',\n },\n {\n name: 'decrement',\n label: 'Decrement',\n },\n ],\n onAccessibilityAction,\n },\n thumbProps: !isDisabled ? moveProps : {},\n labelProps,\n };\n}\n"]}
|
@@ -25,7 +25,7 @@ var _utils3 = require("@react-native-aria/utils");
|
|
25
25
|
* @param opts Options for this Slider thumb.
|
26
26
|
* @param state Slider state, created via `useSliderState`.
|
27
27
|
*/
|
28
|
-
function useSliderThumb(opts, state) {
|
28
|
+
function useSliderThumb(opts, state, isReversed) {
|
29
29
|
var _opts$ariaLabelledby;
|
30
30
|
|
31
31
|
let {
|
@@ -66,7 +66,7 @@ function useSliderThumb(opts, state) {
|
|
66
66
|
}, [isFocused, focusInput]);
|
67
67
|
const stateRef = (0, _react.useRef)(null);
|
68
68
|
stateRef.current = state;
|
69
|
-
let reverseX = direction === 'rtl';
|
69
|
+
let reverseX = isReversed || direction === 'rtl';
|
70
70
|
let currentPosition = (0, _react.useRef)(null);
|
71
71
|
let {
|
72
72
|
moveProps
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSliderThumb.web.ts"],"names":["useSliderThumb","opts","state","index","isRequired","isDisabled","validationState","trackLayout","inputRef","isVertical","orientation","direction","undefined","addGlobalListener","removeGlobalListener","labelId","sliderIds","get","labelProps","fieldProps","trim","value","values","focusInput","current","isFocused","focusedThumb","stateRef","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","pointerType","size","height","width","getThumbPercent","delta","step","setThumbValue","getThumbValue","setThumbPercent","onMoveEnd","setThumbEditable","focusableProps","onFocus","setFocusedThumb","onBlur","currentPointer","onDown","id","window","onUp","e","pointerId","changedTouches","identifier","inputProps","getThumbMinValue","getThumbMaxValue","getThumbValueLabel","parseFloat","target","thumbProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","onTouchStart"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport {\n clamp,\n focusWithoutScrolling,\n mergeProps,\n useGlobalListeners,\n} from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, {\n ChangeEvent,\n HTMLAttributes,\n InputHTMLAttributes,\n LabelHTMLAttributes,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useFocusable } from '@react-aria/focus';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: HTMLAttributes<HTMLElement>;\n\n /** Props for the visually hidden range input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n\n /** Props for the label element for this thumb (optional). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackLayout: any;\n /** A ref to the thumb input element. */\n inputRef: RefObject<HTMLInputElement>;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: SliderThumbOptions,\n state: SliderState\n): SliderThumbAria {\n let {\n index,\n isRequired,\n isDisabled,\n validationState,\n trackLayout,\n inputRef,\n } = opts;\n\n let isVertical = opts.orientation === 'vertical';\n\n let direction = isRTL() ? 'rtl' : undefined;\n let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n let labelId = sliderIds.get(state);\n const { labelProps, fieldProps } = useLabel({\n ...opts,\n 'id': getSliderThumbId(state, index),\n 'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n });\n\n const value = state.values[index];\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n focusWithoutScrolling(inputRef.current);\n }\n }, [inputRef]);\n\n const isFocused = state.focusedThumb === index;\n\n useEffect(() => {\n if (isFocused) {\n focusInput();\n }\n }, [isFocused, focusInput]);\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n let reverseX = direction === 'rtl';\n let currentPosition = useRef<number>(null);\n let { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({ deltaX, deltaY, pointerType }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(index) * size;\n }\n if (pointerType === 'keyboard') {\n // (invert left/right according to language direction) + (according to vertical)\n let delta =\n ((reverseX ? -deltaX : deltaX) + (isVertical ? -deltaY : -deltaY)) *\n stateRef.current.step;\n currentPosition.current += delta * size;\n stateRef.current.setThumbValue(\n index,\n stateRef.current.getThumbValue(index) + delta\n );\n } else {\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n currentPosition.current += delta;\n stateRef.current.setThumbPercent(\n index,\n clamp(currentPosition.current / size, 0, 1)\n );\n }\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n },\n });\n\n // Immediately register editability with the state\n state.setThumbEditable(index, !isDisabled);\n\n const { focusableProps } = useFocusable(\n mergeProps(opts, {\n onFocus: () => state.setFocusedThumb(index),\n onBlur: () => state.setFocusedThumb(undefined),\n }),\n inputRef\n );\n\n let currentPointer = useRef<number | undefined>(undefined);\n let onDown = (id?: number) => {\n focusInput();\n currentPointer.current = id;\n state.setThumbDragging(index, true);\n\n addGlobalListener(window, 'mouseup', onUp, false);\n addGlobalListener(window, 'touchend', onUp, false);\n addGlobalListener(window, 'pointerup', onUp, false);\n };\n\n let onUp = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n focusInput();\n state.setThumbDragging(index, false);\n removeGlobalListener(window, 'mouseup', onUp, false);\n removeGlobalListener(window, 'touchend', onUp, false);\n removeGlobalListener(window, 'pointerup', onUp, false);\n }\n };\n\n // We install mouse handlers for the drag motion on the thumb div, but\n // not the key handler for moving the thumb with the slider. Instead,\n // we focus the range input, and let the browser handle the keyboard\n // interactions; we then listen to input's onChange to update state.\n return {\n inputProps: mergeProps(focusableProps, fieldProps, {\n 'type': 'range',\n 'tabIndex': !isDisabled ? 0 : undefined,\n 'min': state.getThumbMinValue(index),\n 'max': state.getThumbMaxValue(index),\n 'step': state.step,\n 'value': value,\n 'disabled': isDisabled,\n 'aria-orientation': opts.orientation,\n 'aria-valuetext': state.getThumbValueLabel(index),\n 'aria-required': isRequired || undefined,\n 'aria-invalid': validationState === 'invalid' || undefined,\n 'aria-errormessage': opts['aria-errormessage'],\n 'onChange': (e: ChangeEvent<HTMLInputElement>) => {\n state.setThumbValue(index, parseFloat(e.target.value));\n },\n }),\n thumbProps: !isDisabled\n ? mergeProps(moveProps, {\n onMouseDown: (e: React.MouseEvent<HTMLElement>) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown();\n },\n onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown(e.pointerId);\n },\n onTouchStart: (e: React.TouchEvent<HTMLElement>) => {\n onDown(e.changedTouches[0].identifier);\n },\n })\n : {},\n labelProps,\n };\n}\n"]}
|
1
|
+
{"version":3,"sources":["useSliderThumb.web.ts"],"names":["useSliderThumb","opts","state","isReversed","index","isRequired","isDisabled","validationState","trackLayout","inputRef","isVertical","orientation","direction","undefined","addGlobalListener","removeGlobalListener","labelId","sliderIds","get","labelProps","fieldProps","trim","value","values","focusInput","current","isFocused","focusedThumb","stateRef","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","pointerType","size","height","width","getThumbPercent","delta","step","setThumbValue","getThumbValue","setThumbPercent","onMoveEnd","setThumbEditable","focusableProps","onFocus","setFocusedThumb","onBlur","currentPointer","onDown","id","window","onUp","e","pointerId","changedTouches","identifier","inputProps","getThumbMinValue","getThumbMaxValue","getThumbValueLabel","parseFloat","target","thumbProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","onTouchStart"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport {\n clamp,\n focusWithoutScrolling,\n mergeProps,\n useGlobalListeners,\n} from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, {\n ChangeEvent,\n HTMLAttributes,\n InputHTMLAttributes,\n LabelHTMLAttributes,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useFocusable } from '@react-aria/focus';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: HTMLAttributes<HTMLElement>;\n\n /** Props for the visually hidden range input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n\n /** Props for the label element for this thumb (optional). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackLayout: any;\n /** A ref to the thumb input element. */\n inputRef: RefObject<HTMLInputElement>;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: SliderThumbOptions,\n state: SliderState,\n isReversed?: boolean\n): SliderThumbAria {\n let {\n index,\n isRequired,\n isDisabled,\n validationState,\n trackLayout,\n inputRef,\n } = opts;\n\n let isVertical = opts.orientation === 'vertical';\n\n let direction = isRTL() ? 'rtl' : undefined;\n let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n let labelId = sliderIds.get(state);\n const { labelProps, fieldProps } = useLabel({\n ...opts,\n 'id': getSliderThumbId(state, index),\n 'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n });\n\n const value = state.values[index];\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n focusWithoutScrolling(inputRef.current);\n }\n }, [inputRef]);\n\n const isFocused = state.focusedThumb === index;\n\n useEffect(() => {\n if (isFocused) {\n focusInput();\n }\n }, [isFocused, focusInput]);\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n let reverseX = isReversed || direction === 'rtl';\n let currentPosition = useRef<number>(null);\n let { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({ deltaX, deltaY, pointerType }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(index) * size;\n }\n if (pointerType === 'keyboard') {\n // (invert left/right according to language direction) + (according to vertical)\n let delta =\n ((reverseX ? -deltaX : deltaX) + (isVertical ? -deltaY : -deltaY)) *\n stateRef.current.step;\n currentPosition.current += delta * size;\n stateRef.current.setThumbValue(\n index,\n stateRef.current.getThumbValue(index) + delta\n );\n } else {\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n currentPosition.current += delta;\n stateRef.current.setThumbPercent(\n index,\n clamp(currentPosition.current / size, 0, 1)\n );\n }\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n },\n });\n\n // Immediately register editability with the state\n state.setThumbEditable(index, !isDisabled);\n\n const { focusableProps } = useFocusable(\n mergeProps(opts, {\n onFocus: () => state.setFocusedThumb(index),\n onBlur: () => state.setFocusedThumb(undefined),\n }),\n inputRef\n );\n\n let currentPointer = useRef<number | undefined>(undefined);\n let onDown = (id?: number) => {\n focusInput();\n currentPointer.current = id;\n state.setThumbDragging(index, true);\n\n addGlobalListener(window, 'mouseup', onUp, false);\n addGlobalListener(window, 'touchend', onUp, false);\n addGlobalListener(window, 'pointerup', onUp, false);\n };\n\n let onUp = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n focusInput();\n state.setThumbDragging(index, false);\n removeGlobalListener(window, 'mouseup', onUp, false);\n removeGlobalListener(window, 'touchend', onUp, false);\n removeGlobalListener(window, 'pointerup', onUp, false);\n }\n };\n\n // We install mouse handlers for the drag motion on the thumb div, but\n // not the key handler for moving the thumb with the slider. Instead,\n // we focus the range input, and let the browser handle the keyboard\n // interactions; we then listen to input's onChange to update state.\n return {\n inputProps: mergeProps(focusableProps, fieldProps, {\n 'type': 'range',\n 'tabIndex': !isDisabled ? 0 : undefined,\n 'min': state.getThumbMinValue(index),\n 'max': state.getThumbMaxValue(index),\n 'step': state.step,\n 'value': value,\n 'disabled': isDisabled,\n 'aria-orientation': opts.orientation,\n 'aria-valuetext': state.getThumbValueLabel(index),\n 'aria-required': isRequired || undefined,\n 'aria-invalid': validationState === 'invalid' || undefined,\n 'aria-errormessage': opts['aria-errormessage'],\n 'onChange': (e: ChangeEvent<HTMLInputElement>) => {\n state.setThumbValue(index, parseFloat(e.target.value));\n },\n }),\n thumbProps: !isDisabled\n ? mergeProps(moveProps, {\n onMouseDown: (e: React.MouseEvent<HTMLElement>) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown();\n },\n onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown(e.pointerId);\n },\n onTouchStart: (e: React.TouchEvent<HTMLElement>) => {\n onDown(e.changedTouches[0].identifier);\n },\n })\n : {},\n labelProps,\n };\n}\n"]}
|
package/lib/module/useSlider.js
CHANGED
@@ -13,7 +13,7 @@ import { isRTL } from '@react-native-aria/utils';
|
|
13
13
|
* accepts click and drag motions, so that the closest thumb will follow clicks and drags on
|
14
14
|
* the track.
|
15
15
|
*/
|
16
|
-
export function useSlider(props, state, trackLayout) {
|
16
|
+
export function useSlider(props, state, trackLayout, isReversed) {
|
17
17
|
var _labelProps$id;
|
18
18
|
|
19
19
|
let {
|
@@ -26,6 +26,7 @@ export function useSlider(props, state, trackLayout) {
|
|
26
26
|
|
27
27
|
let onDownTrack = (e, id, clientX, clientY) => {
|
28
28
|
const direction = isRTL() ? 'rtl' : undefined;
|
29
|
+
const reverseX = isReversed || direction === 'rtl';
|
29
30
|
|
30
31
|
if (!props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {
|
31
32
|
let size = isVertical ? trackLayout.height : trackLayout.width; // Find the closest thumb
|
@@ -35,7 +36,7 @@ export function useSlider(props, state, trackLayout) {
|
|
35
36
|
const offset = clickPosition - trackPosition;
|
36
37
|
let percent = offset / size;
|
37
38
|
|
38
|
-
if (
|
39
|
+
if (reverseX || isVertical) {
|
39
40
|
percent = 1 - percent;
|
40
41
|
}
|
41
42
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSlider.ts"],"names":["sliderIds","useRef","useLabel","isRTL","useSlider","props","state","trackLayout","labelProps","fieldProps","isVertical","orientation","set","id","currentPointer","undefined","onDownTrack","e","clientX","clientY","direction","isDisabled","values","every","_","i","isThumbDragging","size","height","width","trackPosition","clickPosition","offset","percent","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","current","setThumbDragging","setThumbValue","groupProps","trackProps","onPress","locationX","locationY","nativeEvent","outputProps"],"mappings":"AAAA,SAASA,SAAT,QAA0B,SAA1B;AAEA,SAAgBC,MAAhB,QAA8B,OAA9B;AAEA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,KAAT,QAAsB,0BAAtB;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAAT,CACLC,KADK,EAELC,KAFK,EAGLC,WAHK,
|
1
|
+
{"version":3,"sources":["useSlider.ts"],"names":["sliderIds","useRef","useLabel","isRTL","useSlider","props","state","trackLayout","isReversed","labelProps","fieldProps","isVertical","orientation","set","id","currentPointer","undefined","onDownTrack","e","clientX","clientY","direction","reverseX","isDisabled","values","every","_","i","isThumbDragging","size","height","width","trackPosition","clickPosition","offset","percent","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","current","setThumbDragging","setThumbValue","groupProps","trackProps","onPress","locationX","locationY","nativeEvent","outputProps"],"mappings":"AAAA,SAASA,SAAT,QAA0B,SAA1B;AAEA,SAAgBC,MAAhB,QAA8B,OAA9B;AAEA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,KAAT,QAAsB,0BAAtB;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAAT,CACLC,KADK,EAELC,KAFK,EAGLC,WAHK,EAILC,UAJK,EAKO;AAAA;;AACZ,MAAI;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6BR,QAAQ,CAACG,KAAD,CAAzC;AAEA,MAAIM,UAAU,GAAGN,KAAK,CAACO,WAAN,KAAsB,UAAvC;AAEAZ,EAAAA,SAAS,CAACa,GAAV,CAAcP,KAAd,oBAAqBG,UAAU,CAACK,EAAhC,2DAAsCJ,UAAU,CAACI,EAAjD;AACA,MAAIC,cAAc,GAAGd,MAAM,CAA4Be,SAA5B,CAA3B;;AAEA,MAAIC,WAAW,GAAG,CAChBC,CADgB,EAEhBJ,EAFgB,EAGhBK,OAHgB,EAIhBC,OAJgB,KAKb;AACH,UAAMC,SAAS,GAAGlB,KAAK,KAAK,KAAL,GAAaa,SAApC;AACA,UAAMM,QAAQ,GAAGd,UAAU,IAAIa,SAAS,KAAK,KAA7C;;AACA,QACE,CAAChB,KAAK,CAACkB,UAAP,IACAjB,KAAK,CAACkB,MAAN,CAAaC,KAAb,CAAmB,CAACC,CAAD,EAAIC,CAAJ,KAAU,CAACrB,KAAK,CAACsB,eAAN,CAAsBD,CAAtB,CAA9B,CAFF,EAGE;AACA,UAAIE,IAAI,GAAGlB,UAAU,GAAGJ,WAAW,CAACuB,MAAf,GAAwBvB,WAAW,CAACwB,KAAzD,CADA,CAEA;;AACA,YAAMC,aAAa,GAAGzB,WAAW,CAACI,UAAU,GAAG,GAAH,GAAS,GAApB,CAAjC;AACA,YAAMsB,aAAa,GAAGtB,UAAU,GAAGS,OAAH,GAAaD,OAA7C;AACA,YAAMe,MAAM,GAAGD,aAAa,GAAGD,aAA/B;AACA,UAAIG,OAAO,GAAGD,MAAM,GAAGL,IAAvB;;AACA,UAAIP,QAAQ,IAAIX,UAAhB,EAA4B;AAC1BwB,QAAAA,OAAO,GAAG,IAAIA,OAAd;AACD;;AACD,UAAIC,KAAK,GAAG9B,KAAK,CAAC+B,eAAN,CAAsBF,OAAtB,CAAZ,CAVA,CAWA;;AACA,UAAIG,YAAJ;AACA,UAAIC,KAAK,GAAGjC,KAAK,CAACkB,MAAN,CAAagB,SAAb,CAAwBC,CAAD,IAAOL,KAAK,GAAGK,CAAR,GAAY,CAA1C,CAAZ;;AACA,UAAIF,KAAK,KAAK,CAAd,EAAiB;AACf;AACAD,QAAAA,YAAY,GAAGC,KAAf;AACD,OAHD,MAGO,IAAIA,KAAK,KAAK,CAAC,CAAf,EAAkB;AACvB;AACAD,QAAAA,YAAY,GAAGhC,KAAK,CAACkB,MAAN,CAAakB,MAAb,GAAsB,CAArC;AACD,OAHM,MAGA;AACL,YAAIC,QAAQ,GAAGrC,KAAK,CAACkB,MAAN,CAAae,KAAK,GAAG,CAArB,CAAf;AACA,YAAIK,UAAU,GAAGtC,KAAK,CAACkB,MAAN,CAAae,KAAb,CAAjB,CAFK,CAGL;;AACA,YAAIM,IAAI,CAACC,GAAL,CAASH,QAAQ,GAAGP,KAApB,IAA6BS,IAAI,CAACC,GAAL,CAASF,UAAU,GAAGR,KAAtB,CAAjC,EAA+D;AAC7DE,UAAAA,YAAY,GAAGC,KAAK,GAAG,CAAvB;AACD,SAFD,MAEO;AACLD,UAAAA,YAAY,GAAGC,KAAf;AACD;AACF,OA7BD,CA8BA;;;AACA,UAAID,YAAY,IAAI,CAAhB,IAAqBhC,KAAK,CAACyC,eAAN,CAAsBT,YAAtB,CAAzB,EAA8D;AAC5D;AACApB,QAAAA,CAAC,CAAC8B,cAAF;AACA1C,QAAAA,KAAK,CAAC2C,eAAN,CAAsBX,YAAtB;AACAvB,QAAAA,cAAc,CAACmC,OAAf,GAAyBpC,EAAzB;AACAR,QAAAA,KAAK,CAAC6C,gBAAN,CAAuBb,YAAvB,EAAqC,IAArC;AACAhC,QAAAA,KAAK,CAAC8C,aAAN,CAAoBd,YAApB,EAAkCF,KAAlC;AACA9B,QAAAA,KAAK,CAAC6C,gBAAN,CAAuBb,YAAvB,EAAqC,KAArC;AACD;AACF;AACF,GApDD;;AAsDA,SAAO;AACL7B,IAAAA,UADK;AAEL4C,IAAAA,UAAU,EAAE,EAFP;AAGLC,IAAAA,UAAU,EAAE;AACVC,MAAAA,OAAO,EAAGrC,CAAD,IAAY;AACnB,cAAM;AAAEsC,UAAAA,SAAF;AAAaC,UAAAA;AAAb,YAA2BvC,CAAC,CAACwC,WAAnC;AACAzC,QAAAA,WAAW,CAACC,CAAD,EAAIF,SAAJ,EAAewC,SAAf,EAA0BC,SAA1B,CAAX;AACD;AAJS,KAHP;AASLE,IAAAA,WAAW,EAAE;AATR,GAAP;AAWD","sourcesContent":["import { sliderIds } from './utils';\nimport { AriaSliderProps } from '@react-types/slider';\nimport React, { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderAria {\n /** Props for the label element. */\n labelProps: any;\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: any;\n\n /** Props for the track element. */\n trackProps: any;\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element. The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be. It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider(\n props: AriaSliderProps,\n state: SliderState,\n trackLayout: any,\n isReversed?: boolean\n): SliderAria {\n let { labelProps, fieldProps } = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n sliderIds.set(state, labelProps.id ?? fieldProps.id);\n let currentPointer = useRef<number | null | undefined>(undefined);\n\n let onDownTrack = (\n e: React.UIEvent,\n id: number,\n clientX: number,\n clientY: number\n ) => {\n const direction = isRTL() ? 'rtl' : undefined;\n const reverseX = isReversed || direction === 'rtl';\n if (\n !props.isDisabled &&\n state.values.every((_, i) => !state.isThumbDragging(i))\n ) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n // Find the closest thumb\n const trackPosition = trackLayout[isVertical ? 'y' : 'x'];\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (reverseX || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex((v) => value - v < 0);\n if (split === 0) {\n // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) {\n // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n state.setThumbDragging(closestThumb, true);\n state.setThumbValue(closestThumb, value);\n state.setThumbDragging(closestThumb, false);\n }\n }\n };\n\n return {\n labelProps,\n groupProps: {},\n trackProps: {\n onPress: (e: any) => {\n const { locationX, locationY } = e.nativeEvent;\n onDownTrack(e, undefined, locationX, locationY);\n },\n },\n outputProps: {},\n };\n}\n"]}
|
@@ -6,7 +6,7 @@ import { useLabel } from '@react-aria/label';
|
|
6
6
|
import { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';
|
7
7
|
import { useMove } from './useMove';
|
8
8
|
|
9
|
-
function useSliderWeb(props, state, trackLayout) {
|
9
|
+
function useSliderWeb(props, state, trackLayout, isReversed) {
|
10
10
|
var _labelProps$id;
|
11
11
|
|
12
12
|
let {
|
@@ -28,7 +28,7 @@ function useSliderWeb(props, state, trackLayout) {
|
|
28
28
|
const realTimeTrackDraggingIndex = useRef(null);
|
29
29
|
const stateRef = useRef(null);
|
30
30
|
stateRef.current = state;
|
31
|
-
const reverseX = direction === 'rtl';
|
31
|
+
const reverseX = isReversed || direction === 'rtl';
|
32
32
|
const currentPosition = useRef(null);
|
33
33
|
const {
|
34
34
|
moveProps
|
@@ -81,7 +81,7 @@ function useSliderWeb(props, state, trackLayout) {
|
|
81
81
|
const offset = clickPosition - trackPosition;
|
82
82
|
let percent = offset / size;
|
83
83
|
|
84
|
-
if (
|
84
|
+
if (reverseX || isVertical) {
|
85
85
|
percent = 1 - percent;
|
86
86
|
}
|
87
87
|
|
@@ -197,11 +197,11 @@ function useSliderWeb(props, state, trackLayout) {
|
|
197
197
|
};
|
198
198
|
}
|
199
199
|
|
200
|
-
export const useSlider = (props, state, ref) => {
|
200
|
+
export const useSlider = (props, state, ref, isReversed) => {
|
201
201
|
let {
|
202
202
|
groupProps: webGroupProps,
|
203
203
|
...rest
|
204
|
-
} = useSliderWeb(props, state, ref);
|
204
|
+
} = useSliderWeb(props, state, ref, isReversed);
|
205
205
|
let groupProps = mapDomPropsToRN(webGroupProps);
|
206
206
|
let labelProps = mapDomPropsToRN(rest.labelProps);
|
207
207
|
return {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSlider.web.ts"],"names":["clamp","mergeProps","useGlobalListeners","getSliderThumbId","sliderIds","useRef","setInteractionModality","useLabel","mapDomPropsToRN","isRTL","useMove","useSliderWeb","props","state","trackLayout","labelProps","fieldProps","isVertical","orientation","set","id","direction","undefined","addGlobalListener","removeGlobalListener","realTimeTrackDraggingIndex","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","percent","setThumbPercent","onMoveEnd","setThumbDragging","currentPointer","onDownTrack","e","clientX","clientY","isDisabled","values","every","_","i","isThumbDragging","trackPosition","clickPosition","offset","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","setThumbValue","window","onUpTrack","pointerId","changedTouches","identifier","htmlFor","onClick","document","getElementById","focus","groupProps","role","trackProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","pointerType","onTouchStart","outputProps","map","index","join","useSlider","ref","webGroupProps","rest"],"mappings":"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","sourcesContent":["import { AriaSliderProps } from '@react-types/slider';\nimport { clamp, mergeProps, useGlobalListeners } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, { useRef } from 'react';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';\nimport { useMove } from './useMove';\n\ninterface SliderAria {\n /** Props for the label element. */\n labelProps: any;\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: any;\n\n /** Props for the track element. */\n trackProps: any;\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: any;\n}\n\nfunction useSliderWeb(\n props: AriaSliderProps,\n state: SliderState,\n trackLayout: {\n height: number;\n width: number;\n top: number;\n left: number;\n x: number;\n y: number;\n }\n): SliderAria {\n let { labelProps, fieldProps } = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n // Attach id of the label to the state so it can be accessed by useSliderThumb.\n sliderIds.set(state, labelProps.id ?? fieldProps.id);\n\n const direction = isRTL() ? 'rtl' : undefined;\n\n let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n // When the user clicks or drags the track, we want the motion to set and drag the\n // closest thumb. Hence we also need to install useMove() on the track element.\n // Here, we keep track of which index is the \"closest\" to the drag start point.\n // It is set onMouseDown/onTouchDown; see trackProps below.\n const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n const reverseX = direction === 'rtl';\n const currentPosition = useRef<number>(null);\n const { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n },\n onMove({ deltaX, deltaY }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(realTimeTrackDraggingIndex.current) *\n size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n\n if (realTimeTrackDraggingIndex.current != null) {\n const percent = clamp(currentPosition.current / size, 0, 1);\n stateRef.current.setThumbPercent(\n realTimeTrackDraggingIndex.current,\n percent\n );\n }\n },\n onMoveEnd() {\n if (realTimeTrackDraggingIndex.current != null) {\n stateRef.current.setThumbDragging(\n realTimeTrackDraggingIndex.current,\n false\n );\n realTimeTrackDraggingIndex.current = null;\n }\n },\n });\n\n let currentPointer = useRef<number | null | undefined>(undefined);\n let onDownTrack = (\n e: React.UIEvent,\n id: number,\n clientX: number,\n clientY: number\n ) => {\n // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n if (\n !props.isDisabled &&\n state.values.every((_, i) => !state.isThumbDragging(i))\n ) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n // Find the closest thumb\n const trackPosition = trackLayout[isVertical ? 'top' : 'left'];\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (direction === 'rtl' || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex((v) => value - v < 0);\n if (split === 0) {\n // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) {\n // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n\n realTimeTrackDraggingIndex.current = closestThumb;\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n\n state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n state.setThumbValue(closestThumb, value);\n\n addGlobalListener(window, 'mouseup', onUpTrack, false);\n addGlobalListener(window, 'touchend', onUpTrack, false);\n addGlobalListener(window, 'pointerup', onUpTrack, false);\n } else {\n realTimeTrackDraggingIndex.current = null;\n }\n }\n };\n\n let onUpTrack = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n\n removeGlobalListener(window, 'mouseup', onUpTrack, false);\n removeGlobalListener(window, 'touchend', onUpTrack, false);\n removeGlobalListener(window, 'pointerup', onUpTrack, false);\n }\n };\n\n if (labelProps.htmlFor) {\n // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n // causes this to override the `aria-labelledby` on the thumb. This causes the first\n // thumb to only be announced as the slider label rather than its individual name as well.\n // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n delete labelProps.htmlFor;\n labelProps.onClick = () => {\n // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n // so do it manually. In addition, make sure we show the focus ring.\n document.getElementById(getSliderThumbId(state, 0))?.focus();\n setInteractionModality('keyboard');\n };\n }\n\n return {\n labelProps,\n // The root element of the Slider will have role=\"group\" to group together\n // all the thumb inputs in the Slider. The label of the Slider will\n // be used to label the group.\n groupProps: {\n role: 'group',\n ...fieldProps,\n },\n trackProps: mergeProps(\n {\n onMouseDown(e: React.MouseEvent<HTMLElement>) {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDownTrack(e, undefined, e.clientX, e.clientY);\n },\n onPointerDown(e: React.PointerEvent<HTMLElement>) {\n if (\n e.pointerType === 'mouse' &&\n (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n ) {\n return;\n }\n onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n },\n onTouchStart(e: React.TouchEvent<HTMLElement>) {\n onDownTrack(\n e,\n e.changedTouches[0].identifier,\n e.changedTouches[0].clientX,\n e.changedTouches[0].clientY\n );\n },\n },\n moveProps\n ),\n outputProps: {\n 'htmlFor': state.values\n .map((_, index) => getSliderThumbId(state, index))\n .join(' '),\n 'aria-live': 'off',\n },\n };\n}\n\nexport const useSlider = (props: any, state: any, ref: any) => {\n let { groupProps: webGroupProps, ...rest } = useSliderWeb(props, state, ref);\n let groupProps = mapDomPropsToRN(webGroupProps);\n let labelProps = mapDomPropsToRN(rest.labelProps);\n return { groupProps, ...rest, labelProps };\n};\n"]}
|
1
|
+
{"version":3,"sources":["useSlider.web.ts"],"names":["clamp","mergeProps","useGlobalListeners","getSliderThumbId","sliderIds","useRef","setInteractionModality","useLabel","mapDomPropsToRN","isRTL","useMove","useSliderWeb","props","state","trackLayout","isReversed","labelProps","fieldProps","isVertical","orientation","set","id","direction","undefined","addGlobalListener","removeGlobalListener","realTimeTrackDraggingIndex","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","percent","setThumbPercent","onMoveEnd","setThumbDragging","currentPointer","onDownTrack","e","clientX","clientY","isDisabled","values","every","_","i","isThumbDragging","trackPosition","clickPosition","offset","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","setThumbValue","window","onUpTrack","pointerId","changedTouches","identifier","htmlFor","onClick","document","getElementById","focus","groupProps","role","trackProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","pointerType","onTouchStart","outputProps","map","index","join","useSlider","ref","webGroupProps","rest"],"mappings":"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","sourcesContent":["import { AriaSliderProps } from '@react-types/slider';\nimport { clamp, mergeProps, useGlobalListeners } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, { useRef } from 'react';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';\nimport { useMove } from './useMove';\n\ninterface SliderAria {\n /** Props for the label element. */\n labelProps: any;\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: any;\n\n /** Props for the track element. */\n trackProps: any;\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: any;\n}\n\nfunction useSliderWeb(\n props: AriaSliderProps,\n state: SliderState,\n trackLayout: {\n height: number;\n width: number;\n top: number;\n left: number;\n x: number;\n y: number;\n },\n isReversed?: boolean\n): SliderAria {\n let { labelProps, fieldProps } = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n // Attach id of the label to the state so it can be accessed by useSliderThumb.\n sliderIds.set(state, labelProps.id ?? fieldProps.id);\n\n const direction = isRTL() ? 'rtl' : undefined;\n\n let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n // When the user clicks or drags the track, we want the motion to set and drag the\n // closest thumb. Hence we also need to install useMove() on the track element.\n // Here, we keep track of which index is the \"closest\" to the drag start point.\n // It is set onMouseDown/onTouchDown; see trackProps below.\n const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n const reverseX = isReversed || direction === 'rtl';\n\n const currentPosition = useRef<number>(null);\n const { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n },\n onMove({ deltaX, deltaY }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(realTimeTrackDraggingIndex.current) *\n size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n\n if (realTimeTrackDraggingIndex.current != null) {\n const percent = clamp(currentPosition.current / size, 0, 1);\n stateRef.current.setThumbPercent(\n realTimeTrackDraggingIndex.current,\n percent\n );\n }\n },\n onMoveEnd() {\n if (realTimeTrackDraggingIndex.current != null) {\n stateRef.current.setThumbDragging(\n realTimeTrackDraggingIndex.current,\n false\n );\n realTimeTrackDraggingIndex.current = null;\n }\n },\n });\n\n let currentPointer = useRef<number | null | undefined>(undefined);\n let onDownTrack = (\n e: React.UIEvent,\n id: number,\n clientX: number,\n clientY: number\n ) => {\n // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n if (\n !props.isDisabled &&\n state.values.every((_, i) => !state.isThumbDragging(i))\n ) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n // Find the closest thumb\n const trackPosition = trackLayout[isVertical ? 'top' : 'left'];\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (reverseX || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex((v) => value - v < 0);\n if (split === 0) {\n // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) {\n // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n\n realTimeTrackDraggingIndex.current = closestThumb;\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n\n state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n state.setThumbValue(closestThumb, value);\n\n addGlobalListener(window, 'mouseup', onUpTrack, false);\n addGlobalListener(window, 'touchend', onUpTrack, false);\n addGlobalListener(window, 'pointerup', onUpTrack, false);\n } else {\n realTimeTrackDraggingIndex.current = null;\n }\n }\n };\n\n let onUpTrack = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n\n removeGlobalListener(window, 'mouseup', onUpTrack, false);\n removeGlobalListener(window, 'touchend', onUpTrack, false);\n removeGlobalListener(window, 'pointerup', onUpTrack, false);\n }\n };\n\n if (labelProps.htmlFor) {\n // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n // causes this to override the `aria-labelledby` on the thumb. This causes the first\n // thumb to only be announced as the slider label rather than its individual name as well.\n // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n delete labelProps.htmlFor;\n labelProps.onClick = () => {\n // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n // so do it manually. In addition, make sure we show the focus ring.\n document.getElementById(getSliderThumbId(state, 0))?.focus();\n setInteractionModality('keyboard');\n };\n }\n\n return {\n labelProps,\n // The root element of the Slider will have role=\"group\" to group together\n // all the thumb inputs in the Slider. The label of the Slider will\n // be used to label the group.\n groupProps: {\n role: 'group',\n ...fieldProps,\n },\n trackProps: mergeProps(\n {\n onMouseDown(e: React.MouseEvent<HTMLElement>) {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDownTrack(e, undefined, e.clientX, e.clientY);\n },\n onPointerDown(e: React.PointerEvent<HTMLElement>) {\n if (\n e.pointerType === 'mouse' &&\n (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n ) {\n return;\n }\n onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n },\n onTouchStart(e: React.TouchEvent<HTMLElement>) {\n onDownTrack(\n e,\n e.changedTouches[0].identifier,\n e.changedTouches[0].clientX,\n e.changedTouches[0].clientY\n );\n },\n },\n moveProps\n ),\n outputProps: {\n 'htmlFor': state.values\n .map((_, index) => getSliderThumbId(state, index))\n .join(' '),\n 'aria-live': 'off',\n },\n };\n}\n\nexport const useSlider = (\n props: any,\n state: any,\n ref: any,\n isReversed?: boolean\n) => {\n let { groupProps: webGroupProps, ...rest } = useSliderWeb(\n props,\n state,\n ref,\n isReversed\n );\n let groupProps = mapDomPropsToRN(webGroupProps);\n let labelProps = mapDomPropsToRN(rest.labelProps);\n return { groupProps, ...rest, labelProps };\n};\n"]}
|
@@ -11,7 +11,7 @@ import { isRTL } from '@react-native-aria/utils';
|
|
11
11
|
* @param opts Options for this Slider thumb.
|
12
12
|
* @param state Slider state, created via `useSliderState`.
|
13
13
|
*/
|
14
|
-
export function useSliderThumb(opts, state) {
|
14
|
+
export function useSliderThumb(opts, state, isReversed) {
|
15
15
|
var _opts$ariaLabelledby;
|
16
16
|
|
17
17
|
let {
|
@@ -31,7 +31,7 @@ export function useSliderThumb(opts, state) {
|
|
31
31
|
});
|
32
32
|
const stateRef = useRef(null);
|
33
33
|
stateRef.current = state;
|
34
|
-
let reverseX = direction === 'rtl';
|
34
|
+
let reverseX = isReversed || direction === 'rtl';
|
35
35
|
let currentPosition = useRef(null);
|
36
36
|
let {
|
37
37
|
moveProps
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSliderThumb.ts"],"names":["clamp","getSliderThumbId","sliderIds","useRef","useLabel","useMove","isRTL","useSliderThumb","opts","state","index","isDisabled","trackLayout","isVertical","orientation","direction","undefined","labelId","get","labelProps","fieldProps","trim","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","disabled","accessibilityRole","accessibilityValue","now","accessibilityActions","name","label","thumbProps"],"mappings":"AACA,SAASA,KAAT,QAAsB,mBAAtB;AACA,SAASC,gBAAT,EAA2BC,SAA3B,QAA4C,SAA5C;AACA,SAASC,MAAT,QAAuB,OAAvB;AAEA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,OAAT,QAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;;AAoBA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAT,CACLC,IADK,EAELC,KAFK,
|
1
|
+
{"version":3,"sources":["useSliderThumb.ts"],"names":["clamp","getSliderThumbId","sliderIds","useRef","useLabel","useMove","isRTL","useSliderThumb","opts","state","isReversed","index","isDisabled","trackLayout","isVertical","orientation","direction","undefined","labelId","get","labelProps","fieldProps","trim","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","disabled","accessibilityRole","accessibilityValue","now","accessibilityActions","name","label","thumbProps"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport { clamp } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: any;\n\n /** Props for the visually hidden range input element. */\n inputProps: any;\n\n /** Props for the label element for this thumb (optional). */\n labelProps: any;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackLayout: any;\n /** A ref to the thumb input element. */\n inputRef: any;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: SliderThumbOptions,\n state: SliderState,\n isReversed?: boolean\n): SliderThumbAria {\n let { index, isDisabled, trackLayout } = opts;\n\n let isVertical = opts.orientation === 'vertical';\n const direction = isRTL() ? 'rtl' : undefined;\n\n let labelId = sliderIds.get(state);\n const { labelProps, fieldProps } = useLabel({\n ...opts,\n 'id': getSliderThumbId(state, index),\n 'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n });\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n let reverseX = isReversed || direction === 'rtl';\n let currentPosition = useRef<number>(null);\n let { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({ deltaX, deltaY }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(index) * size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n currentPosition.current += delta;\n stateRef.current.setThumbPercent(\n index,\n clamp(currentPosition.current / size, 0, 1)\n );\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n },\n });\n\n state.setThumbEditable(index, !isDisabled);\n\n const onAccessibilityAction = (event: any) => {\n const max = state.getThumbMinValue(index);\n const min = state.getThumbMaxValue(index);\n const value = state.getThumbValue(index);\n\n const incrementValue = Math.min(value + state.step ?? 1, max);\n const decrementValue = Math.max(value - state.step ?? 1, min);\n\n switch (event.nativeEvent.actionName) {\n case 'increment':\n state.setThumbValue(index, incrementValue);\n break;\n case 'decrement':\n state.setThumbValue(index, decrementValue);\n break;\n default:\n break;\n }\n };\n\n return {\n inputProps: {\n ...fieldProps,\n disabled: isDisabled,\n accessibilityRole: 'adjustable',\n accessibilityValue: {\n min: state.getThumbMinValue(index),\n max: state.getThumbMaxValue(index),\n now: state.getThumbValue(index),\n },\n accessibilityActions: [\n {\n name: 'increment',\n label: 'Increment',\n },\n {\n name: 'decrement',\n label: 'Decrement',\n },\n ],\n onAccessibilityAction,\n },\n thumbProps: !isDisabled ? moveProps : {},\n labelProps,\n };\n}\n"]}
|
@@ -12,7 +12,7 @@ import { isRTL } from '@react-native-aria/utils';
|
|
12
12
|
* @param opts Options for this Slider thumb.
|
13
13
|
* @param state Slider state, created via `useSliderState`.
|
14
14
|
*/
|
15
|
-
export function useSliderThumb(opts, state) {
|
15
|
+
export function useSliderThumb(opts, state, isReversed) {
|
16
16
|
var _opts$ariaLabelledby;
|
17
17
|
|
18
18
|
let {
|
@@ -51,7 +51,7 @@ export function useSliderThumb(opts, state) {
|
|
51
51
|
}, [isFocused, focusInput]);
|
52
52
|
const stateRef = useRef(null);
|
53
53
|
stateRef.current = state;
|
54
|
-
let reverseX = direction === 'rtl';
|
54
|
+
let reverseX = isReversed || direction === 'rtl';
|
55
55
|
let currentPosition = useRef(null);
|
56
56
|
let {
|
57
57
|
moveProps
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSliderThumb.web.ts"],"names":["clamp","focusWithoutScrolling","mergeProps","useGlobalListeners","getSliderThumbId","sliderIds","useCallback","useEffect","useRef","useFocusable","useLabel","useMove","isRTL","useSliderThumb","opts","state","index","isRequired","isDisabled","validationState","trackLayout","inputRef","isVertical","orientation","direction","undefined","addGlobalListener","removeGlobalListener","labelId","get","labelProps","fieldProps","trim","value","values","focusInput","current","isFocused","focusedThumb","stateRef","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","pointerType","size","height","width","getThumbPercent","delta","step","setThumbValue","getThumbValue","setThumbPercent","onMoveEnd","setThumbEditable","focusableProps","onFocus","setFocusedThumb","onBlur","currentPointer","onDown","id","window","onUp","e","pointerId","changedTouches","identifier","inputProps","getThumbMinValue","getThumbMaxValue","getThumbValueLabel","parseFloat","target","thumbProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","onTouchStart"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport {\n clamp,\n focusWithoutScrolling,\n mergeProps,\n useGlobalListeners,\n} from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, {\n ChangeEvent,\n HTMLAttributes,\n InputHTMLAttributes,\n LabelHTMLAttributes,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useFocusable } from '@react-aria/focus';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: HTMLAttributes<HTMLElement>;\n\n /** Props for the visually hidden range input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n\n /** Props for the label element for this thumb (optional). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackLayout: any;\n /** A ref to the thumb input element. */\n inputRef: RefObject<HTMLInputElement>;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: SliderThumbOptions,\n state: SliderState\n): SliderThumbAria {\n let {\n index,\n isRequired,\n isDisabled,\n validationState,\n trackLayout,\n inputRef,\n } = opts;\n\n let isVertical = opts.orientation === 'vertical';\n\n let direction = isRTL() ? 'rtl' : undefined;\n let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n let labelId = sliderIds.get(state);\n const { labelProps, fieldProps } = useLabel({\n ...opts,\n 'id': getSliderThumbId(state, index),\n 'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n });\n\n const value = state.values[index];\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n focusWithoutScrolling(inputRef.current);\n }\n }, [inputRef]);\n\n const isFocused = state.focusedThumb === index;\n\n useEffect(() => {\n if (isFocused) {\n focusInput();\n }\n }, [isFocused, focusInput]);\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n let reverseX = direction === 'rtl';\n let currentPosition = useRef<number>(null);\n let { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({ deltaX, deltaY, pointerType }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(index) * size;\n }\n if (pointerType === 'keyboard') {\n // (invert left/right according to language direction) + (according to vertical)\n let delta =\n ((reverseX ? -deltaX : deltaX) + (isVertical ? -deltaY : -deltaY)) *\n stateRef.current.step;\n currentPosition.current += delta * size;\n stateRef.current.setThumbValue(\n index,\n stateRef.current.getThumbValue(index) + delta\n );\n } else {\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n currentPosition.current += delta;\n stateRef.current.setThumbPercent(\n index,\n clamp(currentPosition.current / size, 0, 1)\n );\n }\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n },\n });\n\n // Immediately register editability with the state\n state.setThumbEditable(index, !isDisabled);\n\n const { focusableProps } = useFocusable(\n mergeProps(opts, {\n onFocus: () => state.setFocusedThumb(index),\n onBlur: () => state.setFocusedThumb(undefined),\n }),\n inputRef\n );\n\n let currentPointer = useRef<number | undefined>(undefined);\n let onDown = (id?: number) => {\n focusInput();\n currentPointer.current = id;\n state.setThumbDragging(index, true);\n\n addGlobalListener(window, 'mouseup', onUp, false);\n addGlobalListener(window, 'touchend', onUp, false);\n addGlobalListener(window, 'pointerup', onUp, false);\n };\n\n let onUp = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n focusInput();\n state.setThumbDragging(index, false);\n removeGlobalListener(window, 'mouseup', onUp, false);\n removeGlobalListener(window, 'touchend', onUp, false);\n removeGlobalListener(window, 'pointerup', onUp, false);\n }\n };\n\n // We install mouse handlers for the drag motion on the thumb div, but\n // not the key handler for moving the thumb with the slider. Instead,\n // we focus the range input, and let the browser handle the keyboard\n // interactions; we then listen to input's onChange to update state.\n return {\n inputProps: mergeProps(focusableProps, fieldProps, {\n 'type': 'range',\n 'tabIndex': !isDisabled ? 0 : undefined,\n 'min': state.getThumbMinValue(index),\n 'max': state.getThumbMaxValue(index),\n 'step': state.step,\n 'value': value,\n 'disabled': isDisabled,\n 'aria-orientation': opts.orientation,\n 'aria-valuetext': state.getThumbValueLabel(index),\n 'aria-required': isRequired || undefined,\n 'aria-invalid': validationState === 'invalid' || undefined,\n 'aria-errormessage': opts['aria-errormessage'],\n 'onChange': (e: ChangeEvent<HTMLInputElement>) => {\n state.setThumbValue(index, parseFloat(e.target.value));\n },\n }),\n thumbProps: !isDisabled\n ? mergeProps(moveProps, {\n onMouseDown: (e: React.MouseEvent<HTMLElement>) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown();\n },\n onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown(e.pointerId);\n },\n onTouchStart: (e: React.TouchEvent<HTMLElement>) => {\n onDown(e.changedTouches[0].identifier);\n },\n })\n : {},\n labelProps,\n };\n}\n"]}
|
1
|
+
{"version":3,"sources":["useSliderThumb.web.ts"],"names":["clamp","focusWithoutScrolling","mergeProps","useGlobalListeners","getSliderThumbId","sliderIds","useCallback","useEffect","useRef","useFocusable","useLabel","useMove","isRTL","useSliderThumb","opts","state","isReversed","index","isRequired","isDisabled","validationState","trackLayout","inputRef","isVertical","orientation","direction","undefined","addGlobalListener","removeGlobalListener","labelId","get","labelProps","fieldProps","trim","value","values","focusInput","current","isFocused","focusedThumb","stateRef","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","pointerType","size","height","width","getThumbPercent","delta","step","setThumbValue","getThumbValue","setThumbPercent","onMoveEnd","setThumbEditable","focusableProps","onFocus","setFocusedThumb","onBlur","currentPointer","onDown","id","window","onUp","e","pointerId","changedTouches","identifier","inputProps","getThumbMinValue","getThumbMaxValue","getThumbValueLabel","parseFloat","target","thumbProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","onTouchStart"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport {\n clamp,\n focusWithoutScrolling,\n mergeProps,\n useGlobalListeners,\n} from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, {\n ChangeEvent,\n HTMLAttributes,\n InputHTMLAttributes,\n LabelHTMLAttributes,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useFocusable } from '@react-aria/focus';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: HTMLAttributes<HTMLElement>;\n\n /** Props for the visually hidden range input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>;\n\n /** Props for the label element for this thumb (optional). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackLayout: any;\n /** A ref to the thumb input element. */\n inputRef: RefObject<HTMLInputElement>;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: SliderThumbOptions,\n state: SliderState,\n isReversed?: boolean\n): SliderThumbAria {\n let {\n index,\n isRequired,\n isDisabled,\n validationState,\n trackLayout,\n inputRef,\n } = opts;\n\n let isVertical = opts.orientation === 'vertical';\n\n let direction = isRTL() ? 'rtl' : undefined;\n let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n let labelId = sliderIds.get(state);\n const { labelProps, fieldProps } = useLabel({\n ...opts,\n 'id': getSliderThumbId(state, index),\n 'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n });\n\n const value = state.values[index];\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n focusWithoutScrolling(inputRef.current);\n }\n }, [inputRef]);\n\n const isFocused = state.focusedThumb === index;\n\n useEffect(() => {\n if (isFocused) {\n focusInput();\n }\n }, [isFocused, focusInput]);\n\n const stateRef = useRef<SliderState>(null);\n stateRef.current = state;\n let reverseX = isReversed || direction === 'rtl';\n let currentPosition = useRef<number>(null);\n let { moveProps } = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({ deltaX, deltaY, pointerType }) {\n let size = isVertical ? trackLayout.height : trackLayout.width;\n\n if (currentPosition.current == null) {\n currentPosition.current =\n stateRef.current.getThumbPercent(index) * size;\n }\n if (pointerType === 'keyboard') {\n // (invert left/right according to language direction) + (according to vertical)\n let delta =\n ((reverseX ? -deltaX : deltaX) + (isVertical ? -deltaY : -deltaY)) *\n stateRef.current.step;\n currentPosition.current += delta * size;\n stateRef.current.setThumbValue(\n index,\n stateRef.current.getThumbValue(index) + delta\n );\n } else {\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n currentPosition.current += delta;\n stateRef.current.setThumbPercent(\n index,\n clamp(currentPosition.current / size, 0, 1)\n );\n }\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n },\n });\n\n // Immediately register editability with the state\n state.setThumbEditable(index, !isDisabled);\n\n const { focusableProps } = useFocusable(\n mergeProps(opts, {\n onFocus: () => state.setFocusedThumb(index),\n onBlur: () => state.setFocusedThumb(undefined),\n }),\n inputRef\n );\n\n let currentPointer = useRef<number | undefined>(undefined);\n let onDown = (id?: number) => {\n focusInput();\n currentPointer.current = id;\n state.setThumbDragging(index, true);\n\n addGlobalListener(window, 'mouseup', onUp, false);\n addGlobalListener(window, 'touchend', onUp, false);\n addGlobalListener(window, 'pointerup', onUp, false);\n };\n\n let onUp = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n focusInput();\n state.setThumbDragging(index, false);\n removeGlobalListener(window, 'mouseup', onUp, false);\n removeGlobalListener(window, 'touchend', onUp, false);\n removeGlobalListener(window, 'pointerup', onUp, false);\n }\n };\n\n // We install mouse handlers for the drag motion on the thumb div, but\n // not the key handler for moving the thumb with the slider. Instead,\n // we focus the range input, and let the browser handle the keyboard\n // interactions; we then listen to input's onChange to update state.\n return {\n inputProps: mergeProps(focusableProps, fieldProps, {\n 'type': 'range',\n 'tabIndex': !isDisabled ? 0 : undefined,\n 'min': state.getThumbMinValue(index),\n 'max': state.getThumbMaxValue(index),\n 'step': state.step,\n 'value': value,\n 'disabled': isDisabled,\n 'aria-orientation': opts.orientation,\n 'aria-valuetext': state.getThumbValueLabel(index),\n 'aria-required': isRequired || undefined,\n 'aria-invalid': validationState === 'invalid' || undefined,\n 'aria-errormessage': opts['aria-errormessage'],\n 'onChange': (e: ChangeEvent<HTMLInputElement>) => {\n state.setThumbValue(index, parseFloat(e.target.value));\n },\n }),\n thumbProps: !isDisabled\n ? mergeProps(moveProps, {\n onMouseDown: (e: React.MouseEvent<HTMLElement>) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown();\n },\n onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown(e.pointerId);\n },\n onTouchStart: (e: React.TouchEvent<HTMLElement>) => {\n onDown(e.changedTouches[0].identifier);\n },\n })\n : {},\n labelProps,\n };\n}\n"]}
|
@@ -20,5 +20,5 @@ interface SliderAria {
|
|
20
20
|
* accepts click and drag motions, so that the closest thumb will follow clicks and drags on
|
21
21
|
* the track.
|
22
22
|
*/
|
23
|
-
export declare function useSlider(props: AriaSliderProps, state: SliderState, trackLayout: any): SliderAria;
|
23
|
+
export declare function useSlider(props: AriaSliderProps, state: SliderState, trackLayout: any, isReversed?: boolean): SliderAria;
|
24
24
|
export {};
|
@@ -20,5 +20,5 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
|
|
20
20
|
* @param opts Options for this Slider thumb.
|
21
21
|
* @param state Slider state, created via `useSliderState`.
|
22
22
|
*/
|
23
|
-
export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState): SliderThumbAria;
|
23
|
+
export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState, isReversed?: boolean): SliderThumbAria;
|
24
24
|
export {};
|
@@ -21,5 +21,5 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
|
|
21
21
|
* @param opts Options for this Slider thumb.
|
22
22
|
* @param state Slider state, created via `useSliderState`.
|
23
23
|
*/
|
24
|
-
export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState): SliderThumbAria;
|
24
|
+
export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState, isReversed?: boolean): SliderThumbAria;
|
25
25
|
export {};
|
package/package.json
CHANGED
package/src/useSlider.ts
CHANGED
@@ -32,7 +32,8 @@ interface SliderAria {
|
|
32
32
|
export function useSlider(
|
33
33
|
props: AriaSliderProps,
|
34
34
|
state: SliderState,
|
35
|
-
trackLayout: any
|
35
|
+
trackLayout: any,
|
36
|
+
isReversed?: boolean
|
36
37
|
): SliderAria {
|
37
38
|
let { labelProps, fieldProps } = useLabel(props);
|
38
39
|
|
@@ -48,6 +49,7 @@ export function useSlider(
|
|
48
49
|
clientY: number
|
49
50
|
) => {
|
50
51
|
const direction = isRTL() ? 'rtl' : undefined;
|
52
|
+
const reverseX = isReversed || direction === 'rtl';
|
51
53
|
if (
|
52
54
|
!props.isDisabled &&
|
53
55
|
state.values.every((_, i) => !state.isThumbDragging(i))
|
@@ -58,7 +60,7 @@ export function useSlider(
|
|
58
60
|
const clickPosition = isVertical ? clientY : clientX;
|
59
61
|
const offset = clickPosition - trackPosition;
|
60
62
|
let percent = offset / size;
|
61
|
-
if (
|
63
|
+
if (reverseX || isVertical) {
|
62
64
|
percent = 1 - percent;
|
63
65
|
}
|
64
66
|
let value = state.getPercentValue(percent);
|
package/src/useSlider.web.ts
CHANGED
@@ -32,7 +32,8 @@ function useSliderWeb(
|
|
32
32
|
left: number;
|
33
33
|
x: number;
|
34
34
|
y: number;
|
35
|
-
}
|
35
|
+
},
|
36
|
+
isReversed?: boolean
|
36
37
|
): SliderAria {
|
37
38
|
let { labelProps, fieldProps } = useLabel(props);
|
38
39
|
|
@@ -53,7 +54,8 @@ function useSliderWeb(
|
|
53
54
|
|
54
55
|
const stateRef = useRef<SliderState>(null);
|
55
56
|
stateRef.current = state;
|
56
|
-
const reverseX = direction === 'rtl';
|
57
|
+
const reverseX = isReversed || direction === 'rtl';
|
58
|
+
|
57
59
|
const currentPosition = useRef<number>(null);
|
58
60
|
const { moveProps } = useMove({
|
59
61
|
onMoveStart() {
|
@@ -112,7 +114,7 @@ function useSliderWeb(
|
|
112
114
|
const clickPosition = isVertical ? clientY : clientX;
|
113
115
|
const offset = clickPosition - trackPosition;
|
114
116
|
let percent = offset / size;
|
115
|
-
if (
|
117
|
+
if (reverseX || isVertical) {
|
116
118
|
percent = 1 - percent;
|
117
119
|
}
|
118
120
|
let value = state.getPercentValue(percent);
|
@@ -232,8 +234,18 @@ function useSliderWeb(
|
|
232
234
|
};
|
233
235
|
}
|
234
236
|
|
235
|
-
export const useSlider = (
|
236
|
-
|
237
|
+
export const useSlider = (
|
238
|
+
props: any,
|
239
|
+
state: any,
|
240
|
+
ref: any,
|
241
|
+
isReversed?: boolean
|
242
|
+
) => {
|
243
|
+
let { groupProps: webGroupProps, ...rest } = useSliderWeb(
|
244
|
+
props,
|
245
|
+
state,
|
246
|
+
ref,
|
247
|
+
isReversed
|
248
|
+
);
|
237
249
|
let groupProps = mapDomPropsToRN(webGroupProps);
|
238
250
|
let labelProps = mapDomPropsToRN(rest.labelProps);
|
239
251
|
return { groupProps, ...rest, labelProps };
|
package/src/useSliderThumb.ts
CHANGED
@@ -33,7 +33,8 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
|
|
33
33
|
*/
|
34
34
|
export function useSliderThumb(
|
35
35
|
opts: SliderThumbOptions,
|
36
|
-
state: SliderState
|
36
|
+
state: SliderState,
|
37
|
+
isReversed?: boolean
|
37
38
|
): SliderThumbAria {
|
38
39
|
let { index, isDisabled, trackLayout } = opts;
|
39
40
|
|
@@ -49,7 +50,7 @@ export function useSliderThumb(
|
|
49
50
|
|
50
51
|
const stateRef = useRef<SliderState>(null);
|
51
52
|
stateRef.current = state;
|
52
|
-
let reverseX = direction === 'rtl';
|
53
|
+
let reverseX = isReversed || direction === 'rtl';
|
53
54
|
let currentPosition = useRef<number>(null);
|
54
55
|
let { moveProps } = useMove({
|
55
56
|
onMoveStart() {
|
@@ -48,7 +48,8 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
|
|
48
48
|
*/
|
49
49
|
export function useSliderThumb(
|
50
50
|
opts: SliderThumbOptions,
|
51
|
-
state: SliderState
|
51
|
+
state: SliderState,
|
52
|
+
isReversed?: boolean
|
52
53
|
): SliderThumbAria {
|
53
54
|
let {
|
54
55
|
index,
|
@@ -89,7 +90,7 @@ export function useSliderThumb(
|
|
89
90
|
|
90
91
|
const stateRef = useRef<SliderState>(null);
|
91
92
|
stateRef.current = state;
|
92
|
-
let reverseX = direction === 'rtl';
|
93
|
+
let reverseX = isReversed || direction === 'rtl';
|
93
94
|
let currentPosition = useRef<number>(null);
|
94
95
|
let { moveProps } = useMove({
|
95
96
|
onMoveStart() {
|