react-svg/dist/react-svg.esm.js

import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
import _inheritsLoose from '@babel/runtime/helpers/inheritsLoose';
import { SVGInjector } from '@tanem/svg-injector';
import * as PropTypes from 'prop-types';
import * as React from 'react';

// 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", "evalScripts", "fallback", "loading", "renumerateIRIElements", "src", "useRequestCache", "wrapper"];
var svgNamespace = 'http://www.w3.org/2000/svg';
var xlinkNamespace = 'http://www.w3.org/1999/xlink';
var ReactSVG = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(ReactSVG, _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 = void 0;
    _this.nonReactWrapper = void 0;

    _this.refCallback = function (reactWrapper) {
      _this.reactWrapper = reactWrapper;
    };

    return _this;
  }

  var _proto = ReactSVG.prototype;

  _proto.renderSVG = function renderSVG() {
    var _this2 = this;

    /* istanbul ignore else */
    if (this.reactWrapper instanceof Node) {
      var _this$props = this.props,
          beforeInjection = _this$props.beforeInjection,
          evalScripts = _this$props.evalScripts,
          renumerateIRIElements = _this$props.renumerateIRIElements,
          src = _this$props.src,
          useRequestCache = _this$props.useRequestCache;
      /* eslint-disable @typescript-eslint/no-non-null-assertion */

      var afterInjection = this.props.afterInjection;
      var wrapper = this.props.wrapper;
      /* eslint-enable @typescript-eslint/no-non-null-assertion */

      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 afterEach = function afterEach(error, svg) {
        if (error) {
          _this2.removeSVG();

          if (!_this2._isMounted) {
            afterInjection(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 {
              hasError: !!error,
              isLoading: false
            };
          }, function () {
            afterInjection(error, svg);
          });
        }
      };

      SVGInjector(nonReactTarget, {
        afterEach: afterEach,
        beforeEach: beforeInjection,
        cacheRequests: useRequestCache,
        evalScripts: evalScripts,
        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(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.evalScripts;
        var Fallback = _this$props2.fallback,
        Loading = _this$props2.loading;
        _this$props2.renumerateIRIElements;
        _this$props2.src;
        _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.createElement(Wrapper, _extends({}, rest, {
      ref: this.refCallback
    }, wrapper === 'svg' ? {
      xmlns: svgNamespace,
      xmlnsXlink: xlinkNamespace
    } : {}), this.state.isLoading && Loading && /*#__PURE__*/React.createElement(Loading, null), this.state.hasError && Fallback && /*#__PURE__*/React.createElement(Fallback, null));
  };

  return ReactSVG;
}(React.Component);
ReactSVG.defaultProps = {
  afterInjection: function afterInjection() {
    return undefined;
  },
  beforeInjection: function beforeInjection() {
    return undefined;
  },
  evalScripts: 'never',
  fallback: null,
  loading: null,
  renumerateIRIElements: true,
  useRequestCache: true,
  wrapper: 'div'
};
ReactSVG.propTypes = {
  afterInjection: PropTypes.func,
  beforeInjection: PropTypes.func,
  evalScripts: PropTypes.oneOf(['always', 'once', 'never']),
  fallback: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),
  loading: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),
  renumerateIRIElements: PropTypes.bool,
  src: PropTypes.string.isRequired,
  useRequestCache: PropTypes.bool,
  wrapper: PropTypes.oneOf(['div', 'span', 'svg'])
} ;

export { ReactSVG };
//# sourceMappingURL=react-svg.esm.js.map