Select react component changes (change component properties)

Author: arielger

index.js

@@ -44,7 +44,7 @@ class ReactComponents extends React.Component {
         playground: {
           codeText: EmptyStateExample,
           scope: { React, EmptyState },
-          docClass: EmptyStateExample
+          docClass: EmptyState
         }
       }
     ];

landing/styles/main.styl

@@ -1,7 +1,4 @@
 .auth0-styleguide
-  // display: none
-  // &.loaded
-  //   display: block
 
   @import '../../lib/vars/index'
   @import '../../lib/mixins/index'

lib/react/select/example.txt

@@ -1,6 +1,6 @@
 <Select
   options={[ 'Name', 'Company', 'Location' ]}
+  selected={0}
+  handleChange={(e) => {console.log('Selected value: ' + e.target.value);}}
   label="Search users by"
-  color="#000"
-  afterSelect={(selected) => { console.log(selected); }}
 />

lib/react/select/index.js

@@ -1,64 +1,36 @@
-import React, {Component} from "react";
-import styles from "./index.styl";
-
-export default class select extends Component {
-  static defaultProps = {
-    options: ["None"],
-    label: "",
-    color: "#0a86b1",
-    width: 100,
-    afterSelect: () => {}
-
-  };
-
-  static propTypes = {
-    options: React.PropTypes.array.isRequired,
-    label: React.PropTypes.string,
-    color: React.PropTypes.string,
-    width: React.PropTypes.number,
-    afterSelect: React.PropTypes.func
-  };
-
-  state = {
-    selected: 0
-  };
-
-  showLabel() {
-    if(this.props.label.length) {
-      return (<span>{this.props.label} </span>);
-    }
-  }
-
-  handleChange(e) {
-    this.setState({
-      selected: e.target.value
-    })
-
-    return this.props.afterSelect(this.props.options[e.target.value])
-  }
-
-  render() {
-    var options = this.props.options;
-    var linkCSS = {
-      maxWidth: this.props.width,
-      color: this.props.color
-    };
-
-    return (
-      <div className={styles.select} onChange={this.handleChange.bind(this)}>
-        {this.showLabel()}
-        <span className={styles.value + ' text-truncate'} style={linkCSS}>{options[this.state.selected]}</span>
-        <i className="icon-budicon-460"></i>
-        <select>
-          {
-            options.map((name, index) => {
-              return (
-                <option key={index} value={index}>{name}</option>
-              );
-            })
-          }
-        </select>
-      </div>
-    );
-  }
-}
+import React, { Component, PropTypes } from 'react';
+import styles from './index.styl';
+
+const Select = (props) => {
+  const { options, selected, label, color, handleChange } = props;
+
+  return (
+    <div className={styles.select}>
+      { label && <span>{label}</span> }
+      <span className={`${styles.value} text-truncate`} style={{ color }}>{options[selected]}</span>
+      <i className="icon-budicon-460" />
+      <select onChange={handleChange} {...props}>
+        {
+          options.map((name, index) => <option key={index} value={index}>{name}</option>)
+        }
+      </select>
+    </div>
+  );
+};
+
+Select.defaultProps = {
+  options: [ 'Default' ],
+  selected: 0,
+  label: '',
+  handleChange: () => {}
+};
+
+Select.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string).isRequired,
+  selected: PropTypes.number.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  color: PropTypes.string
+};
+
+export default Select;

lib/react/select/index.styl

@@ -1,36 +1,39 @@
+@import '../../vars/index'
+
 .select
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  cursor: pointer;
-  height: 35px;
-  line-height: 35px;
-  padding: 0 15px;
-  padding-right: 25px;
-  cursor: pointer;
-  background: #e6e6e6;
-  border-radius: 3px;
+  display inline-block
+  vertical-align top
+  position relative
+  cursor pointer
+  height 35px
+  line-height 35px
+  padding 0 15px
+  padding-right 25px
+  cursor pointer
+  background $bg-color-gray
+  border-radius $border-radius-base
 
   > span
-    display: inline-block;
-    overflow: hidden;
+    display inline-block
+    overflow hidden
 
   .value
-    max-width: 110px;
-    margin-left: 4px;
+    max-width 110px
+    margin-left 4px
+    color $color-blue-medium
 
   i
-    position: absolute;
-    right: 8px;
-    top: 14px;
-    font-size: 12px;
-    opacity: 0.7;
+    position absolute
+    right 8px
+    top 14px
+    font-size 12px
+    opacity 0.7
 
   select
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    -webkit-appearance: none;
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    opacity 0
+    -webkit-appearance none