slider prop names improved

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 (
             <div className={classnames(styles['slider-container'], styles[this.props.orientation], this.props.containerClassName)} onMouseDown={this.onStartSliding}>
                 <div className={styles['line']} />
@@ -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'
 };