UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

2 lines (1 loc) 2.87 kB
"use strict";const H=require("./tslib.es6-C4EgNkz1.js"),n=require("react"),O=require("classnames"),j=require("./forwardRef-DBQKIlPy.js");require("./array.polyfill.flat-5BAolFdk.js");const z=require("./random-id-DlJj_RWH.js"),h=n.createContext(null),l="ebayui-svg-symbols",D=({children:e})=>n.createElement(h.Provider,{value:new Set},n.createElement("svg",{id:l,style:{position:"absolute",height:"0px",width:"0px"},focusable:!1,"aria-hidden":"true"}),e);function w(){const e=document.createElementNS("http://www.w3.org/2000/svg","svg");return e.id=l,e.style.position="absolute",e.style.width="0",e.style.height="0",e}const I=new Set,V=e=>{var{name:t,className:o,noSkinClasses:x=!1,a11yText:a,a11yVariant:N,forwardedRef:C,prominent:S,__type:d="icon",__symbol:p}=e,_=H.__rest(e,["name","className","noSkinClasses","a11yText","a11yVariant","forwardedRef","prominent","__type","__symbol"]);const[$,k]=n.useState("");n.useEffect(()=>{k(z.randomId())},[]);const u=n.useRef(null),[R,P]=n.useState(!1);let s=n.useContext(h);s||(s=I,typeof window>"u"&&typeof setImmediate<"u"&&(console.warn(`Icon "${t}" used without wrapping it in a <EbayIconProvider />, for better server performance make sure to wrap your application with <EbayIconProvider> component.`),setImmediate(()=>{I.clear()})));let f;s?.has(t)?f="":(typeof window>"u"&&s?.add(t),f=p||""),n.useLayoutEffect(()=>{var b;if(!p)return;let i;if(document.getElementById(l)){const r=document.getElementById(l);r instanceof SVGElement?i=r:(console.warn(`Invalid "#${l}" element, creating a new one`),(b=r?.parentNode)===null||b===void 0||b.removeChild(r),i=w(),document.body.insertBefore(i,document.body.lastChild))}else i=w(),document.body.insertBefore(i,document.body.lastChild);if(u.current){const g=u.current.querySelector("symbol");g&&(s?.add(t),i.appendChild(g)),P(!0)}},[]);const m=N==="label",v=a&&`icon-title-${$}`,q=a?{"aria-labelledby":m?void 0:v,"aria-label":m?a:void 0,role:"img"}:{"aria-hidden":!0},c=E(t),B=F(c)||c,y=d==="flag"?"flag":"icon",L=[`${y}`,`${y}--${B}`,G(c)].filter(Boolean).join(" "),T=O(o,{[L]:!x,[`${y}--prominent`]:S}),A=["icon","flag"].includes(d)?`${d}-`:"";return n.createElement("svg",Object.assign({},_,{className:T,xmlns:"http://www.w3.org/2000/svg",focusable:!1,ref:C},q),a&&!m&&n.createElement("title",{id:v},a),n.createElement("use",{xlinkHref:`#${A}${c}`}),R?null:n.createElement("defs",{ref:u,dangerouslySetInnerHTML:{__html:f},suppressHydrationWarning:!0}))};function F(e){const t=e.split("-"),o=t[t.length-1];return o==="colored"?t[t.length-2]:isNaN(Number(o))?"":o}function G(e){const t=e.split("-"),o=t.indexOf("filled");return o===-1?"":`icon--${t.slice(0,o+1).join("-")}`}function E(e){return e.replace(/([0-9]+)/g,(t,o)=>`-${o}`).replace(/([A-Z])/g,(t,o)=>`-${o.toLowerCase()}`)}const M=j.withForwardRef(V);exports.EbayIcon=M;exports.EbayIconProvider=D;exports.kebabCased=E;