@ebay/ui-core-react
Version:
Skin components build off React
3 lines (2 loc) • 5.09 kB
JavaScript
;const V=require("./tslib.es6-C4EgNkz1.js"),n=require("react"),O=require("classnames"),xe=require("./utils-C9NL3q0j.js"),ge=require("./icons/ebay-icon-tick-16/index.js"),_e=require("./dropdown-B6wMNyjP.js"),Ee=require("./icons/ebay-icon-chevron-down-16/index.js"),W=u=>{var{value:p,children:m,selected:x,onClick:d,index:g,icon:_,innerRef:k,className:C}=u,w=V.__rest(u,["value","children","selected","onClick","index","icon","innerRef","className"]);const b=O("listbox-button__option",C,{"listbox-button__option--active":x});return n.createElement("div",Object.assign({},w,{className:b,role:"option","aria-selected":x,ref:k,onClick:E=>{d(E,p,g)}}),n.createElement("span",{className:"listbox-button__value"},_,m),n.createElement(ge.EbayIconTick16,null))},he=u=>{var p,{children:m,name:x,value:d,selected:g,borderless:_,fluid:k,className:C,maxHeight:w,prefixId:b,prefixLabel:E,floatingLabel:h,strategy:S,split:N,unselectedText:z="-",onChange:I=()=>{},onCollapse:G=()=>{},onExpand:J=()=>{}}=u,Q=V.__rest(u,["children","name","value","selected","borderless","fluid","className","maxHeight","prefixId","prefixLabel","floatingLabel","strategy","split","unselectedText","onChange","onCollapse","onExpand"]);const i=n.useRef(null),B=n.useRef(new Map),a=xe.filterByType(m,W);if(!a.length)throw new Error(`EbayListboxButton: Please use a
EbayListboxButtonOption that defines the options of the listbox`);const X=()=>{const e=g!==void 0?g:a.findIndex(({props:l})=>d!==void 0&&l.value===d||l.selected),t=e>-1||h?e:void 0;return{option:a[t],index:t}},{option:D,index:R}=X(),[s,f]=n.useState(D),[o,H]=n.useState(R),[v,A]=n.useState(),[Y,Z]=n.useState(!1),[q,$]=n.useState(),{overlayStyles:ee,refs:y}=_e.useFloatingDropdown({open:v,options:{strategy:S}}),T=y.host,te=y.overlay;n.useEffect(()=>{f(D)},[d]);const c=n.Children.toArray(m),j=e=>c[e].props.value,ne=n.useCallback(e=>c.findIndex(({props:t})=>t.value===e),[c]),oe=e=>B.current.get(e),r=()=>{A(!1),G()},se=()=>{A(!0),J()},le=()=>{v?r():se()},F=(e,t)=>{f(c[t]),H(t),r(),T.current.focus(),I(e,{index:t,selected:[String(j(t))],wasClicked:q}),$(!1)},ae=()=>{r(),f(c[R])},ce=e=>{const t=i.current.children[e];t.setAttribute("aria-selected","true"),t.classList.add("listbox-button__option--active")},ie=e=>{const t=i.current.children[e];t.setAttribute("aria-selected","false"),t.classList.remove("listbox-button__option--active")},re=e=>{const t=te.current,l=oe(e);if(t.scrollHeight>t.clientHeight){const me=t.clientHeight+t.scrollTop,M=l.offsetTop+l.offsetHeight;M>me?t.scrollTop=M-t.clientHeight:l.offsetTop<t.scrollTop&&(t.scrollTop=l.offsetTop)}},K=e=>{ce(o===void 0||e===-1?0:e),ie(o===void 0||o===-1?0:o),re(e),H(e),f(c[e])},P=e=>setTimeout(()=>{var t;return(t=i?.current)===null||t===void 0?void 0:t.focus(e)},0),ue=()=>{le(),P({preventScroll:!0})},pe=e=>{switch(e.key){case"Escape":r();break;case"Enter":P();break}},de=e=>{switch(e.key){case" ":case"PageUp":case"PageDown":case"Home":case"End":e.preventDefault();break;case"Down":case"ArrowDown":e.preventDefault(),o!==a.length-1&&K(o<a.length-1?o+1:0);break;case"Up":case"ArrowUp":e.preventDefault(),o!==0&&K(o>0?o-1:a.length-1);break;case"Enter":r(),setTimeout(()=>f(c[o])),setTimeout(()=>T.current.focus(),0),I(e,{index:o,selected:[String(j(o))],wasClicked:q});break;case"Esc":case"Escape":ae();break}},L=a.map((e,t)=>n.cloneElement(e,{index:t,key:t,selected:s&&e.props.value===s.props.value,id:e.props.id||`listbox_btn_${e.props.value}_${t}`,onClick:l=>F(l,t),innerRef:l=>{l?B.current.set(t,l):B.current.delete(t)}})),be=O("listbox-button",C,{"listbox-button--fluid":k}),fe=O("btn",{"btn--form":!_,"btn--borderless":_,"btn--floating-label":h&&s,[`btn--split-${N}`]:N&&N!=="none"}),U=b&&"expand-btn-text",ve=n.createElement(n.Fragment,null,h&&n.createElement("span",{className:"btn__floating-label"},h),E&&n.createElement("span",{className:"btn__label"},E),n.createElement("span",{className:"btn__text",id:U},s?.props.icon||s?.props.children||z));return n.createElement("span",{className:be},n.createElement("button",Object.assign({},Q,{onFocus:()=>Z(!0),type:"button",className:fe,"aria-expanded":!!v,"aria-haspopup":"listbox","aria-labelledby":b&&`${b} ${U}`,onClick:ue,onMouseDown:e=>e.preventDefault(),onKeyUp:pe,ref:y.setHost}),n.createElement("span",{className:"btn__cell"},ve,n.createElement(Ee.EbayIconChevronDown16,null))),(v||Y)&&n.createElement("div",{className:O("listbox-button__listbox",{"listbox-button__listbox--fixed":S==="fixed"}),ref:y.setOverlay,style:Object.assign(Object.assign({},ee),{maxHeight:w})},n.createElement("div",{className:"listbox-button__options",role:"listbox",tabIndex:v?0:-1,ref:i,"aria-activedescendant":(p=L[o])===null||p===void 0?void 0:p.props.id,onKeyDown:e=>de(e),onMouseDown:e=>{e.preventDefault(),$(!0)},onBlur:()=>{r(),setTimeout(()=>T.current.focus(),0)}},L)),n.createElement("select",{hidden:!0,className:"listbox-button__native",name:x,onChange:e=>F(e,ne(e.target.value)),value:s?s?.props.value:""},L.map((e,t)=>n.createElement("option",{value:e.props.value,key:t}))))};exports.ListboxButton=he;exports.ListboxOption=W;