react-time-picker - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

CHANGELOG.md

@@ -6,4 +6,8 @@ react-time-picker
 
+## 1.0.6
+
+ * add support for changing input values using arrow up/down keys (enabled when `userArrowKeys` is true - which is the default)
+
 ## 1.0.0
 
  * initial release

dist/react-time-picker.js

@@ -112,2 +112,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 				stopChangePropagation: true,
+				useArrowKeys: true,
 
@@ -261,2 +262,4 @@ //makes 15:78 be converted to 15:00, and not to 16:18
 
+			event.preventDefault()
+
 			if (name == 'meridian'){
@@ -363,2 +366,13 @@ this.onArrowMeridianAction(props, dir, name)
 
+			var focused  = this.state.focused
+			var newState = {}
+
+			if (focused){
+				Object.keys(focused).forEach(function(key){
+					if (focused[key]){
+						focused[key].value = this.format(this.props, key, time[key])
+					}
+				}, this)
+			}
+
 			if (this.props.value == null){
@@ -494,7 +508,11 @@ this.setState({
 				value   : value,
-				onFocus : this.handleInputFocus.bind(this, props, name),
-				onBlur  : this.handleInputBlur.bind(this, props, name),
-				onChange: this.handleInputChange.bind(this, props, name)
+	      		onBlur  : this.handleInputBlur.bind(this, props, name),
+	      		onChange: this.handleInputChange.bind(this, props, name),
+	      		onFocus : this.handleInputFocus.bind(this, props, name),
 			})
 
+			if (props.useArrowKeys){
+				inputProps.onKeyDown = this.handleInputKeyDown.bind(this, props, name)
+			}
+
 			if (name == 'meridian'){
@@ -550,4 +568,15 @@ inputProps.onMouseDown = this.onMeridianInputMouseDown.bind(this, props)
 			props.stopChangePropagation && event.stopPropagation()
-		},
+	  	},
 
+	  	handleInputKeyDown: function(props, name, event){
+
+	    	if (event.key === 'ArrowDown') {
+	      		this.incValue(props, name, -1)
+	    	}
+
+	    	if (event.key === 'ArrowUp') {
+	      		this.incValue(props, name, 1)
+	    	}
+	  	},
+
 		getTime: function(){
@@ -711,2 +740,3 @@ var strict = this.props.strict
 
+
 /***/ },
@@ -713,0 +743,0 @@ /* 1 */

dist/react-time-picker.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.ReactTimePicker=t(require("React")):e.ReactTimePicker=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}(function(e){for(var t in e)switch(typeof e[t]){case"number":e[t]=e[e[t]];break;case"object":e[t]=function(t){var n=t.slice(1),r=e[t[0]];return function(e,t,i){r.apply(null,[e,t,i].concat(n))}}(e[t])}return e}([function(e,t,n){"use strict";function r(){}function i(e){return e}var o=n(36),u=n(22),a=n(29),s=n(33),l=n(35),c=n(34),p=n(17),d=n(23),f=" ",h=n(9),m=n(8),v=n(19),y=n(32);e.exports=o.createClass({displayName:"ReactTimePicker",componentWillUnmount:function(){this.stopInterval()},getInitialState:function(){return{defaultValue:this.props.defaultValue,focused:{hour:null,minute:null,second:null,meridian:null},overArrow:{hour:null,minute:null,second:null,meridian:null}}},getDefaultProps:function(){return{normalizeStyle:!0,stopChangePropagation:!0,strict:!0,overflowHourToMeridian:!0,step:1,hourStep:null,minuteStep:null,secondStep:null,stepDelay:60,showArrows:!0,defaultStyle:{border:"1px solid gray",padding:10,display:"inline-flex",alignItems:"center",boxSizing:"border-box",flexFlow:"row",width:200},defaultArrowStyle:{cursor:"pointer",userSelect:"none",display:"inline-block",alignSelf:"stretch",textAlign:"center"},defaultArrowOverStyle:{background:"rgb(229, 229, 229)"},defaultArrowUpOverStyle:null,defaultArrowDownOverStyle:null,defaultArrowUpStyle:{marginBottom:5},defaultArrowDownStyle:{marginTop:5},defaultBoxStyle:{boxSizing:"border-box",display:"flex",flexFlow:"column",alignItems:"center"},defaultInputStyle:{boxSizing:"border-box",width:"100%",textAlign:"center"},defaultSeparatorStyle:{flex:"none"},defaultMeridianInputStyle:{cursor:"pointer"},defaultMeridianInputProps:{readOnly:!0},renderHour:null,renderMinute:null,renderSecond:null,renderMeridian:null,defaultArrowFactory:o.DOM.span,arrowFactory:null,arrowUpFactory:null,arrowDownFactory:null,defaultInputFactory:o.DOM.input,inputFactory:null,hourInputFactory:null,minuteInputFactory:null,secondInputFactory:null,meridianInputFactory:null,timeToString:y}},normalize:function(e){return a(e)},render:function(){var e=this.prepareProps(this.props,this.state);e.normalizeStyle||(this.normalize=i);var t=this.renderHour(e),n=this.renderMinute(e),r=this.renderSecond(e),u=this.renderMeridian(e),a=e.separator||o.createElement("span",{style:e.separatorStyle},f+":"+f),s=t&&(n||r||u)?e.hourSeparator||a:null,l=n&&(r||u)?e.minuteSeparator||a:null,c=r&&u?e.secondSeparator||a:null;return o.createElement("div",o.__spread({},e),t,s,n,l,r,c,u)},onArrowMouseEnter:function(e,t,n){var r=this.state.overArrow;Object.keys(r).forEach(function(e){r[e]=null}),r[n]=t,this.setState({})},onArrowMouseLeave:function(e,t,n){this.state.overArrow[n]=null,this.setState({})},onArrowMouseDown:function(e,t,n,r){if("meridian"==n)return void this.onArrowMeridianAction(e,t,n);var i=p?r.target:window,o=p?"touchend":"click";i.addEventListener(o,this.onWindowClick),this.onArrowAction(e,t,n),this.timeoutId=setTimeout(function(){this.startInterval(e,t,n)}.bind(this),e.stepDelay)},onWindowClick:function(){this.stopInterval()},stopInterval:function(){clearTimeout(this.timeoutId),clearInterval(this.intervalId)},startInterval:function(e,t,n){this.intervalId=setInterval(function(){this.onArrowAction(e,t,n)}.bind(this),e.stepDelay)},onMeridianInputMouseDown:function(e,t){t.preventDefault(),this.onArrowMeridianAction(e,1,"meridian")},onArrowMeridianAction:function(e,t,n){var r=this.time.meridian,i="am"==r||"pm"==r,o=i?"am"==r?"pm":"am":"AM"==r?"PM":"AM";this.updateValue(n,o)},onArrowAction:function(e,t,n){var r=1==t?"Up":"Down",i="onArrow"+r+c(n)+"Action";"function"==typeof this[i]&&this[i](e),i="onArrow"+c(n)+"Action","function"==typeof this[i]&&this[i](e,t),this.incValue(e,n,t)},incValue:function(e,t,n){n=n||0;var r=e[t+"Step"]||e.step,i=n*r,o=this.time,u=o[t],a=u+i;this.updateValue(t,a)},updateValue:function(e,t,n){this.setValue(this.updateTime(e,t,n))},updateTime:function(e,t,n){n=n||{},n.overflowHourToMeridian=this.props.overflowHourToMeridian;var r=this.time;return r=l(r,e,t,n),this.time=r},setValue:function(e){null==this.props.value&&this.setState({defaultValue:e}),(this.props.onChange||r)(this.props.timeToString(e,this.props.format),u({},e))},format:function(e,t,n){var r;if(arguments.length<3&&(n=e.time[t]),r="meridian"!=t?e["render"+c(t)]:e.renderMeridian,!r&&"string"==typeof e.format){var i=this.formatInfo;r=function(e,t){return v(t,e,i)}}return r||(r=h),"function"==typeof r&&(n=r(n,t,e)),n},renderBox:function(e,t){var n,r=this.state,i=e[t+"Style"],a=e[t+"InputStyle"],s=c(t);n=r.focused[t]?r.focused[t].value:this.format(e,t);var l,p;if(e.showArrows){var f=this.state.overArrow[t],h=e.arrowUpStyle;1==f&&(h=u({},e.arrowUpStyle,e.defaultArrowOverStyle,e.defaultArrowUpOverStyle,e.arrowOverStyle,e.arrowUpOverStyle));var m={mouseOver:1==f,style:h,children:"▲"};m[d.onMouseDown]=this.onArrowMouseDown.bind(this,e,1,t),m.onMouseEnter=this.onArrowMouseEnter.bind(this,e,1,t),m.onMouseLeave=this.onArrowMouseLeave.bind(this,e,1,t);var v=e.arrowDownStyle;-1==f&&(v=u({},e.arrowDownStyle,e.defaultArrowOverStyle,e.defaultArrowDownOverStyle,e.arrowOverStyle,e.arrowDownOverStyle));var y={mouseOver:-1==f,style:v,children:"▼"};y[d.onMouseDown]=this.onArrowMouseDown.bind(this,e,-1,t),y.onMouseEnter=this.onArrowMouseEnter.bind(this,e,-1,t),y.onMouseLeave=this.onArrowMouseLeave.bind(this,e,-1,t);var S=e.defaultArrowFactory,w=e.arrowUpFactory||e.arrowFactory||S,M=e.arrowDownFactory||e.arrowFactory||S;l=w(m),void 0===l&&(l=S(m)),p=M(y),void 0===p&&(p=S(y))}var x=e.defaultInputFactory,g=e[t+"InputFactory"]||e.inputFactory||x,I=e["default"+s+"InputProps"],A=e[t+"InputProps"],A=u({},e.inputProps,I,A,{timeName:t,style:a,value:n,onFocus:this.handleInputFocus.bind(this,e,t),onBlur:this.handleInputBlur.bind(this,e,t),onChange:this.handleInputChange.bind(this,e,t)});"meridian"==t&&(A.onMouseDown=this.onMeridianInputMouseDown.bind(this,e));var b=g(A);return void 0===b&&(b=x(A)),o.createElement("div",{style:i},l,b,p)},handleInputFocus:function(e,t){var n=this.state.focused;n[t]={value:this.format(e,t)},this.stopInterval(),this.setState({})},handleInputBlur:function(e,t,n){this.state.focused[t]=null,this.setState({});var r=1*n.target.value;this.updateValue(t,r,{clamp:e.clamp})},handleInputChange:function(e,t,n){this.state.focused[t]&&(this.state.focused[t].value=n.target.value),this.setState({}),e.stopChangePropagation&&n.stopPropagation()},getTime:function(){var e=this.props.strict,t=this.formatInfo=m(this.props.format);return s(this.getValue(),{strict:e,hour:t.hour,minute:t.minute,second:t.second,meridian:t.meridian})},prepareTime:function(e){var t=this.getTime(),n=this.props.format?this.formatInfo:null;return e.showSecond=n?n.second.specified:void 0!==t.second,e.showMinute=n?n.minute.specified:void 0!==t.minute,e.withMeridian=n?n.meridian.specified:null!=t.meridian,t},getValue:function(){var e=null==this.props.value?this.state.defaultValue:this.props.value;return e},renderHour:function(e){return this.renderBox(e,"hour")},renderMinute:function(e){return e.showMinute?this.renderBox(e,"minute"):void 0},renderSecond:function(e){return e.showSecond?this.renderBox(e,"second"):void 0},renderMeridian:function(e){return e.withMeridian?this.renderBox(e,"meridian"):void 0},prepareProps:function(e,t){var n=u({},e);return this.time=n.time=this.prepareTime(n,t),this.prepareStyles(n,t),n},prepareStyles:function(e,t){e.style=this.prepareStyle(e,t),e.separatorStyle=this.prepareSeparatorStyle(e,t),this.prepareArrowStyles(e,t),this.prepareHourStyles(e,t),this.prepareMinuteStyles(e,t),this.prepareSecondStyles(e,t),this.prepareMeridianStyles(e,t)},prepareStyle:function(e){return this.normalize(u({},e.defaultStyle,e.style))},prepareSeparatorStyle:function(e){return this.normalize(u({},e.defaultSeparatorStyle,e.separatorStyle))},prepareArrowStyles:function(e){e.arrowUpStyle=this.normalize(u({},e.defaultArrowStyle,e.defaultArrowUpStyle,e.arrowStyle,e.arrowUpStyle)),e.arrowDownStyle=this.normalize(u({},e.defaultArrowStyle,e.defaultArrowDownStyle,e.arrowStyle,e.arrowDownStyle))},prepareHourStyles:function(e,t){e.hourStyle=this.prepareHourStyle(e,t),e.hourInputStyle=this.prepareHourInputStyle(e,t)},prepareHourStyle:function(e){return this.normalize(u({},e.defaultBoxStyle,e.defaultHourStyle,e.boxStyle,e.hourStyle))},prepareHourInputStyle:function(e){return this.normalize(u({},e.defaultInputStyle,e.defaultHourInputStyle,e.inputStyle,e.hourInputStyle))},prepareMinuteStyles:function(e,t){e.minuteStyle=this.prepareMinuteStyle(e,t),e.minuteInputStyle=this.prepareMinuteInputStyle(e,t)},prepareMinuteStyle:function(e){return this.normalize(u({},e.defaultBoxStyle,e.defaultMinuteStyle,e.boxStyle,e.minuteStyle))},prepareMinuteInputStyle:function(e){return this.normalize(u({},e.defaultInputStyle,e.defaultMinuteInputStyle,e.inputStyle,e.minuteInputStyle))},prepareSecondStyles:function(e,t){e.showSecond&&(e.secondStyle=this.prepareSecondStyle(e,t),e.secondInputStyle=this.prepareSecondInputStyle(e,t))},prepareSecondStyle:function(e){return this.normalize(u({},e.defaultBoxStyle,e.defaultSecondStyle,e.boxStyle,e.secondStyle))},prepareSecondInputStyle:function(e){return this.normalize(u({},e.defaultInputStyle,e.defaultSecondInputStyle,e.inputStyle,e.secondInputStyle))},prepareMeridianStyles:function(e,t){e.withMeridian&&(e.meridianStyle=this.prepareMeridianStyle(e,t),e.meridianInputStyle=this.prepareMeridianInputStyle(e,t))},prepareMeridianStyle:function(e){return this.normalize(u({},e.defaultBoxStyle,e.defaultMeridianStyle,e.boxStyle,e.meridianStyle))},prepareMeridianInputStyle:function(e){return this.normalize(u({},e.defaultInputStyle,e.defaultMeridianInputStyle,e.inputStyle,e.meridianInputStyle))}})},function(e){"use strict";function t(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=Object.assign||function(e){for(var n,r,i=t(e),o=1;o<arguments.length;o++){n=arguments[o],r=Object.keys(Object(n));for(var u=0;u<r.length;u++)i[r[u]]=n[r[u]]}return i}},function(e,t,n){"use strict";var r=n(14),i=n(3),o=n(16),u=n(15),a={hour:r,minute:i,second:o,meridian:u};e.exports=function(e,t,n){var r=a[e];return!(!r||!r(t,n))}},function(e,t,n){"use strict";var r=n(4),i=n(1);e.exports=function(e,t){return t=i({},t),t.twoDigits=2==t.len,r(e,t)?(e*=1,e>=0&&60>e):!1}},function(e,t,n){"use strict";var r=n(1),i=n(11);e.exports=function(e,t){var n=!isNaN(1*e);return t=t?r({},i,t):i,n&&"string"==typeof e&&t.twoDigits&&(n=2==e.length),n&&(e=1*e,n=parseInt(e)===e),n}},function(e,t){(function(t){"use strict";var n;e.exports=function(){return!n&&t.document&&(n=t.document.createElement("div")),n||(n={style:{}}),n}}).call(t,function(){return this}())},function(e,t,n){"use strict";var r,i,o=n(7),u=["ms","Moz","Webkit","O"],a=n(5);e.exports=function(e){if(void 0!==i)return i;r=r||a();for(var t,n,s=0,l=u.length;l>s;s++)if(n=u[s],t=n+o(e),"undefined"!=typeof r.style[t])return i=n;return i}},function(e){"use strict";e.exports=function(e){return e?e.charAt(0).toUpperCase()+e.slice(1):""}},function(e){"use strict";function t(e){var t=1,n=!1,r=e.indexOf("h");return~r?(n=!0,"h"==e.charAt(r+1)&&t++):(r=e.indexOf("H"),~r&&(n=!0,"H"==e.charAt(r+1)&&t++)),{len:t,specified:n}}function n(e){var t=1,n=!1,r=e.indexOf("m");return~r&&(n=!0,"m"==e.charAt(r+1)&&t++),{len:t,specified:n}}function r(e){var t=1,n=!1,r=e.indexOf("s");return~r&&(n=!0,"s"==e.charAt(r+1)&&t++),{len:t,specified:n}}function i(e){var t=!0,n=!1,r=e.indexOf("a");return~r?(n=!0,t=!1):~e.indexOf("A")&&(n=!0),{uppercase:t,lowercase:!t,specified:n}}e.exports=function(e){return"string"!=typeof e?{hour:{specified:!1},minute:{specified:!1},second:{specified:!1},meridian:{specified:!1}}:{hour:t(e),minute:n(e),second:r(e),meridian:i(e)}}},function(e){"use strict";e.exports=function(e){return 10>e?"0"+e:e}},function(e){"use strict";function t(e,t,n,r){if(void 0!==e.hour){var i=!r||r.overflowHourToMeridian!==!1,o=e.meridian||r&&r.meridian===!0,u=o?12:23,a=o?12:24,s=0;n>u&&(s+=Math.floor(n/u),n%=a),0>n&&(s=Math.ceil(-n/u),n=a+n),o&&n===u&&(e.minute>0||e.second>0)&&(s+=1,n=0),o&&s%2==1&&i&&("string"==typeof o&&(o=o.toUpperCase()),e.meridian="PM"==o?"AM":"PM"),e.hour=n}}function n(e,t,n,r,i){if(void 0!==e[t]){var o=0;n>59&&(o+=Math.floor(n/60),n%=60),0>n&&(o-=Math.ceil(-n/60),n=60+n),e[t||"minute"]=n,o&&(e[i||"hour"]+=o)}}function r(e,r,i,o){n(e,"minute",e.minute,o),t(e,"hour",e.hour,o)}function i(e,t,i,o){n(e,"second",e.second,o,"minute"),r(e,"minute",e.minute,o)}var o={},u={hour:t,minute:r,second:i};e.exports=function(e,t,n,r){return 2==arguments.length&&(r=t,t="second",n=e[t]),u[t](e,t,n,r||o),e}},function(e){"use strict";e.exports={separator:":",twoDigits:!0}},function(e,t,n){"use strict";function r(e){return e.trim()}function i(e,t){return h(e,d({},t,t.hour))?1*e:void 0}function o(e,t){return m(e,d({},t,t.minute))?1*e:void 0}function u(e,t){return v(e,d({},t,t.second))?1*e:void 0}function a(e,t){return y(e,d({},t,t.meridian))?e:void 0}function s(e){var t=e.split(" ");return t.length>1}function l(e){return S[e]}function c(e,t,n){n=d({},n,n?n[t]:null);var i,o,u=n.meridian,s=e.split(" ").map(r),c=l(t),p={invalid:[]};return w(t,s[0],n)?c&&(i=c(s[0],n)):p.invalid.push({name:t,value:s[0]}),u&&(o=a(s[1],n),void 0===o&&p.invalid.push({name:"meridian",value:s[1]})),void 0!==o&&(p.meridian=o),void 0!==i&&(p[t]=i),p}function p(e,t){t=d({},f,t);var n=e.split(t.separator).map(r),u=s(n[n.length-1]);t.meridian=u;var a,l,p=[],h={};return n.length>3?void 0:(1==n.length&&d(h,c(n[0],"hour",t)),2==n.length&&(a=i(n[0],t),void 0===a&&p.push({name:"hour",value:n[0]}),d(h,c(n[1],"minute",t))),3==n.length&&(a=i(n[0],t),l=o(n[1],t),void 0===a&&p.push({name:"hour",value:n[0]}),void 0===l&&p.push({name:"minute",value:n[1]}),d(h,c(n[2],"second",t))),h.invalid&&(p.push.apply(p,h.invalid),h.invalid=p),void 0!==a&&(h.hour=a),void 0!==l&&(h.minute=l),h.invalid.length||delete h.invalid,h)}var d=n(1),f=n(11),h=n(14),m=n(3),v=n(16),y=n(15),S={hour:i,minute:o,second:u,meridian:a},w=n(2),M=n(13),x=n(21),g=n(10);p.isValidPart=w,p.isValidTime=M,p.updateTime=x,p.adjustOverflow=g,e.exports=p},function(e,t,n){"use strict";var r=n(2),i=n(1);e.exports=function(e,t){var n=void 0===e.second||r("second",e.second,t),o=n&&(void 0===e.minute||r("minute",e.minute,t)),u=o&&r("hour",e.hour,i({meridian:e.meridian},t)),a=e.meridian,s=u&&(a?r("meridian",a,t):!0),l=s;if(l&&a){var c=1*e.hour;12===c&&(l=1*e.minute===0&&1*e.second===0)}return l}},function(e,t,n){"use strict";var r=n(4),i=n(1);e.exports=function(e,t){t=i({},t),t.twoDigits=2==t.len;var n=t.meridian;return r(e,t)?(e*=1,n?e>=0&&12>=e:e>=0&&24>e):!1}},function(e){"use strict";e.exports=function(e){return e?(e=e.toUpperCase(),"AM"==e||"PM"==e):!1}},function(e,t,n){"use strict";var r=n(3),i=n(1);e.exports=function(e,t){return t=i({},t),t.twoDigits=2==t.len,r(e,t)}},function(e,t){(function(t){e.exports="ontouchstart"in t||t.DocumentTouch&&document instanceof DocumentTouch}).call(t,function(){return this}())},function(e){"use strict";e.exports={alignItems:1,justifyContent:1,flex:1,flexFlow:1,userSelect:1,transform:1,transition:1,transformOrigin:1,transformStyle:1,transitionProperty:1,transitionDuration:1,transitionTimingFunction:1,transitionDelay:1,borderImage:1,borderImageSlice:1,boxShadow:1,backgroundClip:1,backfaceVisibility:1,perspective:1,perspectiveOrigin:1,animation:1,animationDuration:1,animationName:1,animationDelay:1,animationDirection:1,animationIterationCount:1,animationTimingFunction:1,animationPlayState:1,animationFillMode:1,appearance:1}},function(e,t,n){"use strict";var r=n(9),i=n(8);e.exports=function(e,t,n){var o=n;if(o&&o.hour&&"string"!=typeof o||(o=i(o)),o){var u=o[e];return t&&"meridian"===e&&u.specified?u.uppercase?t.toUpperCase():t.toLowerCase():u.specified?2==u.len?r(t):t:""}}},function(e){"use strict";e.exports=function(e,t,n){if("meridian"==t)return n;if("hour"==t){var r=24;return e.meridian&&(r=e.hour||e.minute?11:12),0>n?0:n>r?r:n}return 0>n?0:n>59?59:n}},function(e,t,n){"use strict";var r=n(1),i=n(4),o=n(2),u=n(13),a=n(10),s=n(20);e.exports=function(e,t,n,l){var c=e,p=i(n,l),d=o(t,n,l);if(e=r({},e),l=l||{},p&&(n*=1),(d||p)&&(e[t]=n),!u(e,l)&&l.clamp&&(e[t]=s(e,t,e[t])),!u(e,l)){if(l.rejectInvalid)return c;l.overflow!==!1&&(e=a(e,l))}return e}},1,function(e,t,n){"use strict";e.exports=n(17)?{onMouseDown:"onTouchStart",onMouseUp:"onTouchEnd",onMouseMove:"onTouchMove"}:{onMouseDown:"onMouseDown",onMouseUp:"onMouseUp",onMouseMove:"onMouseMove"}},function(e,t,n){"use strict";var r=n(7),i=n(6),o=n(18);e.exports=function(e){if(!o[e])return e;var t=i(e);return t?t+r(e):e}},function(e,t,n){"use strict";var r,i,o=n(6),u=n(24),a=n(5),s={};e.exports=function(e,t){i=i||a(),r=r||i.style;var n=e+": "+t;if(s[n])return s[n];var l,c,p;return e in r||(l=o("appearance"),l&&(c=u(e,t),p="-"+l.toLowerCase()+"-"+t,c in r&&(i.style[c]="",i.style[c]=p,""!==i.style[c]&&(t=p)))),s[n]=t,t}},function(e,t,n){"use strict";var r=n(27),i=n(18);e.exports=function(e,t){return i[e]?r(e,t):e}},function(e,t,n){"use strict";var r,i,o=n(7),u=n(6),a=n(5),s={};e.exports=function(e){i=i||a(),r=r||i.style;var t=e;if(s[t])return s[t];var n,l;return e in r||(n=u("appearance"),n&&(l=n+o(e),l in r&&(e=l))),s[t]=e,e}},function(e){"use strict";e.exports=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}},function(e,t,n){"use strict";function r(e,t){var n={key:e,value:t};return(l.plugins||[]).forEach(function(r){var i=a(function(n){return r(e,t,n)},n);i&&(n=i)}),n}function i(e,t){var n=r(e,t);return a(function(e){return{key:u(e.key,e.value),value:e.value}},n)}var o=n(28),u=n(26),a=n(30),s=n(31),l=function(e){var t,n,r={};for(t in e)if(o(e,t)){if(n=i(t,e[t]),!n)continue;a(function(e){r[e.key]=e.value},n)}return r};e.exports=s(l)},function(e){"use strict";e.exports=function(e,t){return t?Array.isArray(t)?t.map(e).filter(function(e){return!!e}):e(t):void 0}},function(e,t,n){"use strict";var r=n(25);e.exports=function(e){return e.plugins=e.plugins||[function(){var e={flex:1,"inline-flex":1};return function(t,n){return"display"===t&&n in e?{key:t,value:r(t,n)}:void 0}}()],e.plugin=function(t){e.plugins=e.plugins||[],e.plugins.push(t)},e}},function(e,t,n){"use strict";function r(e){return e}var i=n(9),o=n(8),u=n(19);e.exports=function(e,t){var n=i,a=i,s=i,l=r;if(t){var c="string"==typeof t?o(t):t;c.hour.specified&&(n=function(){return u("hour",e.hour,c)}),c.minute.specified&&(a=function(){return u("minute",e.minute,c)}),c.second.specified&&(s=function(){return u("second",e.second,c)}),c.meridian.specified&&(l=function(){return u("meridian",e.meridian,c)})}var p=[];null!=e.hour&&p.push(n(e.hour)),null!=e.minute&&p.push(a(e.minute)),null!=e.second&&p.push(s(e.second));var d=p.join(":");return e.meridian&&(d+=" "+l(e.meridian)),d}},function(e,t,n){"use strict";function r(e,t){return e.invalid.forEach(function(t){var n=t.name,r=1*t.value;isNaN(r)||(e[n]=r)}),o(e,t)}var i=n(12),o=i.adjustOverflow,u={};e.exports=function(e,t){t=t||u,e=e||"","string"==typeof e&&(e=i(e,t));var n={};e&&(t.withMeridian=null!=e.meridian,e.invalid&&e.invalid.forEach(function(e){n[e.name]=!0}),!t.strict&&e.invalid&&(e=r(e,t)),n.hour&&(e.hour=e.hour||0),n.minute&&(e.minute=e.minute||0),n.second&&(e.second=e.second||0),t.strict&&e.meridian&&12===e.hour&&(void 0!==e.minute&&(e.minute=0),void 0!==e.second&&(e.second=0)));var o={hour:e.hour};return void 0!==e.minute&&(o.minute=e.minute),void 0!==e.second&&(o.second=e.second),t.withMeridian&&(o.meridian=e.meridian),o}},7,function(e,t,n){"use strict";var r=n(12).updateTime;e.exports=function(e,t,n,i){return e=r(e,t,n,i)}},function(t){t.exports=e}]))});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.ReactTimePicker=t(require("React")):e.ReactTimePicker=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}(function(e){for(var t in e)switch(typeof e[t]){case"number":e[t]=e[e[t]];break;case"object":e[t]=function(t){var n=t.slice(1),r=e[t[0]];return function(e,t,i){r.apply(null,[e,t,i].concat(n))}}(e[t])}return e}([function(e,t,n){"use strict";function r(){}function i(e){return e}var o=n(36),u=n(22),a=n(29),s=n(33),l=n(35),c=n(34),p=n(17),d=n(23),f=" ",h=n(9),m=n(8),v=n(19),y=n(32);e.exports=o.createClass({displayName:"ReactTimePicker",componentWillUnmount:function(){this.stopInterval()},getInitialState:function(){return{defaultValue:this.props.defaultValue,focused:{hour:null,minute:null,second:null,meridian:null},overArrow:{hour:null,minute:null,second:null,meridian:null}}},getDefaultProps:function(){return{normalizeStyle:!0,stopChangePropagation:!0,useArrowKeys:!0,strict:!0,overflowHourToMeridian:!0,step:1,hourStep:null,minuteStep:null,secondStep:null,stepDelay:60,showArrows:!0,defaultStyle:{border:"1px solid gray",padding:10,display:"inline-flex",alignItems:"center",boxSizing:"border-box",flexFlow:"row",width:200},defaultArrowStyle:{cursor:"pointer",userSelect:"none",display:"inline-block",alignSelf:"stretch",textAlign:"center"},defaultArrowOverStyle:{background:"rgb(229, 229, 229)"},defaultArrowUpOverStyle:null,defaultArrowDownOverStyle:null,defaultArrowUpStyle:{marginBottom:5},defaultArrowDownStyle:{marginTop:5},defaultBoxStyle:{boxSizing:"border-box",display:"flex",flexFlow:"column",alignItems:"center"},defaultInputStyle:{boxSizing:"border-box",width:"100%",textAlign:"center"},defaultSeparatorStyle:{flex:"none"},defaultMeridianInputStyle:{cursor:"pointer"},defaultMeridianInputProps:{readOnly:!0},renderHour:null,renderMinute:null,renderSecond:null,renderMeridian:null,defaultArrowFactory:o.DOM.span,arrowFactory:null,arrowUpFactory:null,arrowDownFactory:null,defaultInputFactory:o.DOM.input,inputFactory:null,hourInputFactory:null,minuteInputFactory:null,secondInputFactory:null,meridianInputFactory:null,timeToString:y}},normalize:function(e){return a(e)},render:function(){var e=this.prepareProps(this.props,this.state);e.normalizeStyle||(this.normalize=i);var t=this.renderHour(e),n=this.renderMinute(e),r=this.renderSecond(e),u=this.renderMeridian(e),a=e.separator||o.createElement("span",{style:e.separatorStyle},f+":"+f),s=t&&(n||r||u)?e.hourSeparator||a:null,l=n&&(r||u)?e.minuteSeparator||a:null,c=r&&u?e.secondSeparator||a:null;return o.createElement("div",o.__spread({},e),t,s,n,l,r,c,u)},onArrowMouseEnter:function(e,t,n){var r=this.state.overArrow;Object.keys(r).forEach(function(e){r[e]=null}),r[n]=t,this.setState({})},onArrowMouseLeave:function(e,t,n){this.state.overArrow[n]=null,this.setState({})},onArrowMouseDown:function(e,t,n,r){if(r.preventDefault(),"meridian"==n)return void this.onArrowMeridianAction(e,t,n);var i=p?r.target:window,o=p?"touchend":"click";i.addEventListener(o,this.onWindowClick),this.onArrowAction(e,t,n),this.timeoutId=setTimeout(function(){this.startInterval(e,t,n)}.bind(this),e.stepDelay)},onWindowClick:function(){this.stopInterval()},stopInterval:function(){clearTimeout(this.timeoutId),clearInterval(this.intervalId)},startInterval:function(e,t,n){this.intervalId=setInterval(function(){this.onArrowAction(e,t,n)}.bind(this),e.stepDelay)},onMeridianInputMouseDown:function(e,t){t.preventDefault(),this.onArrowMeridianAction(e,1,"meridian")},onArrowMeridianAction:function(e,t,n){var r=this.time.meridian,i="am"==r||"pm"==r,o=i?"am"==r?"pm":"am":"AM"==r?"PM":"AM";this.updateValue(n,o)},onArrowAction:function(e,t,n){var r=1==t?"Up":"Down",i="onArrow"+r+c(n)+"Action";"function"==typeof this[i]&&this[i](e),i="onArrow"+c(n)+"Action","function"==typeof this[i]&&this[i](e,t),this.incValue(e,n,t)},incValue:function(e,t,n){n=n||0;var r=e[t+"Step"]||e.step,i=n*r,o=this.time,u=o[t],a=u+i;this.updateValue(t,a)},updateValue:function(e,t,n){this.setValue(this.updateTime(e,t,n))},updateTime:function(e,t,n){n=n||{},n.overflowHourToMeridian=this.props.overflowHourToMeridian;var r=this.time;return r=l(r,e,t,n),this.time=r},setValue:function(e){var t=this.state.focused;t&&Object.keys(t).forEach(function(n){t[n]&&(t[n].value=this.format(this.props,n,e[n]))},this),null==this.props.value&&this.setState({defaultValue:e}),(this.props.onChange||r)(this.props.timeToString(e,this.props.format),u({},e))},format:function(e,t,n){var r;if(arguments.length<3&&(n=e.time[t]),r="meridian"!=t?e["render"+c(t)]:e.renderMeridian,!r&&"string"==typeof e.format){var i=this.formatInfo;r=function(e,t){return v(t,e,i)}}return r||(r=h),"function"==typeof r&&(n=r(n,t,e)),n},renderBox:function(e,t){var n,r=this.state,i=e[t+"Style"],a=e[t+"InputStyle"],s=c(t);n=r.focused[t]?r.focused[t].value:this.format(e,t);var l,p;if(e.showArrows){var f=this.state.overArrow[t],h=e.arrowUpStyle;1==f&&(h=u({},e.arrowUpStyle,e.defaultArrowOverStyle,e.defaultArrowUpOverStyle,e.arrowOverStyle,e.arrowUpOverStyle));var m={mouseOver:1==f,style:h,children:"▲"};m[d.onMouseDown]=this.onArrowMouseDown.bind(this,e,1,t),m.onMouseEnter=this.onArrowMouseEnter.bind(this,e,1,t),m.onMouseLeave=this.onArrowMouseLeave.bind(this,e,1,t);var v=e.arrowDownStyle;-1==f&&(v=u({},e.arrowDownStyle,e.defaultArrowOverStyle,e.defaultArrowDownOverStyle,e.arrowOverStyle,e.arrowDownOverStyle));var y={mouseOver:-1==f,style:v,children:"▼"};y[d.onMouseDown]=this.onArrowMouseDown.bind(this,e,-1,t),y.onMouseEnter=this.onArrowMouseEnter.bind(this,e,-1,t),y.onMouseLeave=this.onArrowMouseLeave.bind(this,e,-1,t);var S=e.defaultArrowFactory,w=e.arrowUpFactory||e.arrowFactory||S,M=e.arrowDownFactory||e.arrowFactory||S;l=w(m),void 0===l&&(l=S(m)),p=M(y),void 0===p&&(p=S(y))}var x=e.defaultInputFactory,g=e[t+"InputFactory"]||e.inputFactory||x,I=e["default"+s+"InputProps"],A=e[t+"InputProps"],A=u({},e.inputProps,I,A,{timeName:t,style:a,value:n,onBlur:this.handleInputBlur.bind(this,e,t),onChange:this.handleInputChange.bind(this,e,t),onFocus:this.handleInputFocus.bind(this,e,t)});e.useArrowKeys&&(A.onKeyDown=this.handleInputKeyDown.bind(this,e,t)),"meridian"==t&&(A.onMouseDown=this.onMeridianInputMouseDown.bind(this,e));var b=g(A);return void 0===b&&(b=x(A)),o.createElement("div",{style:i},l,b,p)},handleInputFocus:function(e,t){var n=this.state.focused;n[t]={value:this.format(e,t)},this.stopInterval(),this.setState({})},handleInputBlur:function(e,t,n){this.state.focused[t]=null,this.setState({});var r=1*n.target.value;this.updateValue(t,r,{clamp:e.clamp})},handleInputChange:function(e,t,n){this.state.focused[t]&&(this.state.focused[t].value=n.target.value),this.setState({}),e.stopChangePropagation&&n.stopPropagation()},handleInputKeyDown:function(e,t,n){"ArrowDown"===n.key&&this.incValue(e,t,-1),"ArrowUp"===n.key&&this.incValue(e,t,1)},getTime:function(){var e=this.props.strict,t=this.formatInfo=m(this.props.format);return s(this.getValue(),{strict:e,hour:t.hour,minute:t.minute,second:t.second,meridian:t.meridian})},prepareTime:function(e){var t=this.getTime(),n=this.props.format?this.formatInfo:null;return e.showSecond=n?n.second.specified:void 0!==t.second,e.showMinute=n?n.minute.specified:void 0!==t.minute,e.withMeridian=n?n.meridian.specified:null!=t.meridian,t},getValue:function(){var e=null==this.props.value?this.state.defaultValue:this.props.value;return e},renderHour:function(e){return this.renderBox(e,"hour")},renderMinute:function(e){return e.showMinute?this.renderBox(e,"minute"):void 0},renderSecond:function(e){return e.showSecond?this.renderBox(e,"second"):void 0},renderMeridian:function(e){return e.withMeridian?this.renderBox(e,"meridian"):void 0},prepareProps:function(e,t){var n=u({},e);return this.time=n.time=this.prepareTime(n,t),this.prepareStyles(n,t),n},prepareStyles:function(e,t){e.style=this.prepareStyle(e,t),e.separatorStyle=this.prepareSeparatorStyle(e,t),this.prepareArrowStyles(e,t),this.prepareHourStyles(e,t),this.prepareMinuteStyles(e,t),this.prepareSecondStyles(e,t),this.prepareMeridianStyles(e,t)},prepareStyle:function(e){return this.normalize(u({},e.defaultStyle,e.style))},prepareSeparatorStyle:function(e){return this.normalize(u({},e.defaultSeparatorStyle,e.separatorStyle))},prepareArrowStyles:function(e){e.arrowUpStyle=this.normalize(u({},e.defaultArrowStyle,e.defaultArrowUpStyle,e.arrowStyle,e.arrowUpStyle)),e.arrowDownStyle=this.normalize(u({},e.defaultArrowStyle,e.defaultArrowDownStyle,e.arrowStyle,e.arrowDownStyle))},prepareHourStyles:function(e,t){e.hourStyle=this.prepareHourStyle(e,t),e.hourInputStyle=this.prepareHourInputStyle(e,t)},prepareHourStyle:function(e){return this.normalize(u({},e.defaultBoxStyle,e.defaultHourStyle,e.boxStyle,e.hourStyle))},prepareHourInputStyle:function(e){return this.normalize(u({},e.defaultInputStyle,e.defaultHourInputStyle,e.inputStyle,e.hourInputStyle))},prepareMinuteStyles:function(e,t){e.minuteStyle=this.prepareMinuteStyle(e,t),e.minuteInputStyle=this.prepareMinuteInputStyle(e,t)},prepareMinuteStyle:function(e){return this.normalize(u({},e.defaultBoxStyle,e.defaultMinuteStyle,e.boxStyle,e.minuteStyle))},prepareMinuteInputStyle:function(e){return this.normalize(u({},e.defaultInputStyle,e.defaultMinuteInputStyle,e.inputStyle,e.minuteInputStyle))},prepareSecondStyles:function(e,t){e.showSecond&&(e.secondStyle=this.prepareSecondStyle(e,t),e.secondInputStyle=this.prepareSecondInputStyle(e,t))},prepareSecondStyle:function(e){return this.normalize(u({},e.defaultBoxStyle,e.defaultSecondStyle,e.boxStyle,e.secondStyle))},prepareSecondInputStyle:function(e){return this.normalize(u({},e.defaultInputStyle,e.defaultSecondInputStyle,e.inputStyle,e.secondInputStyle))},prepareMeridianStyles:function(e,t){e.withMeridian&&(e.meridianStyle=this.prepareMeridianStyle(e,t),e.meridianInputStyle=this.prepareMeridianInputStyle(e,t))},prepareMeridianStyle:function(e){return this.normalize(u({},e.defaultBoxStyle,e.defaultMeridianStyle,e.boxStyle,e.meridianStyle))},prepareMeridianInputStyle:function(e){return this.normalize(u({},e.defaultInputStyle,e.defaultMeridianInputStyle,e.inputStyle,e.meridianInputStyle))}})},function(e){"use strict";function t(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=Object.assign||function(e){for(var n,r,i=t(e),o=1;o<arguments.length;o++){n=arguments[o],r=Object.keys(Object(n));for(var u=0;u<r.length;u++)i[r[u]]=n[r[u]]}return i}},function(e,t,n){"use strict";var r=n(14),i=n(3),o=n(16),u=n(15),a={hour:r,minute:i,second:o,meridian:u};e.exports=function(e,t,n){var r=a[e];return!(!r||!r(t,n))}},function(e,t,n){"use strict";var r=n(4),i=n(1);e.exports=function(e,t){return t=i({},t),t.twoDigits=2==t.len,r(e,t)?(e*=1,e>=0&&60>e):!1}},function(e,t,n){"use strict";var r=n(1),i=n(11);e.exports=function(e,t){var n=!isNaN(1*e);return t=t?r({},i,t):i,n&&"string"==typeof e&&t.twoDigits&&(n=2==e.length),n&&(e=1*e,n=parseInt(e)===e),n}},function(e,t){(function(t){"use strict";var n;e.exports=function(){return!n&&t.document&&(n=t.document.createElement("div")),n||(n={style:{}}),n}}).call(t,function(){return this}())},function(e,t,n){"use strict";var r,i,o=n(7),u=["ms","Moz","Webkit","O"],a=n(5);e.exports=function(e){if(void 0!==i)return i;r=r||a();for(var t,n,s=0,l=u.length;l>s;s++)if(n=u[s],t=n+o(e),"undefined"!=typeof r.style[t])return i=n;return i}},function(e){"use strict";e.exports=function(e){return e?e.charAt(0).toUpperCase()+e.slice(1):""}},function(e){"use strict";function t(e){var t=1,n=!1,r=e.indexOf("h");return~r?(n=!0,"h"==e.charAt(r+1)&&t++):(r=e.indexOf("H"),~r&&(n=!0,"H"==e.charAt(r+1)&&t++)),{len:t,specified:n}}function n(e){var t=1,n=!1,r=e.indexOf("m");return~r&&(n=!0,"m"==e.charAt(r+1)&&t++),{len:t,specified:n}}function r(e){var t=1,n=!1,r=e.indexOf("s");return~r&&(n=!0,"s"==e.charAt(r+1)&&t++),{len:t,specified:n}}function i(e){var t=!0,n=!1,r=e.indexOf("a");return~r?(n=!0,t=!1):~e.indexOf("A")&&(n=!0),{uppercase:t,lowercase:!t,specified:n}}e.exports=function(e){return"string"!=typeof e?{hour:{specified:!1},minute:{specified:!1},second:{specified:!1},meridian:{specified:!1}}:{hour:t(e),minute:n(e),second:r(e),meridian:i(e)}}},function(e){"use strict";e.exports=function(e){return 10>e?"0"+e:e}},function(e){"use strict";function t(e,t,n,r){if(void 0!==e.hour){var i=!r||r.overflowHourToMeridian!==!1,o=e.meridian||r&&r.meridian===!0,u=o?12:23,a=o?12:24,s=0;n>u&&(s+=Math.floor(n/u),n%=a),0>n&&(s=Math.ceil(-n/u),n=a+n),o&&n===u&&(e.minute>0||e.second>0)&&(s+=1,n=0),o&&s%2==1&&i&&("string"==typeof o&&(o=o.toUpperCase()),e.meridian="PM"==o?"AM":"PM"),e.hour=n}}function n(e,t,n,r,i){if(void 0!==e[t]){var o=0;n>59&&(o+=Math.floor(n/60),n%=60),0>n&&(o-=Math.ceil(-n/60),n=60+n),e[t||"minute"]=n,o&&(e[i||"hour"]+=o)}}function r(e,r,i,o){n(e,"minute",e.minute,o),t(e,"hour",e.hour,o)}function i(e,t,i,o){n(e,"second",e.second,o,"minute"),r(e,"minute",e.minute,o)}var o={},u={hour:t,minute:r,second:i};e.exports=function(e,t,n,r){return 2==arguments.length&&(r=t,t="second",n=e[t]),u[t](e,t,n,r||o),e}},function(e){"use strict";e.exports={separator:":",twoDigits:!0}},function(e,t,n){"use strict";function r(e){return e.trim()}function i(e,t){return h(e,d({},t,t.hour))?1*e:void 0}function o(e,t){return m(e,d({},t,t.minute))?1*e:void 0}function u(e,t){return v(e,d({},t,t.second))?1*e:void 0}function a(e,t){return y(e,d({},t,t.meridian))?e:void 0}function s(e){var t=e.split(" ");return t.length>1}function l(e){return S[e]}function c(e,t,n){n=d({},n,n?n[t]:null);var i,o,u=n.meridian,s=e.split(" ").map(r),c=l(t),p={invalid:[]};return w(t,s[0],n)?c&&(i=c(s[0],n)):p.invalid.push({name:t,value:s[0]}),u&&(o=a(s[1],n),void 0===o&&p.invalid.push({name:"meridian",value:s[1]})),void 0!==o&&(p.meridian=o),void 0!==i&&(p[t]=i),p}function p(e,t){t=d({},f,t);var n=e.split(t.separator).map(r),u=s(n[n.length-1]);t.meridian=u;var a,l,p=[],h={};return n.length>3?void 0:(1==n.length&&d(h,c(n[0],"hour",t)),2==n.length&&(a=i(n[0],t),void 0===a&&p.push({name:"hour",value:n[0]}),d(h,c(n[1],"minute",t))),3==n.length&&(a=i(n[0],t),l=o(n[1],t),void 0===a&&p.push({name:"hour",value:n[0]}),void 0===l&&p.push({name:"minute",value:n[1]}),d(h,c(n[2],"second",t))),h.invalid&&(p.push.apply(p,h.invalid),h.invalid=p),void 0!==a&&(h.hour=a),void 0!==l&&(h.minute=l),h.invalid.length||delete h.invalid,h)}var d=n(1),f=n(11),h=n(14),m=n(3),v=n(16),y=n(15),S={hour:i,minute:o,second:u,meridian:a},w=n(2),M=n(13),x=n(21),g=n(10);p.isValidPart=w,p.isValidTime=M,p.updateTime=x,p.adjustOverflow=g,e.exports=p},function(e,t,n){"use strict";var r=n(2),i=n(1);e.exports=function(e,t){var n=void 0===e.second||r("second",e.second,t),o=n&&(void 0===e.minute||r("minute",e.minute,t)),u=o&&r("hour",e.hour,i({meridian:e.meridian},t)),a=e.meridian,s=u&&(a?r("meridian",a,t):!0),l=s;if(l&&a){var c=1*e.hour;12===c&&(l=1*e.minute===0&&1*e.second===0)}return l}},function(e,t,n){"use strict";var r=n(4),i=n(1);e.exports=function(e,t){t=i({},t),t.twoDigits=2==t.len;var n=t.meridian;return r(e,t)?(e*=1,n?e>=0&&12>=e:e>=0&&24>e):!1}},function(e){"use strict";e.exports=function(e){return e?(e=e.toUpperCase(),"AM"==e||"PM"==e):!1}},function(e,t,n){"use strict";var r=n(3),i=n(1);e.exports=function(e,t){return t=i({},t),t.twoDigits=2==t.len,r(e,t)}},function(e,t){(function(t){e.exports="ontouchstart"in t||t.DocumentTouch&&document instanceof DocumentTouch}).call(t,function(){return this}())},function(e){"use strict";e.exports={alignItems:1,justifyContent:1,flex:1,flexFlow:1,userSelect:1,transform:1,transition:1,transformOrigin:1,transformStyle:1,transitionProperty:1,transitionDuration:1,transitionTimingFunction:1,transitionDelay:1,borderImage:1,borderImageSlice:1,boxShadow:1,backgroundClip:1,backfaceVisibility:1,perspective:1,perspectiveOrigin:1,animation:1,animationDuration:1,animationName:1,animationDelay:1,animationDirection:1,animationIterationCount:1,animationTimingFunction:1,animationPlayState:1,animationFillMode:1,appearance:1}},function(e,t,n){"use strict";var r=n(9),i=n(8);e.exports=function(e,t,n){var o=n;if(o&&o.hour&&"string"!=typeof o||(o=i(o)),o){var u=o[e];return t&&"meridian"===e&&u.specified?u.uppercase?t.toUpperCase():t.toLowerCase():u.specified?2==u.len?r(t):t:""}}},function(e){"use strict";e.exports=function(e,t,n){if("meridian"==t)return n;if("hour"==t){var r=24;return e.meridian&&(r=e.hour||e.minute?11:12),0>n?0:n>r?r:n}return 0>n?0:n>59?59:n}},function(e,t,n){"use strict";var r=n(1),i=n(4),o=n(2),u=n(13),a=n(10),s=n(20);e.exports=function(e,t,n,l){var c=e,p=i(n,l),d=o(t,n,l);if(e=r({},e),l=l||{},p&&(n*=1),(d||p)&&(e[t]=n),!u(e,l)&&l.clamp&&(e[t]=s(e,t,e[t])),!u(e,l)){if(l.rejectInvalid)return c;l.overflow!==!1&&(e=a(e,l))}return e}},1,function(e,t,n){"use strict";e.exports=n(17)?{onMouseDown:"onTouchStart",onMouseUp:"onTouchEnd",onMouseMove:"onTouchMove"}:{onMouseDown:"onMouseDown",onMouseUp:"onMouseUp",onMouseMove:"onMouseMove"}},function(e,t,n){"use strict";var r=n(7),i=n(6),o=n(18);e.exports=function(e){if(!o[e])return e;var t=i(e);return t?t+r(e):e}},function(e,t,n){"use strict";var r,i,o=n(6),u=n(24),a=n(5),s={};e.exports=function(e,t){i=i||a(),r=r||i.style;var n=e+": "+t;if(s[n])return s[n];var l,c,p;return e in r||(l=o("appearance"),l&&(c=u(e,t),p="-"+l.toLowerCase()+"-"+t,c in r&&(i.style[c]="",i.style[c]=p,""!==i.style[c]&&(t=p)))),s[n]=t,t}},function(e,t,n){"use strict";var r=n(27),i=n(18);e.exports=function(e,t){return i[e]?r(e,t):e}},function(e,t,n){"use strict";var r,i,o=n(7),u=n(6),a=n(5),s={};e.exports=function(e){i=i||a(),r=r||i.style;var t=e;if(s[t])return s[t];var n,l;return e in r||(n=u("appearance"),n&&(l=n+o(e),l in r&&(e=l))),s[t]=e,e}},function(e){"use strict";e.exports=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}},function(e,t,n){"use strict";function r(e,t){var n={key:e,value:t};return(l.plugins||[]).forEach(function(r){var i=a(function(n){return r(e,t,n)},n);i&&(n=i)}),n}function i(e,t){var n=r(e,t);return a(function(e){return{key:u(e.key,e.value),value:e.value}},n)}var o=n(28),u=n(26),a=n(30),s=n(31),l=function(e){var t,n,r={};for(t in e)if(o(e,t)){if(n=i(t,e[t]),!n)continue;a(function(e){r[e.key]=e.value},n)}return r};e.exports=s(l)},function(e){"use strict";e.exports=function(e,t){return t?Array.isArray(t)?t.map(e).filter(function(e){return!!e}):e(t):void 0}},function(e,t,n){"use strict";var r=n(25);e.exports=function(e){return e.plugins=e.plugins||[function(){var e={flex:1,"inline-flex":1};return function(t,n){return"display"===t&&n in e?{key:t,value:r(t,n)}:void 0}}()],e.plugin=function(t){e.plugins=e.plugins||[],e.plugins.push(t)},e}},function(e,t,n){"use strict";function r(e){return e}var i=n(9),o=n(8),u=n(19);e.exports=function(e,t){var n=i,a=i,s=i,l=r;if(t){var c="string"==typeof t?o(t):t;c.hour.specified&&(n=function(){return u("hour",e.hour,c)}),c.minute.specified&&(a=function(){return u("minute",e.minute,c)}),c.second.specified&&(s=function(){return u("second",e.second,c)}),c.meridian.specified&&(l=function(){return u("meridian",e.meridian,c)})}var p=[];null!=e.hour&&p.push(n(e.hour)),null!=e.minute&&p.push(a(e.minute)),null!=e.second&&p.push(s(e.second));var d=p.join(":");return e.meridian&&(d+=" "+l(e.meridian)),d}},function(e,t,n){"use strict";function r(e,t){return e.invalid.forEach(function(t){var n=t.name,r=1*t.value;isNaN(r)||(e[n]=r)}),o(e,t)}var i=n(12),o=i.adjustOverflow,u={};e.exports=function(e,t){t=t||u,e=e||"","string"==typeof e&&(e=i(e,t));var n={};e&&(t.withMeridian=null!=e.meridian,e.invalid&&e.invalid.forEach(function(e){n[e.name]=!0}),!t.strict&&e.invalid&&(e=r(e,t)),n.hour&&(e.hour=e.hour||0),n.minute&&(e.minute=e.minute||0),n.second&&(e.second=e.second||0),t.strict&&e.meridian&&12===e.hour&&(void 0!==e.minute&&(e.minute=0),void 0!==e.second&&(e.second=0)));var o={hour:e.hour};return void 0!==e.minute&&(o.minute=e.minute),void 0!==e.second&&(o.second=e.second),t.withMeridian&&(o.meridian=e.meridian),o}},7,function(e,t,n){"use strict";var r=n(12).updateTime;e.exports=function(e,t,n,i){return e=r(e,t,n,i)}},function(t){t.exports=e}]))});

