From 1cb4976a75feb7bf4342afb1dc99267eb672eea8 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 24 Jan 2020 00:24:36 +0100 Subject: [PATCH] [Slider] Support marks={false} --- docs/pages/api/slider.md | 2 +- packages/material-ui/src/Slider/Slider.js | 97 ++++++++++------------- 2 files changed, 45 insertions(+), 54 deletions(-) diff --git a/docs/pages/api/slider.md b/docs/pages/api/slider.md index 27e1efbc6e09aa..19acbdb2d362c9 100644 --- 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 | disabled | bool | false | If `true`, the slider will be disabled. | | getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.

**Signature:**
`function(index: number) => string`
*index:* The thumb label's index to format. | | getAriaValueText | func | | Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.

**Signature:**
`function(value: number, index: number) => string`
*value:* The thumb label's value to format.
*index:* The thumb label's index to format. | -| marks | bool
| array | [] | 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. | +| marks | bool
| array | false | 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. | | max | number | 100 | The maximum allowed value of the slider. Should not be equal to min. | | min | number | 0 | The minimum allowed value of the slider. Should not be equal to max. | | name | string | | 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 index 4b9ac6c46c30dc..9f34e926d23a3d 100644 --- 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);