select: add disabled property (fix #183)

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

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>

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

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