TimePicker style and textFieldStyle props

mui · Oct 27, 2015 · 1098b59 · 1098b59
1 parent a18f08b
commit 1098b59
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/docs/src/app/components/pages/components/time-picker.jsx b/docs/src/app/components/pages/components/time-picker.jsx
@@ -49,6 +49,18 @@ let TimePickerPage = React.createClass({
             header: 'default: false',
             desc: 'It\'s technically more correct to refer to "12 noon" and "12 midnight" rather than "12 a.m." and "12 p.m." and it avoids real confusion between different locales. By default (for compatibility reasons) TimePicker uses (12 a.m./12 p.m.) To use (noon/midnight) set pedantic={true}.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of TimePicker\'s root element.',
+          },
+          {
+            name: 'textFieldStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of TimePicker\'s TextField element.',
+          },
         ],
       },
       {
@@ -137,6 +149,20 @@ let TimePickerPage = React.createClass({
             format="24hr"
             hintText="AutoOk"
             autoOk={true} />
+
+          <TimePicker
+            ref="pickerTextfieldStyle"
+            format="24hr"
+            hintText="Override text field style"
+            textFieldStyle={{ fontSize: 'x-large' }} />
+
+          <TimePicker
+            ref="pickerStyle"
+            format="24hr"
+            hintText="Override style"
+            textFieldStyle={{ width: '80%' }}
+            style={{ padding: '5px', borderRadius: '5px', backgroundColor: '#d1d1d1' }} />
+
         </CodeExample>
       </ComponentDoc>
     );

diff --git a/docs/src/app/components/raw-code/time-picker-code.txt b/docs/src/app/components/raw-code/time-picker-code.txt
@@ -12,3 +12,15 @@
 <TimePicker
   hintText="AutoOk"
   autoOk={true} />
+
+//Override TextField/Input Style
+<TimePicker
+  format="24hr"
+  hintText="Override text field style"
+  textFieldStyle={{ fontSize: 'x-large' }} />
+
+//Override Container/Root Element Style
+<TimePicker
+  hintText="Override style"
+  textFieldStyle={{ width: '80%' }}
+  style={{ padding: '5px', borderRadius: '5px', backgroundColor: '#d1d1d1' }} />
diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx
@@ -24,6 +24,12 @@ const TimePicker = React.createClass({
     onChange: React.PropTypes.func,
     onShow: React.PropTypes.func,
     onDismiss: React.PropTypes.func,
+    style: React.PropTypes.object,
+    textFieldStyle: React.PropTypes.object,
+  },
+
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
   },
 
   windowListeners: {
@@ -36,6 +42,7 @@ const TimePicker = React.createClass({
       format: 'ampm',
       pedantic: false,
       autoOk: false,
+      style: {},
     };
   },
 
@@ -84,6 +91,8 @@ const TimePicker = React.createClass({
       onTouchTap,
       onShow,
       onDismiss,
+      style,
+      textFieldStyle,
       ...other,
     } = this.props;
 
@@ -94,9 +103,10 @@ const TimePicker = React.createClass({
     }
 
     return (
-      <div>
+      <div style={this.prepareStyles(style)}>
         <TextField
           {...other}
+          style={textFieldStyle}
           ref="input"
           defaultValue={defaultInputValue}
           onFocus={this._handleInputFocus}