UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

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