@react-aria/slider - npm Package Compare versions

Comparing version 3.0.0-alpha.0 to 3.0.0-alpha.1

dist/main.js

@@ -29,18 +29,2 @@ var {
 
-function $dec1906781d9c7cb69245fc4d5344b$export$computeOffsetToValue(offset, props, trackRef) {
-  const {
-    minValue = 0,
-    maxValue = 100,
-    step = 1
-  } = props;
-
-  if (!trackRef.current) {
-    return minValue;
-  }
-
-  const containerSize = trackRef.current.offsetWidth;
-  const val = offset / containerSize * (maxValue - minValue) + minValue;
-  return Math.round((val - minValue) / step) * step + minValue;
-}
-
 /**
@@ -62,3 +46,4 @@ * Provides behavior and accessibility for a slider component.
     fieldProps
-  } = useLabel(props); // Attach id of the label to the state so it can be accessed by useSliderThumb.
+  } = useLabel(props);
+  const isSliderEditable = !(props.isDisabled || props.isReadOnly); // Attach id of the label to the state so it can be accessed by useSliderThumb.
 
@@ -71,3 +56,8 @@ $dec1906781d9c7cb69245fc4d5344b$export$sliderIds.set(state, (_labelProps$id = labelProps.id) != null ? _labelProps$id : fieldProps.id); // When the user clicks or drags the track, we want the motion to set and drag the
   const realTimeTrackDraggingIndex = useRef(undefined);
-  const draggableProps = useDrag1D({
+  const isTrackDragging = useRef(false);
+  const {
+    onMouseDown,
+    onMouseEnter,
+    onMouseOut
+  } = useDrag1D({
     containerRef: trackRef,
@@ -80,6 +70,16 @@ reverse: false,
       }
+
+      isTrackDragging.current = dragging;
     },
     onPositionChange: position => {
-      if (realTimeTrackDraggingIndex.current !== undefined) {
-        state.setThumbValue(realTimeTrackDraggingIndex.current, $dec1906781d9c7cb69245fc4d5344b$export$computeOffsetToValue(position, props, trackRef));
+      if (realTimeTrackDraggingIndex.current !== undefined && trackRef.current) {
+        const percent = position / trackRef.current.offsetWidth;
+        state.setThumbPercent(realTimeTrackDraggingIndex.current, percent); // When track-dragging ends, onDrag is called before a final onPositionChange is
+        // called, so we can't reset realTimeTrackDraggingIndex until onPositionChange,
+        // as we still needed to update the thumb position one last time.  Hence we
+        // track whether we're dragging, and the actual dragged index, separately.
+
+        if (!isTrackDragging.current) {
+          realTimeTrackDraggingIndex.current = undefined;
+        }
       }
@@ -99,3 +99,3 @@ }
         // We only trigger track-dragging if the user clicks on the track itself.
-        if (trackRef.current && trackRef.current === e.target) {
+        if (trackRef.current && isSliderEditable) {
           // Find the closest thumb
@@ -106,7 +106,8 @@ const trackPosition = trackRef.current.getBoundingClientRect().left;
           const percent = offset / trackRef.current.offsetWidth;
-          const value = state.getPercentValue(percent);
-          const minDiff = Math.min(...state.values.map(v => Math.abs(v - value)));
+          const value = state.getPercentValue(percent); // Only compute the diff for thumbs that are editable, as only they can be dragged
+
+          const minDiff = Math.min(...state.values.map((v, index) => state.isThumbEditable(index) ? Math.abs(v - value) : Number.POSITIVE_INFINITY));
           const index = state.values.findIndex(v => Math.abs(v - value) === minDiff);
 
-          if (index >= 0) {
+          if (minDiff !== Number.POSITIVE_INFINITY && index >= 0) {
             // Don't unfocus anything
@@ -124,6 +125,12 @@ e.preventDefault();
             state.setThumbValue(index, value);
+          } else {
+            realTimeTrackDraggingIndex.current = undefined;
           }
         }
       }
-    }, draggableProps)
+    }, {
+      onMouseDown,
+      onMouseEnter,
+      onMouseOut
+    })
   };
@@ -160,3 +167,3 @@ }
   const value = state.values[index];
-  const allowDrag = !(isDisabled || isReadOnly);
+  const isEditable = !(isDisabled || isReadOnly);
   const focusInput = useCallback(() => {
@@ -185,3 +192,5 @@ if (inputRef.current) {
     }
-  });
+  }); // Immediately register editability with the state
+
+  state.setThumbEditable(index, isEditable);
   const {
@@ -200,3 +209,3 @@ focusableProps
       type: 'range',
-      tabIndex: allowDrag ? 0 : undefined,
+      tabIndex: isEditable ? 0 : undefined,
       min: state.getThumbMinValue(index),
@@ -217,3 +226,3 @@ max: state.getThumbMaxValue(index),
     }),
-    thumbProps: allowDrag ? mergeProps({
+    thumbProps: isEditable ? mergeProps({
       onMouseDown: draggableProps.onMouseDown,
@@ -220,0 +229,0 @@ onMouseEnter: draggableProps.onMouseEnter,

dist/module.js

@@ -8,18 +8,2 @@ import { useFocusable } from "@react-aria/focus";
 
-function $d20491ae7743da17cfa841ff6d87$export$computeOffsetToValue(offset, props, trackRef) {
-  const {
-    minValue = 0,
-    maxValue = 100,
-    step = 1
-  } = props;
-
-  if (!trackRef.current) {
-    return minValue;
-  }
-
-  const containerSize = trackRef.current.offsetWidth;
-  const val = offset / containerSize * (maxValue - minValue) + minValue;
-  return Math.round((val - minValue) / step) * step + minValue;
-}
-
 /**
@@ -41,3 +25,4 @@ * Provides behavior and accessibility for a slider component.
     fieldProps
-  } = useLabel(props); // Attach id of the label to the state so it can be accessed by useSliderThumb.
+  } = useLabel(props);
+  const isSliderEditable = !(props.isDisabled || props.isReadOnly); // Attach id of the label to the state so it can be accessed by useSliderThumb.
 
@@ -50,3 +35,8 @@ $d20491ae7743da17cfa841ff6d87$export$sliderIds.set(state, (_labelProps$id = labelProps.id) != null ? _labelProps$id : fieldProps.id); // When the user clicks or drags the track, we want the motion to set and drag the
   const realTimeTrackDraggingIndex = useRef(undefined);
-  const draggableProps = useDrag1D({
+  const isTrackDragging = useRef(false);
+  const {
+    onMouseDown,
+    onMouseEnter,
+    onMouseOut
+  } = useDrag1D({
     containerRef: trackRef,
@@ -59,6 +49,16 @@ reverse: false,
       }
+
+      isTrackDragging.current = dragging;
     },
     onPositionChange: position => {
-      if (realTimeTrackDraggingIndex.current !== undefined) {
-        state.setThumbValue(realTimeTrackDraggingIndex.current, $d20491ae7743da17cfa841ff6d87$export$computeOffsetToValue(position, props, trackRef));
+      if (realTimeTrackDraggingIndex.current !== undefined && trackRef.current) {
+        const percent = position / trackRef.current.offsetWidth;
+        state.setThumbPercent(realTimeTrackDraggingIndex.current, percent); // When track-dragging ends, onDrag is called before a final onPositionChange is
+        // called, so we can't reset realTimeTrackDraggingIndex until onPositionChange,
+        // as we still needed to update the thumb position one last time.  Hence we
+        // track whether we're dragging, and the actual dragged index, separately.
+
+        if (!isTrackDragging.current) {
+          realTimeTrackDraggingIndex.current = undefined;
+        }
       }
@@ -78,3 +78,3 @@ }
         // We only trigger track-dragging if the user clicks on the track itself.
-        if (trackRef.current && trackRef.current === e.target) {
+        if (trackRef.current && isSliderEditable) {
           // Find the closest thumb
@@ -85,7 +85,8 @@ const trackPosition = trackRef.current.getBoundingClientRect().left;
           const percent = offset / trackRef.current.offsetWidth;
-          const value = state.getPercentValue(percent);
-          const minDiff = Math.min(...state.values.map(v => Math.abs(v - value)));
+          const value = state.getPercentValue(percent); // Only compute the diff for thumbs that are editable, as only they can be dragged
+
+          const minDiff = Math.min(...state.values.map((v, index) => state.isThumbEditable(index) ? Math.abs(v - value) : Number.POSITIVE_INFINITY));
           const index = state.values.findIndex(v => Math.abs(v - value) === minDiff);
 
-          if (index >= 0) {
+          if (minDiff !== Number.POSITIVE_INFINITY && index >= 0) {
             // Don't unfocus anything
@@ -103,6 +104,12 @@ e.preventDefault();
             state.setThumbValue(index, value);
+          } else {
+            realTimeTrackDraggingIndex.current = undefined;
           }
         }
       }
-    }, draggableProps)
+    }, {
+      onMouseDown,
+      onMouseEnter,
+      onMouseOut
+    })
   };
@@ -137,3 +144,3 @@ }
   const value = state.values[index];
-  const allowDrag = !(isDisabled || isReadOnly);
+  const isEditable = !(isDisabled || isReadOnly);
   const focusInput = useCallback(() => {
@@ -162,3 +169,5 @@ if (inputRef.current) {
     }
-  });
+  }); // Immediately register editability with the state
+
+  state.setThumbEditable(index, isEditable);
   const {
@@ -177,3 +186,3 @@ focusableProps
       type: 'range',
-      tabIndex: allowDrag ? 0 : undefined,
+      tabIndex: isEditable ? 0 : undefined,
       min: state.getThumbMinValue(index),
@@ -194,3 +203,3 @@ max: state.getThumbMaxValue(index),
     }),
-    thumbProps: allowDrag ? mergeProps({
+    thumbProps: isEditable ? mergeProps({
       onMouseDown: draggableProps.onMouseDown,
@@ -197,0 +206,0 @@ onMouseEnter: draggableProps.onMouseEnter,

package.json

 {
   "name": "@react-aria/slider",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "description": "Slider",
@@ -21,9 +21,9 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.2.0",
-    "@react-aria/i18n": "^3.0.2",
+    "@react-aria/focus": "^3.2.1",
+    "@react-aria/i18n": "^3.1.1",
     "@react-aria/interactions": "^3.2.0",
     "@react-aria/label": "^3.0.2",
-    "@react-aria/utils": "^3.2.0",
-    "@react-stately/radio": "^3.0.2",
-    "@react-stately/slider": "3.0.0-alpha.0",
+    "@react-aria/utils": "^3.2.1",
+    "@react-stately/radio": "^3.2.0",
+    "@react-stately/slider": "3.0.0-alpha.1",
     "@react-types/radio": "^3.0.2",
@@ -38,3 +38,3 @@ "@react-types/slider": "3.0.0-alpha.0"
   },
-  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
+  "gitHead": "d050016e6876b20e4d8a95ba5fb5630d78e75a60"
 }

src/useSlider.ts

@@ -13,5 +13,5 @@ /*
 
-import {computeOffsetToValue, sliderIds} from './utils';
 import {HTMLAttributes, useRef} from 'react';
 import {mergeProps, useDrag1D} from '@react-aria/utils';
+import {sliderIds} from './utils';
 import {SliderProps} from '@react-types/slider';
@@ -49,2 +49,4 @@ import {SliderState} from '@react-stately/slider';
 
+  const isSliderEditable = !(props.isDisabled || props.isReadOnly);
+
   // Attach id of the label to the state so it can be accessed by useSliderThumb.
@@ -58,3 +60,4 @@ sliderIds.set(state, labelProps.id ?? fieldProps.id);
   const realTimeTrackDraggingIndex = useRef<number | undefined>(undefined);
-  const draggableProps = useDrag1D({
+  const isTrackDragging = useRef(false);
+  const {onMouseDown, onMouseEnter, onMouseOut} = useDrag1D({
     containerRef: trackRef as any,
@@ -67,6 +70,16 @@ reverse: false,
       }
+      isTrackDragging.current = dragging;
     },
     onPositionChange: (position) => {
-      if (realTimeTrackDraggingIndex.current !== undefined) {
-        state.setThumbValue(realTimeTrackDraggingIndex.current, computeOffsetToValue(position, props, trackRef));
+      if (realTimeTrackDraggingIndex.current !== undefined && trackRef.current) {
+        const percent = position / trackRef.current.offsetWidth;
+        state.setThumbPercent(realTimeTrackDraggingIndex.current, percent);
+
+        // When track-dragging ends, onDrag is called before a final onPositionChange is
+        // called, so we can't reset realTimeTrackDraggingIndex until onPositionChange,
+        // as we still needed to update the thumb position one last time.  Hence we
+        // track whether we're dragging, and the actual dragged index, separately.
+        if (!isTrackDragging.current) {
+          realTimeTrackDraggingIndex.current = undefined;
+        }
       }
@@ -89,3 +102,3 @@ }
         // We only trigger track-dragging if the user clicks on the track itself.
-        if (trackRef.current && trackRef.current === e.target) {
+        if (trackRef.current && isSliderEditable) {
           // Find the closest thumb
@@ -97,5 +110,7 @@ const trackPosition = trackRef.current.getBoundingClientRect().left;
           const value = state.getPercentValue(percent);
-          const minDiff = Math.min(...state.values.map(v => Math.abs(v - value)));
+
+          // Only compute the diff for thumbs that are editable, as only they can be dragged
+          const minDiff = Math.min(...state.values.map((v, index) => state.isThumbEditable(index) ? Math.abs(v - value) : Number.POSITIVE_INFINITY));
           const index = state.values.findIndex(v => Math.abs(v - value) === minDiff);
-          if (index >= 0) {
+          if (minDiff !== Number.POSITIVE_INFINITY && index >= 0) {
             // Don't unfocus anything
@@ -115,7 +130,11 @@ e.preventDefault();
             state.setThumbValue(index, value);
+          } else {
+            realTimeTrackDraggingIndex.current = undefined;
           }
         }
       }
-    }, draggableProps)
+    }, {
+      onMouseDown, onMouseEnter, onMouseOut
+    })
   };
 }

src/useSliderThumb.ts

@@ -52,3 +52,3 @@ import {ChangeEvent, HTMLAttributes, useCallback, useEffect} from 'react';
   const value = state.values[index];
-  const allowDrag = !(isDisabled || isReadOnly);
+  const isEditable = !(isDisabled || isReadOnly);
 
@@ -83,2 +83,5 @@ const focusInput = useCallback(() => {
 
+  // Immediately register editability with the state
+  state.setThumbEditable(index, isEditable);
+
   const {focusableProps} = useFocusable(
@@ -99,3 +102,3 @@ mergeProps(opts, {
       type: 'range',
-      tabIndex: allowDrag ? 0 : undefined,
+      tabIndex: isEditable ? 0 : undefined,
       min: state.getThumbMinValue(index),
@@ -116,3 +119,3 @@ max: state.getThumbMaxValue(index),
     }),
-    thumbProps: allowDrag ? mergeProps({
+    thumbProps: isEditable ? mergeProps({
       onMouseDown: draggableProps.onMouseDown,
@@ -119,0 +122,0 @@ onMouseEnter: draggableProps.onMouseEnter,

src/utils.ts

@@ -1,15 +0,3 @@
-import {BaseSliderProps} from '@react-types/slider';
 import {SliderState} from '@react-stately/slider';
 
 export const sliderIds = new WeakMap<SliderState, string>();
-
-export function computeOffsetToValue(offset: number, props: BaseSliderProps, trackRef: React.RefObject<HTMLElement>) {
-  const {minValue = 0, maxValue = 100, step = 1} = props;
-  if (!trackRef.current) {
-    return minValue;
-  }
-
-  const containerSize = trackRef.current.offsetWidth;
-  const val = offset / containerSize * (maxValue - minValue) + minValue;
-  return Math.round((val - minValue) / step) * step + minValue;
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76611

increased by4.82%

Lines of code

684

increased by3.64%

Dependency changes

• + Added@react-stately/slider@3.0.0-alpha.1(transitive)

• - Removed@react-stately/slider@3.0.0-alpha.0(transitive)

• Updated@react-aria/focus@^3.2.1

• Updated@react-aria/i18n@^3.1.1

• Updated@react-aria/utils@^3.2.1

• Updated@react-stately/radio@^3.2.0

• Updated@react-stately/slider@3.0.0-alpha.1