@ebay/ui-core-react
Version:
Skin components build off React
2 lines (1 loc) • 3.54 kB
JavaScript
;const w=require("./tslib.es6-C4EgNkz1.js"),e=require("react"),I=require("classnames"),g=require("./utils-C9NL3q0j.js"),q=require("./menu-DwFmC8e3.js"),ne=require("./button-xYFMCdP0.js"),te=require("./icon-button-AJ6dtyvc.js"),oe=require("./icon-I30uh1Ov.js"),ae=require("./random-id-DlJj_RWH.js"),se=require("./index-Bsb1LHpi.js"),ce=require("./dropdown-B6wMNyjP.js"),re=require("./icons/ebay-icon-chevron-down-12/index.js"),le=require("./icons/ebay-icon-overflow-vertical-16/index.js"),j=o=>{var{className:a}=o,s=w.__rest(o,["className"]);return e.createElement("hr",Object.assign({},s,{className:I(a,"menu-button__separator")}))},N=({children:o})=>e.createElement(e.Fragment,null,o),ie=o=>{var{type:a,variant:s="button",className:b,text:p="",fixWidth:f,reverse:r,strategy:E,expanded:l,noToggleIcon:y,checked:M,collapseOnSelect:S,a11yText:L,prefixId:v,prefixLabel:T,icon:D,onClick:A=()=>{},onExpand:F=()=>{},onCollapse:K=()=>{},onChange:R=()=>{},onSelect:W=()=>{},children:x}=o,P=w.__rest(o,["type","variant","className","text","fixWidth","reverse","strategy","expanded","noToggleIcon","checked","collapseOnSelect","a11yText","prefixId","prefixLabel","icon","onClick","onExpand","onCollapse","onChange","onSelect","children"]);const[c,h]=e.useState(l),[k,V]=e.useState(),{overlayStyles:H,refs:i}=ce.useFloatingDropdown({open:c,options:{reverse:r,strategy:E}}),$=i.host,z=i.overlay,C=g.filterByType(x,[q.EbayMenuItem,j]),u=C.map(n=>!!n.props.checked),[d,B]=e.useState(u);e.useEffect(()=>{u.join("|")!==d.join("|")&&B(u)},[u.join("|")]);const G=g.findComponent(x,N),J=D||g.findComponent(x,oe.EbayIcon),Q=ue({text:p,prefixId:v,prefixLabel:T,menuButtonLabel:G,icon:J}),U=I("menu-button",b);e.useEffect(()=>{const n=t=>{const m=z.current,_=m&&m.contains(t.target);(S||!_)&&h(!1)};return c?(F(),setTimeout(()=>{document.addEventListener("click",n,!1)})):c===!1&&K(),()=>document.removeEventListener("click",n,!1)},[c]),e.useEffect(()=>{V(ae.randomId())},[]);const X=n=>{se.handleEscapeKeydown(n,()=>{var t;h(!1),(t=$.current)===null||t===void 0||t.focus()})},O=Object.assign({ref:i.setHost,className:"menu-button__button","aria-expanded":!!c,"aria-haspopup":!0,"aria-label":L,"aria-controls":k,"aria-labelledby":v,onClick:n=>{h(!c),A(n)}},P),Y=(n,t)=>{if(a==="radio"||a==="checkbox"){const m=d.map((_,ee)=>t.indexes.includes(ee));B(m)}R(n,t)},Z=()=>{const n=d.findIndex(Boolean);return n>-1?n:M};return e.createElement("span",{className:U},s==="overflow"?e.createElement(te.EbayIconButton,Object.assign({icon:e.createElement(le.EbayIconOverflowVertical16,null)},O)):e.createElement(ne.EbayButton,Object.assign({variant:s==="form"?"form":void 0},O),Q,y?null:e.createElement(re.EbayIconChevronDown12,null)),c&&e.createElement(q.EbayMenu,{baseEl:"div",classPrefix:"menu-button",reverse:r,fixWidth:f,fixed:E==="fixed",ref:i.setOverlay,type:a,tabIndex:-1,id:k,autofocus:!0,checked:Z(),onKeyDown:X,onChange:Y,onSelect:W,style:H},C.map((n,t)=>e.cloneElement(n,Object.assign(Object.assign({},n.props),{className:I(n.props.className,"menu-button__item"),key:t,checked:d[t]})))))};function ue({text:o,prefixId:a,prefixLabel:s,menuButtonLabel:b,icon:p}){const f=o.length?e.createElement("span",null,o):null,r=!a&&s&&e.createElement(e.Fragment,null,e.createElement("span",{className:"menu-button-prefix-label",key:"prefix-label"},s)," ");return[p,r,b||f].filter(Boolean).map((l,y)=>e.cloneElement(l,Object.assign(Object.assign({},l.props),{key:y})))}exports.EbayMenuButton=ie;exports.EbayMenuButtonLabel=N;exports.EbayMenuButtonSeparator=j;