react-svgmt
Version:
Convenient SVG loading and manipulation from react
2 lines • 11 kB
JavaScript
/*! For license information please see index.js.LICENSE.txt */
(()=>{var e={692:(e,t,r)=>{var n;!function(s,o){"use strict";var i="file:"===s.location.protocol;o.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1");var l=Array.prototype.forEach||function(e,t){if(null==this||"function"!=typeof e)throw new TypeError;var r,n=this.length>>>0;for(r=0;r<n;++r)r in this&&e.call(t,this[r],r,this)},a={},c=0,u=[],p=[],f=function(e){return e.cloneNode(!0)},h=function(e,t){p[e]=p[e]||[],p[e].push(t)},d=function(e,t){if(void 0===t||"string"==typeof t)return!1;var r=e.getAttribute("id");r&&t.setAttribute("id",r);var n=e.getAttribute("title");n&&t.setAttribute("title",n);var s=[].concat(t.getAttribute("class")||[],"injected-svg",e.getAttribute("class")||[]).join(" ");t.setAttribute("class",function(e){for(var t={},r=(e=e.split(" ")).length,n=[];r--;)t.hasOwnProperty(e[r])||(t[e[r]]=1,n.unshift(e[r]));return n.join(" ")}(s));var o=e.getAttribute("style");o&&t.setAttribute("style",o);var i=[].filter.call(e.attributes,(function(e){return/^data-\w[\w\-]*$/.test(e.name)}));l.call(i,(function(e){e.name&&e.value&&t.setAttribute(e.name,e.value)}));var a,p,f,h,d,v={clipPath:["clip-path"],"color-profile":["color-profile"],cursor:["cursor"],filter:["filter"],linearGradient:["fill","stroke"],marker:["marker","marker-start","marker-mid","marker-end"],mask:["mask"],pattern:["fill","stroke"],radialGradient:["fill","stroke"]};Object.keys(v).forEach((function(e){a=e,f=v[e];for(var r=0,n=(p=t.querySelectorAll("defs "+a+"[id]")).length;r<n;r++){var s;h=p[r].id,d=h+"-"+c,l.call(f,(function(e){for(var r=0,n=(s=t.querySelectorAll("["+e+'*="'+h+'"]')).length;r<n;r++)s[r].setAttribute(e,"url(#"+d+")")})),p[r].id=d}})),t.removeAttribute("xmlns:a");var m=t.querySelectorAll("style");if(l.call(m,(function(e){e.textContent+=""})),g(e,t),t.hasAttributes())for(var y=t.attributes,b=y.length-1;b>=0;b--)y[b].name,y[b].value,e.setAttribute(y[b].name,y[b].value);delete u[u.indexOf(e)],e=null,c++},g=function(e,t){if(e.innerHTML=t.innerHTML||"",!e.innerHTML){var r=o.createElement("div"),n="<svg>"+function(e){const t=new XMLSerializer;return Array.prototype.slice.call(e.childNodes).map((e=>t.serializeToString(e))).join("")}(t)+"</svg>";r.innerHTML=""+n,e.textContent="",Array.prototype.slice.call(r.childNodes[0].childNodes).forEach((function(t){e.appendChild(t)}))}},v=function(e,t,r,n){if(r){var o;try{o=(new DOMParser).parseFromString(r,"text/xml")}catch(e){o=void 0}if(!o||o.getElementsByTagName("parsererror").length)return n("Unable to parse SVG file: "+o.getElementsByTagName("parsererror")[0].innerHTML),!1;d(e,o.documentElement),n()}else{var l=e.getAttribute("data-src")||e.getAttribute("src");if(e.setAttribute("src",""),-1!==u.indexOf(e))return;u.push(e),function(e,t){if(void 0!==a[e])a[e]instanceof SVGSVGElement?t(f(a[e])):h(e,t);else{if(!s.XMLHttpRequest)return t("Browser does not support XMLHttpRequest"),!1;a[e]={},h(e,t);var r=new XMLHttpRequest;r.onreadystatechange=function(){if(4===r.readyState){if(404===r.status||null===r.responseXML)return t("Unable to load SVG file: "+e),i&&t("Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver."),t(),!1;if(!(200===r.status||i&&0===r.status))return t("There was a problem injecting the SVG: "+r.status+" "+r.statusText),!1;if(r.responseXML instanceof Document)a[e]=r.responseXML.documentElement;else if(DOMParser&&DOMParser instanceof Function){var n;try{n=(new DOMParser).parseFromString(r.responseText,"text/xml")}catch(e){n=void 0}if(!n||n.getElementsByTagName("parsererror").length)return t("Unable to parse SVG file: "+e),!1;a[e]=n.documentElement}!function(e){for(var t=0,r=p[e].length;t<r;t++)!function(t){setTimeout((function(){p[e][t](f(a[e]))}),0)}(t)}(e)}},r.open("GET",e),r.overrideMimeType&&r.overrideMimeType("text/xml"),r.send()}}(l,(t=>{d(e,t),n()}))}},m=function(e,t,r){(t=t||{}).pngFallback;var n=t.each,s=t.svgXML;if(void 0!==e.length){var o=0;l.call(e,(function(t){v(t,0,s,(function(){n&&"function"==typeof n&&n(),r&&e.length===++o&&r(o)}))}))}else e?v(e,0,s,(function(){n&&"function"==typeof n&&n(),r&&r(1),e=null})):r&&r(0)};"object"==typeof e.exports?e.exports=t=m:void 0===(n=function(){return m}.call(t,r,t,e))||(e.exports=n)}(window,document)}},t={};function r(n){var s=t[n];if(void 0!==s)return s.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};(()=>{"use strict";r.r(n),r.d(n,{SvgLoader:()=>y,SvgProxy:()=>O});const e=require("react");var t=r.n(e);const s=require("prop-types");var o=r.n(s);const i=["callback","path","svgXML","className"],l=["callback","path","svgXML"];function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},a.apply(null,arguments)}function c(e,t){if(null==e)return{};var r,n,s=function(e,t){if(null==e)return{};var r={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(s[r]=e[r])}return s}const u="undefined"!=typeof window?r(692):void 0;class p extends t().Component{constructor(){super(),this.refCallback=this.refCallback.bind(this)}componentDidUpdate(e){this.props.path===e.path&&this.props.svgXML===e.svgXML||(this.container&&(this.container.innerHTML=""),this.renderSVG(this.props))}refCallback(e){e&&(this.container=e,this.renderSVG())}renderSVG(e=this.props){const t=this.container,{callback:r,path:n,svgXML:s,className:o}=e,l=c(e,i);u(t,{each:e=>{if(e)throw new Error(e);r(this.container)},svgXML:s},(()=>{t&&l&&Object.keys(l).reduce(((e,r)=>("style"!==r&&e.setAttribute(r,l[r]),t)),t)}))}render(){const e=this.props,{callback:r,path:n,svgXML:s}=e,o=c(e,l);return t().createElement("svg",a({ref:this.refCallback,"data-src":this.props.path},o))}}p.defaultProps={callback:()=>{},path:null,svgXML:null},p.propTypes={callback:o().func,path:o().string,svgXML:o().string};const f=t().createContext(null),h=["path","onSVGReady","children","svgXML"];function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},d.apply(null,arguments)}function g(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?g(Object(r),!0).forEach((function(t){m(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function m(e,t,r){return(t=function(e){var t=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class y extends t().Component{constructor(e){if(super(e),this.mounted=!1,this.state={svg:null,svgCount:0},null==t().Fragment)throw new Error("This version of React doesn't support Fragments, please update it");this.onSVGReady=this.onSVGReady.bind(this)}componentDidMount(){this.mounted=!0}componentWillUnmount(){this.mounted=!1}onSVGReady(e){setTimeout((()=>{this.mounted&&(this.setState(v(v({},this.state),{},{svg:e,svgCount:this.state.svgCount+1})),this.props.onSVGReady(e))}),0)}render(){const e=this.props,{path:r,onSVGReady:n,children:s,svgXML:o}=e,i=function(e,t){if(null==e)return{};var r,n,s=function(e,t){if(null==e)return{};var r={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(s[r]=e[r])}return s}(e,h),l=null!=this.state.svg?this.props.children:null;return t().createElement(t().Fragment,null,t().createElement(p,d({path:r,callback:this.onSVGReady,svgXML:o},i)),t().createElement(f.Provider,{value:{path:r,svgCount:this.state.svgCount,svg:this.state.svg}},l))}}y.propTypes={path:o().string,svgXML:o().string,onSVGReady:o().func,style:o().object,children:o().any},y.defaultProps={path:null,svgXML:null,onSVGReady:function(){},style:null};const b=/(\w+)_(\S+)/,S={xlink:"http://www.w3.org/1999/xlink"};class O extends t().Component{constructor(e){super(e),this.elemRefs=[],this.svgRef=null,this.path=null,this.originalValues={},this.onSvgUpdated=this.onSvgUpdated.bind(this),this.updateSvgElements=this.updateSvgElements.bind(this)}componentDidMount(){this.updateSvgElements(this.props)}componentDidUpdate(e){this.props.selector!==e.selector&&(this.elemRefs=[]),this.updateSvgElements(this.props)}onSvgUpdated(){this.updateSvgElements(this.props,!0)}updateSvgElements(e,t){const{svgRef:r}=this;if(r&&(0===this.elemRefs.length||t)){const t=[].slice.apply(r.querySelectorAll(e.selector));0===t.length&&-1!==["svg","root"].indexOf(e.selector)&&t.push(r),e.onElementSelected&&t.length&&e.onElementSelected(1===t.length?t[0]:t),this.elemRefs=t}if(this.elemRefs){const t=Object.keys(e);for(let r=0;r<t.length;r+=1){const n=t[r];if(-1===["selector","onElementSelected"].indexOf(n)){let t=null,r=null,s=n,o=null;const i=b.exec(n);i&&i[1]?(t=i[1],r=S[t],s=i[2],o=`${t}:${s}`):o=n;for(let t=0;t<this.elemRefs.length;t+=1){const s=this.elemRefs[t];if("function"==typeof e[n])s[n.toLowerCase()]=e[n];else{if("string"!=typeof e[n])return;null==this.originalValues[n]&&(this.originalValues[n]=s.getAttributeNS(r,o)||"");const t=e[n].replace("$ORIGINAL",this.originalValues[n]);s.setAttributeNS(r,o,t),"string"==typeof e.children&&e.children.trim().length&&(s.textContent=e.children)}}}}}}render(){return t().createElement(f.Consumer,null,(e=>{const{path:t,svg:r,svgCount:n}=e;this.svgCount&&this.svgCount!==n?this.onSvgUpdated():(this.svgRef=r,this.path=t,this.svgCount=n)}))}}O.propTypes={selector:o().string.isRequired,onElementSelected:o().func},O.defaultProps={onElementSelected:()=>{}}})(),module.exports=n})();