Merge pull request mui#1949 from tyfoo/feature/TimePicker-override-styles

oliviertassinari · oliviertassinari · commit aa7e54174277 · 2015-10-27T13:22:12.000+01:00
[TimePicker] added style and textFieldStyle (same as DatePicker)
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}
