UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

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