react-svg/dist/react-svg.cjs.development.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _extends = require('@babel/runtime/helpers/extends');
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
var svgInjector = require('@tanem/svg-injector');
var PropTypes = require('prop-types');
var React = require('react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

function _interopNamespace(e) {
    if (e && e.__esModule) return 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 _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
var PropTypes__namespace = /*#__PURE__*/_interopNamespace(PropTypes);
var React__namespace = /*#__PURE__*/_interopNamespace(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", "httpRequestWithCredentials", "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__default["default"](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,
          httpRequestWithCredentials = _this$props.httpRequestWithCredentials,
          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.SVGInjector(nonReactTarget, {
        afterEach: afterEach,
        beforeEach: beforeInjection,
        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(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;
        _this$props2.httpRequestWithCredentials;
        var Loading = _this$props2.loading;
        _this$props2.renumerateIRIElements;
        _this$props2.src;
        _this$props2.useRequestCache;
        var wrapper = _this$props2.wrapper,
        rest = _objectWithoutPropertiesLoose__default["default"](_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__default["default"]({}, 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;
  },
  evalScripts: 'never',
  fallback: null,
  httpRequestWithCredentials: false,
  loading: null,
  renumerateIRIElements: true,
  useRequestCache: true,
  wrapper: 'div'
};
ReactSVG.propTypes = {
  afterInjection: PropTypes__namespace.func,
  beforeInjection: PropTypes__namespace.func,
  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]),
  renumerateIRIElements: PropTypes__namespace.bool,
  src: PropTypes__namespace.string.isRequired,
  useRequestCache: PropTypes__namespace.bool,
  wrapper: PropTypes__namespace.oneOf(['div', 'span', 'svg'])
};

exports.ReactSVG = ReactSVG;
//# sourceMappingURL=react-svg.cjs.development.js.map