Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-timepicker

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-timepicker - npm Package Compare versions

Comparing version 1.3.1 to 2.0.0-alpha.0

timepicker.es6.js

76

package.json
{
"name": "react-timepicker",
"author": "Radosław Miernik",
"license": "MIT",
"version": "1.3.1",
"description": "React timepicker in Android KitKat style",
"main": "timepicker.js",
"repository": {
"type": "git",
"url": "https://github.com/radekmie/react-timepicker"
},
"bugs": {
"url": "https://github.com/radekmie/react-timepicker/issues"
},
"peerDependencies": {
"react": ">= 0.12.0"
},
"keywords": [
"android",
"svg",
"react",
"reactjs",
"react-component",
"time",
"timepicker",
"time picker",
"time-picker"
]
"name": "react-timepicker",
"version": "2.0.0-alpha.0",
"license": "MIT",
"author": "Radosław Miernik",
"main": "timepicker.js",
"jsnext:main": "timepicker.es6.js",
"description": "React timepicker in Android KitKat style",
"repository": "https://github.com/radekmie/react-timepicker",
"bugs": "https://github.com/radekmie/react-timepicker/issues",
"keywords": [
"android",
"svg",
"react",
"reactjs",
"react-component",
"time",
"timepicker",
"time picker",
"time-picker"
],
"files": [
"timepicker.css",
"timepicker.es6.js",
"timepicker.js"
],
"devDependencies": {
"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-preset-react": "6.24.1"
},
"peerDependencies": {
"prop-types": ">= 15.5.7",
"react": ">= 15.5.0"
},
"scripts": {
"build": "babel --compact --minified timepicker.es6.js > timepicker.js"
}
}

532

timepicker.js

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

