[Slider] Support marks={false} (#19350)

mui · Jan 25, 2020 · 4f8e820 · 4f8e820
1 parent fbabbb2
commit 4f8e820
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 48 deletions.
diff --git a/docs/pages/api/slider.md b/docs/pages/api/slider.md
@@ -34,7 +34,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the slider will be disabled. |
 | <span class="prop-name">getAriaLabel</span> | <span class="prop-type">func</span> |  | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.<br><br>**Signature:**<br>`function(index: number) => string`<br>*index:* The thumb label's index to format. |
 | <span class="prop-name">getAriaValueText</span> | <span class="prop-type">func</span> |  | Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.<br><br>**Signature:**<br>`function(value: number, index: number) => string`<br>*value:* The thumb label's value to format.<br>*index:* The thumb label's index to format. |
-| <span class="prop-name">marks</span> | <span class="prop-type">bool<br>&#124;&nbsp;array</span> | <span class="prop-default">[]</span> | Marks indicate predetermined values to which the user can move the slider. If `true` the marks will be spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. |
+| <span class="prop-name">marks</span> | <span class="prop-type">bool<br>&#124;&nbsp;array</span> | <span class="prop-default">false</span> | Marks indicate predetermined values to which the user can move the slider. If `true` the marks will be spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. |
 | <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">100</span> | The maximum allowed value of the slider. Should not be equal to min. |
 | <span class="prop-name">min</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The minimum allowed value of the slider. Should not be equal to max. |
 | <span class="prop-name">name</span> | <span class="prop-type">string</span> |  | Name attribute of the hidden `input` element. |

diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
@@ -123,7 +123,6 @@ const axisProps = {
   },
 };
 
-const defaultMarks = [];
 const Identity = x => x;
 
 export const styles = theme => ({
@@ -347,7 +346,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     disabled = false,
     getAriaLabel,
     getAriaValueText,
-    marks: marksProp = defaultMarks,
+    marks: marksProp = false,
     max = 100,
     min = 0,
     name,
@@ -388,7 +387,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
       ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
           value: min + step * index,
         }))
-      : marksProp;
+      : marksProp || [];
 
   instanceRef.current = {
     source: valueDerived, // Keep track of the input value to leverage immutable state comparison.
@@ -505,57 +504,54 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     axis += '-reverse';
   }
 
-  const getFingerNewValue = React.useCallback(
-    ({ finger, move = false, values: values2, source }) => {
-      const { current: slider } = sliderRef;
-      const { width, height, bottom, left } = slider.getBoundingClientRect();
-      let percent;
-
-      if (axis.indexOf('vertical') === 0) {
-        percent = (bottom - finger.y) / height;
-      } else {
-        percent = (finger.x - left) / width;
-      }
+  const getFingerNewValue = ({ finger, move = false, values: values2, source }) => {
+    const { current: slider } = sliderRef;
+    const { width, height, bottom, left } = slider.getBoundingClientRect();
+    let percent;
 
-      if (axis.indexOf('-reverse') !== -1) {
-        percent = 1 - percent;
-      }
+    if (axis.indexOf('vertical') === 0) {
+      percent = (bottom - finger.y) / height;
+    } else {
+      percent = (finger.x - left) / width;
+    }
 
-      let newValue;
-      newValue = percentToValue(percent, min, max);
-      if (step) {
-        newValue = roundValueToStep(newValue, step, min);
-      } else {
-        const marksValues = marks.map(mark => mark.value);
-        const closestIndex = findClosest(marksValues, newValue);
-        newValue = marksValues[closestIndex];
-      }
+    if (axis.indexOf('-reverse') !== -1) {
+      percent = 1 - percent;
+    }
 
-      newValue = clamp(newValue, min, max);
-      let activeIndex = 0;
+    let newValue;
+    newValue = percentToValue(percent, min, max);
+    if (step) {
+      newValue = roundValueToStep(newValue, step, min);
+    } else {
+      const marksValues = marks.map(mark => mark.value);
+      const closestIndex = findClosest(marksValues, newValue);
+      newValue = marksValues[closestIndex];
+    }
 
-      if (range) {
-        if (!move) {
-          activeIndex = findClosest(values2, newValue);
-        } else {
-          activeIndex = previousIndex.current;
-        }
+    newValue = clamp(newValue, min, max);
+    let activeIndex = 0;
 
-        const previousValue = newValue;
-        newValue = setValueIndex({
-          values: values2,
-          source,
-          newValue,
-          index: activeIndex,
-        }).sort(asc);
-        activeIndex = newValue.indexOf(previousValue);
-        previousIndex.current = activeIndex;
+    if (range) {
+      if (!move) {
+        activeIndex = findClosest(values2, newValue);
+      } else {
+        activeIndex = previousIndex.current;
       }
 
-      return { newValue, activeIndex };
-    },
-    [max, min, axis, range, step, marks],
-  );
+      const previousValue = newValue;
+      newValue = setValueIndex({
+        values: values2,
+        source,
+        newValue,
+        index: activeIndex,
+      }).sort(asc);
+      activeIndex = newValue.indexOf(previousValue);
+      previousIndex.current = activeIndex;
+    }
+
+    return { newValue, activeIndex };
+  };
 
   const handleTouchMove = useEventCallback(event => {
     const finger = trackFinger(event, touchId);