VSinerva/freesewing
1
0
Fork 0
Code Activity

🐛 Change onDragEnd to onChangeCommitted due to API change in material-ui. Fixes #104

Browse source
This commit is contained in:
Joost De Cock 2019-09-06 07:57:42 +02:00
parent 66f482ad54
commit ca64ff8a10
1 changed files with 21 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

42
packages/components/src/.form/FormFieldSlider/index.js
View file

@ -1,26 +1,26 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import PropTypes from "prop-types"; import PropTypes from 'prop-types'
import Slider from "@material-ui/core/Slider"; import Slider from '@material-ui/core/Slider'
import { withStyles } from "@material-ui/core/styles"; import { withStyles } from '@material-ui/core/styles'
const PaddedSlider = withStyles({ const PaddedSlider = withStyles({
container: { container: {
padding: "25px 0" padding: '25px 0'
}, },
track: { height: "4px" }, track: { height: '4px' },
thumb: { width: "16px", height: "16px" } thumb: { width: '16px', height: '16px' }
})(Slider); })(Slider)
const FormFieldSlider = props => { const FormFieldSlider = props => {
const [value, setValue] = useState(props.value); const [value, setValue] = useState(props.value)
const update = (evt, newValue) => { const update = (evt, newValue) => {
props.updateValue(props.name, newValue, evt); props.updateValue(props.name, newValue, evt)
setValue(newValue); setValue(newValue)
}; }
// Force state update when rerendering due to props change // Force state update when rerendering due to props change
if (props.value !== value) setValue(props.value); if (props.value !== value) setValue(props.value)
return ( return (
<PaddedSlider <PaddedSlider
@ -29,15 +29,15 @@ const FormFieldSlider = props => {
max={props.max} max={props.max}
step={props.step} step={props.step}
onChange={update} onChange={update}
onDragEnd={update} onChangeCommitted={update}
classes={{ classes={{
track: "slider-track", track: 'slider-track',
thumb: "slider-thumb" thumb: 'slider-thumb'
}} }}
aria-labelledby={props.label} aria-labelledby={props.label}
/> />
); )
}; }
FormFieldSlider.propTypes = { FormFieldSlider.propTypes = {
min: PropTypes.number, min: PropTypes.number,
@ -46,13 +46,13 @@ FormFieldSlider.propTypes = {
updateValue: PropTypes.func.isRequired, updateValue: PropTypes.func.isRequired,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]) label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])])
}; }
FormFieldSlider.defaultProps = { FormFieldSlider.defaultProps = {
min: 0, min: 0,
max: 100, max: 100,
step: 0.1, step: 0.1,
label: false label: false
}; }
export default FormFieldSlider; export default FormFieldSlider