Merge pull request #966 from tylermichael/selectField-patch-1

[SelectField] Allow hintText and fixed some UX bugs
mui · Jun 27, 2015 · 7c76006 · 7c76006 · mattapperson · Jun 27, 2015
2 parents 8f7680f + 8309520
commit 7c76006
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 22 deletions.
diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx
@@ -78,17 +78,19 @@ let TextFieldsPage = React.createClass({
       '  hintText="Disabled Hint Text"\n' +
       '  disabled={true}\n' +
       '  defaultValue="Disabled With Value" />\n\n' +
+
+      '//Select Fields\n' +
       '<SelectField\n'+
-        'value={this.state.selectValue}\n'+
-        'onChange={this._handleSelectValueChange}\n'+
-        'floatingLabelText="Select Field"\n'+
-        'menuItems={menuItems} />\n'+
+      '  value={this.state.selectValue}\n'+
+      '  onChange={this._handleSelectValueChange}\n'+
+      '  hintText="Select Field"\n'+
+      '  menuItems={menuItems} />\n'+
       '<SelectField\n'+
-        'valueLink={this.linkState("selectValueLinkValue")}\n'+
-        'floatingLabelText="Select Field"\n'+
-        'valueMember="id"\n'+
-        'displayMember="name"\n'+
-        'menuItems={arbitraryArrayMenuItems} />\n'+
+      '  valueLink={this.linkState("selectValueLinkValue")}\n'+
+      '  floatingLabelText="Select Field"\n'+
+      '  valueMember="id"\n'+
+      '  displayMember="name"\n'+
+      '  menuItems={arbitraryArrayMenuItems} />\n\n'+
 
       '//Floating Hint Text Labels\n' +
       '<TextField\n' +
@@ -265,11 +267,11 @@ let TextFieldsPage = React.createClass({
       { payload: '5', text: 'Weekly' },
     ];
     let arbitraryArrayMenuItems = [
-     {id:1, name:'Never'},
-     {id:2, name:'Every Night'},
-     {id:3, name:'Weeknights'},
-     {id:4, name:'Weekends'},
-     {id:5, name:'Weekly'}
+      {id:1, name:'Never'},
+      {id:2, name:'Every Night'},
+      {id:3, name:'Weeknights'},
+      {id:4, name:'Weekends'},
+      {id:5, name:'Weekly'}
     ];
 
     return (
@@ -324,6 +326,7 @@ let TextFieldsPage = React.createClass({
             <SelectField
               value={this.state.selectValue}
               onChange={this._handleSelectValueChange}
+              hintText="Select Field"
               floatingLabelText="Select Field"
               menuItems={menuItems} />
             <SelectField

diff --git a/src/select-field.jsx b/src/select-field.jsx
@@ -16,6 +16,10 @@ let SelectField = React.createClass({
   propTypes: {
     errorText: React.PropTypes.string,
     floatingLabelText: React.PropTypes.string,
+    selectFieldRoot: React.PropTypes.string,
+    underlineStyle: React.PropTypes.string,
+    labelStyle: React.PropTypes.string,
+    hintText: React.PropTypes.string,
     hintText: React.PropTypes.string,
     id: React.PropTypes.string,
     multiLine: React.PropTypes.bool,
@@ -27,6 +31,7 @@ let SelectField = React.createClass({
     type: React.PropTypes.string,
     rows: React.PropTypes.number,
     inputStyle: React.PropTypes.object,
+    iconStyle: React.PropTypes.object,
     floatingLabelStyle: React.PropTypes.object,
     autoWidth: React.PropTypes.bool,
     menuItems: React.PropTypes.array.isRequired,
@@ -40,11 +45,12 @@ let SelectField = React.createClass({
 
   getStyles() {
     let styles = {
-      selectfield:{
+      selectField:{
         root: {
-          height:'auto',
+          height:'48px',
           position:'relative',
-          width:'100%'
+          width:'100%',
+          top: '18px'
         },
         label: {
           paddingLeft:0,
@@ -77,12 +83,12 @@ let SelectField = React.createClass({
       <TextField {...this.props}>
         <DropDownMenu {...this.props}
           onChange={this.onChange}
-          style={styles.selectfield.root}
-          labelStyle={styles.selectfield.label}
-          iconStyle={styles.selectfield.icon}
-          underlineStyle={styles.selectfield.underline}
+          style={this.mergeAndPrefix(styles.selectField.root, this.props.selectFieldRoot)}
+          labelStyle={this.mergeAndPrefix(styles.selectField.label, this.props.labelStyle)}
+          iconStyle={this.mergeAndPrefix(styles.selectField.icon, this.props.iconStyle)}
+          underlineStyle={this.mergeAndPrefix(styles.selectField.underline, this.props.underlineStyle)}
           autoWidth={false}
-          />
+        />
       </TextField>
     );
   }