timepicker.js

'use strict';Object.defineProperty(exports,'__esModule',{value:true});exports.Clock=exports.Info=exports.Timepicker=undefined;var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if('value'in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _propTypes=require('prop-types');var _propTypes2=_interopRequireDefault(_propTypes);var _react=require('react');var _react2=_interopRequireDefault(_react);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError('Cannot call a class as a function')}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called')}return call&&(typeof call==='object'||typeof call==='function')?call:self}function _inherits(subClass,superClass){if(typeof superClass!=='function'&&superClass!==null){throw new TypeError('Super expression must either be null or a function, not '+typeof superClass)}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass}var Timepicker=exports.Timepicker=function(_React$Component){_inherits(Timepicker,_React$Component);function Timepicker(_ref){var hours=_ref.hours,minutes=_ref.minutes,mode=_ref.mode;_classCallCheck(this,Timepicker);var _this=_possibleConstructorReturn(this,(Timepicker.__proto__||Object.getPrototypeOf(Timepicker)).apply(this,arguments));_this.state={hours:hours,minutes:minutes,mode:mode};_this.onChange=_this.onChange.bind(_this);_this.onChangeMode=_this.onChangeMode.bind(_this);return _this}_createClass(Timepicker,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(_ref2){var hours=_ref2.hours,minutes=_ref2.minutes,mode=_ref2.mode;var diff={};var props=this.props;if(props.hours!==hours)diff.hours=hours;if(props.minutes!==minutes)diff.minutes=minutes;if(props.mode!==mode)diff.mode=mode;this.setState(diff)}},{key:'render',value:function render(){var _state=this.state,hours=_state.hours,minutes=_state.minutes,mode=_state.mode;var _props=this.props,formatNumber=_props.formatNumber,militaryTime=_props.militaryTime,radius=_props.radius,size=_props.size;return _react2.default.createElement('div',{className:'timepicker'},_react2.default.createElement(Timepicker.Info,{formatNumber:formatNumber,hours:hours,minutes:minutes,mode:mode,onChangeMode:this.onChangeMode,size:size}),_react2.default.createElement(Timepicker.Clock,{hours:hours,minutes:minutes,mode:mode,size:size,formatNumber:formatNumber,onChangeMode:this.onChangeMode,militaryTime:militaryTime,radius:radius,onChange:this.onChange}))}},{key:'onChange',value:function onChange(hours,minutes){this.setState({hours:hours,minutes:minutes});if(this.props.onChange)this.props.onChange(hours,minutes)}},{key:'onChangeMode',value:function onChangeMode(mode){this.setState({mode:mode});if(this.props.onChangeMode)this.props.onChangeMode(mode)}}]);return Timepicker}(_react2.default.Component);Timepicker.HOURS=true;Timepicker.MINUTES=false;Timepicker.propTypes=process.env.NODE_ENV!=='production'?{formatNumber:_propTypes2.default.func,hours:_propTypes2.default.number,militaryTime:_propTypes2.default.bool,minutes:_propTypes2.default.number,mode:_propTypes2.default.bool,onChange:_propTypes2.default.func,onChangeMode:_propTypes2.default.func,radius:_propTypes2.default.number,size:_propTypes2.default.number}:{};Timepicker.defaultProps={formatNumber:function formatNumber(value/*, mode */){return value<10?'0'+value:value},hours:0,militaryTime:true,minutes:0,mode:Timepicker.HOURS,radius:125,size:300};var Info=exports.Info=function(_React$Component2){_inherits(Info,_React$Component2);function Info(){_classCallCheck(this,Info);var _this2=_possibleConstructorReturn(this,(Info.__proto__||Object.getPrototypeOf(Info)).apply(this,arguments));_this2.onClickHours=_this2.onClickHours.bind(_this2);_this2.onClickMinutes=_this2.onClickMinutes.bind(_this2);return _this2}_createClass(Info,[{key:'render',value:function render(){var _props2=this.props,formatNumber=_props2.formatNumber,hours=_props2.hours,minutes=_props2.minutes,mode=_props2.mode,size=_props2.size;return _react2.default.createElement('p',{className:'timepicker-info',style:{width:size}},_react2.default.createElement('span',{className:'timepicker-info-digits'+(mode===Timepicker.HOURS?' active':''),onClick:this.onClickHours},formatNumber(hours,'info')),':',_react2.default.createElement('span',{className:'timepicker-info-digits'+(mode===Timepicker.MINUTES?' active':''),onClick:this.onClickMinutes},formatNumber(minutes,'info')))}},{key:'onClickHours',value:function onClickHours(){if(this.props.onChangeMode)this.props.onChangeMode(Timepicker.HOURS)}},{key:'onClickMinutes',value:function onClickMinutes(){if(this.props.onChangeMode)this.props.onChangeMode(Timepicker.MINUTES)}}]);return Info}(_react2.default.Component);Info.propTypes=process.env.NODE_ENV!=='production'?{formatNumber:_propTypes2.default.func.isRequired,hours:_propTypes2.default.number.isRequired,minutes:_propTypes2.default.number.isRequired,mode:_propTypes2.default.bool.isRequired,onChangeMode:_propTypes2.default.func,size:_propTypes2.default.number.isRequired}:{};Timepicker.Info=Info;var Clock=exports.Clock=function(_React$Component3){_inherits(Clock,_React$Component3);function Clock(_ref3){var hours=_ref3.hours,militaryTime=_ref3.militaryTime,minutes=_ref3.minutes,mode=_ref3.mode;_classCallCheck(this,Clock);var _this3=_possibleConstructorReturn(this,(Clock.__proto__||Object.getPrototypeOf(Clock)).apply(this,arguments));_this3.state={even:true,hours:hours%(militaryTime?24:12),minutes:minutes%60,mode:mode,positionsHours:_this3.calculatePositionsHours(),positionsMinutes:_this3.calculatePositionsMinutes()};_this3.onHand1=_this3.onHand1.bind(_this3);_this3.onHand2=_this3.onHand2.bind(_this3);return _this3}_createClass(Clock,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(_ref4){var hours=_ref4.hours,militaryTime=_ref4.militaryTime,minutes=_ref4.minutes,mode=_ref4.mode,radius=_ref4.radius,size=_ref4.size;var props=this.props;if(size!==props.size||radius!==props.radius){this.setState({positionsHours:this.calculatePositionsHours(),positionsMinutes:this.calculatePositionsMinutes()})}else if(militaryTime!==props.militaryTime){this.setState({positionsHours:this.calculatePositionsHours()})}if(mode!==props.mode)this.setState({mode:mode});if(hours!==props.hours)this.setState({hours:hours%(militaryTime?24:12)});if(minutes!==props.minutes)this.setState({minutes:minutes%60})}},{key:'componentDidMount',value:function componentDidMount(){this.componentDidUpdate({})}},{key:'componentDidUpdate',value:function componentDidUpdate(previousProps,previousState){var _props3=this.props,militaryTime=_props3.militaryTime,mode=_props3.mode,size=_props3.size;var _state2=this.state,even=_state2.even,hours=_state2.hours,minutes=_state2.minutes,positionsHours=_state2.positionsHours,positionsMinutes=_state2.positionsMinutes;if(previousProps.mode===mode&&previousState.hours===hours&&previousState.minutes===minutes)return;var hand1=even?this.hand1:this.hand2;var hand2=even?this.hand2:this.hand1;hand1.setAttribute('x2',mode?positionsHours[hours===0?militaryTime?23:11:hours-1][0]:positionsMinutes[minutes][0]);hand1.setAttribute('y2',mode?positionsHours[hours===0?militaryTime?23:11:hours-1][1]:positionsMinutes[minutes][1]);if(previousProps.mode!==mode){hand2.setAttribute('x2',size/2);hand2.setAttribute('y2',size/2)}var dx1=hand1.getAttribute('x1')-hand1.getAttribute('x2');var dy1=hand1.getAttribute('y1')-hand1.getAttribute('y2');var dx2=hand2.getAttribute('x1')-hand2.getAttribute('x2');var dy2=hand2.getAttribute('y1')-hand2.getAttribute('y2');var hand1Length=Math.ceil(Math.sqrt(dx1*dx1+dy1*dy1));var hand2Length=Math.ceil(Math.sqrt(dx2*dx2+dy2*dy2));hand1.style.strokeDasharray=hand1Length;hand2.style.strokeDasharray=hand2Length;hand1.style.strokeDashoffset=hand1Length;hand2.style.strokeDashoffset='0';hand1.style.transitionProperty='none';hand2.style.transitionProperty='none';hand1.getBoundingClientRect();hand2.getBoundingClientRect();hand1.style.transitionProperty='stroke-dashoffset';hand2.style.transitionProperty='stroke-dashoffset';hand1.style.strokeDashoffset='0';hand2.style.strokeDashoffset=hand2Length}},{key:'render',value:function render(){var size=this.props.size;var mode=this.state.mode;return _react2.default.createElement('svg',{height:size,width:size},_react2.default.createElement('line',{ref:this.onHand1,className:'timepicker-hand',x1:size/2,y1:size/2,x2:size/2,y2:size/2}),_react2.default.createElement('line',{ref:this.onHand2,className:'timepicker-hand',x1:size/2,y1:size/2,x2:size/2,y2:size/2}),_react2.default.createElement('g',{className:'timepicker-'+(mode?'visible':'invisible')},this.renderHoursBubbles()),_react2.default.createElement('g',{className:'timepicker-'+(mode?'invisible':'visible')},this.renderMinutesBubbles()))}},{key:'renderHoursBubbles',value:function renderHoursBubbles(){var formatNumber=this.props.formatNumber;var _state3=this.state,hours=_state3.hours,positions=_state3.positionsHours;var bubbles=[];for(var index=0;index<positions.length;++index){var x=positions[index][0];var y=positions[index][1];var hour=(index+1)%24;var onClick=this.onClickHour(hour);var onMouseMove=this.onMouseMoveHour(hour);bubbles.push(_react2.default.createElement('g',{className:'timepicker-bubble'+(hours===hour?' active':''),key:index,onClick:onClick,onMouseMove:onMouseMove,onMouseUp:onMouseMove},_react2.default.createElement('circle',{cx:x,cy:y,r:15}),_react2.default.createElement('text',{x:x,y:y},formatNumber(hour,'clock'))))}return bubbles}},{key:'renderMinutesBubbles',value:function renderMinutesBubbles(){var formatNumber=this.props.formatNumber;var _state4=this.state,minutes=_state4.minutes,positions=_state4.positionsMinutes;var bubbles=[];for(var minute=0;minute<positions.length;++minute){var x=positions[minute][0];var y=positions[minute][1];var onClick=this.onClickMinute(minute);var onMouseMove=this.onMouseMoveMinute(minute);bubbles.push(_react2.default.createElement('g',{className:'timepicker-bubble'+(minute%5?' small':'')+(minutes===minute?' active':''),key:minute,onClick:onClick,onMouseMove:onMouseMove},_react2.default.createElement('circle',{cx:x,cy:y,r:minute%5?minutes===minute?5:0:15}),minute%5?_react2.default.createElement('circle',{cx:x,cy:y,r:10}):_react2.default.createElement('text',{x:x,y:y},formatNumber(minute,'clock'))))}return bubbles}},{key:'onChange',value:function onChange(){if(this.props.onChange)this.props.onChange(this.state.hours,this.state.minutes);if(this.props.onChangeMode)this.props.onChangeMode(this.state.mode)}},{key:'onClickHour',value:function onClickHour(hours){var _this4=this;return function(event,preventChangeMode){if(_this4.state.hours===hours&&preventChangeMode)return;_this4.setState({even:!_this4.state.even,hours:hours,mode:preventChangeMode?_this4.state.mode===Timepicker.HOURS?Timepicker.HOURS:Timepicker.MINUTES:_this4.state.mode===Timepicker.HOURS?Timepicker.MINUTES:Timepicker.HOURS},function(){return _this4.onChange()})}}},{key:'onClickMinute',value:function onClickMinute(minutes){var _this5=this;return function(){if(_this5.state.minutes===minutes)return;_this5.setState({minutes:minutes,even:!_this5.state.even},function(){return _this5.onChange()})}}},{key:'onHand1',value:function onHand1(hand1){this.hand1=hand1}},{key:'onHand2',value:function onHand2(hand2){this.hand2=hand2}},{key:'onMouseMoveHour',value:function onMouseMoveHour(hours){var onClickHour=this.onClickHour(hours);return function(event){var isMouseUp=event.type==='mouseup';if(isMouseUp||event.buttons===1)onClickHour(event,!isMouseUp)}}},{key:'onMouseMoveMinute',value:function onMouseMoveMinute(minutes){var onClickMinute=this.onClickMinute(minutes);return function(event){if(event.buttons===1)onClickMinute()}}},{key:'calculatePositionsHours',value:function calculatePositionsHours(){var _props4=this.props,militaryTime=_props4.militaryTime,radius=_props4.radius,size=_props4.size;var positions=[];for(var index=1;index<=(militaryTime?24:12);++index){positions.push([Math.round(size/2+radius*(militaryTime?index>12?1:0.65:1)*Math.cos((index%12/6-0.5)*Math.PI)),Math.round(size/2+radius*(militaryTime?index>12?1:0.65:1)*Math.sin((index%12/6-0.5)*Math.PI))])}return positions}},{key:'calculatePositionsMinutes',value:function calculatePositionsMinutes(){var _props5=this.props,radius=_props5.radius,size=_props5.size;var positions=[];for(var index=0;index<60;++index){positions.push([Math.round(size/2+radius*Math.cos((index/30-0.5)*Math.PI)),Math.round(size/2+radius*Math.sin((index/30-0.5)*Math.PI))])}return positions}}]);return Clock}(_react2.default.Component);Clock.propTypes=process.env.NODE_ENV!=='production'?{formatNumber:_propTypes2.default.func.isRequired,hours:_propTypes2.default.number.isRequired,militaryTime:_propTypes2.default.bool.isRequired,minutes:_propTypes2.default.number.isRequired,mode:_propTypes2.default.bool.isRequired,onChange:_propTypes2.default.func,onChangeMode:_propTypes2.default.func,radius:_propTypes2.default.number.isRequired,size:_propTypes2.default.number.isRequired}:{};Timepicker.Clock=Clock;