Skip to content

Commit 1348d0a

Browse files
hai-ceahai-cea
committed
Merge pull request #589 from castrolol/master
Time Picker Component
2 parents 77daca2 + fd08126 commit 1348d0a

15 files changed

Lines changed: 1329 additions & 0 deletions

File tree

‎docs/src/app/app-routes.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ var Snackbar = require('./components/pages/components/snackbar.jsx');
3131
var Switches = require('./components/pages/components/switches.jsx');
3232
var Tabs = require('./components/pages/components/tabs.jsx');
3333
var TextFields = require('./components/pages/components/text-fields.jsx');
34+
var TimePicker = require('./components/pages/components/time-picker.jsx');
3435
var Toolbars = require('./components/pages/components/toolbars.jsx');
3536

3637

@@ -70,6 +71,7 @@ var AppRoutes = (
7071
<Route name="snackbar" handler={Snackbar} />
7172
<Route name="tabs" handler={Tabs} />
7273
<Route name="text-fields" handler={TextFields} />
74+
<Route name="time-picker" handler={TimePicker} />
7375
<Route name="toolbars" handler={Toolbars} />
7476
<Redirect from="/components" to="appbar" />
7577
</Route>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ class Components extends React.Component {
2020
{ route: 'snackbar', text: 'Snackbar'},
2121
{ route: 'tabs', text: 'Tabs'},
2222
{ route: 'text-fields', text: 'Text Fields'},
23+
{ route: 'time-picker', text: 'Time Picker'},
2324
{ route: 'toolbars', text: 'Toolbars'},
2425
];
2526

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
var React = require('react');
2+
var mui = require('mui');
3+
var TimePicker = mui.TimePicker;
4+
var ComponentDoc = require('../../component-doc.jsx');
5+
6+
var TimePickerPage = React.createClass({
7+
8+
render: function() {
9+
10+
var code =
11+
'//The 12hr format \n' +
12+
'<TimePicker\n' +
13+
' format="ampm" \n' +
14+
' hintText="12hr Format" />\n\n' +
15+
'//The 24hr format \n' +
16+
'<TimePicker\n' +
17+
' format="24hr" \n' +
18+
' hintText="24hr Format" /> ';
19+
20+
var componentInfo = [
21+
{
22+
name: 'Props',
23+
infoArray: [
24+
{
25+
name: 'defaultTime',
26+
type: 'date object',
27+
header: 'optional',
28+
desc: 'This is the initial time value of the component.'
29+
},
30+
{
31+
name: 'format',
32+
type: 'one of: ampm, 24hr',
33+
header: 'default: ampm',
34+
desc: 'Tells the component to display the picker in ampm (12hr) format or 24hr format.'
35+
}
36+
]
37+
},
38+
{
39+
name: 'Methods',
40+
infoArray: [
41+
{
42+
name: 'getTime',
43+
header: 'DatePicker.getTime()',
44+
desc: 'Returns the current time value.'
45+
},
46+
{
47+
name: 'setTime',
48+
header: 'DatePicker.setTime(t)',
49+
desc: 'Sets the time value to t, where t is a date object.'
50+
}
51+
]
52+
}
53+
];
54+
55+
return (
56+
<ComponentDoc
57+
name="Time Picker"
58+
code={code}
59+
componentInfo={componentInfo}>
60+
61+
<TimePicker
62+
ref="picker12hr"
63+
format="ampm"
64+
hintText="12hr Format"
65+
onChange={this._changeTimePicker24} />
66+
67+
<TimePicker
68+
ref="picker24hr"
69+
format="24hr"
70+
hintText="24hr Format"
71+
onChange={this._changeTimePicker12} />
72+
73+
</ComponentDoc>
74+
);
75+
},
76+
_changeTimePicker24: function(err, t){
77+
this.refs.picker24hr.setTime(t);
78+
},
79+
_changeTimePicker12: function(err, t){
80+
this.refs.picker12hr.setTime(t);
81+
}
82+
83+
});
84+
85+
module.exports = TimePickerPage;

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ module.exports = {
4444
Tab: require('./tabs/tab'),
4545
Tabs: require('./tabs/tabs'),
4646
Toggle: require('./toggle'),
47+
TimePicker: require('./time-picker'),
4748
TextField: require('./text-field'),
4849
Toolbar: require('./toolbar/toolbar'),
4950
ToolbarGroup: require('./toolbar/toolbar-group'),

‎src/styles/themes/light-theme.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,14 @@ var LightTheme = {
122122
backgroundColor: '#323232',
123123
actionColor: palette.accent1Color
124124
},
125+
timePicker: {
126+
color: Colors.white,
127+
textColor: Colors.grey600,
128+
accentColor: palette.primary1Color,
129+
clockColor: Colors.black,
130+
selectColor: palette.primary2Color,
131+
selectTextColor: Colors.white
132+
},
125133
toggle: {
126134
thumbOnColor: palette.primary1Color,
127135
thumbOffColor: Colors.grey50,

‎src/time-picker/clock-button.jsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
var React = require('react');
2+
var StylePropable = require('../mixins/style-propable');
3+
var EnhancedButton = require('../enhanced-button');
4+
var Transitions = require('../styles/transitions');
5+
6+
var ClockButton = React.createClass({
7+
8+
mixins: [StylePropable],
9+
10+
contextTypes: {
11+
theme: React.PropTypes.object
12+
},
13+
14+
propTypes: {
15+
position: React.PropTypes.oneOf(['left', 'right'])
16+
},
17+
18+
getDefaultProps: function () {
19+
return {
20+
position: "left"
21+
};
22+
},
23+
_handleTouchTap: function(){
24+
25+
this.setState({
26+
selected: true
27+
})
28+
this.props.onTouchTap();
29+
},
30+
getTheme: function() {
31+
return this.context.theme.component.timePicker;
32+
},
33+
render: function() {
34+
35+
var {
36+
className,
37+
...other} = this.props;
38+
39+
var styles = {
40+
root: {
41+
position: "absolute",
42+
bottom: "65px",
43+
pointerEvents: "auto",
44+
height: "50px",
45+
width: "50px",
46+
borderRadius: "100%"
47+
},
48+
49+
label : {
50+
position: "absolute",
51+
top: "17px",
52+
left: "14px"
53+
},
54+
55+
select: {
56+
position: 'absolute',
57+
height: 50,
58+
width: 50,
59+
top: "0px",
60+
left: "0px",
61+
opacity: 0,
62+
borderRadius: '50%',
63+
transform: 'scale(0)',
64+
transition: Transitions.easeOut(),
65+
backgroundColor: this.getTheme().accentColor,
66+
},
67+
};
68+
69+
if (this.props.selected) {
70+
styles.label.color = this.getTheme().selectTextColor;
71+
styles.select.opacity = 1;
72+
styles.select.transform = 'scale(1)';
73+
}
74+
75+
if( this.props.position == "right" ){
76+
styles.root.right = "5px";
77+
}else{
78+
styles.root.left = "5px";
79+
}
80+
81+
82+
83+
return (
84+
<EnhancedButton {...other}
85+
style={this.mergeAndPrefix(styles.root)}
86+
disableFocusRipple={true}
87+
disableTouchRipple={true}
88+
onTouchTap={this._handleTouchTap}>
89+
<span style={this.mergeAndPrefix(styles.select)} />
90+
<span style={this.mergeAndPrefix(styles.label)} >{this.props.children}</span>
91+
</EnhancedButton>
92+
);
93+
}
94+
});
95+
96+
module.exports = ClockButton;

0 commit comments

Comments
 (0)