@gsretail.com/gui-core/build/esm/core/Date/TimeInput/GuiTimeInput.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__rest as e,__assign as n}from"tslib";import t,{useRef as r,useState as i,useEffect as o}from"react";import{Box as a}from"@mui/material";import{set as l}from"date-fns";import{GuiIconButton as s}from"../../Button/GuiIconButton.js";import{GuiInput as u}from"../../Input/GuiInput.js";import{CaretSortUp as c,CaretSortDown as m}from"@gsretail.com/gui-icons";import{StyledBox as d}from"./GuiTimeInput.styled.js";var f=function(f){var g=f.delimiter,h=f.onChange,p=void 0===h?function(){}:h,v=f.readOnly,b=f.disabled,y=f.value,w=f.label,x=f.labelWidth,E=f.labelTextAlign,N=f.required,C=f.width;f.size;var B=f.className,j=f.boxProps;e(f,["delimiter","onChange","readOnly","disabled","value","label","labelWidth","labelTextAlign","required","width","size","className","boxProps"]),r(null);var G=r(null),I=r(null),O={minWidth:"100%",width:"100%"},D={maxLength:3,style:{padding:0}},P=i("hours"),k=P[0],F=P[1],S=i(y?y.getHours():0),T=S[0],W=S[1],q=i(y?y.getMinutes():0),A=q[0],K=q[1],M=i(y?y.getSeconds():0),z=M[0],H=M[1];o((function(){y&&(W(y.getHours()),K(y.getMinutes()),H(y.getSeconds()))}),[y]);var L=function(e,n,t){var r=l(new Date,{hours:"hours"===e?n:T,minutes:"minutes"===e?n:A,seconds:"seconds"===e?n:z});p(r,t)},R=function(e){var n=e.target.name;window.setTimeout((function(){e.target.setSelectionRange(0,0)}),0),F(n)},J=function(){var e=0;return"hours"===k&&T<23&&W(e=T+1),"minutes"===k&&A<59&&K(e=A+1),"seconds"===k&&z<59&&H(e=z+1),e},Q=function(){var e=0;return"hours"===k&&T>0&&W(e=T-1),"minutes"===k&&A>0&&K(e=A-1),"seconds"===k&&z>0&&H(e=z-1),e},U=function(e){var n,t=e.target,r=t.name,i=t.value,o=t.selectionStart,a=r;if(n=parseInt("".concat(i.substring(0,1)).concat(i.substring(2)),10),"hours"===a){if(n>23)return;W(n),2!==o&&3!==o||G.current.focus()}else if("minutes"===a){if(n>59)return;K(n),2!==o&&3!==o||I.current.focus()}else if("seconds"===a){if(n>59)return;H(n)}L(a,n,e)},V=function(e){if(38===e.keyCode){var n=J();L(k,n,e)}if(40===e.keyCode){n=Q();L(k,n,e)}},X=function(e){var n=e.target,t=n.name,r=n.value,i=t,o=Number(r);"hours"===i&&o>23&&(o=Number(23),W(o)),"minutes"===i&&o>59&&(o=Number(59),K(o)),"seconds"===i&&o>59&&(o=Number(59),H(o)),L(i,o,e)};return t.createElement(a,n({className:["gui-form gui-time-input",B&&B].join(" "),width:C},j),w&&t.createElement(a,{minWidth:x},t.createElement("label",{className:["gui-label",E&&"textAlign-"+E,N&&"Mui-required"].join(" ")},w)),t.createElement(a,{flexGrow:1,className:"gui-form",display:"inline-flex",gap:"2px"},t.createElement(d,{readOnly:v,disabled:b,className:[b&&"gui-form-disabled",v&&"gui-form-readonly",B&&B].join(" ")},t.createElement(u,{name:"hours",value:T<10?"0".concat(T):T,style:O,inputProps:D,onFocus:R,onChange:U,onBlur:X,onKeyDown:V,readOnly:v,disabled:b,autoFocus:!0}),g||t.createElement(a,{px:.5},":"),t.createElement(u,{name:"minutes",value:A<10?"0".concat(A):A,style:O,inputProps:D,onFocus:R,onChange:U,onBlur:X,onKeyDown:V,readOnly:v,disabled:b,ref:G}),g||t.createElement(a,{px:.5},":"),t.createElement(u,{name:"seconds",value:z<10?"0".concat(z):z,style:O&&{flexGrow:1},inputProps:D,onFocus:R,onChange:U,onBlur:X,onKeyDown:V,readOnly:v,disabled:b,ref:I}),t.createElement(a,{style:{display:"flex",flexDirection:"column",alignItems:"flex-end",flexGrow:1}},t.createElement(s,{style:n({width:20,height:10},(b||v)&&{pointerEvents:"none"}),variant:"clear",onClick:function(e){var n=J();L(k,n,e)}},t.createElement(c,{width:20,height:15,viewBox:"0 0 25 15"})),t.createElement(s,{style:n({width:20,height:10},(b||v)&&{pointerEvents:"none"}),variant:"clear",onClick:function(e){var n=Q();L(k,n,e)}},t.createElement(m,{width:20,height:15,viewBox:"0 10 25 15"}))))))};export{f as GuiTimeInput,f as default};