[Slider] Support marks={false}

mui · Jan 23, 2020 · 1cb4976 · 1cb4976
1 parent b9a054b
commit 1cb4976
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 54 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,
@@ -383,17 +382,12 @@ const Slider = React.forwardRef(function Slider(props, ref) {
  const instanceRef = React.useRef();
  let values = range ? [...valueDerived].sort(asc) : [valueDerived];
  values = values.map(value => clamp(value, min, max));
- let normalizedMarksProp = marksProp;
- if (!Array.isArray(normalizedMarksProp) && normalizedMarksProp !== true) {
- normalizedMarksProp = []; // Normalize marksProp to be an array
- }
-
  const marks =
- normalizedMarksProp === true && step !== null
+ marksProp === true && step !== null
  ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
  value: min + step * index,
  }))
- : normalizedMarksProp;
+ : marksProp || [];
 
  instanceRef.current = {
  source: valueDerived, // Keep track of the input value to leverage immutable state comparison.
@@ -510,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);