From 5f62ce283aac59b14904a706779c4103b5e5a0e9 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Mon, 31 Aug 2015 01:55:10 +0200 Subject: [PATCH] Time picker first implementation --- components/time_picker/dialog.cjsx | 91 ++++++++++++++++++++++++++++ components/time_picker/index.cjsx | 95 +++++++++++++----------------- components/time_picker/style.styl | 73 ++++++++++++----------- 3 files changed, 172 insertions(+), 87 deletions(-) create mode 100644 components/time_picker/dialog.cjsx diff --git a/components/time_picker/dialog.cjsx b/components/time_picker/dialog.cjsx new file mode 100644 index 000000000..9564bfd96 --- /dev/null +++ b/components/time_picker/dialog.cjsx @@ -0,0 +1,91 @@ +css = require './style' +dateUtils = require '../date_utils' + +Button = require '../button' +Clock = require '../clock' +Dialog = require '../dialog' + +module.exports = React.createClass + + # -- States & Properties + propTypes: + className : React.PropTypes.string + initialTime : React.PropTypes.object + format : React.PropTypes.oneOf(['24hr', 'ampm']) + onTimeSelected : React.PropTypes.func + + getDefaultProps: -> + className : '' + initialTime : new Date() + format : '24hr' + + getInitialState: -> + display : 'hours' + time : @props.initialTime + actions: [ + { caption: "Cancel", type: "flat accent", onClick: @onTimeCancel }, + { caption: "Ok", type: "flat accent", onClick: @onTimeSelected } + ] + + # -- Events + onClockChange: (time) -> + @setState time: time + + onTimeCancel: (ref, method) -> + @refs.dialog.hide() + + onTimeSelected: -> + @props.onTimeSelected(@state.time) if @props.onTimeSelected + @refs.dialog.hide() + + # -- Public methods + displayMinutes: -> + @setState display: 'minutes' + + displayHours: -> + @setState display: 'hours' + + toggleTimeMode: -> + @refs.clock.toggleTimeMode() + + show: -> + @refs.dialog.show() + setTimeout @refs.clock.handleResize, 500 + + # -- Private helpers + _formatHours: -> + if @props.format == 'ampm' then @state.time.getHours() % 12 || 12 else @state.time.getHours() + + # -- Render + render: -> + className = " " + className += " display-#{@state.display}" + className += " format-#{dateUtils.timeMode(@state.time)}" + + +
+ + {_twoDigits(@_formatHours())} + + : + + {_twoDigits(@state.time.getMinutes())} + + { + if @props.format == 'ampm' +
+ AM + PM +
+ } +
+ + + +# -- Private helpers +_twoDigits = (number) -> + ('0' + number).slice(-2) diff --git a/components/time_picker/index.cjsx b/components/time_picker/index.cjsx index 900121bb8..ba05e53ba 100644 --- a/components/time_picker/index.cjsx +++ b/components/time_picker/index.cjsx @@ -1,72 +1,61 @@ -css = require './style' -Clock = require '../clock' -dateUtils = require '../date_utils' +css = require './style' +Input = require '../input' +TimeDialog = require './dialog' module.exports = React.createClass # -- States & Properties propTypes: className : React.PropTypes.string - initialTime : React.PropTypes.object format : React.PropTypes.oneOf(['24hr', 'ampm']) + value : React.PropTypes.object getDefaultProps: -> className : '' - initialTime : new Date() format : '24hr' getInitialState: -> - display : 'hours' - time : @props.initialTime + value : @props.value # -- Events - onClockChange: (time) -> - @setState time: time - - # -- Public methods - displayMinutes: -> - @setState display: 'minutes' - - displayHours: -> - @setState display: 'hours' - - toggleTimeMode: -> - @refs.clock.toggleTimeMode() - - # -- Private helpers - _formatHours: -> - if @props.format == 'ampm' then @state.time.getHours() % 12 || 12 else @state.time.getHours() + onTimeSelected: (time) -> + @refs.input.setValue(@formatTime(time)) + @setState value: time + + openTimeDialog: -> + @refs.dialog.show() + + # -- Private methods + formatTime: (date) -> + hours = date.getHours() + mins = date.getMinutes().toString() + + if (@props.format == "ampm") + isAM = hours < 12 + hours = hours % 12 + additional = if isAM then " am" else " pm" + hours = (hours || 12).toString() + mins = "0" + mins if (mins.length < 2 ) + return hours + (if mins == "00" then "" else ":" + mins) + additional + + hours = hours.toString() + hours = "0" + hours if (hours.length < 2) + mins = "0" + mins if (mins.length < 2) + return hours + ":" + mins # -- Render render: -> - className = " #{@props.className}" - className += " display-#{@state.display}" - className += " format-#{dateUtils.timeMode(@state.time)}" - -
-
- - {_twoDigits(@_formatHours())} - - : - - {_twoDigits(@state.time.getMinutes())} - - { - if @props.format == 'ampm' -
- AM - PM -
- } -
- +
+ +
- -# -- Private helpers -_twoDigits = (number) -> - ('0' + number).slice(-2) diff --git a/components/time_picker/style.styl b/components/time_picker/style.styl index 1e0c325a0..29dea7e2c 100644 --- a/components/time_picker/style.styl +++ b/components/time_picker/style.styl @@ -4,52 +4,57 @@ AMPM_HEIGHT = 22px AMPM_WIDTH = 40px PICKER_WIDTH = 280px -:local(.root) - width : PICKER_WIDTH +// Picker dialog +:local(.dialog) + padding : 0 + width : PICKER_WIDTH + > nav + margin-top : 0 + padding-bottom : 10px :local(.header) - background : ACCENT - color : WHITE - font-size : 52px - padding : 10px - text-align : center - position : relative - width : 100% + background : ACCENT + color : WHITE + font-size : 52px + padding : 10px + text-align : center + position : relative + width : 100% :local(.hours), :local(.minutes) - cursor : pointer - display : inline-block - opacity : .6 + cursor : pointer + display : inline-block + opacity : .6 :local(.separator) - margin : 0 5px - opacity : .6 + margin : 0 5px + opacity : .6 :local(.ampm) - font-size : 16px - height : AMPM_HEIGHT * 2 - line-height : AMPM_HEIGHT - margin-top : - AMPM_HEIGHT - position : absolute - right : 20px - text-align : center - top : 50% - width : AMPM_WIDTH + font-size : 16px + height : AMPM_HEIGHT * 2 + line-height : AMPM_HEIGHT + margin-top : - AMPM_HEIGHT + position : absolute + right : 20px + text-align : center + top : 50% + width : AMPM_WIDTH :local(.am), :local(.pm) - cursor : pointer - display : block - opacity : .6 + cursor : pointer + display : block + opacity : .6 // Modifiers -:local(.root).display-hours :local(.hours) - opacity : 1 +:local(.dialog).display-hours :local(.hours) + opacity : 1 -:local(.root).display-minutes :local(.minutes) - opacity : 1 +:local(.dialog).display-minutes :local(.minutes) + opacity : 1 -:local(.root).format-am :local(.am) - opacity : 1 +:local(.dialog).format-am :local(.am) + opacity : 1 -:local(.root).format-pm :local(.pm) - opacity : 1 +:local(.dialog).format-pm :local(.pm) + opacity : 1