carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.5 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,useMemo as a,useState as n,useCallback as l,useEffect as o}from"react";import{checkISOFormatAndLength as i,formattedValue as s,parseISODate as d,formatToISO as u}from"../date/__internal__/utils.js";import{DateInput as c}from"../date/date.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import p from"../../style/utils/filter-styled-system-margin-props.js";import m from"../../__internal__/utils/helpers/tags/tags.js";import f from"./date-range.style.js";import b from"../../__internal__/utils/helpers/events/events.js";import y from"../../hooks/__internal__/useLocale/useLocale.js";import v from"../../hooks/__internal__/usePrevious/index.js";import O from"../date/__internal__/date-formats/index.js";import g from"./__internal__/date-range.context.js";import P from"../carbon-provider/__internal__/new-validation.context.js";function _(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){_(e,t,r[t])}))}return e}function k(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 w=_=>{var{endDateProps:w={},id:B,labelsInline:h,name:L,onBlur:V,onChange:E,startDateProps:A={},tooltipPosition:S,validationOnLabel:D,value:x,startRef:I,endRef:R,required:F,dateFormatOverride:M,datePickerStartAriaLabel:T,datePickerStartAriaLabelledBy:K,datePickerEndAriaLabel:$,datePickerEndAriaLabelledBy:q,validationMessagePositionTop:C=!0}=_,N=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},l=Object.keys(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(_,["endDateProps","id","labelsInline","name","onBlur","onChange","startDateProps","tooltipPosition","validationOnLabel","value","startRef","endRef","required","dateFormatOverride","datePickerStartAriaLabel","datePickerStartAriaLabelledBy","datePickerEndAriaLabel","datePickerEndAriaLabelledBy","validationMessagePositionTop"]);const{validationRedesignOptIn:W}=r(P),z=!W&&h,G=y(),{dateFnsLocale:H,dateFormatOverride:J}=G.date,{format:Q}=a((()=>O(H(),M||J)),[H,M,J]),[U,X]=n(""),Y=l((e=>i(e)?s(Q,d(e)):e),[Q]),Z=l((()=>{const{value:e}=A;return Y(e||x[0])}),[A,x,Y]),ee=l((()=>{const{value:e}=w;return Y(e||x[1])}),[w,x,Y]),[te,re]=n({start:{isBlurBlocked:{current:!1},setOpen:null},end:{isBlurBlocked:{current:!1},setOpen:null}});function ae(e,t){return e&&!t.length}const[ne,le]=n({formattedValue:Z(),rawValue:ae(!!A.allowEmptyValue,Z())?"":u(Q,Z())}),[oe,ie]=n({formattedValue:ee(),rawValue:ae(!!w.allowEmptyValue,ee())?"":u(Q,ee())}),se=v(x);o((()=>{(null==se?void 0:se.length)&&(x[0]!==se[0]||x[1]!==se[1])&&(le({formattedValue:Z(),rawValue:ae(!!A.allowEmptyValue,Z())?"":u(Q,Z())}),ie({formattedValue:ee(),rawValue:ae(!!w.allowEmptyValue,ee())?"":u(Q,ee())}))}),[x,se,w.allowEmptyValue,Q,ee,Z,A.allowEmptyValue]);const de=l(((e,t)=>{const r="start"===e?t:ne,a="end"===e?t:oe;return X(e),{target:k(j({},L&&{name:L},B&&{id:B}),{value:[r,a]})}}),[oe,B,L,ne]),ue=(e,t)=>{"start"===e?le(j({},t.target.value)):ie(j({},t.target.value));const r=de(e,t.target.value);E(r)},ce=e=>{ue("start",e)},pe=e=>{ue("end",e)},me=e=>{var t,r;if(!(null==te||null===(t=te.start)||void 0===t?void 0:t.isBlurBlocked.current)&&!(null==te||null===(r=te.end)||void 0===r?void 0:r.isBlurBlocked.current)&&V){const t=de(U,e.target.value);V(t)}},fe=e=>{(e=>{const t=null==te?void 0:te[e];var r;t&&(null===(r=t.setOpen)||void 0===r||r.call(t,!1),t.isBlurBlocked.current=!1)})(e),X("start"===e?"end":"start")},be=e=>{const t="start"===e?A:w,{formattedValue:r}="start"===e?ne:oe,a="start"===e?ce:pe;return k(j({label:N[`${e}Label`],labelInline:z,value:r,error:N[`${e}Error`],warning:N[`${e}Warning`],info:N[`${e}Info`],validationOnLabel:D,onBlur:me,onChange:a,onKeyDown:t=>((e,t)=>{b.isTabKey(e)&&b.isShiftKey(e)&&(null==te?void 0:te.start)?te.start.isBlurBlocked.current=!("start"===t):b.isTabKey(e)&&(null==te?void 0:te.end)&&(te.end.isBlurBlocked.current=!("end"===t))})(t,e)},t),{required:F})};return e(f,k(j(k(j({},m("date-range",N)),{labelsInline:z}),p(N)),{validationMessagePositionTop:C,children:t(g.Provider,{value:{inputRefMap:te,setInputRefMap:e=>{re((t=>j({},t,e)))},validationMessagePositionTop:C},children:[e(c,k(j({my:0},be("start")),{onFocus:()=>fe("end"),"data-element":"start-date",inputName:"start",labelWidth:40,tooltipPosition:S,ref:I,datePickerAriaLabel:T,datePickerAriaLabelledBy:K})),e(c,k(j({my:0},be("end")),{onFocus:()=>fe("start"),"data-element":"end-date",inputName:"end",labelWidth:40,tooltipPosition:S,ref:R,datePickerAriaLabel:$,datePickerAriaLabelledBy:q}))]})}))};w.displayName="DateRange";export{w as DateRange,w as default};