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