react-wheel-time-picker/dist/bundle.cjs.js

[](https://www.npmjs.com/package/react-wheel-time-picker) 

"use strict";var e=require("react/jsx-runtime"),t=require("react");require("./styles/react-wheel-time-picker.css");var n=function(){return n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r=function(e,t,n){void 0===e&&(e=54),void 0===t&&(t=24),void 0===n&&(n=0);for(var r=[{number:"00",translatedValue:(2*e).toString(),selected:!1},{number:"01",translatedValue:e.toString(),selected:!1}],a=[{number:"00",translatedValue:e.toString(),selected:!1,hidden:!0},{number:"01",translatedValue:e.toString(),selected:!1}],o=13===t?a:r,c=0,u=0;u<3;u++)for(var l=0;l<t;l++)0===u&&l<2||13===t&&0===l||(1!==u||l!==n?(1===l.toString().length?o.push({number:"0".concat(l.toString()),translatedValue:"-".concat(c),selected:!1}):o.push({number:l.toString(),translatedValue:"-".concat(c),selected:!1}),c+=e):(1===Number(l).toString().length?o.push({number:"0".concat(Number(l).toString()),translatedValue:"-".concat(c),selected:!0}):o.push({number:Number(l).toString(),translatedValue:"-".concat(c),selected:!0}),c+=e));return o},a=function(e,t){void 0===e&&(e=54),void 0===t&&(t=24);for(var n=[{number:"00",translatedValue:(2*e).toString(),arrayNumber:0},{number:"01",translatedValue:e.toString(),arrayNumber:1}],r=0,a=0;a<3;a++)for(var o=0;o<t;o++)0===a&&o<2||13===t&&0===o||(1===o.toString().length?n.push({number:"0".concat(o.toString()),translatedValue:"-".concat(r),selected:!1}):n.push({number:o.toString(),translatedValue:"-".concat(r),selected:!1}),r+=e);return n};function o(o){var c,u,l=o.height,i=o.value,s=o.setValue,d=o.use12Hours,f=o.isDarkMode,m=d?13:24,h=t.useState(r(l,m,parseInt(i.slice(0,2)))),p=h[0],v=h[1],S=t.useRef(null),w=t.useState(null),g=w[0],b=w[1],x=t.useState(0),k=x[0],y=x[1],V=t.useState(parseInt(null!==(u=null===(c=r(l,m,parseInt(i.slice(0,2))).filter((function(e){return e.number===i.slice(0,2)&&!0===e.selected}))[0])||void 0===c?void 0:c.translatedValue)&&void 0!==u?u:"00")),M=V[0],N=V[1],j=t.useState(!1),Y=j[0],T=j[1],C=t.useState(!1),I=C[0],D=C[1],E=t.useState(0),F=E[0],O=E[1],P=t.useState(0),A=P[0],H=P[1],B=t.useState(null)[1],q=t.useState(null),L=q[0],R=q[1],U=t.useState(null),W=U[0],z=U[1],G=t.useState(void 0)[1],J=function(){T(!1),N((function(e){return e+g})),D(!0),H(performance.now()),performance.now()-F<=100?R("fast"):R("slow"),z(g<0?"down":"up")};t.useEffect((function(){Y&&void 0!==S.current&&(S.current.style.transform="translateY(".concat(M+g,"px)"))}),[g,M,Y]),t.useEffect((function(){if(I&&void 0!==S.current){if(B(A-F),A-F<=100&&0!==g){var e=void 0;"down"===W?e=M-120/(A-F)*100:"up"===W&&(e=M+120/(A-F)*100);var t=Math.round(e/l)*l;d?(t<-34*l&&(t=-34*l),t>l&&(t=l)):(t<-69*l&&(t=-69*l),t>2*l&&(t=2*l)),S.current.style.transform="translateY(".concat(t,"px)"),N(t)}if(A-F>100&&0!==g){t=Math.round(M/l)*l;d?(t<-34*l&&(t=-34*l),t>l&&(t=l)):(t<-69*l&&(t=-69*l),t>2*l&&(t=2*l)),S.current.style.transform="translateY(".concat(t,"px)"),N(t)}b(0)}}),[I,M,g,W,A,F,l,d]);var K=function(e){var t=e.target;0===g&&N(parseInt(t.dataset.translatedValue))},Q=I&&"fast"===L,X=I&&"slow"===L;return e.jsx("div",{className:"react-wheel-time-picker-hour ".concat(d&&"react-wheel-time-picker-hour-12hour-format"),onMouseDown:function(e){return function(e){D(!1),y(e.clientY),T(!0),O(performance.now())}(e)},onMouseUp:J,onMouseMove:function(e){b(Y?e.clientY-k:0)},onMouseLeave:function(){T(!1),N((function(e){return e+g})),D(!0),H(performance.now()),performance.now()-F<=100?R("fast"):R("slow"),z(g<0?"down":"up")},style:{height:5.7*l},onWheel:function(e){d?e.deltaY>0?M<l&&N((function(e){return e+l})):M>-34*l&&N((function(e){return e-l})):e.deltaY>0?M<2*l&&N((function(e){return e+l})):M>-69*l&&N((function(e){return e-l}))},onTouchStart:function(e){return function(e){D(!1),y(e.targetTouches[0].clientY),T(!0),O(performance.now())}(e)},onTouchMove:function(e){return function(e){b(Y?e.targetTouches[0].clientY-k:0)}(e)},onTouchEnd:J,children:e.jsx("div",{ref:S,className:"".concat(!0===Q&&"react-wheel-time-picker-fast"," ").concat(!0===X&&"react-wheel-time-picker-slow"),onTransitionEnd:function(){a(l,m).map((function(e){parseInt(e.translatedValue)===M&&(G(e.arrayNumber),s((function(t){return"".concat(e.number,":").concat(t.slice(3,6))})),v((function(){return r(l,m).map((function(t){return t.number==e.number&&+t.translatedValue==M?n(n({},t),{selected:!0}):t}))})))}))},style:{transform:"translateY(".concat(M,"px)")},children:p.map((function(t,n){return e.jsx("div",{className:"react-wheel-time-picker-cell-hour",style:{height:"".concat(l,"px")},children:e.jsx("div",{style:{color:f?"#f7f7f7":t.selected?"#000":"#6a6a6b",fontSize:t.selected?18:14},className:"react-wheel-time-picker-cell-inner-hour".concat(t.selected?" react-wheel-time-picker-cell-inner-selected":"").concat((null==t?void 0:t.hidden)?" react-wheel-time-picker-cell-inner-hidden":""),onClick:K,"data-translated-value":t.translatedValue,children:t.number})},n)}))})})}function c(o){var c=o.height,u=o.value,l=o.setValue,i=o.isDarkMode,s=t.useState(r(c,60,parseInt(u.slice(3,6)))),d=s[0],f=s[1],m=t.useRef(null),h=t.useState(0),p=h[0],v=h[1],S=t.useState(0),w=S[0],g=S[1],b=t.useState(u&&parseInt(r(c,60,parseInt(u.slice(3,6))).filter((function(e){return e.number===u.toString().slice(3,6)&&!0===e.selected}))[0].translatedValue)),x=b[0],k=b[1],y=t.useState(!1),V=y[0],M=y[1],N=t.useState(!1),j=N[0],Y=N[1],T=t.useState(0),C=T[0],I=T[1],D=t.useState(0),E=D[0],F=D[1],O=t.useState(null)[1],P=t.useState(""),A=P[0],H=P[1],B=t.useState(null),q=B[0],L=B[1],R=t.useState(void 0)[1],U=function(){M(!1),k((function(e){return+e+p})),Y(!0),F(performance.now()),performance.now()-C<=100?H("fast"):H("slow"),L(p<0?"down":"up")};t.useEffect((function(){V&&(m.current.style.transform="translateY(".concat(+x+p,"px)"))}),[p,x,V]),t.useEffect((function(){if(j){if(O(E-C),E-C<=100&&0!==p){var e=void 0;"down"===q?e=+x-120/(E-C)*100:"up"===q&&(e=+x+120/(E-C)*100),(t=Math.round(e/c)*c)<-177*c&&(t=-177*c),t>2*c&&(t=2*c),m.current.style.transform="translateY(".concat(t,"px)"),k(t)}var t;if(E-C>100&&0!==p)(t=Math.round(+x/c)*c)<-177*c&&(t=-177*c),t>2*c&&(t=2*c),m.current.style.transform="translateY(".concat(t,"px)"),k(t);v(0)}}),[j,x,p,q,E,c,C]);var W=function(e){var t=e.target;0===p&&k(parseInt(t.dataset.translatedValue))},z=j&&"fast"===A,G=j&&"slow"===A;return e.jsx("div",{className:"react-wheel-time-picker-minute",onMouseDown:function(e){Y(!1),g(e.clientY),M(!0),I(performance.now())},onMouseUp:U,onMouseMove:function(e){v(V?e.clientY-w:0)},onMouseLeave:function(){M(!1),k((function(e){return+e+p})),Y(!0),F(performance.now()),performance.now()-C<=100?H("fast"):H("slow"),L(p<0?"down":"up")},style:{height:5.7*c},onWheel:function(e){e.deltaY>0?+x<2*c&&k((function(e){return+e+c})):+x>-177*c&&k((function(e){return+e-c}))},onTouchStart:function(e){Y(!1),g(e.targetTouches[0].clientY),M(!0),I(performance.now())},onTouchMove:function(e){v(V?e.targetTouches[0].clientY-w:0)},onTouchEnd:U,children:e.jsx("div",{ref:m,className:"".concat(!0===z&&"react-wheel-time-picker-fast"," ").concat(!0===G&&"react-wheel-time-picker-slow"),onTransitionEnd:function(){a(c,60).map((function(e){parseInt(e.translatedValue)===x&&(R(e.arrayNumber),l((function(t){return"".concat(null==t?void 0:t.slice(0,2),":").concat(e.number)})),f((function(){return r(c,60).map((function(t){return t.number==e.number&&+t.translatedValue==x?n(n({},t),{selected:!0}):t}))})))}))},style:{transform:"translateY(".concat(x,"px)")},children:d.map((function(t,n){return e.jsx("div",{className:"react-wheel-time-picker-cell-minute",style:{height:"".concat(c,"px")},children:e.jsx("div",{style:{color:i?"#f7f7f7":t.selected?"#000":"#6a6a6b",fontSize:t.selected?18:14},className:"react-wheel-time-picker-cell-inner-minute".concat(t.selected?" react-wheel-time-picker-cell-inner-selected":""),onClick:W,"data-translated-value":t.translatedValue,children:t.number})},n)}))})})}function u(r){var a,o,c=r.height,u=r.setHourFormat,l=r.hourFormat,i=r.isDarkMode,s=[{number:"AM",translatedValue:(2*c).toString(),selected:!1},{number:"PM",translatedValue:c.toString(),selected:!1}],d=t.useState([{number:"AM",translatedValue:(2*c).toString(),selected:"AM"===l.hourFormat},{number:"PM",translatedValue:c.toString(),selected:"PM"===l.hourFormat}]),f=d[0],m=d[1],h=t.useRef(null),p=t.useState(0),v=p[0],S=p[1],w=t.useState(0),g=w[0],b=w[1],x=t.useState(parseInt(null!==(o=null===(a=f.filter((function(e){return!0===e.selected}))[0])||void 0===a?void 0:a.translatedValue)&&void 0!==o?o:"00:00")),k=x[0],y=x[1],V=t.useState(!1),M=V[0],N=V[1],j=t.useState(!1),Y=j[0],T=j[1],C=t.useState(0),I=C[0],D=C[1],E=t.useState(0),F=E[0],O=E[1],P=t.useState(null)[1],A=t.useState("")[1],H=t.useState(null),B=H[0],q=H[1],L=t.useState(void 0)[1],R=function(){N(!1),y((function(e){return e+v})),T(!0),O(performance.now()),performance.now()-I<=100?A("fast"):A("slow"),q(v<0?"down":"up")};t.useEffect((function(){M&&(h.current.style.transform="translateY(".concat(k+v,"px)"))}),[v,k,M]),t.useEffect((function(){if(Y){P(F-I);var e=Math.round(k/c)*c;e<c&&(e=c),e>2*c&&(e=2*c),h.current.style.transform="translateY(".concat(e,"px)"),y(e),S(0)}}),[Y,k,v,B,F,c,I]);var U=function(e){var t=e.target;0===v&&y(parseInt(t.dataset.translatedValue))};return e.jsx("div",{className:"react-wheel-time-picker-hour-format",onMouseDown:function(e){T(!1),b(e.clientY),N(!0),D(performance.now())},onMouseUp:R,onMouseMove:function(e){S(M?e.clientY-g:0)},onMouseLeave:function(){N(!1),y((function(e){return e+v})),T(!0),O(performance.now()),q(v<0?"down":"up")},style:{height:5*c},onWheel:function(e){e.deltaY>0?k<=c&&y((function(e){return e+c})):k>=2*c&&y((function(e){return e-c}))},onTouchStart:function(e){T(!1),b(e.targetTouches[0].clientY),N(!0),D(performance.now())},onTouchMove:function(e){S(M?e.targetTouches[0].clientY-g:0)},onTouchEnd:R,children:e.jsx("div",{ref:h,className:"".concat(Y&&"react-wheel-time-picker-hour-format-transition"),onTransitionEnd:function(e){"transform"===e.propertyName&&[{number:"AM",translatedValue:(2*c).toString(),arrayNumber:0},{number:"PM",translatedValue:c.toString(),arrayNumber:1}].map((function(e){parseInt(e.translatedValue)===k&&(L(e.arrayNumber),u({mount:!0,hourFormat:e.number}),m((function(){return s.map((function(t){return t.number==e.number&&+t.translatedValue==k?n(n({},t),{selected:!0}):t}))})))}))},style:{transform:"translateY(".concat(k,"px)")},children:f.map((function(t,n){return e.jsx("div",{className:"react-wheel-time-picker-cell-hour",style:{height:"".concat(c,"px")},children:e.jsx("div",{style:t.selected?{color:i?"#f7f7f7":"#000"}:{},className:"react-wheel-time-picker-cell-inner-hour-format".concat(t.selected?" react-wheel-time-picker-cell-inner-hour-format-selected":""),onClick:U,"data-translated-value":t.translatedValue,children:t.number})},n)}))})})}function l(r){var a=r.pickerDefaultValue,l=r.initialValue,i=r.onChange,s=r.height,d=r.onSave,f=r.onCancel,m=r.cancelButtonText,h=r.saveButtonText,p=r.controllers,v=r.setInputValue,S=r.setIsOpen,w=r.seperator,g=r.use12Hours,b=r.onAmPmChange,x=r.isDarkMode,k=g?null==l?void 0:l.slice(0,5):l,y=t.useState(null===l?a:k),V=y[0],M=y[1],N=t.useState({mount:!1,hourFormat:l&&(null==l?void 0:l.slice(6,8))}),j=N[0],Y=N[1];t.useEffect((function(){if(!1===p){var e=g?"".concat(V," ").concat(j.hourFormat):V;v(e),i(e)}}),[V,p,j.hourFormat,i,v,g]),t.useEffect((function(){j.mount&&b(j.hourFormat)}),[j,b]);var T={height:s,value:V,setValue:M,controllers:p,use12Hours:g,onAmPmChange:b,setHourFormat:Y,hourFormat:j,isDarkMode:x};return e.jsxs("div",{className:"react-wheel-time-picker  react-wheel-time-picker-transition",children:[p&&e.jsxs("div",{className:"react-wheel-time-picker-btn-container",style:x?{background:"#000"}:{backgroundColor:"#d6d6d6"},children:[e.jsx("button",{style:{backgroundColor:x?"#000":"#d6d6d6",color:x?"#fe9f06":"#262626"},className:"react-wheel-time-picker-btn react-wheel-time-picker-btn-cancel",onClick:function(){f(),S(!1)},children:m}),e.jsx("button",{style:{background:x?"#000":"#d6d6d6",color:x?"#fe9f06":"#262626"},className:"react-wheel-time-picker-btn",onClick:function(){var e=g?"".concat(V," ").concat(j.hourFormat):V;e&&(v(e),i(e),d(e)),S(!1)},children:h})]}),e.jsxs("div",{className:"react-wheel-time-picker-container",style:{height:"".concat(5*s+20,"px"),backgroundColor:x?"#1d1d1d":"#f6f6f6f6"},children:[e.jsx("div",{className:"react-wheel-time-picker-selected-overlay",style:{top:"".concat(2*s+20,"px"),height:"".concat(s,"px"),backgroundColor:x?"#2c2c2f":"#d3d3d3d3"}}),e.jsx(o,n({},T)),w&&e.jsx("div",{className:"react-wheel-time-picker-colon",style:{color:x?"#f7f7f7":"#000"},children:":"}),e.jsx(c,n({},T)),g&&e.jsx(u,n({},T))]})]})}var i=function(t){var n=t.isOpen,r=t.isDarkMode,a=t.children;return e.jsx("div",{style:n?{width:"100%",height:"100%",backgroundColor:r?"rgba(58,54,56,0.83)":"rgba(0,0,0,0.83)",position:"absolute",top:0,left:0}:{},children:a})};exports.TimePicker=function(r){var a=r.value,o=void 0===a?"":a,c=r.cellHeight,u=void 0===c?28:c,s=r.placeHolder,d=void 0===s?"Select Time":s,f=r.pickerDefaultValue,m=void 0===f?"":f,h=r.onChange,p=void 0===h?function(){}:h,v=r.onFocus,S=void 0===v?function(){}:v,w=r.onSave,g=void 0===w?function(){}:w,b=r.onCancel,x=void 0===b?function(){}:b,k=r.disabled,y=void 0!==k&&k,V=r.isOpen,M=void 0!==V&&V,N=r.required,j=void 0!==N&&N,Y=r.cancelButtonText,T=void 0===Y?"Cancel":Y,C=r.saveButtonText,I=void 0===C?"Save":C,D=r.controllers,E=void 0===D||D,F=r.seperator,O=void 0===F||F,P=r.id,A=void 0===P?null:P,H=r.use12Hours,B=void 0!==H&&H,q=r.onAmPmChange,L=void 0===q?function(){}:q,R=r.name,U=void 0===R?null:R,W=r.onOpen,z=void 0===W?function(){}:W,G=r.popupClassName,J=void 0===G?null:G,K=r.inputClassName,Q=void 0===K?null:K,X=r.isDarkMode,Z=r.label,$=t.useState(M),_=$[0],ee=$[1],te=t.useState(u)[0],ne=t.useState(o),re=ne[0],ae=ne[1],oe=re;null===o&&B?oe="".concat(m," AM"):null!==o||B||(oe=m);var ce={onChange:p,height:te,onSave:g,onCancel:x,cancelButtonText:T,saveButtonText:I,controllers:E,setInputValue:ae,setIsOpen:ee,seperator:O,use12Hours:B,onAmPmChange:L,initialValue:oe,pickerDefaultValue:m,isDarkMode:X};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"react-wheel-time-picker-main",style:{display:"flex",flexDirection:"column",alignItems:"center"},onClick:function(){ee(!_)},children:[e.jsx("label",{className:"label",children:Z}),e.jsx("input",{id:A,name:U,className:"react-wheel-time-picker-input ".concat(Q||""),value:null===re?"":re,type:"text",style:{width:"80%",color:X?"#fff":"#000",border:X?"1px solid #fff":"1px solid #0005"},placeholder:d,readOnly:!0,disabled:y,required:j,onFocus:function(){S(),z()}})]}),_&&!y&&e.jsx(i,{isOpen:_,isDarkMode:X,children:e.jsx("div",{children:e.jsxs("div",{className:"react-wheel-time-picker-popup",children:[e.jsx("div",{className:"react-wheel-time-picker-popup-overlay ".concat(J||""),onClick:function(){return ee(!_)}}),e.jsx(l,n({},ce))]})})})]})};
//# sourceMappingURL=bundle.cjs.js.map