From f13a35bc7aea416c9bb5145f33b8b79da236e9d4 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Thu, 22 Nov 2018 16:25:39 +0200 Subject: [PATCH] slider prop names improved --- src/common/Slider/Slider.js | 48 ++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/common/Slider/Slider.js b/src/common/Slider/Slider.js index 2b066b48a..ea26e36e1 100644 --- a/src/common/Slider/Slider.js +++ b/src/common/Slider/Slider.js @@ -5,34 +5,34 @@ import styles from './styles'; class Slider extends Component { componentWillReceiveProps(nextProps) { - if (this.props.orientation !== nextProps.orientation) { + if (nextProps.orientation !== this.props.orientation) { console.warn(new Error('changing orientation property at runtime is not supported')); } } shouldComponentUpdate(nextProps, nextState) { return nextProps.value !== this.props.value || - nextProps.minValue !== this.props.minValue || - nextProps.maxValue !== this.props.maxValue || + nextProps.minimumValue !== this.props.minimumValue || + nextProps.maximumValue !== this.props.maximumValue || nextProps.containerClassName !== this.props.containerClassName || nextProps.thumbClassName !== this.props.thumbClassName; } - onSliding = (...args) => { - if (typeof this.props.onSliding === 'function') { - this.props.onSliding(...args); + onSlide = (...args) => { + if (typeof this.props.onSlide === 'function') { + this.props.onSlide(...args); } } - onSlidingCompleted = (...args) => { - if (typeof this.props.onSlidingCompleted === 'function') { - this.props.onSlidingCompleted(...args); + onComplete = (...args) => { + if (typeof this.props.onComplete === 'function') { + this.props.onComplete(...args); } } - onSlidingAborted = (...args) => { - if (typeof this.props.onSlidingAborted === 'function') { - this.props.onSlidingAborted(...args); + onCancel = (...args) => { + if (typeof this.props.onCancel === 'function') { + this.props.onCancel(...args); } } @@ -43,7 +43,7 @@ class Slider extends Component { const mouseStart = this.props.orientation === 'horizontal' ? mouseX : mouseY; const thumbStart = Math.min(Math.max(mouseStart - sliderStart, 0), sliderLength); const slidingValueCoef = this.props.orientation === 'horizontal' ? thumbStart / sliderLength : (sliderLength - thumbStart) / sliderLength; - const slidingValue = slidingValueCoef * (this.props.maxValue - this.props.minValue) + this.props.minValue; + const slidingValue = slidingValueCoef * (this.props.maximumValue - this.props.minimumValue) + this.props.minimumValue; return Math.floor(slidingValue); } @@ -62,16 +62,16 @@ class Slider extends Component { }; const onBlur = () => { releaseThumb(); - this.onSlidingAborted(); + this.onCancel(); }; const onMouseUp = ({ clientX: mouseX, clientY: mouseY }) => { releaseThumb(); const slidingValue = this.calculateSlidingValue({ mouseX, mouseY, sliderElement }); - this.onSlidingCompleted(slidingValue); + this.onComplete(slidingValue); }; const onMouseMove = ({ clientX: mouseX, clientY: mouseY }) => { const slidingValue = this.calculateSlidingValue({ mouseX, mouseY, sliderElement }); - this.onSliding(slidingValue); + this.onSlide(slidingValue); }; window.addEventListener('blur', onBlur); @@ -85,7 +85,7 @@ class Slider extends Component { render() { const thumbStartProp = this.props.orientation === 'horizontal' ? 'left' : 'bottom'; - const thumbStart = (this.props.value - this.props.minValue) / (this.props.maxValue - this.props.minValue); + const thumbStart = (this.props.value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue); return (
@@ -102,17 +102,17 @@ Slider.propTypes = { containerClassName: PropTypes.string, thumbClassName: PropTypes.string, value: PropTypes.number.isRequired, - minValue: PropTypes.number.isRequired, - maxValue: PropTypes.number.isRequired, + minimumValue: PropTypes.number.isRequired, + maximumValue: PropTypes.number.isRequired, orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - onSliding: PropTypes.func, - onSlidingCompleted: PropTypes.func, - onSlidingAborted: PropTypes.func + onSlide: PropTypes.func, + onComplete: PropTypes.func, + onCancel: PropTypes.func }; Slider.defaultProps = { value: 0, - minValue: 0, - maxValue: 100, + minimumValue: 0, + maximumValue: 100, orientation: 'horizontal' };