'use strict';
'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: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.refs.hand1:this.refs.hand2,p=j?this.refs.hand2:this.refs.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:height,width:width},_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.positions,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:minute,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.positions,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:!self.state.even,hours:a,mode:d?self.state.mode===Timepicker.HOURS?Timepicker.HOURS:Timepicker.MINUTES:self.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;
if (typeof module === 'object' && module.exports) {
var React = require('react');
}
var Timepicker = React.createClass({
displayName: 'Timepicker',
statics: {
HOURS: true,
MINUTES: false
},
propTypes: {
mode: React.PropTypes.bool,
size: React.PropTypes.number,
radius: React.PropTypes.number,
hours: React.PropTypes.number,
minutes: React.PropTypes.number,
formatNumber: React.PropTypes.func,
militaryTime: React.PropTypes.bool,
onChange: React.PropTypes.func,
onChangeMode: React.PropTypes.func
},
getDefaultProps: function () {
return {
mode: this.HOURS,
hours: 0,
minutes: 0,
size: 300,
radius: 125,
militaryTime: true,
formatNumber: function (value/*, mode */) {
return value < 10 ? '0' + value : value;
}
};
},
getInitialState: function () {
var props = this.props;
var mode = props.mode;
var hours = props.hours;
var minutes = props.minutes;
return {
mode: mode,
hours: hours,
minutes: minutes
};
},
componentWillReceiveProps: function (nextProps) {
var prevProps = this.props;
var diff = {};
if (prevProps.mode !== nextProps.mode) diff.mode = nextProps.mode;
if (prevProps.hours !== nextProps.hours) diff.hours = nextProps.hours;
if (prevProps.minutes !== nextProps.minutes) diff.minutes = nextProps.minutes;
this.setState(diff);
},
render: function () {
var state = this.state;
var props = this.props;
var mode = state.mode;
var hours = state.hours;
var minutes = state.minutes;
var size = props.size;
var radius = props.radius;
var formatNumber = props.formatNumber;
var militaryTime = props.militaryTime;
var propsInfo = { hours: hours, minutes: minutes, mode: mode, size: size, onChangeMode: this.onChangeMode, formatNumber: formatNumber };
var propsClock = { hours: hours, minutes: minutes, mode: mode, size: size, onChangeMode: this.onChangeMode, formatNumber: formatNumber, militaryTime: militaryTime, radius: radius, onChange: this.onChange };
return React.createElement(
'div',
{ className: 'timepicker' },
React.createElement(Timepicker.Info, propsInfo),
React.createElement(Timepicker.Clock, propsClock)
);
},
onChange: function (hours, minutes) {
this.setState({ hours: hours, minutes: minutes });
if (this.props.onChange) {
this.props.onChange(hours, minutes);
}
},
onChangeMode: function (mode) {
this.setState({ mode: mode });
if (this.props.onChangeMode) {
this.props.onChangeMode(mode);
}
}
});
Timepicker.Info = React.createClass({
displayName: 'Timepicker.Info',
propTypes: {
mode: React.PropTypes.bool.isRequired,
size: React.PropTypes.number.isRequired,
hours: React.PropTypes.number.isRequired,
minutes: React.PropTypes.number.isRequired,
formatNumber: React.PropTypes.func.isRequired,
onChangeMode: React.PropTypes.func
},
render: function () {
var props = this.props;
var mode = props.mode;
var size = props.size;
var hours = props.hours;
var minutes = props.minutes;
var formatNumber = props.formatNumber;
return React.createElement(
'p',
{ className: 'timepicker-info', style: { width: size } },
React.createElement(
'span',
{
className: 'timepicker-info-digits' + (mode === Timepicker.HOURS ? ' active' : ''),
onClick: this.onClickHours
},
formatNumber(hours, 'info')
),
':',
React.createElement(
'span',
{
className: 'timepicker-info-digits' + (mode === Timepicker.MINUTES ? ' active' : ''),
onClick: this.onClickMinutes
},
formatNumber(minutes, 'info')
)
);
},
onClickHours: function () {
if (this.props.onChangeMode) {
this.props.onChangeMode(Timepicker.HOURS);
}
},
onClickMinutes: function () {
if (this.props.onChangeMode) {
this.props.onChangeMode(Timepicker.MINUTES);
}
}
});
Timepicker.Clock = React.createClass({
displayName: 'Timepicker.Clock',
propTypes: {
mode: React.PropTypes.bool.isRequired,
size: React.PropTypes.number.isRequired,
radius: React.PropTypes.number.isRequired,
hours: React.PropTypes.number.isRequired,
minutes: React.PropTypes.number.isRequired,
formatNumber: React.PropTypes.func.isRequired,
militaryTime: React.PropTypes.bool.isRequired,
onChange: React.PropTypes.func,
onChangeMode: React.PropTypes.func
},
getInitialState: function () {
var props = this.props;
var mode = props.mode;
var hours = props.hours;
var minutes = props.minutes;
var militaryTime = props.militaryTime;
return {
hours: hours % (militaryTime ? 24 : 12),
minutes: minutes % 60,
even: true,
mode: mode,
positionsHours: this.calculatePositionsHours(),
positionsMinutes: this.calculatePositionsMinutes()
};
},
componentWillReceiveProps: function (nextProps) {
var props = this.props;
if (nextProps.size !== props.size || nextProps.radius !== props.radius) {
this.setState({
positionsHours: this.calculatePositionsHours(),
positionsMinutes: this.calculatePositionsMinutes()
});
} else if (nextProps.militaryTime !== props.militaryTime) {
this.setState({
positionsHours: this.calculatePositionsHours()
});
}
if (nextProps.mode !== props.mode) {
this.setState({ mode: nextProps.mode });
}
if (nextProps.hours !== props.hours) {
this.setState({ hours: nextProps.hours % (nextProps.militaryTime ? 24 : 12) });
}
if (nextProps.minutes !== props.minutes) {
this.setState({ minutes: nextProps.minutes % 60 });
}
},
componentDidMount: function () {
this.componentDidUpdate({}, {});
},
componentDidUpdate: function (previousProps, previousState) {
var props = this.props;
var state = this.state;
var mode = props.mode;
var size = props.size;
var militaryTime = props.militaryTime;
var even = state.even;
var hours = state.hours;
var minutes = state.minutes;
var positionsHours = state.positionsHours;
var positionsMinutes = state.positionsMinutes;
if (previousProps.mode === mode && previousState.hours === hours && previousState.minutes === minutes) {
return;
}
var hand1 = even ? this.refs.hand1 : this.refs.hand2;
var hand2 = even ? this.refs.hand2 : this.refs.hand1;
if (!hand1.setAttribute) hand1 = React.findDOMNode ? React.findDOMNode(hand1) : hand1.getDOMNode();
if (!hand2.setAttribute) hand2 = React.findDOMNode ? React.findDOMNode(hand2) : hand2.getDOMNode();
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;
},
render: function () {
var size = this.props.size;
var mode = this.state.mode;
return React.createElement(
'svg',
{ width: size, height: size },
React.createElement('line', { ref: 'hand1', className: 'timepicker-hand', x1: size / 2, y1: size / 2, x2: size / 2, y2: size / 2 }),
React.createElement('line', { ref: 'hand2', className: 'timepicker-hand', x1: size / 2, y1: size / 2, x2: size / 2, y2: size / 2 }),
React.createElement(
'g',
{ className: mode ? 'timepicker-visible' : 'timepicker-invisible' },
this.renderHoursBubbles()
),
React.createElement(
'g',
{ className: mode ? 'timepicker-invisible' : 'timepicker-visible' },
this.renderMinutesBubbles()
)
);
},
renderHoursBubbles: function () {
var hours = this.state.hours;
var positions = this.state.positionsHours;
var formatNumber = this.props.formatNumber;
var x;
var y;
var onClick;
var onMouseMove;
var hour;
var index = 0;
var bubbles = [];
for (; index < positions.length; ++index) {
x = positions[index][0];
y = positions[index][1];
hour = (index + 1) % 24;
onClick = this.onClickHour(hour);
onMouseMove = this.onMouseMoveHour(hour);
bubbles.push(React.createElement(
'g',
{
key: index,
className: 'timepicker-bubble' + (hours === hour ? ' active' : ''),
onClick: onClick,
onMouseUp: onMouseMove,
onMouseMove: onMouseMove
},
React.createElement('circle', { cx: x, cy: y, r: 15 }),
React.createElement(
'text',
{ x: x, y: y },
formatNumber(hour, 'clock')
)
));
}
return bubbles;
},
renderMinutesBubbles: function () {
var minutes = this.state.minutes;
var positions = this.state.positionsMinutes;
var formatNumber = this.props.formatNumber;
var x;
var y;
var onClick;
var onMouseMove;
var minute = 0;
var bubbles = [];
for (; minute < positions.length; ++minute) {
x = positions[minute][0];
y = positions[minute][1];
onClick = this.onClickMinute(minute);
onMouseMove = this.onMouseMoveMinute(minute);
bubbles.push(React.createElement(
'g',
{
key: minute,
className: 'timepicker-bubble' + (minute % 5 !== 0 ? ' small' : '') + (minutes === minute ? ' active' : ''),
onClick: onClick,
onMouseMove: onMouseMove
},
React.createElement('circle', { cx: x, cy: y, r: minute % 5 !== 0 ? minutes === minute ? 5 : 0 : 15 }),
minute % 5 === 0 ? React.createElement(
'text',
{ x: x, y: y },
formatNumber(minute, 'clock')
) : React.createElement('circle', { cx: x, cy: y, r: 10 })
));
}
return bubbles;
},
onChange: function () {
if (this.props.onChange) {
this.props.onChange(this.state.hours, this.state.minutes);
}
if (this.props.onChangeMode) {
this.props.onChangeMode(this.state.mode);
}
},
onClickHour: function (hours) {
var self = this;
return function (event, preventChangeMode) {
if (self.state.hours === hours && preventChangeMode) {
return;
}
self.setState({
hours: hours,
even: !self.state.even,
mode: preventChangeMode
? self.state.mode === Timepicker.HOURS ? Timepicker.HOURS : Timepicker.MINUTES
: self.state.mode === Timepicker.HOURS ? Timepicker.MINUTES : Timepicker.HOURS
}, function () {
self.onChange();
});
};
},
onClickMinute: function (minutes) {
var self = this;
return function () {
if (self.state.minutes === minutes) {
return;
}
self.setState({ minutes: minutes, even: !self.state.even }, function () {
self.onChange();
});
};
},
onMouseMoveHour: function (hours) {
var onClickHour = this.onClickHour(hours);
return function (event) {
var isMouseUp = event.type === 'mouseup';
if (isMouseUp || event.buttons === 1) {
onClickHour(event, !isMouseUp);
}
};
},
onMouseMoveMinute: function (minutes) {
var onClickMinute = this.onClickMinute(minutes);
return function (event) {
if (event.buttons === 1) {
onClickMinute();
}
};
},
calculatePositionsHours: function () {
var props = this.props;
var size = props.size;
var radius = props.radius;
var militaryTime = props.militaryTime;
var index = 1;
var positions = [];
for (; 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;
},
calculatePositionsMinutes: function () {
var props = this.props;
var size = props.size;
var radius = props.radius;
var index = 0;
var positions = [];
for (; 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;
}
});
if (typeof module === 'object' && module.exports) {
module.exports = Timepicker;
}
if (typeof window === 'object') {
window.Timepicker = Timepicker;
}
example/example.html
timepicker.png
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc