From cae4b01f048fa28201b23ecc0d70dc94d164248e Mon Sep 17 00:00:00 2001 From: Anna Minasyan Date: Thu, 6 Aug 2020 13:16:40 +0400 Subject: [PATCH] fix: Add disabled functionality for slider input --- src/Control/control.css | 18 ++++++++----- src/Control/index.js | 22 ++++++++++----- src/InputSlider/index.js | 6 +++++ src/InputSlider/inputSlider.story.js | 3 ++- src/Slider/index.js | 11 +++++++- src/Slider/slider.css | 40 +++++++++++++++++----------- src/defaults.css | 2 ++ 7 files changed, 70 insertions(+), 32 deletions(-) diff --git a/src/Control/control.css b/src/Control/control.css index ddfb036..8a700ff 100644 --- a/src/Control/control.css +++ b/src/Control/control.css @@ -1,9 +1,13 @@ .control { - @mixin font-scale-6; - transition: left var(--slider-animation-duration) ease-out; - color: var(--slider-control-color); - top: var(--slider-control-top); - position: absolute; - cursor: pointer; - z-index: var(--slider-control-z-index); + @mixin font-scale-6; + transition: left var(--slider-animation-duration) ease-out; + color: var(--slider-control-color); + top: var(--slider-control-top); + position: absolute; + cursor: pointer; + z-index: var(--slider-control-z-index); +} + +.disabled { + color: var(--slider-control-disabled-color); } diff --git a/src/Control/index.js b/src/Control/index.js index 461e4bd..8ec1b2c 100644 --- a/src/Control/index.js +++ b/src/Control/index.js @@ -100,7 +100,11 @@ export class Control extends React.Component { }; onMouseDown = (event) => { - const { onDragStart, name } = this.props; + const { onDragStart, name, disabled } = this.props; + if (disabled) { + return; + } + const { currentStep, left } = this.state; this.addListeners(); @@ -112,8 +116,10 @@ export class Control extends React.Component { onMouseUp = (event) => { const { currentStep, left } = this.state; - const { onDragEnd, name } = this.props; - + const { onDragEnd, name, disabled } = this.props; + if (disabled) { + return; + } this.removeListeners(); if (onDragEnd && typeof onDragEnd === 'function') { @@ -172,18 +178,17 @@ export class Control extends React.Component { style, min, max, + disabled, ...props } = this.props; const { left } = this.state; const controlClassNames = { [styles.control]: true, + [styles.disabled]: disabled, + [className]: className, }; - if (className) { - controlClassNames[className] = true; - } - const sliderStyles = { ...style, left: `${left}px`, @@ -225,6 +230,8 @@ Control.propTypes = { min: PropTypes.number, /** Number, max value of control if not passed will get from Slider Component */ max: PropTypes.number, + /** Boolean, whether control is disabled */ + disabled: PropTypes.bool, /** String, classname that will be passed to wrapper span element */ className: PropTypes.string, /** Object, style that will be added to wrapper span element */ @@ -236,6 +243,7 @@ Control.defaultProps = { onDragEnd: undefined, min: undefined, max: undefined, + disabled: false, className: '', style: undefined, }; diff --git a/src/InputSlider/index.js b/src/InputSlider/index.js index 715cff6..c547bac 100644 --- a/src/InputSlider/index.js +++ b/src/InputSlider/index.js @@ -203,6 +203,7 @@ export class InputSlider extends React.Component { input: InputComponent, inputProps, separator, + disabled, className, children, style, @@ -218,11 +219,13 @@ export class InputSlider extends React.Component { onKeyPress={this.onKeyPress} onChange={this.onChange} onBlur={this.onBlur} + disabled={disabled} value={value} /> {children} @@ -239,6 +242,8 @@ InputSlider.propTypes = { inputProps: PropTypes.object, /** String, character that will separate range input values */ separator: PropTypes.string, + /** Boolean, whether slider input is disabled */ + disabled: PropTypes.bool, /** String, className that will be added to wrapper div */ className: PropTypes.string, /** Number, min difference of range input values */ @@ -262,6 +267,7 @@ InputSlider.propTypes = { InputSlider.defaultProps = { input: TextInput, hasError: false, + disabled: false, separator: '-', inputProps: {}, className: '', diff --git a/src/InputSlider/inputSlider.story.js b/src/InputSlider/inputSlider.story.js index fa23693..c90ac23 100644 --- a/src/InputSlider/inputSlider.story.js +++ b/src/InputSlider/inputSlider.story.js @@ -57,8 +57,9 @@ storiesOf('Form controls/Input Slider', module) - } /> + } disabled /> diff --git a/src/Slider/index.js b/src/Slider/index.js index bd1d387..03b70c6 100644 --- a/src/Slider/index.js +++ b/src/Slider/index.js @@ -57,7 +57,11 @@ export class Slider extends React.Component { event.preventDefault(); } - const { onChange, step, min, max } = this.props; + const { onChange, step, min, max, disabled } = this.props; + if (disabled) { + return; + } + const { maxStepsCount, controls } = this.state; const [minControlName, maxControlName] = Object.keys(controls); @@ -174,6 +178,7 @@ export class Slider extends React.Component { min, max, distance, + disabled, ...props } = this.props; @@ -186,6 +191,7 @@ export class Slider extends React.Component { const sliderClassName = classNames({ [styles.slider]: true, + [styles.disabled]: disabled, [className]: true, }); @@ -234,6 +240,8 @@ Slider.propTypes = { distance: PropTypes.number, /** Number, amount of change per step */ step: PropTypes.number, + /** Boolean, whether slider is disabled */ + disabled: PropTypes.bool, /** Number, min value of input */ min: PropTypes.number, /** Number, max value of input */ @@ -250,6 +258,7 @@ Slider.defaultProps = { onControlChange: undefined, distance: 1, step: 1, + disabled: false, min: 0, max: 100, className: '', diff --git a/src/Slider/slider.css b/src/Slider/slider.css index 8b141d0..d9bc0df 100644 --- a/src/Slider/slider.css +++ b/src/Slider/slider.css @@ -1,24 +1,32 @@ .wrapper { - display: flex; - align-items: center; - min-width: var(--slider-wrapper-min-width); + display: flex; + align-items: center; + min-width: var(--slider-wrapper-min-width); } .slider { - background-color: var(--slider-background-color); - display: inline-block; - position: relative; - border-radius: var(--slider-border-radius); - cursor: pointer; - margin: var(--slider-margin); - width: var(--slider-width); - height: var(--slider-height); + background-color: var(--slider-background-color); + display: inline-block; + position: relative; + border-radius: var(--slider-border-radius); + cursor: pointer; + margin: var(--slider-margin); + width: var(--slider-width); + height: var(--slider-height); +} + +.disabled { + cursor: default; } .sliderLine { - position: absolute; - height: var(--slider-line-height); - border-radius: var(--slider-line-border-radius); - background-color: var(--slider-line-color); - transition: left var(--slider-line-animation-duration) ease-out, width var(--slider-line-animation-duration) ease-out; + position: absolute; + height: var(--slider-line-height); + border-radius: var(--slider-line-border-radius); + background-color: var(--slider-line-color); + transition: left var(--slider-line-animation-duration) ease-out, width var(--slider-line-animation-duration) ease-out; +} + +.disabled .sliderLine { + background-color: var(--slider-background-disabled-color); } diff --git a/src/defaults.css b/src/defaults.css index 4e843ba..8ba4309 100644 --- a/src/defaults.css +++ b/src/defaults.css @@ -319,6 +319,7 @@ --slider-animation-duration: 0.1s; --slider-background-color: var(--default-color); + --slider-background-disabled-color: var(--disabled-color); --slider-line-color: var(--primary-color); --slider-height: 4px; --slider-width: 100%; @@ -329,6 +330,7 @@ --slider-line-animation-duration: var(--slider-animation-duration); --slider-control-border: 0 0 2px var(--neutral-1000-opacity-30); --slider-control-color: var(--primary-color); + --slider-control-disabled-color: var(--disabled-color); --slider-control-size: 16px; --slider-control-top: 4px; --slider-wrapper-min-width: 200px;