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