Socket
Socket
Sign inDemoInstall

react-timepicker

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-timepicker - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

7

package.json
{
"name": "react-timepicker",
"version": "2.0.1",
"version": "2.0.2",
"license": "MIT",

@@ -29,5 +29,4 @@ "author": "Radosław Miernik",

"babel-cli": "6.26.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.9",
"babel-preset-env": "1.6.0",
"babel-preset-minify": "0.2.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.10",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1"

@@ -34,0 +33,0 @@ },

@@ -1,2 +0,2 @@

'use strict';var _createClass=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),_propTypes=require('prop-types'),_propTypes2=_interopRequireDefault(_propTypes),_react=require('react'),_react2=_interopRequireDefault(_react);Object.defineProperty(exports,'__esModule',{value:!0}),exports.Clock=exports.Info=exports.Timepicker=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function _inherits(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}var Timepicker=exports.Timepicker=function(a){function b(a){var c=a.hours,d=a.minutes,e=a.mode;_classCallCheck(this,b);var f=_possibleConstructorReturn(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments));return f.state={hours:c,minutes:d,mode:e},f.onChange=f.onChange.bind(f),f.onChangeMode=f.onChangeMode.bind(f),f}return _inherits(b,a),_createClass(b,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(a){var b=a.hours,c=a.minutes,d=a.mode,e={},f=this.props;f.hours!==b&&(e.hours=b),f.minutes!==c&&(e.minutes=c),f.mode!==d&&(e.mode=d),this.setState(e)}},{key:'render',value:function render(){var a=this.state,c=a.hours,d=a.minutes,e=a.mode,f=this.props,g=f.formatNumber,h=f.militaryTime,i=f.radius,j=f.size;return _react2.default.createElement('div',{className:'timepicker'},_react2.default.createElement(b.Info,{formatNumber:g,hours:c,minutes:d,mode:e,onChangeMode:this.onChangeMode,size:j}),_react2.default.createElement(b.Clock,{hours:c,minutes:d,mode:e,size:j,formatNumber:g,onChangeMode:this.onChangeMode,militaryTime:h,radius:i,onChange:this.onChange}))}},{key:'onChange',value:function onChange(a,b){this.setState({hours:a,minutes:b}),this.props.onChange&&this.props.onChange(a,b)}},{key:'onChangeMode',value:function onChangeMode(a){this.setState({mode:a}),this.props.onChangeMode&&this.props.onChangeMode(a)}}]),b}(_react2.default.Component);Timepicker.HOURS=!0,Timepicker.MINUTES=!1,Timepicker.propTypes='production'===process.env.NODE_ENV?{}:{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(a){return 10>a?'0'+a:a},hours:0,militaryTime:!0,minutes:0,mode:Timepicker.HOURS,radius:125,size:300};var Info=exports.Info=function(a){function b(){_classCallCheck(this,b);var a=_possibleConstructorReturn(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments));return a.onClickHours=a.onClickHours.bind(a),a.onClickMinutes=a.onClickMinutes.bind(a),a}return _inherits(b,a),_createClass(b,[{key:'render',value:function render(){var a=this.props,b=a.formatNumber,c=a.hours,d=a.minutes,e=a.mode,f=a.size;return _react2.default.createElement('p',{className:'timepicker-info',style:{width:f}},_react2.default.createElement('span',{className:'timepicker-info-digits'+(e===Timepicker.HOURS?' active':''),onClick:this.onClickHours},b(c,'info')),':',_react2.default.createElement('span',{className:'timepicker-info-digits'+(e===Timepicker.MINUTES?' active':''),onClick:this.onClickMinutes},b(d,'info')))}},{key:'onClickHours',value:function onClickHours(){this.props.onChangeMode&&this.props.onChangeMode(Timepicker.HOURS)}},{key:'onClickMinutes',value:function onClickMinutes(){this.props.onChangeMode&&this.props.onChangeMode(Timepicker.MINUTES)}}]),b}(_react2.default.Component);Info.propTypes='production'===process.env.NODE_ENV?{}:{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(a){function b(a){var c=a.hours,d=a.militaryTime,e=a.minutes,f=a.mode;_classCallCheck(this,b);var g=_possibleConstructorReturn(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments));return g.state={even:!0,hours:c%(d?24:12),minutes:e%60,mode:f,positionsHours:g.calculatePositionsHours(),positionsMinutes:g.calculatePositionsMinutes()},g.onHand1=g.onHand1.bind(g),g.onHand2=g.onHand2.bind(g),g}var c=Math.sin,d=Math.round,e=Math.cos,f=Math.PI;return _inherits(b,a),_createClass(b,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(a){var b=a.hours,c=a.militaryTime,d=a.minutes,e=a.mode,f=a.radius,g=a.size,h=this.props;g!==h.size||f!==h.radius?this.setState({positionsHours:this.calculatePositionsHours(),positionsMinutes:this.calculatePositionsMinutes()}):c!==h.militaryTime&&this.setState({positionsHours:this.calculatePositionsHours()}),e!==h.mode&&this.setState({mode:e}),b!==h.hours&&this.setState({hours:b%(c?24:12)}),d!==h.minutes&&this.setState({minutes:d%60})}},{key:'componentDidMount',value:function componentDidMount(){this.componentDidUpdate({})}},{key:'componentDidUpdate',value:function componentDidUpdate(a,b){var c=Math.ceil,d=Math.sqrt,e=this.props,f=e.militaryTime,g=e.mode,h=e.size,i=this.state,j=i.even,k=i.hours,l=i.minutes,m=i.positionsHours,n=i.positionsMinutes;if(a.mode!==g||b.hours!==k||b.minutes!==l){var o=j?this.hand1:this.hand2,p=j?this.hand2:this.hand1;o.setAttribute('x2',g?m[0===k?f?23:11:k-1][0]:n[l][0]),o.setAttribute('y2',g?m[0===k?f?23:11:k-1][1]:n[l][1]),a.mode!==g&&(p.setAttribute('x2',h/2),p.setAttribute('y2',h/2));var q=o.getAttribute('x1')-o.getAttribute('x2'),r=o.getAttribute('y1')-o.getAttribute('y2'),s=p.getAttribute('x1')-p.getAttribute('x2'),t=p.getAttribute('y1')-p.getAttribute('y2'),u=c(d(q*q+r*r)),v=c(d(s*s+t*t));o.style.strokeDasharray=u,p.style.strokeDasharray=v,o.style.strokeDashoffset=u,p.style.strokeDashoffset='0',o.style.transitionProperty='none',p.style.transitionProperty='none',o.getBoundingClientRect(),p.getBoundingClientRect(),o.style.transitionProperty='stroke-dashoffset',p.style.transitionProperty='stroke-dashoffset',o.style.strokeDashoffset='0',p.style.strokeDashoffset=v}}},{key:'render',value:function render(){var a=this.props.size,b=this.state.mode;return _react2.default.createElement('svg',{height:a,width:a},_react2.default.createElement('line',{ref:this.onHand1,className:'timepicker-hand',x1:a/2,y1:a/2,x2:a/2,y2:a/2}),_react2.default.createElement('line',{ref:this.onHand2,className:'timepicker-hand',x1:a/2,y1:a/2,x2:a/2,y2:a/2}),_react2.default.createElement('g',{className:'timepicker-'+(b?'visible':'invisible')},this.renderHoursBubbles()),_react2.default.createElement('g',{className:'timepicker-'+(b?'invisible':'visible')},this.renderMinutesBubbles()))}},{key:'renderHoursBubbles',value:function renderHoursBubbles(){for(var a=this.props.formatNumber,b=this.state,c=b.hours,d=b.positionsHours,e=[],f=0;f<d.length;++f){var g=d[f][0],h=d[f][1],i=(f+1)%24,j=this.onClickHour(i),k=this.onMouseMoveHour(i);e.push(_react2.default.createElement('g',{className:'timepicker-bubble'+(c===i?' active':''),key:f,onClick:j,onMouseMove:k,onMouseUp:k},_react2.default.createElement('circle',{cx:g,cy:h,r:15}),_react2.default.createElement('text',{x:g,y:h},a(i,'clock'))))}return bubbles}},{key:'renderMinutesBubbles',value:function renderMinutesBubbles(){for(var a=this.props.formatNumber,b=this.state,c=b.minutes,d=b.positionsMinutes,e=[],f=0;f<d.length;++f){var g=d[f][0],h=d[f][1],i=this.onClickMinute(f),j=this.onMouseMoveMinute(f);e.push(_react2.default.createElement('g',{className:'timepicker-bubble'+(f%5?' small':'')+(c===f?' active':''),key:f,onClick:i,onMouseMove:j},_react2.default.createElement('circle',{cx:g,cy:h,r:f%5?c===f?5:0:15}),f%5?_react2.default.createElement('circle',{cx:g,cy:h,r:10}):_react2.default.createElement('text',{x:g,y:h},a(f,'clock'))))}return bubbles}},{key:'onChange',value:function onChange(){this.props.onChange&&this.props.onChange(this.state.hours,this.state.minutes),this.props.onChangeMode&&this.props.onChangeMode(this.state.mode)}},{key:'onClickHour',value:function onClickHour(a){var b=this;return function(c,d){b.state.hours===a&&d||b.setState({even:!b.state.even,hours:a,mode:d?b.state.mode===Timepicker.HOURS?Timepicker.HOURS:Timepicker.MINUTES:b.state.mode===Timepicker.HOURS?Timepicker.MINUTES:Timepicker.HOURS},function(){return b.onChange()})}}},{key:'onClickMinute',value:function onClickMinute(a){var b=this;return function(){b.state.minutes===a||b.setState({minutes:a,even:!b.state.even},function(){return b.onChange()})}}},{key:'onHand1',value:function onHand1(a){this.hand1=a}},{key:'onHand2',value:function onHand2(a){this.hand2=a}},{key:'onMouseMoveHour',value:function onMouseMoveHour(a){var b=this.onClickHour(a);return function(a){var c='mouseup'===a.type;(c||1===a.buttons)&&b(a,!c)}}},{key:'onMouseMoveMinute',value:function onMouseMoveMinute(a){var b=this.onClickMinute(a);return function(a){1===a.buttons&&b()}}},{key:'calculatePositionsHours',value:function calculatePositionsHours(){for(var a=this.props,b=a.militaryTime,g=a.radius,h=a.size,i=[],j=1;j<=(b?24:12);++j)i.push([d(h/2+g*(b?12<j?1:0.65:1)*e((j%12/6-0.5)*f)),d(h/2+g*(b?12<j?1:0.65:1)*c((j%12/6-0.5)*f))]);return positions}},{key:'calculatePositionsMinutes',value:function calculatePositionsMinutes(){for(var a=this.props,b=a.radius,g=a.size,h=[],i=0;60>i;++i)h.push([d(g/2+b*e((i/30-0.5)*f)),d(g/2+b*c((i/30-0.5)*f))]);return positions}}]),b}(_react2.default.Component);Clock.propTypes='production'===process.env.NODE_ENV?{}:{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;
'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;
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc