Merge pull request #88 from sflpro/feature-slider-input-disabled-func…

…tionality

fix: Add disabled functionality for slider input

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);
 }

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,
 };

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}
         />
         <Slider
           {...props}
           onControlChange={this.setMinMax}
+          disabled={disabled}
           className={styles.inputSlider}
         >
           {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: '',

src/InputSlider/inputSlider.story.js

@@ -57,8 +57,9 @@ storiesOf('Form controls/Input Slider', module)
                 <InputSlider
                   onChange={handler}
                   step={5}
+                  disabled
                 >
-                  <Control name='test3' value={state.test3} icon={<Icon name='cross' />} />
+                  <Control name='test3' value={state.test3} icon={<Icon name='cross' />} disabled />
                 </InputSlider>
               </Item>
             </ItemRow>

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: '',

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);
 }

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;