@react-native-aria/slider 0.2.8 → 0.2.10
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/useMove.js +24 -13
- package/lib/commonjs/useMove.js.map +1 -1
- package/lib/commonjs/useSliderThumb.js +5 -3
- package/lib/commonjs/useSliderThumb.js.map +1 -1
- package/lib/module/useMove.js +21 -12
- package/lib/module/useMove.js.map +1 -1
- package/lib/module/useSliderThumb.js +6 -4
- package/lib/module/useSliderThumb.js.map +1 -1
- package/package.json +1 -1
- package/src/useMove.ts +21 -12
- package/src/useSliderThumb.ts +10 -7
package/lib/commonjs/useMove.js
CHANGED
|
@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useMove = useMove;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
function
|
|
12
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
13
|
+
|
|
14
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
15
|
|
|
14
16
|
/*
|
|
15
17
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -34,28 +36,37 @@ function useMove(props) {
|
|
|
34
36
|
onMove,
|
|
35
37
|
onMoveEnd
|
|
36
38
|
} = props;
|
|
39
|
+
const [initialMoveX, setInitialMoveX] = (0, _react.useState)(0);
|
|
40
|
+
const [initialMoveY, setInitialMoveY] = (0, _react.useState)(0);
|
|
37
41
|
|
|
38
|
-
const
|
|
42
|
+
const panResponder = _react.default.useMemo(() => _reactNative.PanResponder.create({
|
|
39
43
|
onMoveShouldSetPanResponderCapture: _event => {
|
|
40
44
|
return true;
|
|
41
45
|
},
|
|
42
|
-
onPanResponderGrant: _evt => {
|
|
46
|
+
onPanResponderGrant: (_evt, gestureState) => {
|
|
43
47
|
onMoveStart === null || onMoveStart === void 0 ? void 0 : onMoveStart({
|
|
44
48
|
type: 'movestart',
|
|
45
49
|
pointerType: 'touch'
|
|
46
50
|
});
|
|
51
|
+
setInitialMoveX(gestureState.moveX);
|
|
52
|
+
setInitialMoveY(gestureState.moveY);
|
|
47
53
|
},
|
|
48
54
|
onPanResponderMove: (_event, gestureState) => {
|
|
49
|
-
|
|
55
|
+
const deltaX = gestureState.moveX - initialMoveX;
|
|
56
|
+
const deltaY = gestureState.moveY - initialMoveY;
|
|
57
|
+
|
|
58
|
+
if (deltaX === 0 && deltaY === 0) {
|
|
50
59
|
return;
|
|
51
60
|
}
|
|
52
61
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
62
|
+
if (deltaX) {
|
|
63
|
+
onMove({
|
|
64
|
+
type: 'move',
|
|
65
|
+
pointerType: 'touch',
|
|
66
|
+
deltaX: deltaX,
|
|
67
|
+
deltaY: deltaY
|
|
68
|
+
});
|
|
69
|
+
}
|
|
59
70
|
},
|
|
60
71
|
onPanResponderRelease: () => {
|
|
61
72
|
onMoveEnd === null || onMoveEnd === void 0 ? void 0 : onMoveEnd({
|
|
@@ -63,10 +74,10 @@ function useMove(props) {
|
|
|
63
74
|
pointerType: 'touch'
|
|
64
75
|
});
|
|
65
76
|
}
|
|
66
|
-
}), [onMove, onMoveEnd, onMoveStart]);
|
|
77
|
+
}), [onMove, onMoveEnd, onMoveStart, initialMoveX, initialMoveY]);
|
|
67
78
|
|
|
68
79
|
return {
|
|
69
|
-
moveProps:
|
|
80
|
+
moveProps: panResponder.panHandlers
|
|
70
81
|
};
|
|
71
82
|
}
|
|
72
83
|
//# sourceMappingURL=useMove.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMove.ts"],"names":["useMove","props","onMoveStart","onMove","onMoveEnd","
|
|
1
|
+
{"version":3,"sources":["useMove.ts"],"names":["useMove","props","onMoveStart","onMove","onMoveEnd","initialMoveX","setInitialMoveX","initialMoveY","setInitialMoveY","panResponder","React","useMemo","PanResponder","create","onMoveShouldSetPanResponderCapture","_event","onPanResponderGrant","_evt","gestureState","type","pointerType","moveX","moveY","onPanResponderMove","deltaX","deltaY","onPanResponderRelease","moveProps","panHandlers"],"mappings":";;;;;;;AAYA;;AACA;;;;;;AAbA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAT,CAAiBC,KAAjB,EAAyC;AAC9C,MAAI;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,MAAf;AAAuBC,IAAAA;AAAvB,MAAqCH,KAAzC;AAEA,QAAM,CAACI,YAAD,EAAeC,eAAf,IAAkC,qBAAS,CAAT,CAAxC;AACA,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkC,qBAAS,CAAT,CAAxC;;AACA,QAAMC,YAAY,GAAGC,eAAMC,OAAN,CACnB,MACEC,0BAAaC,MAAb,CAAoB;AAClBC,IAAAA,kCAAkC,EAAGC,MAAD,IAAY;AAC9C,aAAO,IAAP;AACD,KAHiB;AAIlBC,IAAAA,mBAAmB,EAAE,CAACC,IAAD,EAAOC,YAAP,KAAwB;AAC3ChB,MAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAG;AACZiB,QAAAA,IAAI,EAAE,WADM;AAEZC,QAAAA,WAAW,EAAE;AAFD,OAAH,CAAX;AAKAd,MAAAA,eAAe,CAACY,YAAY,CAACG,KAAd,CAAf;AACAb,MAAAA,eAAe,CAACU,YAAY,CAACI,KAAd,CAAf;AACD,KAZiB;AAalBC,IAAAA,kBAAkB,EAAE,CAACR,MAAD,EAASG,YAAT,KAA0B;AAC5C,YAAMM,MAAM,GAAGN,YAAY,CAACG,KAAb,GAAqBhB,YAApC;AACA,YAAMoB,MAAM,GAAGP,YAAY,CAACI,KAAb,GAAqBf,YAApC;;AACA,UAAIiB,MAAM,KAAK,CAAX,IAAgBC,MAAM,KAAK,CAA/B,EAAkC;AAChC;AACD;;AAED,UAAID,MAAJ,EAAY;AACVrB,QAAAA,MAAM,CAAC;AACLgB,UAAAA,IAAI,EAAE,MADD;AAELC,UAAAA,WAAW,EAAE,OAFR;AAGLI,UAAAA,MAAM,EAAEA,MAHH;AAILC,UAAAA,MAAM,EAAEA;AAJH,SAAD,CAAN;AAMD;AACF,KA5BiB;AA6BlBC,IAAAA,qBAAqB,EAAE,MAAM;AAC3BtB,MAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAG;AACVe,QAAAA,IAAI,EAAE,SADI;AAEVC,QAAAA,WAAW,EAAE;AAFH,OAAH,CAAT;AAID;AAlCiB,GAApB,CAFiB,EAsCnB,CAACjB,MAAD,EAASC,SAAT,EAAoBF,WAApB,EAAiCG,YAAjC,EAA+CE,YAA/C,CAtCmB,CAArB;;AAyCA,SAAO;AAAEoB,IAAAA,SAAS,EAAElB,YAAY,CAACmB;AAA1B,GAAP;AACD","sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, { useState } from 'react';\nimport { PanResponder } from 'react-native';\n\ninterface MoveResult {\n /** Props to spread on the target element. */\n moveProps: any;\n}\n\n/**\n * Handles move interactions across mouse, touch, and keyboard, including dragging with\n * the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and\n * platforms, and ignores emulated mouse events on touch devices.\n */\nexport function useMove(props: any): MoveResult {\n let { onMoveStart, onMove, onMoveEnd } = props;\n\n const [initialMoveX, setInitialMoveX] = useState(0);\n const [initialMoveY, setInitialMoveY] = useState(0);\n const panResponder = React.useMemo(\n () =>\n PanResponder.create({\n onMoveShouldSetPanResponderCapture: (_event) => {\n return true;\n },\n onPanResponderGrant: (_evt, gestureState) => {\n onMoveStart?.({\n type: 'movestart',\n pointerType: 'touch',\n });\n\n setInitialMoveX(gestureState.moveX);\n setInitialMoveY(gestureState.moveY);\n },\n onPanResponderMove: (_event, gestureState) => {\n const deltaX = gestureState.moveX - initialMoveX;\n const deltaY = gestureState.moveY - initialMoveY;\n if (deltaX === 0 && deltaY === 0) {\n return;\n }\n\n if (deltaX) {\n onMove({\n type: 'move',\n pointerType: 'touch',\n deltaX: deltaX,\n deltaY: deltaY,\n });\n }\n },\n onPanResponderRelease: () => {\n onMoveEnd?.({\n type: 'moveend',\n pointerType: 'touch',\n });\n },\n }),\n [onMove, onMoveEnd, onMoveStart, initialMoveX, initialMoveY]\n );\n\n return { moveProps: panResponder.panHandlers };\n}\n"]}
|
|
@@ -47,12 +47,14 @@ function useSliderThumb(opts, state, isReversed) {
|
|
|
47
47
|
stateRef.current = state;
|
|
48
48
|
let reverseX = isReversed || direction === 'rtl';
|
|
49
49
|
let currentPosition = (0, _react.useRef)(null);
|
|
50
|
+
const [startPosition, setStartPosition] = (0, _react.useState)(0);
|
|
50
51
|
let {
|
|
51
52
|
moveProps
|
|
52
53
|
} = (0, _useMove.useMove)({
|
|
53
54
|
onMoveStart() {
|
|
54
|
-
currentPosition.current = null;
|
|
55
55
|
state.setThumbDragging(index, true);
|
|
56
|
+
let size = isVertical ? trackLayout.height : trackLayout.width;
|
|
57
|
+
setStartPosition(stateRef.current.getThumbPercent(index) * size);
|
|
56
58
|
},
|
|
57
59
|
|
|
58
60
|
onMove({
|
|
@@ -77,8 +79,8 @@ function useSliderThumb(opts, state, isReversed) {
|
|
|
77
79
|
}
|
|
78
80
|
}
|
|
79
81
|
|
|
80
|
-
|
|
81
|
-
stateRef.current.setThumbPercent(index, (0, _utils.clamp)(
|
|
82
|
+
const position = startPosition + delta;
|
|
83
|
+
stateRef.current.setThumbPercent(index, (0, _utils.clamp)(position / size, 0, 1));
|
|
82
84
|
},
|
|
83
85
|
|
|
84
86
|
onMoveEnd() {
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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","startPosition","setStartPosition","moveProps","onMoveStart","setThumbDragging","size","height","width","getThumbPercent","onMove","deltaX","deltaY","delta","position","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","now","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, useState } 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\n const [startPosition, setStartPosition] = useState(0);\n\n let { moveProps } = useMove({\n onMoveStart() {\n state.setThumbDragging(index, true);\n let size = isVertical ? trackLayout.height : trackLayout.width;\n setStartPosition(stateRef.current.getThumbPercent(index) * size);\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 (reverseX) {\n if (!isVertical) {\n delta = -delta;\n }\n } else {\n if (isVertical) {\n delta = -delta;\n }\n }\n\n const position = startPosition + delta;\n\n stateRef.current.setThumbPercent(index, clamp(position / size, 0, 1));\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 'role': 'adjustable',\n 'aria-value': {\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"]}
|
package/lib/module/useMove.js
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
|
-
import React from 'react';
|
|
12
|
+
import React, { useState } from 'react';
|
|
13
13
|
import { PanResponder } from 'react-native';
|
|
14
14
|
|
|
15
15
|
/**
|
|
@@ -23,27 +23,36 @@ export function useMove(props) {
|
|
|
23
23
|
onMove,
|
|
24
24
|
onMoveEnd
|
|
25
25
|
} = props;
|
|
26
|
-
const
|
|
26
|
+
const [initialMoveX, setInitialMoveX] = useState(0);
|
|
27
|
+
const [initialMoveY, setInitialMoveY] = useState(0);
|
|
28
|
+
const panResponder = React.useMemo(() => PanResponder.create({
|
|
27
29
|
onMoveShouldSetPanResponderCapture: _event => {
|
|
28
30
|
return true;
|
|
29
31
|
},
|
|
30
|
-
onPanResponderGrant: _evt => {
|
|
32
|
+
onPanResponderGrant: (_evt, gestureState) => {
|
|
31
33
|
onMoveStart === null || onMoveStart === void 0 ? void 0 : onMoveStart({
|
|
32
34
|
type: 'movestart',
|
|
33
35
|
pointerType: 'touch'
|
|
34
36
|
});
|
|
37
|
+
setInitialMoveX(gestureState.moveX);
|
|
38
|
+
setInitialMoveY(gestureState.moveY);
|
|
35
39
|
},
|
|
36
40
|
onPanResponderMove: (_event, gestureState) => {
|
|
37
|
-
|
|
41
|
+
const deltaX = gestureState.moveX - initialMoveX;
|
|
42
|
+
const deltaY = gestureState.moveY - initialMoveY;
|
|
43
|
+
|
|
44
|
+
if (deltaX === 0 && deltaY === 0) {
|
|
38
45
|
return;
|
|
39
46
|
}
|
|
40
47
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
48
|
+
if (deltaX) {
|
|
49
|
+
onMove({
|
|
50
|
+
type: 'move',
|
|
51
|
+
pointerType: 'touch',
|
|
52
|
+
deltaX: deltaX,
|
|
53
|
+
deltaY: deltaY
|
|
54
|
+
});
|
|
55
|
+
}
|
|
47
56
|
},
|
|
48
57
|
onPanResponderRelease: () => {
|
|
49
58
|
onMoveEnd === null || onMoveEnd === void 0 ? void 0 : onMoveEnd({
|
|
@@ -51,9 +60,9 @@ export function useMove(props) {
|
|
|
51
60
|
pointerType: 'touch'
|
|
52
61
|
});
|
|
53
62
|
}
|
|
54
|
-
}), [onMove, onMoveEnd, onMoveStart]);
|
|
63
|
+
}), [onMove, onMoveEnd, onMoveStart, initialMoveX, initialMoveY]);
|
|
55
64
|
return {
|
|
56
|
-
moveProps:
|
|
65
|
+
moveProps: panResponder.panHandlers
|
|
57
66
|
};
|
|
58
67
|
}
|
|
59
68
|
//# sourceMappingURL=useMove.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMove.ts"],"names":["React","PanResponder","useMove","props","onMoveStart","onMove","onMoveEnd","
|
|
1
|
+
{"version":3,"sources":["useMove.ts"],"names":["React","useState","PanResponder","useMove","props","onMoveStart","onMove","onMoveEnd","initialMoveX","setInitialMoveX","initialMoveY","setInitialMoveY","panResponder","useMemo","create","onMoveShouldSetPanResponderCapture","_event","onPanResponderGrant","_evt","gestureState","type","pointerType","moveX","moveY","onPanResponderMove","deltaX","deltaY","onPanResponderRelease","moveProps","panHandlers"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,YAAT,QAA6B,cAA7B;;AAOA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,OAAT,CAAiBC,KAAjB,EAAyC;AAC9C,MAAI;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,MAAf;AAAuBC,IAAAA;AAAvB,MAAqCH,KAAzC;AAEA,QAAM,CAACI,YAAD,EAAeC,eAAf,IAAkCR,QAAQ,CAAC,CAAD,CAAhD;AACA,QAAM,CAACS,YAAD,EAAeC,eAAf,IAAkCV,QAAQ,CAAC,CAAD,CAAhD;AACA,QAAMW,YAAY,GAAGZ,KAAK,CAACa,OAAN,CACnB,MACEX,YAAY,CAACY,MAAb,CAAoB;AAClBC,IAAAA,kCAAkC,EAAGC,MAAD,IAAY;AAC9C,aAAO,IAAP;AACD,KAHiB;AAIlBC,IAAAA,mBAAmB,EAAE,CAACC,IAAD,EAAOC,YAAP,KAAwB;AAC3Cd,MAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAG;AACZe,QAAAA,IAAI,EAAE,WADM;AAEZC,QAAAA,WAAW,EAAE;AAFD,OAAH,CAAX;AAKAZ,MAAAA,eAAe,CAACU,YAAY,CAACG,KAAd,CAAf;AACAX,MAAAA,eAAe,CAACQ,YAAY,CAACI,KAAd,CAAf;AACD,KAZiB;AAalBC,IAAAA,kBAAkB,EAAE,CAACR,MAAD,EAASG,YAAT,KAA0B;AAC5C,YAAMM,MAAM,GAAGN,YAAY,CAACG,KAAb,GAAqBd,YAApC;AACA,YAAMkB,MAAM,GAAGP,YAAY,CAACI,KAAb,GAAqBb,YAApC;;AACA,UAAIe,MAAM,KAAK,CAAX,IAAgBC,MAAM,KAAK,CAA/B,EAAkC;AAChC;AACD;;AAED,UAAID,MAAJ,EAAY;AACVnB,QAAAA,MAAM,CAAC;AACLc,UAAAA,IAAI,EAAE,MADD;AAELC,UAAAA,WAAW,EAAE,OAFR;AAGLI,UAAAA,MAAM,EAAEA,MAHH;AAILC,UAAAA,MAAM,EAAEA;AAJH,SAAD,CAAN;AAMD;AACF,KA5BiB;AA6BlBC,IAAAA,qBAAqB,EAAE,MAAM;AAC3BpB,MAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAG;AACVa,QAAAA,IAAI,EAAE,SADI;AAEVC,QAAAA,WAAW,EAAE;AAFH,OAAH,CAAT;AAID;AAlCiB,GAApB,CAFiB,EAsCnB,CAACf,MAAD,EAASC,SAAT,EAAoBF,WAApB,EAAiCG,YAAjC,EAA+CE,YAA/C,CAtCmB,CAArB;AAyCA,SAAO;AAAEkB,IAAAA,SAAS,EAAEhB,YAAY,CAACiB;AAA1B,GAAP;AACD","sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, { useState } from 'react';\nimport { PanResponder } from 'react-native';\n\ninterface MoveResult {\n /** Props to spread on the target element. */\n moveProps: any;\n}\n\n/**\n * Handles move interactions across mouse, touch, and keyboard, including dragging with\n * the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and\n * platforms, and ignores emulated mouse events on touch devices.\n */\nexport function useMove(props: any): MoveResult {\n let { onMoveStart, onMove, onMoveEnd } = props;\n\n const [initialMoveX, setInitialMoveX] = useState(0);\n const [initialMoveY, setInitialMoveY] = useState(0);\n const panResponder = React.useMemo(\n () =>\n PanResponder.create({\n onMoveShouldSetPanResponderCapture: (_event) => {\n return true;\n },\n onPanResponderGrant: (_evt, gestureState) => {\n onMoveStart?.({\n type: 'movestart',\n pointerType: 'touch',\n });\n\n setInitialMoveX(gestureState.moveX);\n setInitialMoveY(gestureState.moveY);\n },\n onPanResponderMove: (_event, gestureState) => {\n const deltaX = gestureState.moveX - initialMoveX;\n const deltaY = gestureState.moveY - initialMoveY;\n if (deltaX === 0 && deltaY === 0) {\n return;\n }\n\n if (deltaX) {\n onMove({\n type: 'move',\n pointerType: 'touch',\n deltaX: deltaX,\n deltaY: deltaY,\n });\n }\n },\n onPanResponderRelease: () => {\n onMoveEnd?.({\n type: 'moveend',\n pointerType: 'touch',\n });\n },\n }),\n [onMove, onMoveEnd, onMoveStart, initialMoveX, initialMoveY]\n );\n\n return { moveProps: panResponder.panHandlers };\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { clamp } from '@react-aria/utils';
|
|
2
2
|
import { getSliderThumbId, sliderIds } from './utils';
|
|
3
|
-
import { useRef } from 'react';
|
|
3
|
+
import { useRef, useState } from 'react';
|
|
4
4
|
import { useLabel } from '@react-aria/label';
|
|
5
5
|
import { useMove } from './useMove';
|
|
6
6
|
import { isRTL } from '@react-native-aria/utils';
|
|
@@ -33,12 +33,14 @@ export function useSliderThumb(opts, state, isReversed) {
|
|
|
33
33
|
stateRef.current = state;
|
|
34
34
|
let reverseX = isReversed || direction === 'rtl';
|
|
35
35
|
let currentPosition = useRef(null);
|
|
36
|
+
const [startPosition, setStartPosition] = useState(0);
|
|
36
37
|
let {
|
|
37
38
|
moveProps
|
|
38
39
|
} = useMove({
|
|
39
40
|
onMoveStart() {
|
|
40
|
-
currentPosition.current = null;
|
|
41
41
|
state.setThumbDragging(index, true);
|
|
42
|
+
let size = isVertical ? trackLayout.height : trackLayout.width;
|
|
43
|
+
setStartPosition(stateRef.current.getThumbPercent(index) * size);
|
|
42
44
|
},
|
|
43
45
|
|
|
44
46
|
onMove({
|
|
@@ -63,8 +65,8 @@ export function useSliderThumb(opts, state, isReversed) {
|
|
|
63
65
|
}
|
|
64
66
|
}
|
|
65
67
|
|
|
66
|
-
|
|
67
|
-
stateRef.current.setThumbPercent(index, clamp(
|
|
68
|
+
const position = startPosition + delta;
|
|
69
|
+
stateRef.current.setThumbPercent(index, clamp(position / size, 0, 1));
|
|
68
70
|
},
|
|
69
71
|
|
|
70
72
|
onMoveEnd() {
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
1
|
+
{"version":3,"sources":["useSliderThumb.ts"],"names":["clamp","getSliderThumbId","sliderIds","useRef","useState","useLabel","useMove","isRTL","useSliderThumb","opts","state","isReversed","index","isDisabled","trackLayout","isVertical","orientation","direction","undefined","labelId","get","labelProps","fieldProps","trim","stateRef","current","reverseX","currentPosition","startPosition","setStartPosition","moveProps","onMoveStart","setThumbDragging","size","height","width","getThumbPercent","onMove","deltaX","deltaY","delta","position","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","now","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, useState } 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\n const [startPosition, setStartPosition] = useState(0);\n\n let { moveProps } = useMove({\n onMoveStart() {\n state.setThumbDragging(index, true);\n let size = isVertical ? trackLayout.height : trackLayout.width;\n setStartPosition(stateRef.current.getThumbPercent(index) * size);\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 (reverseX) {\n if (!isVertical) {\n delta = -delta;\n }\n } else {\n if (isVertical) {\n delta = -delta;\n }\n }\n\n const position = startPosition + delta;\n\n stateRef.current.setThumbPercent(index, clamp(position / size, 0, 1));\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 'role': 'adjustable',\n 'aria-value': {\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"]}
|
package/package.json
CHANGED
package/src/useMove.ts
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
import React from 'react';
|
|
13
|
+
import React, { useState } from 'react';
|
|
14
14
|
import { PanResponder } from 'react-native';
|
|
15
15
|
|
|
16
16
|
interface MoveResult {
|
|
@@ -26,29 +26,38 @@ interface MoveResult {
|
|
|
26
26
|
export function useMove(props: any): MoveResult {
|
|
27
27
|
let { onMoveStart, onMove, onMoveEnd } = props;
|
|
28
28
|
|
|
29
|
-
const
|
|
29
|
+
const [initialMoveX, setInitialMoveX] = useState(0);
|
|
30
|
+
const [initialMoveY, setInitialMoveY] = useState(0);
|
|
31
|
+
const panResponder = React.useMemo(
|
|
30
32
|
() =>
|
|
31
33
|
PanResponder.create({
|
|
32
34
|
onMoveShouldSetPanResponderCapture: (_event) => {
|
|
33
35
|
return true;
|
|
34
36
|
},
|
|
35
|
-
onPanResponderGrant: (_evt) => {
|
|
37
|
+
onPanResponderGrant: (_evt, gestureState) => {
|
|
36
38
|
onMoveStart?.({
|
|
37
39
|
type: 'movestart',
|
|
38
40
|
pointerType: 'touch',
|
|
39
41
|
});
|
|
42
|
+
|
|
43
|
+
setInitialMoveX(gestureState.moveX);
|
|
44
|
+
setInitialMoveY(gestureState.moveY);
|
|
40
45
|
},
|
|
41
46
|
onPanResponderMove: (_event, gestureState) => {
|
|
42
|
-
|
|
47
|
+
const deltaX = gestureState.moveX - initialMoveX;
|
|
48
|
+
const deltaY = gestureState.moveY - initialMoveY;
|
|
49
|
+
if (deltaX === 0 && deltaY === 0) {
|
|
43
50
|
return;
|
|
44
51
|
}
|
|
45
52
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
53
|
+
if (deltaX) {
|
|
54
|
+
onMove({
|
|
55
|
+
type: 'move',
|
|
56
|
+
pointerType: 'touch',
|
|
57
|
+
deltaX: deltaX,
|
|
58
|
+
deltaY: deltaY,
|
|
59
|
+
});
|
|
60
|
+
}
|
|
52
61
|
},
|
|
53
62
|
onPanResponderRelease: () => {
|
|
54
63
|
onMoveEnd?.({
|
|
@@ -57,8 +66,8 @@ export function useMove(props: any): MoveResult {
|
|
|
57
66
|
});
|
|
58
67
|
},
|
|
59
68
|
}),
|
|
60
|
-
[onMove, onMoveEnd, onMoveStart]
|
|
69
|
+
[onMove, onMoveEnd, onMoveStart, initialMoveX, initialMoveY]
|
|
61
70
|
);
|
|
62
71
|
|
|
63
|
-
return { moveProps:
|
|
72
|
+
return { moveProps: panResponder.panHandlers };
|
|
64
73
|
}
|
package/src/useSliderThumb.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AriaSliderThumbProps } from '@react-types/slider';
|
|
2
2
|
import { clamp } from '@react-aria/utils';
|
|
3
3
|
import { getSliderThumbId, sliderIds } from './utils';
|
|
4
|
-
import { useRef } from 'react';
|
|
4
|
+
import { useRef, useState } from 'react';
|
|
5
5
|
import { SliderState } from '@react-stately/slider';
|
|
6
6
|
import { useLabel } from '@react-aria/label';
|
|
7
7
|
import { useMove } from './useMove';
|
|
@@ -52,10 +52,14 @@ export function useSliderThumb(
|
|
|
52
52
|
stateRef.current = state;
|
|
53
53
|
let reverseX = isReversed || direction === 'rtl';
|
|
54
54
|
let currentPosition = useRef<number>(null);
|
|
55
|
+
|
|
56
|
+
const [startPosition, setStartPosition] = useState(0);
|
|
57
|
+
|
|
55
58
|
let { moveProps } = useMove({
|
|
56
59
|
onMoveStart() {
|
|
57
|
-
currentPosition.current = null;
|
|
58
60
|
state.setThumbDragging(index, true);
|
|
61
|
+
let size = isVertical ? trackLayout.height : trackLayout.width;
|
|
62
|
+
setStartPosition(stateRef.current.getThumbPercent(index) * size);
|
|
59
63
|
},
|
|
60
64
|
onMove({ deltaX, deltaY }) {
|
|
61
65
|
let size = isVertical ? trackLayout.height : trackLayout.width;
|
|
@@ -75,11 +79,10 @@ export function useSliderThumb(
|
|
|
75
79
|
delta = -delta;
|
|
76
80
|
}
|
|
77
81
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
);
|
|
82
|
+
|
|
83
|
+
const position = startPosition + delta;
|
|
84
|
+
|
|
85
|
+
stateRef.current.setThumbPercent(index, clamp(position / size, 0, 1));
|
|
83
86
|
},
|
|
84
87
|
onMoveEnd() {
|
|
85
88
|
state.setThumbDragging(index, false);
|