Time Picker Component

docs/src/app/app-routes.jsx

@@ -31,6 +31,7 @@ var Snackbar = require('./components/pages/components/snackbar.jsx');
 var Switches = require('./components/pages/components/switches.jsx');
 var Tabs = require('./components/pages/components/tabs.jsx');
 var TextFields = require('./components/pages/components/text-fields.jsx');
+var TimePicker = require('./components/pages/components/time-picker.jsx');
 var Toolbars = require('./components/pages/components/toolbars.jsx');
 
 
@@ -70,6 +71,7 @@ var AppRoutes = (
       <Route name="snackbar" handler={Snackbar} />
       <Route name="tabs" handler={Tabs} />
       <Route name="text-fields" handler={TextFields} />
+      <Route name="time-picker" handler={TimePicker} />
       <Route name="toolbars" handler={Toolbars} />
       <Redirect from="/components" to="appbar" />
     </Route>

docs/src/app/components/pages/components.jsx

@@ -20,6 +20,7 @@ class Components extends React.Component {
       { route: 'snackbar', text: 'Snackbar'},
       { route: 'tabs', text: 'Tabs'},
       { route: 'text-fields', text: 'Text Fields'},
+      { route: 'time-picker', text: 'Time Picker'},
       { route: 'toolbars', text: 'Toolbars'},
     ];
 

docs/src/app/components/pages/components/time-picker.jsx

@@ -0,0 +1,85 @@
+var React = require('react');
+var mui = require('mui');
+var TimePicker = mui.TimePicker;
+var ComponentDoc = require('../../component-doc.jsx');
+
+var TimePickerPage = React.createClass({
+
+  render: function() {
+
+    var code =
+      '//The 12hr format \n' +
+      '<TimePicker\n' +
+      '  format="ampm" \n' +
+      '  hintText="12hr Format" />\n\n' +
+      '//The 24hr format \n' +
+      '<TimePicker\n' +
+      '  format="24hr" \n' +
+      '  hintText="24hr Format" /> '; 
+
+    var componentInfo = [
+      {
+        name: 'Props',
+        infoArray: [
+          {
+            name: 'defaultTime',
+            type: 'date object',
+            header: 'optional',
+            desc: 'This is the initial time value of the component.'
+          },
+          {
+            name: 'format',
+            type: 'one of: ampm, 24hr',
+            header: 'default: ampm',
+            desc: 'Tells the component to display the picker in ampm (12hr) format or 24hr format.'
+          }
+        ]
+      },
+      {
+        name: 'Methods',
+        infoArray: [
+          {
+            name: 'getTime',
+            header: 'DatePicker.getTime()',
+            desc: 'Returns the current time value.'
+          },
+          {
+            name: 'setTime',
+            header: 'DatePicker.setTime(t)',
+            desc: 'Sets the time value to t, where t is a date object.'
+          }
+        ]
+      }
+    ];
+
+    return (
+      <ComponentDoc
+        name="Time Picker"
+        code={code}
+        componentInfo={componentInfo}>
+
+        <TimePicker
+          ref="picker12hr"
+          format="ampm" 
+          hintText="12hr Format" 
+          onChange={this._changeTimePicker24} />
+
+        <TimePicker
+          ref="picker24hr"
+          format="24hr"
+          hintText="24hr Format"
+          onChange={this._changeTimePicker12}  />
+
+      </ComponentDoc>
+    );
+  },
+  _changeTimePicker24: function(err, t){
+    this.refs.picker24hr.setTime(t);
+  },
+  _changeTimePicker12: function(err, t){
+    this.refs.picker12hr.setTime(t);
+  }
+
+});
+
+module.exports = TimePickerPage;

src/index.js

@@ -44,6 +44,7 @@ module.exports = {
   Tab: require('./tabs/tab'),
   Tabs: require('./tabs/tabs'),
   Toggle: require('./toggle'),
+  TimePicker: require('./time-picker'),
   TextField: require('./text-field'),
   Toolbar: require('./toolbar/toolbar'),
   ToolbarGroup: require('./toolbar/toolbar-group'),

src/styles/themes/light-theme.js

@@ -122,6 +122,14 @@ var LightTheme = {
         backgroundColor: '#323232',
         actionColor: palette.accent1Color
       },
+      timePicker: {
+        color: Colors.white,
+        textColor: Colors.grey600,
+        accentColor: palette.primary1Color,
+        clockColor: Colors.black,
+        selectColor: palette.primary2Color,
+        selectTextColor: Colors.white
+      },
       toggle: {
         thumbOnColor: palette.primary1Color,
         thumbOffColor: Colors.grey50,

src/time-picker/clock-button.jsx

@@ -0,0 +1,96 @@
+var React = require('react');
+var StylePropable = require('../mixins/style-propable');
+var EnhancedButton = require('../enhanced-button');
+var Transitions = require('../styles/transitions');
+
+var ClockButton = React.createClass({
+
+  mixins: [StylePropable],
+
+  contextTypes: {
+    theme: React.PropTypes.object
+  },
+
+  propTypes: {
+      position: React.PropTypes.oneOf(['left', 'right'])
+  },
+
+  getDefaultProps: function () {
+      return {
+          position: "left"  
+      };
+  },
+  _handleTouchTap: function(){
+
+    this.setState({
+      selected: true
+    })
+    this.props.onTouchTap();
+  },
+  getTheme: function() {
+    return this.context.theme.component.timePicker;
+  },
+  render: function() {
+
+    var {
+      className,
+      ...other} = this.props;
+
+    var styles = {
+      root: {
+        position: "absolute",
+        bottom: "65px",
+        pointerEvents: "auto",
+        height: "50px", 
+        width: "50px",
+        borderRadius: "100%"
+      },
+
+      label : {
+        position: "absolute",
+        top: "17px",
+        left: "14px"
+      },
+
+      select: {
+        position: 'absolute',
+        height: 50,
+        width: 50,
+        top: "0px",
+        left: "0px",
+        opacity: 0,
+        borderRadius: '50%',
+        transform: 'scale(0)',
+        transition: Transitions.easeOut(),
+        backgroundColor: this.getTheme().accentColor,
+      },
+    };
+
+    if (this.props.selected) {
+      styles.label.color = this.getTheme().selectTextColor;
+      styles.select.opacity = 1;
+      styles.select.transform = 'scale(1)';
+    }
+
+    if( this.props.position == "right" ){
+      styles.root.right = "5px";
+    }else{
+      styles.root.left = "5px";
+    }
+
+
+
+    return (
+        <EnhancedButton {...other}
+          style={this.mergeAndPrefix(styles.root)}
+          disableFocusRipple={true} 
+          disableTouchRipple={true} 
+          onTouchTap={this._handleTouchTap}> 
+          <span  style={this.mergeAndPrefix(styles.select)} />
+          <span  style={this.mergeAndPrefix(styles.label)} >{this.props.children}</span>
+        </EnhancedButton> 
+    );
+  }
+});
+
+module.exports = ClockButton;