lib/index.js

@@ -56,2 +56,3 @@ 'use strict';
 			stopChangePropagation: true,
+			useArrowKeys: true,
 
@@ -205,2 +206,4 @@ //makes 15:78 be converted to 15:00, and not to 16:18
 
+		event.preventDefault()
+
 		if (name == 'meridian'){
@@ -307,2 +310,13 @@ this.onArrowMeridianAction(props, dir, name)
 
+		var focused  = this.state.focused
+		var newState = {}
+
+		if (focused){
+			Object.keys(focused).forEach(function(key){
+				if (focused[key]){
+					focused[key].value = this.format(this.props, key, time[key])
+				}
+			}, this)
+		}
+
 		if (this.props.value == null){
@@ -438,7 +452,11 @@ this.setState({
 			value   : value,
-			onFocus : this.handleInputFocus.bind(this, props, name),
-			onBlur  : this.handleInputBlur.bind(this, props, name),
-			onChange: this.handleInputChange.bind(this, props, name)
+      		onBlur  : this.handleInputBlur.bind(this, props, name),
+      		onChange: this.handleInputChange.bind(this, props, name),
+      		onFocus : this.handleInputFocus.bind(this, props, name),
 		})
 
+		if (props.useArrowKeys){
+			inputProps.onKeyDown = this.handleInputKeyDown.bind(this, props, name)
+		}
+
 		if (name == 'meridian'){
@@ -494,4 +512,15 @@ inputProps.onMouseDown = this.onMeridianInputMouseDown.bind(this, props)
 		props.stopChangePropagation && event.stopPropagation()
-	},
+  	},
 
+  	handleInputKeyDown: function(props, name, event){
+
+    	if (event.key === 'ArrowDown') {
+      		this.incValue(props, name, -1)
+    	}
+
+    	if (event.key === 'ArrowUp') {
+      		this.incValue(props, name, 1)
+    	}
+  	},
+
 	getTime: function(){
@@ -653,2 +682,2 @@ var strict = this.props.strict
 	}
-})
+})

