From c5f05fba9e93b7d1da22bb6cdfcc16f0fadd8093 Mon Sep 17 00:00:00 2001
From: Mateusz Mrowiec <mateusz.mrowiec@rspective.pl>
Date: Wed, 19 Oct 2016 14:20:07 +0200
Subject: [PATCH] Implement disabled state for Slider and Progressi Bar

---
 components/progress_bar/ProgressBar.js                   | 4 +++-
 components/progress_bar/_config.scss                     | 1 +
 components/progress_bar/index.d.ts                       | 5 +++++
 components/progress_bar/readme.md                        | 1 +
 components/progress_bar/theme.scss                       | 9 +++++++++
 components/slider/Slider.js                              | 4 ++++
 components/slider/_config.scss                           | 1 +
 components/slider/index.d.ts                             | 5 +++++
 components/slider/readme.md                              | 6 +++++-
 components/slider/theme.scss                             | 7 +++++++
 .../main/modules/examples/progressbar_example_1.txt      | 2 ++
 .../layout/main/modules/examples/slider_example_1.txt    | 5 ++++-
 spec/components/slider.js                                | 5 ++++-
 13 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js
index 2d27ecec..fb38d85c 100644
--- a/components/progress_bar/ProgressBar.js
+++ b/components/progress_bar/ProgressBar.js
@@ -8,6 +8,7 @@ class ProgressBar extends Component {
   static propTypes = {
     buffer: PropTypes.number,
     className: PropTypes.string,
+    disabled: PropTypes.bool,
     max: PropTypes.number,
     min: PropTypes.number,
     mode: PropTypes.oneOf(['determinate', 'indeterminate']),
@@ -79,7 +80,7 @@ class ProgressBar extends Component {
   }
 
   render () {
-    const { className, max, min, mode, multicolor, type, theme, value } = this.props;
+    const { className, disabled, max, min, mode, multicolor, type, theme, value } = this.props;
     const _className = classnames(theme[type], {
       [theme[mode]]: mode,
       [theme.multicolor]: multicolor
@@ -87,6 +88,7 @@ class ProgressBar extends Component {
 
     return (
       <div
+        disabled={disabled}
         data-react-toolbox='progress-bar'
         aria-valuenow={value}
         aria-valuemin={min}
diff --git a/components/progress_bar/_config.scss b/components/progress_bar/_config.scss
index f554b346..143a8096 100644
--- a/components/progress_bar/_config.scss
+++ b/components/progress_bar/_config.scss
@@ -1,6 +1,7 @@
 $progress-height: .4 * $unit !default;
 $progress-main-color: $color-primary !default;
 $progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
+$progress-disabled-color: rgba($color-black, 0.26) !default;
 $circle-wrapper-width: 60 !default;
 $circle-radius: 25 !default;
 $scale-ratio: $circle-radius / 20 !default;
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
index 7d0096e9..8b0b961e 100644
--- a/components/progress_bar/index.d.ts
+++ b/components/progress_bar/index.d.ts
@@ -42,6 +42,11 @@ interface ProgressBarProps extends ReactToolbox.Props {
    * @default 0
    */
   buffer?: number;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Maximum value permitted.
    * @default 100
diff --git a/components/progress_bar/readme.md b/components/progress_bar/readme.md
index 760af9f4..9ca0963c 100644
--- a/components/progress_bar/readme.md
+++ b/components/progress_bar/readme.md
@@ -22,6 +22,7 @@ If you want to provide a theme via context, the component key is `RTProgressBar`
 |:-----|:-----|:-----|:-----|
 | `buffer`      | `Number`    | `0`             | Value of a secondary progress bar useful for buffering.|
 | `className`   | `String`    | `''`            | Additional class name to provide custom styling.|
+| `disabled`    | `Boolean`   | `false`         | If true, component will be disabled.|
 | `max`         | `Number`    | `100`           | Maximum value permitted.|
 | `min`         | `Number`    | `0`             | Minimum value permitted.|
 | `mode`        | `String`    | `indeterminate` | Mode of the progress bar, it can be `determinate` or `indeterminate`.|
diff --git a/components/progress_bar/theme.scss b/components/progress_bar/theme.scss
index bcbc64d9..6f5cc2c1 100644
--- a/components/progress_bar/theme.scss
+++ b/components/progress_bar/theme.scss
@@ -32,11 +32,20 @@
   background-color: $progress-main-color;
 }
 
+[disabled] .value {
+  background-color: $progress-disabled-color;
+}
+
 .buffer {
   background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
   linear-gradient(to right, $progress-main-color, $progress-main-color);
 }
 
+[disabled] .buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+  linear-gradient(to right, $progress-disabled-color, $progress-disabled-color);
+}
+
 .circular {
   position: relative;
   display: inline-block;
diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index 9b3670fc..ff02dd73 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -12,6 +12,7 @@ const factory = (ProgressBar, Input) => {
   class Slider extends Component {
     static propTypes = {
       className: PropTypes.string,
+      disabled: PropTypes.bool,
       editable: PropTypes.bool,
       max: PropTypes.number,
       min: PropTypes.number,
@@ -255,6 +256,7 @@ const factory = (ProgressBar, Input) => {
       const knobStyles = {left: `${this.knobOffset()}%`};
       const className = classnames(theme.slider, {
         [theme.editable]: this.props.editable,
+        [theme.disabled]: this.props.disabled,
         [theme.pinned]: this.props.pinned,
         [theme.pressed]: this.state.pressed,
         [theme.ring]: this.props.value === this.props.min
@@ -263,6 +265,7 @@ const factory = (ProgressBar, Input) => {
       return (
         <div
           className={className}
+          disabled={this.props.disabled}
           data-react-toolbox='slider'
           onBlur={this.handleSliderBlur}
           onFocus={this.handleSliderFocus}
@@ -286,6 +289,7 @@ const factory = (ProgressBar, Input) => {
 
             <div className={theme.progress}>
               <ProgressBar
+                disabled={this.props.disabled}
                 ref='progressbar'
                 className={theme.innerprogress}
                 max={this.props.max}
diff --git a/components/slider/_config.scss b/components/slider/_config.scss
index a5b0799b..6563e301 100644
--- a/components/slider/_config.scss
+++ b/components/slider/_config.scss
@@ -1,5 +1,6 @@
 $slider-main-color: $color-primary !default;
 $slider-main-color-contrast: $color-primary-contrast !default;
+$slider-disabled-color: rgba(177, 177, 177, 1) !default;
 $slider-snap-color: $color-black !default;
 $slider-knob-size: 3.2 * $unit !default;
 $slider-inner-knob-size: 1.2 * $unit !default;
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
index 41014b23..3a58538a 100644
--- a/components/slider/index.d.ts
+++ b/components/slider/index.d.ts
@@ -62,6 +62,11 @@ interface SliderProps extends ReactToolbox.Props {
    * @default false
    */
   editable?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Maximum value permitted.
    * @default 100
diff --git a/components/slider/readme.md b/components/slider/readme.md
index 4d46429b..4830050a 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -9,7 +9,8 @@ import Slider from 'react-toolbox/lib/slider';
 class SliderTest extends React.Component {
   state = {
     slider2: 5,
-    slider3: 1
+    slider3: 1,
+    slider4: 3
   };
 
   handleChange = (slider, value) => {
@@ -27,6 +28,8 @@ class SliderTest extends React.Component {
         <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
         <p>Pinned and with snaps</p>
         <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <p>Disabled</p>
+        <Slider disabled min={0} max={10} value={this.state.slider4} onChange={this.handleChange.bind(this, 'slider4')} />
       </section>
     );
   }
@@ -40,6 +43,7 @@ This component can be styled by context providing a theme with the key `RTSlider
 | Name          | Type          | Default   | Description|
 |:-----|:-----|:-----|:-----|
 | `className`   | `String`      | `''`      | Additional class name to provide custom styling.|
+| `disabled`    | `Boolean`     | `false`   | If true, component will be disabled.|
 | `editable`    | `Boolean`     | `false`   | If true, an input is shown and the user can set the slider from keyboard value.|
 | `max`         | `Number`      | `100`     | Maximum value permitted.|
 | `min`         | `Number`      | `0`       | Minimum value permitted.|
diff --git a/components/slider/theme.scss b/components/slider/theme.scss
index bf346815..310e8009 100644
--- a/components/slider/theme.scss
+++ b/components/slider/theme.scss
@@ -111,6 +111,13 @@
     border-radius: 50%;
     opacity: .26;
   }
+  &[disabled] {
+    pointer-events: none;
+    cursor: auto;
+    .innerknob {
+      background-color: $slider-disabled-color;
+    }
+  }
   &.editable {
     display: flex;
     flex-direction: row;
diff --git a/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt b/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
index 0ed4e9fa..c5fe1807 100644
--- a/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
@@ -43,6 +43,8 @@ class ProgressBarTest extends React.Component {
         <ProgressBar mode='indeterminate'/>
         <p style={{margin: '5px auto'}}>Circular</p>
         <ProgressBar type='circular' mode='indeterminate' multicolor />
+        <p style={{margin: '5px auto'}}>Disabled</p>
+        <ProgressBar disabled mode='determinate' value={57} min={0} max={100}/>
       </section>
     );
   }
diff --git a/docs/app/components/layout/main/modules/examples/slider_example_1.txt b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
index c39c9342..0803c7b0 100644
--- a/docs/app/components/layout/main/modules/examples/slider_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
@@ -1,7 +1,8 @@
 class SliderTest extends React.Component {
   state = {
     slider2: 5,
-    slider3: 1
+    slider3: 1,
+    slider4: 3
   };
 
   handleChange = (slider, value) => {
@@ -19,6 +20,8 @@ class SliderTest extends React.Component {
         <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
         <p>Pinned and with snaps</p>
         <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <p>Disabled</p>
+        <Slider disabled min={0} max={10} value={this.state.slider4} onChange={this.handleChange.bind(this, 'slider4')} />
       </section>
     );
   }
diff --git a/spec/components/slider.js b/spec/components/slider.js
index 43bcb5e7..f0b5a04b 100644
--- a/spec/components/slider.js
+++ b/spec/components/slider.js
@@ -4,7 +4,8 @@ import Slider from '../../components/slider';
 class SliderTest extends React.Component {
   state = {
     slider2: 5,
-    slider3: 1
+    slider3: 1,
+    slider4: 3
   };
 
   handleChange = (slider, value) => {
@@ -21,6 +22,8 @@ class SliderTest extends React.Component {
         <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
         <p>Pinned and with snaps</p>
         <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <p>Disabled</p>
+        <Slider disabled min={0} max={10} value={this.state.slider4} onChange={this.handleChange.bind(this, 'slider4')} />
       </section>
     );
   }