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

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

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