From 3ff8ab55554adf203c9173ab7ce4faa4ebd7a18a Mon Sep 17 00:00:00 2001 From: Andrej Gajdos Date: Tue, 21 Aug 2018 14:15:09 +0200 Subject: [PATCH 1/9] sublabels added three sublabels between minValue and maxValue added --- example/js/example-app.jsx | 3 +- src/js/input-range/default-class-names.js | 3 + src/js/input-range/input-range.jsx | 67 ++++++++++++++++++++ src/scss/input-range/_input-range-label.scss | 5 +- 4 files changed, 76 insertions(+), 2 deletions(-) diff --git a/example/js/example-app.jsx b/example/js/example-app.jsx index f09d307..d565927 100644 --- a/example/js/example-app.jsx +++ b/example/js/example-app.jsx @@ -30,8 +30,9 @@ export default class ExampleApp extends React.Component { return (
this.setState({ value })} onChangeComplete={value => console.log(value)} /> diff --git a/src/js/input-range/default-class-names.js b/src/js/input-range/default-class-names.js index 7b5d688..567072f 100644 --- a/src/js/input-range/default-class-names.js +++ b/src/js/input-range/default-class-names.js @@ -10,6 +10,9 @@ const DEFAULT_CLASS_NAMES = { labelContainer: 'input-range__label-container', maxLabel: 'input-range__label input-range__label--max', minLabel: 'input-range__label input-range__label--min', + fstLabel: 'input-range__label input-range__label--fst', + sndLabel: 'input-range__label input-range__label--snd', + thdLabel: 'input-range__label input-range__label--thd', slider: 'input-range__slider', sliderContainer: 'input-range__slider-container', track: 'input-range__track input-range__track--background', diff --git a/src/js/input-range/input-range.jsx b/src/js/input-range/input-range.jsx index a097d4f..3ed35b0 100644 --- a/src/js/input-range/input-range.jsx +++ b/src/js/input-range/input-range.jsx @@ -38,6 +38,7 @@ export default class InputRange extends React.Component { onChangeComplete: PropTypes.func, step: PropTypes.number, value: valuePropType, + renderSubLabels: PropTypes.bool, }; } @@ -175,6 +176,22 @@ export default class InputRange extends React.Component { return ['max']; } + /** + * @private + * @return {Object} + */ + getStyle(val) { + const { maxValue, minValue } = this.props; + const perc = ((val - minValue) / (maxValue - minValue)) * 100; + const style = { + position: 'absolute', + left: `${perc}%`, + height: '1rem', + }; + + return style; + } + /** * Return true if the difference between the new and the current value is * greater or equal to the step amount of the component @@ -656,6 +673,23 @@ export default class InputRange extends React.Component { const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); const percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue); + let fstLabelVal = 0; + let sndLabelVal = 0; + let thdLabelVal = 0; + let fstLabelStyle = {}; + let sndLabelStyle = {}; + let thdLabelStyle = {}; + + if (this.props.renderSubLabels) { + fstLabelVal = ((Math.round((this.props.maxValue - this.props.minValue) / 4)) * 1) + this.props.minValue; + sndLabelVal = ((Math.round((this.props.maxValue - this.props.minValue) / 4)) * 2) + this.props.minValue; + thdLabelVal = ((Math.round((this.props.maxValue - this.props.minValue) / 4)) * 3) + this.props.minValue; + + fstLabelStyle = this.getStyle(fstLabelVal); + sndLabelStyle = this.getStyle(sndLabelVal); + thdLabelStyle = this.getStyle(thdLabelVal); + } + return (
+ {this.props.renderSubLabels && +
+ + + + + + + + + + + +
+ } + Date: Tue, 21 Aug 2018 15:28:04 +0200 Subject: [PATCH 2/9] inactive circles added inactive circles added --- src/js/input-range/default-class-names.js | 2 ++ src/js/input-range/input-range.jsx | 27 +++++++++++++++---- src/scss/input-range/_input-range-label.scss | 13 +++++++++ src/scss/input-range/_input-range-slider.scss | 1 + src/scss/input-range/_input-range-track.scss | 1 + 5 files changed, 39 insertions(+), 5 deletions(-) diff --git a/src/js/input-range/default-class-names.js b/src/js/input-range/default-class-names.js index 567072f..11538cf 100644 --- a/src/js/input-range/default-class-names.js +++ b/src/js/input-range/default-class-names.js @@ -13,6 +13,8 @@ const DEFAULT_CLASS_NAMES = { fstLabel: 'input-range__label input-range__label--fst', sndLabel: 'input-range__label input-range__label--snd', thdLabel: 'input-range__label input-range__label--thd', + subLabelContainer: 'input-range__label--subLabelContainer', + inactiveCircleLabel: 'input-range__label--inactive', slider: 'input-range__slider', sliderContainer: 'input-range__slider-container', track: 'input-range__track input-range__track--background', diff --git a/src/js/input-range/input-range.jsx b/src/js/input-range/input-range.jsx index 3ed35b0..45d3b9e 100644 --- a/src/js/input-range/input-range.jsx +++ b/src/js/input-range/input-range.jsx @@ -8,7 +8,7 @@ import rangePropType from './range-prop-type'; import valuePropType from './value-prop-type'; import Slider from './slider'; import Track from './track'; -import { captialize, distanceTo, isDefined, isObject, length } from '../utils'; +import { captialize, distanceTo, isDefined, isObject, length, isNumber } from '../utils'; import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from './key-codes'; /** @@ -186,7 +186,6 @@ export default class InputRange extends React.Component { const style = { position: 'absolute', left: `${perc}%`, - height: '1rem', }; return style; @@ -690,6 +689,18 @@ export default class InputRange extends React.Component { thdLabelStyle = this.getStyle(thdLabelVal); } + const inactiveSeqValues = []; + let inactiveSeq = null; + if (isNumber(this.props.value)) { + for (let i = this.props.value; i < this.props.maxValue; i++) { + inactiveSeqValues.push(i); + } + inactiveSeq = inactiveSeqValues.map((value) => { + const style = this.getStyle(value); + return
; + }); + } + return (
- + - + - +