UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

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