From c76fa9aa192e24a0be26fee2f8d863ed025b5c65 Mon Sep 17 00:00:00 2001
From: Mirco Zeiss <mirco.zeiss@gmail.com>
Date: Wed, 30 Nov 2016 09:51:17 +0100
Subject: [PATCH] select: add disabled property (fix #183)

---
 components/select/Select.scss         |  5 +++
 components/select/index.js            |  5 ++-
 components/select/test/test.js        |  5 +++
 examples/js/components/selectRoute.js | 55 +++++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/components/select/Select.scss b/components/select/Select.scss
index 0236f6129..08fb4a54e 100644
--- a/components/select/Select.scss
+++ b/components/select/Select.scss
@@ -34,6 +34,11 @@
   outline: 0;
 }
 
+// https://material.google.com/style/color.html#color-text-background-colors
+.Select-body:disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
 .Select-placeholder {
   color: rgba(0, 0, 0, 0.54);
 }
diff --git a/components/select/index.js b/components/select/index.js
index 6107e692d..5da207935 100644
--- a/components/select/index.js
+++ b/components/select/index.js
@@ -18,6 +18,7 @@ const MAX_LIST_LENGTH = 5
 export default class Select extends React.Component {
 
   static propTypes = {
+    disabled: React.PropTypes.bool,
     label: React.PropTypes.string,
     items: React.PropTypes.array,
     placeholder: React.PropTypes.string,
@@ -79,7 +80,7 @@ export default class Select extends React.Component {
   }
 
   render () {
-    const {selectedIndex, label} = this.props
+    const {selectedIndex, label, disabled} = this.props
     const {open} = this.state
     const empty = selectedIndex === -1
     const text = empty ? this.props.placeholder : this.props.items[selectedIndex]
@@ -90,7 +91,7 @@ export default class Select extends React.Component {
           label &&
           <span className='Select-label'>{this.props.label}</span>
         }
-        <button className='Select-body' onClick={this.open}>
+        <button className='Select-body' onClick={this.open} disabled={disabled}>
           <span className={empty ? 'Select-placeholder' : ''}>
             {text}
           </span>
diff --git a/components/select/test/test.js b/components/select/test/test.js
index cd69b64db..586b69510 100644
--- a/components/select/test/test.js
+++ b/components/select/test/test.js
@@ -24,6 +24,11 @@ describe('Select', () => {
     assert.equal(wrapper.find('.Select-placeholder').text(), 'Placeholder')
   })
 
+  it('should allow disabling the button', () => {
+    const wrapper = mount(<Select onChange={noop} disabled />)
+    assert(wrapper.find('.Select-body').props().disabled)
+  })
+
   it('should render a given value instead of placeholder', () => {
     const wrapper = mount(
       <Select
diff --git a/examples/js/components/selectRoute.js b/examples/js/components/selectRoute.js
index 5b25a5d77..7f8d386d5 100644
--- a/examples/js/components/selectRoute.js
+++ b/examples/js/components/selectRoute.js
@@ -89,6 +89,52 @@ const selectWithLabelComponent =
 
 ReactDOM.render(<App />, mountNode)`
 
+const selectDisabled =
+`
+class App extends React.Component {
+
+  state = {
+    first: -1,
+    second: -1
+  }
+
+  onChangeFirst = (index) => {
+    this.setState({
+      first: index
+    })
+  }
+
+  onChangeSecond = (index) => {
+    this.setState({
+      second: index
+    })
+  }
+
+  render () {
+    return (
+      <div style={{display: 'flex'}}>
+        <Select
+          label='first'
+          onChange={this.onChangeFirst}
+          items={['One', 'Two', 'Three']}
+          selectedIndex={this.state.first}
+        />
+        <Select
+          label='second'
+          onChange={this.onChangeSecond}
+          items={['Eleven', 'Twelve', 'Thirteen']}
+          selectedIndex={this.state.second}
+          disabled={this.state.first === -1}
+        />
+      </div>
+    )
+  }
+
+}
+
+ReactDOM.render(<App />, mountNode)
+`
+
 export default class SelectRoute extends React.Component {
 
   render () {
@@ -122,6 +168,15 @@ export default class SelectRoute extends React.Component {
             collapsableCode
           />
         </section>
+        <section>
+          <h2>Disabled select</h2>
+          <Playground
+            codeText={selectDisabled}
+            scope={{React, ReactDOM, Select}}
+            noRender={false}
+            collapsableCode
+          />
+        </section>
         <section>
           <h2>Default select</h2>
           <Playground