Merge pull request mui#589 from castrolol/master

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;