package.json

 {
   "name": "react-time-picker",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "React Time Picker",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -110,2 +110,3 @@ # react-time-picker
 
+ * useArrowKeys: Boolean - defaults to true. When this prop is `true`, you can update time values with arrow up/down keys when field is focused. Set to `false` if you don't want this behavior
  * inputFactory: Function(props) - you can control how to render the time inputs, by using this function. It will be called with some props for the input:
@@ -112,0 +113,0 @@

ROADMAP.md

 react-time-picker
 ============
 
-To be announced - we'll also analyze feature requests from users using this in production.
+## 1.0.6 add support for arrow keys

src/index.jsx

@@ -56,2 +56,3 @@ 'use strict';
 			stopChangePropagation: true,
+			useArrowKeys: true,
 
@@ -205,2 +206,4 @@ //makes 15:78 be converted to 15:00, and not to 16:18
 
+		event.preventDefault()
+
 		if (name == 'meridian'){
@@ -307,2 +310,13 @@ this.onArrowMeridianAction(props, dir, name)
 
+		var focused  = this.state.focused
+		var newState = {}
+
+		if (focused){
+			Object.keys(focused).forEach(function(key){
+				if (focused[key]){
+					focused[key].value = this.format(this.props, key, time[key])
+				}
+			}, this)
+		}
+
 		if (this.props.value == null){
@@ -438,7 +452,11 @@ this.setState({
 			value   : value,
-			onFocus : this.handleInputFocus.bind(this, props, name),
-			onBlur  : this.handleInputBlur.bind(this, props, name),
-			onChange: this.handleInputChange.bind(this, props, name)
+      		onBlur  : this.handleInputBlur.bind(this, props, name),
+      		onChange: this.handleInputChange.bind(this, props, name),
+      		onFocus : this.handleInputFocus.bind(this, props, name),
 		})
 
+		if (props.useArrowKeys){
+			inputProps.onKeyDown = this.handleInputKeyDown.bind(this, props, name)
+		}
+
 		if (name == 'meridian'){
@@ -494,4 +512,15 @@ inputProps.onMouseDown = this.onMeridianInputMouseDown.bind(this, props)
 		props.stopChangePropagation && event.stopPropagation()
-	},
+  	},
 
+  	handleInputKeyDown: function(props, name, event){
+
+    	if (event.key === 'ArrowDown') {
+      		this.incValue(props, name, -1)
+    	}
+
+    	if (event.key === 'ArrowUp') {
+      		this.incValue(props, name, 1)
+    	}
+  	},
+
 	getTime: function(){
@@ -653,2 +682,2 @@ var strict = this.props.strict
 	}
-})
+})

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

126203

increased by2.05%

Lines of code

3371

increased by2.06%

Number of lines in readme file

160

increased by0.63%

No dependency changes