UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

2 lines (1 loc) 4.85 kB
"use strict";const j=require("./tslib.es6-C4EgNkz1.js"),r=require("react"),ae=require("makeup-prevent-scroll-keys"),te=require("makeup-roving-tabindex"),T=require("./random-id-DlJj_RWH.js"),ne=require("./forwardRef-DBQKIlPy.js"),A=require("./utils-C9NL3q0j.js"),B=require("classnames"),ce=require("./checkbox-CFfWkQ2y.js"),oe=require("./radio-C1imt8Q-.js"),O=require("./icon-CR8ApQBy.js");require("./array.polyfill.flat-5BAolFdk.js");const se=require("./button-BeNUU3lZ.js");function le(t){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const m=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(c,s,m.get?m:{enumerable:!0,get:()=>t[s]})}}return c.default=t,Object.freeze(c)}const ie=le(ae),V=t=>{var{__classPrefix:c,__variant:s,className:m,onClick:C}=t,E=j.__rest(t,["__classPrefix","__variant","className","onClick"]);const l=s==="form";return r.createElement("button",Object.assign({},E,{type:l?"submit":"button",className:B(m,`${c}__footer`),onClick:l?void 0:C}))},z=t=>{var{checked:c,value:s,disabled:m,children:C,className:E,onClick:l,__type:P,__variant:q,__classPrefix:v}=t,R=j.__rest(t,["checked","value","disabled","children","className","onClick","__type","__variant","__classPrefix"]);const I=q==="form",h=P==="radio",f=h?"radio":"checkbox",F=T.useRandomId(),y=`'${f}-${F}`,b=I?"label":"div",$=h?oe.EbayRadio:ce.EbayCheckbox,w=h?`${v}__radio`:`${v}__checkbox`,M=h?"radioChecked18":"checkboxChecked18",N=h?"radioUnchecked18":"checkboxUnchecked18",i=_=>{l?.(_,{value:s,checked:!c})};return r.createElement(b,Object.assign({},R,{className:B(E,`${v}__item`),htmlFor:I?y:void 0,role:h?"menuitemradio":"menuitemcheckbox",onClick:i,"aria-checked":c,"aria-disabled":m}),I?r.createElement($,{id:y,checked:c}):r.createElement("span",{className:w},r.createElement(O.EbayIcon,{name:c?M:N})),r.createElement("span",{className:`${v}__text`},C))},de=t=>{var{classPrefix:c,className:s,formMethod:m,formAction:C,formName:E,variant:l,children:P,type:q,searchHeaderValue:v,searchHeaderPlaceholderText:R,a11ySearchHeaderClearText:I,forwardedRef:h,onSearchChange:f,onFormSubmit:F,onFooterClick:y,onChange:b,"aria-label":$,"aria-labelledby":w}=t,M=j.__rest(t,["classPrefix","className","formMethod","formAction","formName","variant","children","type","searchHeaderValue","searchHeaderPlaceholderText","a11ySearchHeaderClearText","forwardedRef","onSearchChange","onFormSubmit","onFooterClick","onChange","aria-label","aria-labelledby"]);const N=r.useRef(null),i=l==="form",_=q==="radio",x=c||"filter-menu",H=A.findComponent(P,V),p=A.filterByType(P,z),D=T.useRandomId(),[G,K]=r.useState(v||""),[g,J]=r.useState(()=>p.map((e,a)=>e.props.checked&&a).find(e=>typeof e=="number")),[S,Q]=r.useState(()=>p.map(e=>!!e.props.checked));r.useEffect(()=>{let e;return i||(e=te.createLinear(N.current,"div",{autoInit:"interactive"}),ie.add(N.current)),()=>{e&&(e.destroy(),e=null)}},[i]);const L=()=>({checked:p.filter((e,a)=>_?g===a:S[a]).map(e=>e.props.value),checkedIndex:p.map((e,a)=>_?a===g&&a:S[a]&&a).filter(e=>typeof e=="number")}),W=e=>{y?.(e,L())},X=e=>{F?.(e,L())},Y=e=>{K(""),f?.(e,{searchTerm:""})},Z=e=>{K(e.target.value),f?.(e,{searchTerm:e.target.value})},ee=i?"form":r.Fragment,re=i?{name:E,action:C,method:m,onSubmit:X}:{},U=(e,{checked:a,index:n})=>{const k=e.target;if(!(i&&!k.type))if(_)J(n),b?.(e,{index:n,checked:[p[n].props.value],checkedIndex:[n],currentChecked:a});else{const d=S.map((o,u)=>u===n?a:o);b?.(e,{index:n,checked:p.filter((o,u)=>d[u]).map(o=>o.props.value),checkedIndex:d.map((o,u)=>o&&u).filter(o=>typeof o=="number"),currentChecked:a}),Q(d)}};return r.createElement("span",Object.assign({},M,{ref:h,className:B(s,`${c?`${x}__menu`:x}`)}),R?r.createElement("div",{className:"filter-menu__header"},r.createElement(O.EbayIcon,{name:"search16"}),r.createElement("input",{type:"text",value:G,className:"filter-menu__search",placeholder:R,"aria-owns":D,onChange:Z}),r.createElement(se.EbayButton,{type:"button",onClick:Y,"aria-label":I},r.createElement(O.EbayIcon,{name:"clear20"}))):null,r.createElement(ee,Object.assign({},re),r.createElement("div",{id:D,ref:N,className:`${x}__items`,role:i?void 0:"menu","aria-label":$,"aria-labelledby":w},p.map((e,a)=>r.cloneElement(e,{__classPrefix:x,__type:q,__variant:l,checked:_?a===g:S[a],onClick:(n,{checked:k,value:d})=>{var o,u;e.props.disabled||((u=(o=e.props).onClick)===null||u===void 0||u.call(o,n,{checked:k,value:d}),U(n,{checked:k,index:a}))},onKeyDown:n=>{var k,d;if(!e.props.disabled&&((d=(k=e.props).onKeyDown)===null||d===void 0||d.call(k,n),n.key==="Enter"||n.key===" "&&!i)){const o=_?a===g:S[a];U(n,{checked:!o,index:a})}}}))),H&&r.cloneElement(H,{onClick:W,__classPrefix:x,__variant:l})))},ue=ne.withForwardRef(de);exports.EbayFilterMenu=ue;exports.EbayFilterMenuFooterButton=V;exports.EbayFilterMenuItem=z;