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

Skin components build off React

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