@react-native-aria/slider 0.2.9 → 0.2.11

package/lib/typescript/textSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textSelection.d.ts","sourceRoot":"","sources":["../../src/textSelection.ts"],"names":[],"mappings":"AA4BA,wBAAgB,oBAAoB,SAOnC;AAED,wBAAgB,oBAAoB,SA2BnC"}

package/lib/typescript/useMove.d.ts

@@ -9,3 +9,4 @@ interface MoveResult {
  */
 export declare function useMove(props: any): MoveResult;
 export {};
+//# sourceMappingURL=useMove.d.ts.map

package/lib/typescript/useMove.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMove.d.ts","sourceRoot":"","sources":["../../src/useMove.ts"],"names":[],"mappings":"AAeA,UAAU,UAAU;IAClB,6CAA6C;IAC7C,SAAS,EAAE,GAAG,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,GAAG,GAAG,UAAU,CA8C9C"}

package/lib/typescript/useMove.web.d.ts

@@ -11,3 +11,4 @@ interface MoveResult {
  */
 export declare function useMove(props: MoveEvents): MoveResult;
 export {};
+//# sourceMappingURL=useMove.web.d.ts.map

package/lib/typescript/useMove.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMove.web.d.ts","sourceRoot":"","sources":["../../src/useMove.web.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAe,MAAM,qBAAqB,CAAC;AAC9D,OAAc,EAAE,cAAc,EAAmB,MAAM,OAAO,CAAC;AAG/D,UAAU,UAAU;IAClB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CA0KrD"}

package/lib/typescript/usePanResponder.d.ts

@@ -1 +1,2 @@
-export declare const usePanResponder: (props: any) => import("react-native/types").PanResponderInstance;
+export declare const usePanResponder: (props: any) => import("react-native").PanResponderInstance;
+//# sourceMappingURL=usePanResponder.d.ts.map

package/lib/typescript/usePanResponder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanResponder.d.ts","sourceRoot":"","sources":["../../src/usePanResponder.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,UAAW,GAAG,gDA+BzC,CAAC"}

package/lib/typescript/useSlider.d.ts

@@ -22,3 +22,4 @@ interface SliderAria {
  */
 export declare function useSlider(props: AriaSliderProps, state: SliderState, trackLayout: any, isReversed?: boolean): SliderAria;
 export {};
+//# sourceMappingURL=useSlider.d.ts.map

package/lib/typescript/useSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../src/useSlider.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIpD,UAAU,UAAU;IAClB,mCAAmC;IACnC,UAAU,EAAE,GAAG,CAAC;IAEhB,gFAAgF;IAChF,UAAU,EAAE,GAAG,CAAC;IAEhB,mCAAmC;IACnC,UAAU,EAAE,GAAG,CAAC;IAEhB,+EAA+E;IAC/E,WAAW,EAAE,GAAG,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE,GAAG,EAChB,UAAU,CAAC,EAAE,OAAO,GACnB,UAAU,CA+EZ"}

package/lib/typescript/useSlider.web.d.ts

@@ -6,3 +6,4 @@ export declare const useSlider: (props: any, state: any, ref: any, isReversed?:
     outputProps: any;
     groupProps: any;
 };
+//# sourceMappingURL=useSlider.web.d.ts.map

package/lib/typescript/useSlider.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlider.web.d.ts","sourceRoot":"","sources":["../../src/useSlider.web.ts"],"names":[],"mappings":"AAwPA,eAAO,MAAM,SAAS,UACb,GAAG,SACH,GAAG,OACL,GAAG,eACK,OAAO;;IA3OpB,mCAAmC;gBACvB,GAAG;IAEf,+EAA+E;iBAClE,GAAG;;CAkPjB,CAAC"}

package/lib/typescript/useSliderThumb.d.ts

@@ -22,3 +22,4 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
  */
 export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState, isReversed?: boolean): SliderThumbAria;
 export {};
+//# sourceMappingURL=useSliderThumb.d.ts.map

package/lib/typescript/useSliderThumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderThumb.d.ts","sourceRoot":"","sources":["../../src/useSliderThumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKpD,UAAU,eAAe;IACvB,qEAAqE;IACrE,UAAU,EAAE,GAAG,CAAC;IAEhB,yDAAyD;IACzD,UAAU,EAAE,GAAG,CAAC;IAEhB,6DAA6D;IAC7D,UAAU,EAAE,GAAG,CAAC;CACjB;AAED,UAAU,kBAAmB,SAAQ,oBAAoB;IACvD,kCAAkC;IAClC,WAAW,EAAE,GAAG,CAAC;IACjB,wCAAwC;IACxC,QAAQ,EAAE,GAAG,CAAC;CACf;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,kBAAkB,EACxB,KAAK,EAAE,WAAW,EAClB,UAAU,CAAC,EAAE,OAAO,GACnB,eAAe,CAqGjB"}

package/lib/typescript/useSliderThumb.web.d.ts

@@ -23,3 +23,4 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
  */
 export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState, isReversed?: boolean): SliderThumbAria;
 export {};
+//# sourceMappingURL=useSliderThumb.web.d.ts.map

package/lib/typescript/useSliderThumb.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderThumb.web.d.ts","sourceRoot":"","sources":["../../src/useSliderThumb.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAQ3D,OAAc,EAEZ,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAMpD,UAAU,eAAe;IACvB,qEAAqE;IACrE,UAAU,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAExC,yDAAyD;IACzD,UAAU,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAElD,6DAA6D;IAC7D,UAAU,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;CACnD;AAED,UAAU,kBAAmB,SAAQ,oBAAoB;IACvD,kCAAkC;IAClC,WAAW,EAAE,GAAG,CAAC;IACjB,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,kBAAkB,EACxB,KAAK,EAAE,WAAW,EAClB,UAAU,CAAC,EAAE,OAAO,GACnB,eAAe,CAmKjB"}

package/lib/typescript/utils.d.ts

@@ -1,3 +1,4 @@
 import { SliderState } from '@react-stately/slider';
 export declare const sliderIds: WeakMap<SliderState, string>;
 export declare function getSliderThumbId(state: SliderState, index: number): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,eAAO,MAAM,SAAS,8BAAqC,CAAC;AAE5D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,UAOjE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-aria/slider",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "useSlider - React Native Aria",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -26,6 +26,7 @@
     "test": "jest",
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "build": "bob build",
     "prepare": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
@@ -37,13 +38,16 @@
     "ios",
     "android"
   ],
