Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Slider] Support marks={false} #19350

Merged
merged 4 commits into from
Jan 25, 2020
Merged

[Slider] Support marks={false} #19350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a656c62
[Slider] Handle `marks` being false
embeddedt Jan 22, 2020
c9bb38d
Correct formatting
embeddedt Jan 22, 2020
b9a054b
[Slider] Fix code to pass checks
embeddedt Jan 22, 2020
1cb4976
[Slider] Support marks={false}
oliviertassinari Jan 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/api/slider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
90 changes: 43 additions & 47 deletions packages/material-ui/src/Slider/Slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,6 @@ const axisProps = {
},
};

const defaultMarks = [];
const Identity = x => x;

export const styles = theme => ({
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -505,57 +504,54 @@ const Slider = React.forwardRef(function Slider(props, ref) {
axis += '-reverse';
}

const getFingerNewValue = React.useCallback(
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
({ 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);
Expand Down