@ebay/ui-core-react
Version:
Skin components build off React
2 lines (1 loc) • 3.02 kB
JavaScript
const R=require("./tslib.es6-C4EgNkz1.js"),s=require("react"),A=require("classnames"),L=require("./use-roving-index-DoAVBgsp.js"),P=require("./index-Bsb1LHpi.js"),T=require("./forwardRef-DBQKIlPy.js");require("./array.polyfill.flat-5BAolFdk.js");const z=require("./badge-BWhBKWCu.js"),G=require("./icon-CR8ApQBy.js"),M=r=>{var{className:h,checked:a,type:l,focused:m=!1,tabIndex:g,disabled:I,badgeNumber:f,badgeAriaLabel:E,children:w}=r,C=R.__rest(r,["className","checked","type","focused","tabIndex","disabled","badgeNumber","badgeAriaLabel","children"]);const u=s.useRef(null),d=f!==void 0;s.useEffect(()=>{u.current&&m&&u.current.focus()},[u,m]);const v=["radio","checkbox"];return s.createElement("div",Object.assign({"aria-label":E},C,{ref:u,className:A(h,"menu__item",d&&"menu__item--badged"),role:H(l),"aria-checked":v.includes(l)?a:void 0,"aria-disabled":I,tabIndex:m?0:g}),s.createElement("span",{"aria-hidden":d},w,d&&s.createElement(z.EbayBadge,{type:"menu",number:f})),s.createElement(G.EbayIcon,{name:"tick16"}))};function H(r){return{radio:"menuitemradio",checkbox:"menuitemcheckbox"}[r]||"menuitem"}const J=r=>{var{baseEl:h="span",type:a,checked:l,className:m,autofocus:g,onClick:I=()=>{},onKeyDown:f=()=>{},onChange:E=()=>{},onSelect:w=()=>{},forwardedRef:C,menuRef:u,children:d}=r,v=R.__rest(r,["baseEl","type","checked","className","autofocus","onClick","onKeyDown","onChange","onSelect","forwardedRef","menuRef","children"]);const b=s.Children.toArray(d),[N,q]=L.useRovingIndex(d,M,g===!0?0:void 0),[i,F]=s.useState(b.map(()=>!1)),V=c=>b.reduce((e,n,o)=>c[o]?[...e,n.props.value]:e,[]),K=c=>c.reduce((e,n,o)=>n?[...e,o]:e,[]),x=(c,e)=>({index:c,checked:K(e)}),D=(c,e)=>Object.assign(Object.assign({},x(c,e)),{indexes:K(e),checkedValues:V(e)}),j=(c,e,n=!1)=>{let o=!1;const y=i.map((p,_)=>{const t=n?!1:p;return c===_?(p!==e&&(o=!0),e):t});if(o)return F(y),y},k=c=>{switch(a){case"radio":return j(c,!0,!0);case"checkbox":return j(c,!i[c],!1);default:return i.map((e,n)=>n===c)}};s.useEffect(()=>{if(a==="radio")if(l===void 0){const c=b.findIndex(e=>e.props.checked);c>-1&&k(c)}else k(l);else a==="checkbox"&&F(b.map(c=>!!c.props.checked))},[]);const O=(c,e,n)=>{switch(a){case"radio":case"checkbox":return E(c,D(e,n));default:return w(c,x(e,n))}},B=(c,e)=>{let n;switch(P.isActionKey(c.key)&&(n=k(e),n&&O(c,e,n)),a){case"radio":case"checkbox":return f(c,D(e,n||i));default:return f(c,x(e,n||i))}},S=(c,e)=>{q(e);const n=k(e);n&&O(c,e,n)};return s.createElement(h,Object.assign({},v,{className:A(m,"menu"),ref:C}),s.createElement("div",{className:"menu__items",role:"menu",ref:u},b.map((c,e)=>{const n=c.props,{onClick:o=()=>{},onFocus:y=()=>{},onKeyDown:p=()=>{}}=n,_=R.__rest(n,["onClick","onFocus","onKeyDown"]);return s.cloneElement(c,Object.assign(Object.assign({},_),{type:a,focused:e===N,tabIndex:N===void 0?0:-1,checked:i[e],onFocus:t=>{q(e),y(t)},onClick:t=>{S(t,e),o(t),I(t)},onKeyDown:t=>{B(t,e),p(t)}}))})))},Q=T.withForwardRef(J);exports.EbayMenu=Q;exports.EbayMenuItem=M;
;