-  "repository": "https://github.com/intergalacticspacehighway/react-native-bob-mono",
+  "homepage": "https://github.com/gluestack/gluestack-ui/tree/main/packages/react-native-aria/slider#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gluestack/gluestack-ui.git"
+  },
   "author": "nishan <nishanbende@gmail.com> (https://github.com/intergalacticspacehighway)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/intergalacticspacehighway/react-native-bob-mono/issues"
   },
-  "homepage": "https://github.com/intergalacticspacehighway/react-native-bob-mono#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -57,7 +61,7 @@
     "@react-aria/label": "^3.1.1",
     "@react-aria/slider": "^3.0.1",
     "@react-aria/utils": "^3.6.0",
-    "@react-native-aria/utils": "^0.2.10",
+    "@react-native-aria/utils": "0.2.11",
     "@react-stately/slider": "^3.0.1"
   },
   "devDependencies": {

package/src/useMove.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { PanResponder } from 'react-native';
 
 interface MoveResult {
@@ -26,29 +26,37 @@ interface MoveResult {
 export function useMove(props: any): MoveResult {
   let { onMoveStart, onMove, onMoveEnd } = props;
 
-  const panResponter = React.useMemo(
+  const [initialMoveX, setInitialMoveX] = useState(0);
+  const [initialMoveY, setInitialMoveY] = useState(0);
+  const panResponder = React.useMemo(
     () =>
       PanResponder.create({
         onMoveShouldSetPanResponderCapture: (_event) => {
           return true;
         },
-        onPanResponderGrant: (_evt) => {
+        onPanResponderGrant: (_evt, gestureState) => {
           onMoveStart?.({
             type: 'movestart',
             pointerType: 'touch',
           });
+          setInitialMoveX(gestureState.moveX);
+          setInitialMoveY(gestureState.moveY);
         },
         onPanResponderMove: (_event, gestureState) => {
-          if (gestureState.dx === 0 && gestureState.dy === 0) {
+          const deltaX = gestureState.moveX - initialMoveX;
+          const deltaY = gestureState.moveY - initialMoveY;
+          if (deltaX === 0 && deltaY === 0) {
             return;
           }
 
-          onMove({
-            type: 'move',
-            pointerType: 'touch',
-            deltaX: gestureState.dx,
-            deltaY: gestureState.dy,
-          });
+          if (deltaX) {
+            onMove({
+              type: 'move',
+              pointerType: 'touch',
+              deltaX: deltaX,
+              deltaY: deltaY,
+            });
+          }
         },
         onPanResponderRelease: () => {
           onMoveEnd?.({
@@ -57,8 +65,8 @@ export function useMove(props: any): MoveResult {
           });
         },
       }),
-    [onMove, onMoveEnd, onMoveStart]
+    [onMove, onMoveEnd, onMoveStart, initialMoveX, initialMoveY]
   );
 
-  return { moveProps: panResponter.panHandlers };
+  return { moveProps: panResponder.panHandlers };
 }

package/src/useMove.web.ts

@@ -50,11 +50,13 @@ export function useMove(props: MoveEvents): MoveResult {
 
       if (!state.current.didMove) {
         state.current.didMove = true;
+        // @ts-ignore
         onMoveStart?.({
           type: 'movestart',
           pointerType,
         });
       }
+      // @ts-ignore
       onMove({
         type: 'move',
         pointerType,
@@ -65,6 +67,7 @@ export function useMove(props: MoveEvents): MoveResult {
     let end = (pointerType: PointerType) => {
       restoreTextSelection();
       if (state.current.didMove) {
+        // @ts-ignore
         onMoveEnd?.({
           type: 'moveend',
           pointerType,

package/src/useSliderThumb.ts

@@ -1,7 +1,7 @@
 import { AriaSliderThumbProps } from '@react-types/slider';
 import { clamp } from '@react-aria/utils';
 import { getSliderThumbId, sliderIds } from './utils';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { SliderState } from '@react-stately/slider';
 import { useLabel } from '@react-aria/label';
 import { useMove } from './useMove';
@@ -52,10 +52,14 @@ export function useSliderThumb(
   stateRef.current = state;
   let reverseX = isReversed || direction === 'rtl';
   let currentPosition = useRef<number>(null);
+
+  const [startPosition, setStartPosition] = useState(0);
+
   let { moveProps } = useMove({
     onMoveStart() {
-      currentPosition.current = null;
       state.setThumbDragging(index, true);
+      let size = isVertical ? trackLayout.height : trackLayout.width;
+      setStartPosition(stateRef.current.getThumbPercent(index) * size);
     },
     onMove({ deltaX, deltaY }) {
       let size = isVertical ? trackLayout.height : trackLayout.width;
@@ -75,11 +79,10 @@ export function useSliderThumb(
           delta = -delta;
         }
       }
-      currentPosition.current += delta;
-      stateRef.current.setThumbPercent(
-        index,
-        clamp(currentPosition.current / size, 0, 1)
-      );
+
+      const position = startPosition + delta;
+
+      stateRef.current.setThumbPercent(index, clamp(position / size, 0, 1));
     },
     onMoveEnd() {
       state.setThumbDragging(index, false);