@ebay/ui-core-react/ebay-date-textbox/index.js

Skin components build off React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("../tslib.es6-C4EgNkz1.js"),a=require("react"),c=require("makeup-expander"),K=require("classnames"),v=require("../calendar-Bnx_QLoQ.js"),i=require("../textbox-BYNinHFi.js");require("../icon-C-bWGO-9.js");const Q=require("../dropdown-BGdrijmi.js");var N;const{default:X=c}=(N=c==null?void 0:c.default)!=null&&N.__esModule?c.default:c,Z=600,$=m=>{var{className:D,inputPlaceholderText:g="YYYY-MM-DD",a11yOpenPopoverText:_="open calendar",range:o,value:y,rangeEnd:I,defaultValue:q,defaultRangeEnd:w,collapseOnSelect:M,onChange:p=()=>{},onInputChange:A=()=>{},onInputRangeEndChange:L=()=>{}}=m,V=J.__rest(m,["className","inputPlaceholderText","a11yOpenPopoverText","range","value","rangeEnd","defaultValue","defaultRangeEnd","collapseOnSelect","onChange","onInputChange","onInputRangeEndChange"]);const S=a.useRef(null),[Y,d]=a.useState(q||""),[B,u]=a.useState(w||""),b=i.isControlled(y)?y:Y,T=i.isControlled(I)?I:B,[l,E]=a.useState(()=>v.dateArgToISO(b)),[s,x]=a.useState(()=>v.dateArgToISO(T)),[C,O]=a.useState(!1),[F,z]=a.useState(1),{overlayStyles:H,refs:h}=Q.useFloatingDropdown({open:C}),f=h.host,W=()=>{O(!0)},j=()=>{O(!1)};a.useEffect(()=>{if(!f.current)return;S.current=new X(f.current,{hostSelector:".ebay-date-textbox--main > .icon-btn",contentSelector:".date-textbox__popover",expandOnClick:!0,autoCollapse:!0}),f.current.addEventListener("expander-expand",W),f.current.addEventListener("expander-collapse",j);const e=()=>{z(document.documentElement.clientWidth<Z?1:2)};return e(),window.addEventListener("resize",e),()=>{var t;(t=S.current)===null||t===void 0||t.destroy(),window.removeEventListener("resize",e)}},[]);const P=(e,t)=>{const r=new Date(e.target.value),n=isNaN(r.getTime())?null:v.toISO(r);t===0?(E(n),d(n||"")):(x(n),u(n||"")),o?p(e,{rangeStart:t===0?n:l,rangeEnd:t===1?n:s}):p(e,{selected:n})},k=(e,{iso:t})=>{if(E(t),d(t),o){const r=l||s,n={rangeStart:t,rangeEnd:r};l&&s?(u(""),x(null),n.rangeEnd=null):r&&(r<t?(E(r),d(r),u(t),x(t),n.rangeStart=r,n.rangeEnd=t):(E(t),d(t),u(r),x(r),n.rangeStart=t,n.rangeEnd=r)),p(e,n)}else p(e,{selected:t});M&&(S.current.expanded=!1)},R=(e,t)=>{t===0?(d(e.target.value),A(e)):(u(e.target.value),L(e))},[U,G]=Array.isArray(g)?g:[g,g];return a.createElement("span",{className:K("date-textbox",D),ref:h.setHost},o&&a.createElement(i.EbayTextbox,{value:b,placeholder:U,onInputChange:e=>R(e,0),onBlur:e=>P(e,0)}),a.createElement(i.EbayTextbox,{className:"ebay-date-textbox--main",placeholder:G,value:o?T:b,onInputChange:e=>R(e,o?1:0),onBlur:e=>P(e,o?1:0)},a.createElement(i.EbayTextboxPostfixIcon,{name:"calendar24",buttonAriaLabel:_})),a.createElement("div",{hidden:!C,ref:h.setOverlay,style:H,className:"date-textbox__popover"},a.createElement(v.EbayCalendar,Object.assign({},V,{range:o,interactive:!0,navigable:!0,numMonths:F,selected:l&&s?[l,s]:l||s||void 0,onSelect:k}))))};exports.EbayDateTextbox=$;