@react-stately/slider - npm Package Compare versions

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

dist/main.js

@@ -38,4 +38,4 @@ var {
   const [isDraggings, setDraggings] = useState(new Array(values.length).fill(false));
+  const isEditablesRef = useRef(new Array(values.length).fill(true));
   const [focusedIndex, setFocusedIndex] = useState(undefined);
-  const realTimeDragging = useRef(false);
   const formatter = useNumberFormatter(formatOptions);
@@ -55,4 +55,12 @@
 
+  function isThumbEditable(index) {
+    return isEditablesRef.current[index];
+  }
+
+  function setThumbEditable(index, editable) {
+    isEditablesRef.current[index] = editable;
+  }
+
   function updateValue(index, value) {
-    if (isReadOnly || isDisabled) {
+    if (isReadOnly || isDisabled || !isThumbEditable(index)) {
       return;
@@ -65,15 +73,16 @@ }
     value = clamp(getRoundedValue(value), thisMin, thisMax);
-    const newValues = $bc3294032743285adead374b6f67$var$replaceIndex(values, index, value);
-    setValues(newValues);
+    setValues(values => $bc3294032743285adead374b6f67$var$replaceIndex(values, index, value));
+  }
 
-    if (props.onChangeEnd && !realTimeDragging.current) {
-      // If not in the middle of dragging, call onChangeEnd
-      props.onChangeEnd(newValues);
+  function updateDragging(index, dragging) {
+    if (isReadOnly || isDisabled || !isThumbEditable(index)) {
+      return;
     }
-  }
 
-  function updateDragging(index, dragging) {
     const newDraggings = $bc3294032743285adead374b6f67$var$replaceIndex(isDraggings, index, dragging);
-    setDraggings(newDraggings);
-    realTimeDragging.current = newDraggings.some(Boolean);
+    setDraggings(newDraggings); // Call onChangeEnd if no handles are dragging.
+
+    if (props.onChangeEnd && isDraggings[index] && !newDraggings.some(Boolean)) {
+      props.onChangeEnd(values);
+    }
   }
@@ -114,2 +123,4 @@
     getPercentValue,
+    isThumbEditable,
+    setThumbEditable,
     step
@@ -122,4 +133,8 @@ };
 function $bc3294032743285adead374b6f67$var$replaceIndex(array, index, value) {
+  if (array[index] === value) {
+    return array;
+  }
+
   return [...array.slice(0, index), value, ...array.slice(index + 1)];
 }
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -21,4 +21,4 @@ import { useRef, useState } from "react";
   const [isDraggings, setDraggings] = useState(new Array(values.length).fill(false));
+  const isEditablesRef = useRef(new Array(values.length).fill(true));
   const [focusedIndex, setFocusedIndex] = useState(undefined);
-  const realTimeDragging = useRef(false);
   const formatter = useNumberFormatter(formatOptions);
@@ -38,4 +38,12 @@
 
+  function isThumbEditable(index) {
+    return isEditablesRef.current[index];
+  }
+
+  function setThumbEditable(index, editable) {
+    isEditablesRef.current[index] = editable;
+  }
+
   function updateValue(index, value) {
-    if (isReadOnly || isDisabled) {
+    if (isReadOnly || isDisabled || !isThumbEditable(index)) {
       return;
@@ -48,15 +56,16 @@ }
     value = clamp(getRoundedValue(value), thisMin, thisMax);
-    const newValues = $dcc38d2f5fc04b76254f325fa36d$var$replaceIndex(values, index, value);
-    setValues(newValues);
+    setValues(values => $dcc38d2f5fc04b76254f325fa36d$var$replaceIndex(values, index, value));
+  }
 
-    if (props.onChangeEnd && !realTimeDragging.current) {
-      // If not in the middle of dragging, call onChangeEnd
-      props.onChangeEnd(newValues);
+  function updateDragging(index, dragging) {
+    if (isReadOnly || isDisabled || !isThumbEditable(index)) {
+      return;
     }
-  }
 
-  function updateDragging(index, dragging) {
     const newDraggings = $dcc38d2f5fc04b76254f325fa36d$var$replaceIndex(isDraggings, index, dragging);
-    setDraggings(newDraggings);
-    realTimeDragging.current = newDraggings.some(Boolean);
+    setDraggings(newDraggings); // Call onChangeEnd if no handles are dragging.
+
+    if (props.onChangeEnd && isDraggings[index] && !newDraggings.some(Boolean)) {
+      props.onChangeEnd(values);
+    }
   }
@@ -97,2 +106,4 @@
     getPercentValue,
+    isThumbEditable,
+    setThumbEditable,
     step
@@ -103,4 +114,8 @@ };
 function $dcc38d2f5fc04b76254f325fa36d$var$replaceIndex(array, index, value) {
+  if (array[index] === value) {
+    return array;
+  }
+
   return [...array.slice(0, index), value, ...array.slice(index + 1)];
 }
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -18,2 +18,4 @@ import { SliderProps } from "@react-types/slider";
     getPercentValue: (percent: number) => number;
+    isThumbEditable: (index: number) => boolean;
+    setThumbEditable: (index: number, editable: boolean) => void;
     readonly step: number;
@@ -20,0 +22,0 @@ }

package.json

 {
   "name": "@react-stately/slider",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "description": "Spectrum UI components in React",
@@ -21,4 +21,4 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.0.2",
-    "@react-aria/utils": "^3.2.0",
+    "@react-aria/i18n": "^3.1.1",
+    "@react-aria/utils": "^3.2.1",
     "@react-stately/utils": "^3.0.2",
@@ -36,3 +36,3 @@ "@react-types/slider": "3.0.0-alpha.0"
   },
-  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
+  "gitHead": "d050016e6876b20e4d8a95ba5fb5630d78e75a60"
 }

src/useSliderState.ts

@@ -54,2 +54,6 @@ /*
 
+  // editable
+  isThumbEditable: (index: number) => boolean,
+  setThumbEditable: (index: number, editable: boolean) => void,
+
   // The step amount for the slider
@@ -72,4 +76,5 @@ readonly step: number
   const [isDraggings, setDraggings] = useState<boolean[]>(new Array(values.length).fill(false));
+  const isEditablesRef = useRef<boolean[]>(new Array(values.length).fill(true));
   const [focusedIndex, setFocusedIndex] = useState<number|undefined>(undefined);
-  const realTimeDragging = useRef(false);
+
   const formatter = useNumberFormatter(formatOptions);
@@ -88,4 +93,12 @@
 
+  function isThumbEditable(index: number) {
+    return isEditablesRef.current[index];
+  }
+
+  function setThumbEditable(index: number, editable: boolean) {
+    isEditablesRef.current[index] = editable;
+  }
+
   function updateValue(index: number, value: number) {
-    if (isReadOnly || isDisabled) {
+    if (isReadOnly || isDisabled || !isThumbEditable(index)) {
       return;
@@ -98,16 +111,17 @@ }
     value = clamp(getRoundedValue(value), thisMin, thisMax);
+    setValues(values => replaceIndex(values, index, value));
+  }
 
-    const newValues = replaceIndex(values, index, value);
-    setValues(newValues);
-
-    if (props.onChangeEnd && !realTimeDragging.current) {
-      // If not in the middle of dragging, call onChangeEnd
-      props.onChangeEnd(newValues);
+  function updateDragging(index: number, dragging: boolean) {
+    if (isReadOnly || isDisabled || !isThumbEditable(index)) {
+      return;
     }
-  }
 
-  function updateDragging(index: number, dragging: boolean) {
     const newDraggings = replaceIndex(isDraggings, index, dragging);
     setDraggings(newDraggings);
-    realTimeDragging.current = newDraggings.some(Boolean);
+
+    // Call onChangeEnd if no handles are dragging.
+    if (props.onChangeEnd && isDraggings[index] && !newDraggings.some(Boolean)) {
+      props.onChangeEnd(values);
+    }
   }
@@ -148,2 +162,4 @@
     getPercentValue,
+    isThumbEditable,
+    setThumbEditable,
     step
@@ -154,3 +170,7 @@ };
 function replaceIndex<T>(array: T[], index: number, value: T) {
+  if (array[index] === value) {
+    return array;
+  }
+
   return [...array.slice(0, index), value, ...array.slice(index + 1)];
 }

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

50396

increased by7.38%

Lines of code

383

increased by11.34%

Dependency changes

• Updated@react-aria/i18n@^3.1.1

• Updated@react-aria/utils@^3.2.1