Merge branch 'dev' of https://github.com/Haggus/react-toolbox into Haggus-dev

* 'dev' of https://github.com/Haggus/react-toolbox: Implement disabled state for Slider and Progressi Bar
2016-10-22 16:57:13 +02:00 · 2016-10-22 16:57:13 +02:00 · 69bbba9cce
parent 9f710bfdf9 c5f05fba9e
commit 69bbba9cce
13 changed files with 51 additions and 4 deletions
--- 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}
--- 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;
--- 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
--- 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`.|
--- 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;
--- 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}
--- 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;
--- 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
--- 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.|
--- 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;
--- 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>
    );
  }
--- 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>
    );
  }
--- 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>
    );
  }