carbon-react/esm/components/time/time.component.js

A library of reusable React components for easily building user interfaces.

import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as n,useState as i,useEffect as o,useImperativeHandle as l,useCallback as a}from"react";import s from"../../__internal__/utils/helpers/guid/index.js";import u from"../../hooks/__internal__/useLocale/useLocale.js";import d from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import c from"../../style/utils/filter-styled-system-margin-props.js";import p from"../../__internal__/fieldset/fieldset.component.js";import{Box as m}from"../box/box.component.js";import{Number as f}from"../number/number.component.js";import{Typography as g}from"../typography/typography.component.js";import b from"./time.style.js";import y from"./__internal__/time-toggle/time-toggle.component.js";function h(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){h(e,t,r[t])}))}return e}function j(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const v=r.forwardRef(((r,h)=>{var{label:v,labelAlign:P,fieldLabelsAlign:w,size:x="medium",inputHint:_,hoursInputProps:S={},minutesInputProps:T={},value:D,name:L,onChange:A,onBlur:C,required:H,disabled:I,readOnly:M,toggleProps:z={},validationMessagePositionTop:E=!0}=r,k=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(r,["label","labelAlign","fieldLabelsAlign","size","inputHint","hoursInputProps","minutesInputProps","value","name","onChange","onBlur","required","disabled","readOnly","toggleProps","validationMessagePositionTop"]);const{id:B,label:$,"aria-label":q,error:F,warning:N}=S,{id:R,label:V,"aria-label":G,error:J,warning:K}=T,Q=n(B||s()),U=n(R||s()),W=n(`${Q.current}-${U.current}`),{hours:X,minutes:Y,period:Z}=D,ee=X.length?X.padStart(2,"0"):X,te=Y.length?Y.padStart(2,"0"):Y,[re,ne]=i([X,Y]),[ie,oe]=i([ee,te]),le=u(),ae=void 0!==Z,[se,ue]=i(Z),de=$||le.time.hoursLabelText(),ce=V||le.time.minutesLabelText(),pe=q||le.time.hoursAriaLabelText(),me=G||le.time.minutesAriaLabelText(),fe=n(null),ge=n(null);o((()=>{const e=[...re];if(re[0]!==X&&(e[0]=X),re[1]!==Y&&(e[1]=Y),re[0]!==X||re[1]!==Y){ne(e);const t=X.length?X.padStart(2,"0"):X,r=Y.length?Y.padStart(2,"0"):Y;oe([t,r])}}),[X,Y,re]);const be=(e,t)=>{const r="string"==typeof e,n="string"==typeof t;return r||n?r&&!n?e:n&&!r?t:`${e} ${t}`:e||t},ye=be(F,J),he=be(N,K);l(h,(()=>({focusHoursInput(){var e;null===(e=fe.current)||void 0===e||e.focus()},focusMinutesInput(){var e;null===(e=ge.current)||void 0===e||e.focus()}})),[]);const Oe=(e,t)=>{const r="hrs"===t?e.target.value:re[0],n="mins"===t?e.target.value:re[1];ne([r,n]);const i=r.length?r.padStart(2,"0"):r,o=n.length?n.padStart(2,"0"):n;oe([i,o]),A({target:{name:L,id:W.current,value:{hours:r,minutes:n,period:se,formattedHours:i,formattedMinutes:o}}})},je=a((e=>{setTimeout((()=>{const[t,r]=re,[n,i]=ie,o={hours:t,minutes:r,period:se,formattedHours:n,formattedMinutes:i};fe.current!==document.activeElement&&ge.current!==document.activeElement&&(null==C||C(e,o))}))}),[ie,re,C,se]);return e(p,j(O({applyNewValidation:!0,id:W.current,legend:v,inputHint:_,width:"min-content",legendAlign:P,isRequired:H,isDisabled:I,name:L,error:ye,warning:he,validationMessagePositionTop:E},k,c(k),d("time",k)),{children:t(m,{display:"flex",children:[t("div",{children:[e(b,{"aria-label":pe,htmlFor:Q.current,disabled:I,align:w,children:de}),e(f,j(O({},S),{label:void 0,"data-component":"hours",ref:fe,value:X,onChange:e=>Oe(e,"hrs"),onBlur:je,id:Q.current,size:x,error:!!F,warning:!!N,disabled:I,readOnly:M,my:0}))]}),t(m,{display:"flex",flexDirection:"column",justifyContent:"center",mx:1,"aria-hidden":"true",children:[e("span",{children:" "}),e(g,{isDisabled:I,variant:"span",mb:"-4px",children:":"})]}),t("div",{children:[e(b,{"aria-label":me,htmlFor:U.current,disabled:I,align:w,children:ce}),e(f,j(O({},T),{label:void 0,"data-component":"minutes",ref:ge,value:Y,onChange:e=>Oe(e,"mins"),onBlur:je,id:U.current,size:x,error:!!J,warning:!!K,disabled:I,readOnly:M,my:0}))]}),ae&&e(m,{display:"flex",flexDirection:"column",justifyContent:"flex-end",width:"max-content",children:e(y,{toggleProps:z,size:x,onChange:e=>{const[t,r]=re,[n,i]=ie;ue(e),A({target:{name:L,id:W.current,value:{hours:t,minutes:r,period:e,formattedHours:n,formattedMinutes:i}}})},toggleValue:Z,disabled:I||M})})]})}))}));v.displayName="Time";export{v as default};