@ebay/ui-core-react
Version:
Skin components build off React
3 lines (2 loc) • 4.93 kB
JavaScript
;const M=require("./tslib.es6-C4EgNkz1.js"),n=require("react"),S=require("classnames"),V=require("./icon-CR8ApQBy.js"),xe=require("./utils-C9NL3q0j.js"),ge=require("./dropdown-B2vObM4k.js"),W=u=>{var{value:p,children:v,selected:x,onClick:d,index:g,icon:E,innerRef:O,className:k}=u,C=M.__rest(u,["value","children","selected","onClick","index","icon","innerRef","className"]);const b=S("listbox-button__option",k,{"listbox-button__option--active":x});return n.createElement("div",Object.assign({},C,{className:b,role:"option","aria-selected":x,ref:O,onClick:_=>{d(_,p,g)}}),n.createElement("span",{className:"listbox-button__value"},E,v),n.createElement(V.EbayIcon,{name:"tick16"}))},Ee=u=>{var p,{children:v,name:x,value:d,selected:g,borderless:E,fluid:O,className:k,maxHeight:C,prefixId:b,prefixLabel:_,floatingLabel:h,split:w,unselectedText:z="-",onChange:T=()=>{},onCollapse:G=()=>{},onExpand:J=()=>{}}=u,Q=M.__rest(u,["children","name","value","selected","borderless","fluid","className","maxHeight","prefixId","prefixLabel","floatingLabel","split","unselectedText","onChange","onCollapse","onExpand"]);const i=n.useRef(null),N=n.useRef(new Map),a=xe.filterByType(v,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:I}=X(),[s,f]=n.useState(D),[o,R]=n.useState(I),[m,H]=n.useState(),[Y,Z]=n.useState(!1),[A,q]=n.useState(),{overlayStyles:ee,refs:y}=ge.useFloatingDropdown({open:m}),B=y.host,te=y.overlay;n.useEffect(()=>{f(D)},[d]);const c=n.Children.toArray(v),$=e=>c[e].props.value,ne=n.useCallback(e=>c.findIndex(({props:t})=>t.value===e),[c]),oe=e=>N.current.get(e),r=()=>{H(!1),G()},se=()=>{H(!0),J()},le=()=>{m?r():se()},j=(e,t)=>{f(c[t]),R(t),r(),B.current.focus(),T(e,{index:t,selected:[String($(t))],wasClicked:A}),q(!1)},ae=()=>{r(),f(c[I])},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 ve=t.clientHeight+t.scrollTop,U=l.offsetTop+l.offsetHeight;U>ve?t.scrollTop=U-t.clientHeight:l.offsetTop<t.scrollTop&&(t.scrollTop=l.offsetTop)}},F=e=>{ce(o===void 0||e===-1?0:e),ie(o===void 0||o===-1?0:o),re(e),R(e),f(c[e])},K=e=>setTimeout(()=>{var t;return(t=i?.current)===null||t===void 0?void 0:t.focus(e)},0),ue=()=>{le(),K({preventScroll:!0})},pe=e=>{switch(e.key){case"Escape":r();break;case"Enter":K();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&&F(o<a.length-1?o+1:0);break;case"Up":case"ArrowUp":e.preventDefault(),o!==0&&F(o>0?o-1:a.length-1);break;case"Enter":r(),setTimeout(()=>f(c[o])),setTimeout(()=>B.current.focus(),0),T(e,{index:o,selected:[String($(o))],wasClicked:A});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=>j(l,t),innerRef:l=>{l?N.current.set(t,l):N.current.delete(t)}})),be=S("listbox-button",k,{"listbox-button--fluid":O}),fe=S("btn",{"btn--form":!E,"btn--borderless":E,"btn--floating-label":h&&s,[`btn--split-${w}`]:w&&w!=="none"}),P=b&&"expand-btn-text",me=n.createElement(n.Fragment,null,h&&n.createElement("span",{className:"btn__floating-label"},h),_&&n.createElement("span",{className:"btn__label"},_),n.createElement("span",{className:"btn__text",id:P},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":!!m,"aria-haspopup":"listbox","aria-labelledby":b&&`${b} ${P}`,onClick:ue,onMouseDown:e=>e.preventDefault(),onKeyUp:pe,ref:y.setHost}),n.createElement("span",{className:"btn__cell"},me,n.createElement(V.EbayIcon,{name:"chevronDown16"}))),(m||Y)&&n.createElement("div",{className:"listbox-button__listbox",ref:y.setOverlay,style:Object.assign(Object.assign({},ee),{maxHeight:C})},n.createElement("div",{className:"listbox-button__options",role:"listbox",tabIndex:m?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(),q(!0)},onBlur:()=>{r(),setTimeout(()=>B.current.focus(),0)}},L)),n.createElement("select",{hidden:!0,className:"listbox-button__native",name:x,onChange:e=>j(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=Ee;exports.ListboxOption=W;