react-svg
Version:
A React component that injects SVG into the DOM.
882 lines (806 loc) • 30.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('react')) :
typeof define === 'function' && define.amd ? define(['exports', 'prop-types', 'react'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactSVG = {}, global.PropTypes, global.React));
})(this, (function (exports, PropTypes, React) { 'use strict';
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var PropTypes__namespace = /*#__PURE__*/_interopNamespaceDefault(PropTypes);
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (e.includes(n)) continue;
t[n] = r[n];
}
return t;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _setPrototypeOf(t, e) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, _setPrototypeOf(t, e);
}
function _inheritsLoose(t, o) {
t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
}
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var contentType = {};
/*!
* content-type
* Copyright(c) 2015 Douglas Christopher Wilson
* MIT Licensed
*/
var hasRequiredContentType;
function requireContentType () {
if (hasRequiredContentType) return contentType;
hasRequiredContentType = 1;
/**
* RegExp to match *( ";" parameter ) in RFC 7231 sec 3.1.1.1
*
* parameter = token "=" ( token / quoted-string )
* token = 1*tchar
* tchar = "!" / "#" / "$" / "%" / "&" / "'" / "*"
* / "+" / "-" / "." / "^" / "_" / "`" / "|" / "~"
* / DIGIT / ALPHA
* ; any VCHAR, except delimiters
* quoted-string = DQUOTE *( qdtext / quoted-pair ) DQUOTE
* qdtext = HTAB / SP / %x21 / %x23-5B / %x5D-7E / obs-text
* obs-text = %x80-FF
* quoted-pair = "\" ( HTAB / SP / VCHAR / obs-text )
*/
var PARAM_REGEXP = /; *([!#$%&'*+.^_`|~0-9A-Za-z-]+) *= *("(?:[\u000b\u0020\u0021\u0023-\u005b\u005d-\u007e\u0080-\u00ff]|\\[\u000b\u0020-\u00ff])*"|[!#$%&'*+.^_`|~0-9A-Za-z-]+) */g; // eslint-disable-line no-control-regex
var TEXT_REGEXP = /^[\u000b\u0020-\u007e\u0080-\u00ff]+$/; // eslint-disable-line no-control-regex
var TOKEN_REGEXP = /^[!#$%&'*+.^_`|~0-9A-Za-z-]+$/;
/**
* RegExp to match quoted-pair in RFC 7230 sec 3.2.6
*
* quoted-pair = "\" ( HTAB / SP / VCHAR / obs-text )
* obs-text = %x80-FF
*/
var QESC_REGEXP = /\\([\u000b\u0020-\u00ff])/g; // eslint-disable-line no-control-regex
/**
* RegExp to match chars that must be quoted-pair in RFC 7230 sec 3.2.6
*/
var QUOTE_REGEXP = /([\\"])/g;
/**
* RegExp to match type in RFC 7231 sec 3.1.1.1
*
* media-type = type "/" subtype
* type = token
* subtype = token
*/
var TYPE_REGEXP = /^[!#$%&'*+.^_`|~0-9A-Za-z-]+\/[!#$%&'*+.^_`|~0-9A-Za-z-]+$/;
/**
* Module exports.
* @public
*/
contentType.format = format;
contentType.parse = parse;
/**
* Format object to media type.
*
* @param {object} obj
* @return {string}
* @public
*/
function format (obj) {
if (!obj || typeof obj !== 'object') {
throw new TypeError('argument obj is required')
}
var parameters = obj.parameters;
var type = obj.type;
if (!type || !TYPE_REGEXP.test(type)) {
throw new TypeError('invalid type')
}
var string = type;
// append parameters
if (parameters && typeof parameters === 'object') {
var param;
var params = Object.keys(parameters).sort();
for (var i = 0; i < params.length; i++) {
param = params[i];
if (!TOKEN_REGEXP.test(param)) {
throw new TypeError('invalid parameter name')
}
string += '; ' + param + '=' + qstring(parameters[param]);
}
}
return string
}
/**
* Parse media type to object.
*
* @param {string|object} string
* @return {Object}
* @public
*/
function parse (string) {
if (!string) {
throw new TypeError('argument string is required')
}
// support req/res-like objects as argument
var header = typeof string === 'object'
? getcontenttype(string)
: string;
if (typeof header !== 'string') {
throw new TypeError('argument string is required to be a string')
}
var index = header.indexOf(';');
var type = index !== -1
? header.slice(0, index).trim()
: header.trim();
if (!TYPE_REGEXP.test(type)) {
throw new TypeError('invalid media type')
}
var obj = new ContentType(type.toLowerCase());
// parse parameters
if (index !== -1) {
var key;
var match;
var value;
PARAM_REGEXP.lastIndex = index;
while ((match = PARAM_REGEXP.exec(header))) {
if (match.index !== index) {
throw new TypeError('invalid parameter format')
}
index += match[0].length;
key = match[1].toLowerCase();
value = match[2];
if (value.charCodeAt(0) === 0x22 /* " */) {
// remove quotes
value = value.slice(1, -1);
// remove escapes
if (value.indexOf('\\') !== -1) {
value = value.replace(QESC_REGEXP, '$1');
}
}
obj.parameters[key] = value;
}
if (index !== header.length) {
throw new TypeError('invalid parameter format')
}
}
return obj
}
/**
* Get content-type from req/res objects.
*
* @param {object}
* @return {Object}
* @private
*/
function getcontenttype (obj) {
var header;
if (typeof obj.getHeader === 'function') {
// res-like
header = obj.getHeader('content-type');
} else if (typeof obj.headers === 'object') {
// req-like
header = obj.headers && obj.headers['content-type'];
}
if (typeof header !== 'string') {
throw new TypeError('content-type header is missing from object')
}
return header
}
/**
* Quote a string if necessary.
*
* @param {string} val
* @return {string}
* @private
*/
function qstring (val) {
var str = String(val);
// no need to quote tokens
if (TOKEN_REGEXP.test(str)) {
return str
}
if (str.length > 0 && !TEXT_REGEXP.test(str)) {
throw new TypeError('invalid parameter value')
}
return '"' + str.replace(QUOTE_REGEXP, '\\$1') + '"'
}
/**
* Class to represent a content type.
* @private
*/
function ContentType (type) {
this.parameters = Object.create(null);
this.type = type;
}
return contentType;
}
var contentTypeExports = requireContentType();
var cache = new Map();
var cloneSvg = function cloneSvg(sourceSvg) {
return sourceSvg.cloneNode(true);
};
var isLocal = function isLocal() {
return window.location.protocol === 'file:';
};
var makeAjaxRequest = function makeAjaxRequest(url, httpRequestWithCredentials, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function () {
try {
if (!/\.svg/i.test(url) && httpRequest.readyState === 2) {
var contentType = httpRequest.getResponseHeader('Content-Type');
if (!contentType) {
throw new Error('Content type not found');
}
var type = contentTypeExports.parse(contentType).type;
if (!(type === 'image/svg+xml' || type === 'text/plain')) {
throw new Error("Invalid content type: ".concat(type));
}
}
if (httpRequest.readyState === 4) {
if (httpRequest.status === 404 || httpRequest.responseXML === null) {
throw new Error(isLocal() ? 'Note: SVG injection ajax calls do not work locally without ' + 'adjusting security settings in your browser. Or consider ' + 'using a local webserver.' : 'Unable to load SVG file: ' + url);
}
if (httpRequest.status === 200 || isLocal() && httpRequest.status === 0) {
callback(null, httpRequest);
} else {
throw new Error('There was a problem injecting the SVG: ' + httpRequest.status + ' ' + httpRequest.statusText);
}
}
} catch (error) {
httpRequest.abort();
if (error instanceof Error) {
callback(error, httpRequest);
} else {
throw error;
}
}
};
httpRequest.open('GET', url);
httpRequest.withCredentials = httpRequestWithCredentials;
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
}
httpRequest.send();
};
var requestQueue = {};
var queueRequest = function queueRequest(url, callback) {
requestQueue[url] = requestQueue[url] || [];
requestQueue[url].push(callback);
};
var processRequestQueue = function processRequestQueue(url) {
var _loop_1 = function _loop_1(i, len) {
setTimeout(function () {
if (Array.isArray(requestQueue[url])) {
var cacheValue = cache.get(url);
var callback = requestQueue[url][i];
if (cacheValue instanceof SVGSVGElement) {
callback(null, cloneSvg(cacheValue));
}
if (cacheValue instanceof Error) {
callback(cacheValue);
}
if (i === requestQueue[url].length - 1) {
delete requestQueue[url];
}
}
}, 0);
};
for (var i = 0, len = requestQueue[url].length; i < len; i++) {
_loop_1(i);
}
};
var loadSvgCached = function loadSvgCached(url, httpRequestWithCredentials, callback) {
if (cache.has(url)) {
var cacheValue = cache.get(url);
if (cacheValue === undefined) {
queueRequest(url, callback);
return;
}
if (cacheValue instanceof SVGSVGElement) {
callback(null, cloneSvg(cacheValue));
return;
}
}
cache.set(url, undefined);
queueRequest(url, callback);
makeAjaxRequest(url, httpRequestWithCredentials, function (error, httpRequest) {
var _a;
if (error) {
cache.set(url, error);
} else if (((_a = httpRequest.responseXML) === null || _a === void 0 ? void 0 : _a.documentElement) instanceof SVGSVGElement) {
cache.set(url, httpRequest.responseXML.documentElement);
}
processRequestQueue(url);
});
};
var loadSvgUncached = function loadSvgUncached(url, httpRequestWithCredentials, callback) {
makeAjaxRequest(url, httpRequestWithCredentials, function (error, httpRequest) {
var _a;
if (error) {
callback(error);
} else if (((_a = httpRequest.responseXML) === null || _a === void 0 ? void 0 : _a.documentElement) instanceof SVGSVGElement) {
callback(null, httpRequest.responseXML.documentElement);
}
});
};
var idCounter = 0;
var uniqueId = function uniqueId() {
return ++idCounter;
};
var injectedElements = [];
var ranScripts = {};
var svgNamespace$1 = 'http://www.w3.org/2000/svg';
var xlinkNamespace$1 = 'http://www.w3.org/1999/xlink';
var injectElement = function injectElement(el, evalScripts, renumerateIRIElements, cacheRequests, httpRequestWithCredentials, beforeEach, callback) {
var elUrl = el.getAttribute('data-src') || el.getAttribute('src');
if (!elUrl) {
callback(new Error('Invalid data-src or src attribute'));
return;
}
if (injectedElements.indexOf(el) !== -1) {
injectedElements.splice(injectedElements.indexOf(el), 1);
el = null;
return;
}
injectedElements.push(el);
el.setAttribute('src', '');
var loadSvg = cacheRequests ? loadSvgCached : loadSvgUncached;
loadSvg(elUrl, httpRequestWithCredentials, function (error, svg) {
if (!svg) {
injectedElements.splice(injectedElements.indexOf(el), 1);
el = null;
callback(error);
return;
}
var elId = el.getAttribute('id');
if (elId) {
svg.setAttribute('id', elId);
}
var elTitle = el.getAttribute('title');
if (elTitle) {
svg.setAttribute('title', elTitle);
}
var elWidth = el.getAttribute('width');
if (elWidth) {
svg.setAttribute('width', elWidth);
}
var elHeight = el.getAttribute('height');
if (elHeight) {
svg.setAttribute('height', elHeight);
}
var mergedClasses = Array.from(new Set(__spreadArray(__spreadArray(__spreadArray([], (svg.getAttribute('class') || '').split(' '), true), ['injected-svg'], false), (el.getAttribute('class') || '').split(' '), true))).join(' ').trim();
svg.setAttribute('class', mergedClasses);
var elStyle = el.getAttribute('style');
if (elStyle) {
svg.setAttribute('style', elStyle);
}
svg.setAttribute('data-src', elUrl);
var elData = [].filter.call(el.attributes, function (at) {
return /^data-\w[\w-]*$/.test(at.name);
});
Array.prototype.forEach.call(elData, function (dataAttr) {
if (dataAttr.name && dataAttr.value) {
svg.setAttribute(dataAttr.name, dataAttr.value);
}
});
if (renumerateIRIElements) {
var iriElementsAndProperties_1 = {
clipPath: ['clip-path'],
'color-profile': ['color-profile'],
cursor: ['cursor'],
filter: ['filter'],
linearGradient: ['fill', 'stroke'],
marker: ['marker', 'marker-start', 'marker-mid', 'marker-end'],
mask: ['mask'],
path: [],
pattern: ['fill', 'stroke'],
radialGradient: ['fill', 'stroke']
};
var element_1;
var elements_1;
var properties_1;
var currentId_1;
var newId_1;
Object.keys(iriElementsAndProperties_1).forEach(function (key) {
element_1 = key;
properties_1 = iriElementsAndProperties_1[key];
elements_1 = svg.querySelectorAll(element_1 + '[id]');
var _loop_1 = function _loop_1(a, elementsLen) {
currentId_1 = elements_1[a].id;
newId_1 = currentId_1 + '-' + uniqueId();
var referencingElements;
Array.prototype.forEach.call(properties_1, function (property) {
referencingElements = svg.querySelectorAll('[' + property + '*="' + currentId_1 + '"]');
for (var b = 0, referencingElementLen = referencingElements.length; b < referencingElementLen; b++) {
var attrValue = referencingElements[b].getAttribute(property);
if (attrValue && !attrValue.match(new RegExp('url\\("?#' + currentId_1 + '"?\\)'))) {
continue;
}
referencingElements[b].setAttribute(property, 'url(#' + newId_1 + ')');
}
});
var allLinks = svg.querySelectorAll('[*|href]');
var links = [];
for (var c = 0, allLinksLen = allLinks.length; c < allLinksLen; c++) {
var href = allLinks[c].getAttributeNS(xlinkNamespace$1, 'href');
if (href && href.toString() === '#' + elements_1[a].id) {
links.push(allLinks[c]);
}
}
for (var d = 0, linksLen = links.length; d < linksLen; d++) {
links[d].setAttributeNS(xlinkNamespace$1, 'href', '#' + newId_1);
}
elements_1[a].id = newId_1;
};
for (var a = 0, elementsLen = elements_1.length; a < elementsLen; a++) {
_loop_1(a);
}
});
}
svg.removeAttribute('xmlns:a');
var scripts = svg.querySelectorAll('script');
var scriptsToEval = [];
var script;
var scriptType;
for (var i = 0, scriptsLen = scripts.length; i < scriptsLen; i++) {
scriptType = scripts[i].getAttribute('type');
if (!scriptType || scriptType === 'application/ecmascript' || scriptType === 'application/javascript' || scriptType === 'text/javascript') {
script = scripts[i].innerText || scripts[i].textContent;
if (script) {
scriptsToEval.push(script);
}
svg.removeChild(scripts[i]);
}
}
if (scriptsToEval.length > 0 && (evalScripts === 'always' || evalScripts === 'once' && !ranScripts[elUrl])) {
for (var l = 0, scriptsToEvalLen = scriptsToEval.length; l < scriptsToEvalLen; l++) {
new Function(scriptsToEval[l])(window);
}
ranScripts[elUrl] = true;
}
var styleTags = svg.querySelectorAll('style');
Array.prototype.forEach.call(styleTags, function (styleTag) {
styleTag.textContent += '';
});
svg.setAttribute('xmlns', svgNamespace$1);
svg.setAttribute('xmlns:xlink', xlinkNamespace$1);
beforeEach(svg);
if (!el.parentNode) {
injectedElements.splice(injectedElements.indexOf(el), 1);
el = null;
callback(new Error('Parent node is null'));
return;
}
el.parentNode.replaceChild(svg, el);
injectedElements.splice(injectedElements.indexOf(el), 1);
el = null;
callback(null, svg);
});
};
var SVGInjector = function SVGInjector(elements, _a) {
var _b = _a === undefined ? {} : _a,
_c = _b.afterAll,
afterAll = _c === undefined ? function () {
return undefined;
} : _c,
_d = _b.afterEach,
afterEach = _d === undefined ? function () {
return undefined;
} : _d,
_e = _b.beforeEach,
beforeEach = _e === undefined ? function () {
return undefined;
} : _e,
_f = _b.cacheRequests,
cacheRequests = _f === undefined ? true : _f,
_g = _b.evalScripts,
evalScripts = _g === undefined ? 'never' : _g,
_h = _b.httpRequestWithCredentials,
httpRequestWithCredentials = _h === undefined ? false : _h,
_j = _b.renumerateIRIElements,
renumerateIRIElements = _j === undefined ? true : _j;
if (elements && 'length' in elements) {
var elementsLoaded_1 = 0;
for (var i = 0, j = elements.length; i < j; i++) {
injectElement(elements[i], evalScripts, renumerateIRIElements, cacheRequests, httpRequestWithCredentials, beforeEach, function (error, svg) {
afterEach(error, svg);
if (elements && 'length' in elements && elements.length === ++elementsLoaded_1) {
afterAll(elementsLoaded_1);
}
});
}
} else if (elements) {
injectElement(elements, evalScripts, renumerateIRIElements, cacheRequests, httpRequestWithCredentials, beforeEach, function (error, svg) {
afterEach(error, svg);
afterAll(1);
elements = null;
});
} else {
afterAll(0);
}
};
// Hat-tip: https://github.com/mui/material-ui/tree/master/packages/mui-utils/src.
var ownerWindow = function ownerWindow(node) {
var doc = (node == null ? undefined : node.ownerDocument) || document;
return doc.defaultView || window;
};
// Hat-tip: https://github.com/developit/preact-compat/blob/master/src/index.js#L402.
var shallowDiffers = function shallowDiffers(a, b) {
for (var i in a) {
if (!(i in b)) {
return true;
}
}
for (var _i in b) {
if (a[_i] !== b[_i]) {
return true;
}
}
return false;
};
var _excluded = ["afterInjection", "beforeInjection", "desc", "evalScripts", "fallback", "httpRequestWithCredentials", "loading", "renumerateIRIElements", "src", "title", "useRequestCache", "wrapper"];
var svgNamespace = 'http://www.w3.org/2000/svg';
var xlinkNamespace = 'http://www.w3.org/1999/xlink';
var ReactSVG = /*#__PURE__*/function (_React$Component) {
function ReactSVG() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this.initialState = {
hasError: false,
isLoading: true
};
_this.state = _this.initialState;
_this._isMounted = false;
_this.reactWrapper = undefined;
_this.nonReactWrapper = undefined;
_this.refCallback = function (reactWrapper) {
_this.reactWrapper = reactWrapper;
};
return _this;
}
_inheritsLoose(ReactSVG, _React$Component);
var _proto = ReactSVG.prototype;
_proto.renderSVG = function renderSVG() {
var _this2 = this;
/* istanbul ignore else */
if (this.reactWrapper instanceof ownerWindow(this.reactWrapper).Node) {
var _this$props = this.props,
desc = _this$props.desc,
evalScripts = _this$props.evalScripts,
httpRequestWithCredentials = _this$props.httpRequestWithCredentials,
renumerateIRIElements = _this$props.renumerateIRIElements,
src = _this$props.src,
title = _this$props.title,
useRequestCache = _this$props.useRequestCache;
/* eslint-disable @typescript-eslint/no-non-null-assertion */
var onError = this.props.onError;
var beforeInjection = this.props.beforeInjection;
var afterInjection = this.props.afterInjection;
var wrapper = this.props.wrapper;
var nonReactWrapper;
var nonReactTarget;
if (wrapper === 'svg') {
nonReactWrapper = document.createElementNS(svgNamespace, wrapper);
nonReactWrapper.setAttribute('xmlns', svgNamespace);
nonReactWrapper.setAttribute('xmlns:xlink', xlinkNamespace);
nonReactTarget = document.createElementNS(svgNamespace, wrapper);
} else {
nonReactWrapper = document.createElement(wrapper);
nonReactTarget = document.createElement(wrapper);
}
nonReactWrapper.appendChild(nonReactTarget);
nonReactTarget.dataset.src = src;
this.nonReactWrapper = this.reactWrapper.appendChild(nonReactWrapper);
var handleError = function handleError(error) {
_this2.removeSVG();
if (!_this2._isMounted) {
onError(error);
return;
}
_this2.setState(function () {
return {
hasError: true,
isLoading: false
};
}, function () {
onError(error);
});
};
var afterEach = function afterEach(error, svg) {
if (error) {
handleError(error);
return;
}
// TODO (Tane): It'd be better to cleanly unsubscribe from SVGInjector
// callbacks instead of tracking a property like this.
if (_this2._isMounted) {
_this2.setState(function () {
return {
isLoading: false
};
}, function () {
try {
afterInjection(svg);
} catch (afterInjectionError) {
handleError(afterInjectionError);
}
});
}
};
var beforeEach = function beforeEach(svg) {
svg.setAttribute('role', 'img');
if (desc) {
var originalDesc = svg.querySelector(':scope > desc');
if (originalDesc) {
svg.removeChild(originalDesc);
}
var newDesc = document.createElement('desc');
newDesc.innerHTML = desc;
svg.prepend(newDesc);
}
if (title) {
var originalTitle = svg.querySelector(':scope > title');
if (originalTitle) {
svg.removeChild(originalTitle);
}
var newTitle = document.createElement('title');
newTitle.innerHTML = title;
svg.prepend(newTitle);
}
try {
beforeInjection(svg);
} catch (error) {
handleError(error);
}
};
SVGInjector(nonReactTarget, {
afterEach: afterEach,
beforeEach: beforeEach,
cacheRequests: useRequestCache,
evalScripts: evalScripts,
httpRequestWithCredentials: httpRequestWithCredentials,
renumerateIRIElements: renumerateIRIElements
});
}
};
_proto.removeSVG = function removeSVG() {
var _this$nonReactWrapper;
if ((_this$nonReactWrapper = this.nonReactWrapper) != null && _this$nonReactWrapper.parentNode) {
this.nonReactWrapper.parentNode.removeChild(this.nonReactWrapper);
this.nonReactWrapper = null;
}
};
_proto.componentDidMount = function componentDidMount() {
this._isMounted = true;
this.renderSVG();
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var _this3 = this;
if (shallowDiffers(_extends({}, prevProps), this.props)) {
this.setState(function () {
return _this3.initialState;
}, function () {
_this3.removeSVG();
_this3.renderSVG();
});
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
this._isMounted = false;
this.removeSVG();
};
_proto.render = function render() {
/* eslint-disable @typescript-eslint/no-unused-vars */
var _this$props2 = this.props;
_this$props2.afterInjection;
_this$props2.beforeInjection;
_this$props2.desc;
_this$props2.evalScripts;
var Fallback = _this$props2.fallback;
_this$props2.httpRequestWithCredentials;
var Loading = _this$props2.loading;
_this$props2.renumerateIRIElements;
_this$props2.src;
_this$props2.title;
_this$props2.useRequestCache;
var wrapper = _this$props2.wrapper,
rest = _objectWithoutPropertiesLoose(_this$props2, _excluded);
/* eslint-enable @typescript-eslint/no-unused-vars */
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var Wrapper = wrapper;
return /*#__PURE__*/React__namespace.createElement(Wrapper, _extends({}, rest, {
ref: this.refCallback
}, wrapper === 'svg' ? {
xmlns: svgNamespace,
xmlnsXlink: xlinkNamespace
} : {}), this.state.isLoading && Loading && /*#__PURE__*/React__namespace.createElement(Loading, null), this.state.hasError && Fallback && /*#__PURE__*/React__namespace.createElement(Fallback, null));
};
return ReactSVG;
}(React__namespace.Component);
ReactSVG.defaultProps = {
afterInjection: function afterInjection() {
return undefined;
},
beforeInjection: function beforeInjection() {
return undefined;
},
desc: '',
evalScripts: 'never',
fallback: null,
httpRequestWithCredentials: false,
loading: null,
onError: function onError() {
return undefined;
},
renumerateIRIElements: true,
title: '',
useRequestCache: true,
wrapper: 'div'
};
ReactSVG.propTypes = {
afterInjection: PropTypes__namespace.func,
beforeInjection: PropTypes__namespace.func,
desc: PropTypes__namespace.string,
evalScripts: PropTypes__namespace.oneOf(['always', 'once', 'never']),
fallback: PropTypes__namespace.oneOfType([PropTypes__namespace.func, PropTypes__namespace.object, PropTypes__namespace.string]),
httpRequestWithCredentials: PropTypes__namespace.bool,
loading: PropTypes__namespace.oneOfType([PropTypes__namespace.func, PropTypes__namespace.object, PropTypes__namespace.string]),
onError: PropTypes__namespace.func,
renumerateIRIElements: PropTypes__namespace.bool,
src: PropTypes__namespace.string.isRequired,
title: PropTypes__namespace.string,
useRequestCache: PropTypes__namespace.bool,
wrapper: PropTypes__namespace.oneOf(['div', 'span', 'svg'])
};
exports.ReactSVG = ReactSVG;
}));
//# sourceMappingURL=react-svg.umd.development.js.map