react-inlinesvg 0.7.1 → 0.7.5

package/src/index.js

@@ -0,0 +1,225 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import httpplease from 'httpplease';
+import ieXDomain from 'httpplease/plugins/oldiexdomain';
+
+import {
+  configurationError,
+  isSupportedEnvironment,
+  randomString, uniquifySVGIDs,
+  unsupportedBrowserError,
+} from './utils';
+
+const http = httpplease.use(ieXDomain);
+
+const Status = {
+  PENDING: 'pending',
+  LOADING: 'loading',
+  LOADED: 'loaded',
+  FAILED: 'failed',
+  UNSUPPORTED: 'unsupported'
+};
+
+const getRequestsByUrl = {};
+const loadedIcons = {};
+
+export default class InlineSVG extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      status: Status.PENDING
+    };
+
+    this.isActive = false;
+  }
+
+  static propTypes = {
+    cacheGetRequests: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    onError: PropTypes.func,
+    onLoad: PropTypes.func,
+    preloader: PropTypes.node,
+    src: PropTypes.string.isRequired,
+    style: PropTypes.object,
+    supportTest: PropTypes.func,
+    uniqueHash: PropTypes.string,
+    uniquifyIDs: PropTypes.bool,
+    wrapper: PropTypes.func
+  };
+
+  static defaultProps = {
+    cacheGetRequests: false,
+    onLoad: () => {},
+    supportTest: isSupportedEnvironment,
+    uniquifyIDs: true,
+    wrapper: React.createFactory('span'),
+  };
+
+  componentWillMount() {
+    this.isActive = true;
+  }
+
+  componentDidMount() {
+    /* istanbul ignore else */
+    if (this.state.status === Status.PENDING) {
+      if (this.props.supportTest()) {
+        if (this.props.src) {
+          this.startLoad();
+        }
+        else {
+          this.fail(configurationError('Missing source'));
+        }
+      }
+      else {
+        this.fail(unsupportedBrowserError());
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.src !== this.props.src) {
+      if (this.props.src) {
+        this.startLoad();
+      }
+      else {
+        this.fail(configurationError('Missing source'));
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.isActive = false;
+  }
+
+  getFile(callback) {
+    const { cacheGetRequests, src } = this.props;
+
+    if (cacheGetRequests) {
+      if (loadedIcons[src]) {
+        const [err, res] = loadedIcons[src];
+
+        setTimeout(() => callback(err, res, true), 0);
+      }
+
+      if (!getRequestsByUrl[src]) {
+        getRequestsByUrl[src] = [];
+
+        http.get(src, (err, res) => {
+          getRequestsByUrl[src].forEach(cb => {
+            loadedIcons[src] = [err, res];
+            cb(err, res);
+          });
+        });
+      }
+
+      getRequestsByUrl[src].push(callback);
+    }
+    else {
+      http.get(src, (err, res) => {
+        callback(err, res);
+      });
+    }
+  }
+
+  fail(error) {
+    const status = error.isUnsupportedBrowserError ? Status.UNSUPPORTED : Status.FAILED;
+
+    /* istanbul ignore else */
+    if (this.isActive) {
+      this.setState({ status }, () => {
+        if (typeof this.props.onError === 'function') {
+          this.props.onError(error);
+        }
+      });
+    }
+  }
+
+  startLoad() {
+    /* istanbul ignore else */
+    if (this.isActive) {
+      this.setState({
+        status: Status.LOADING
+      }, this.load);
+    }
+  }
+
+  load() {
+    const match = this.props.src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+
+    if (match) {
+      return this.handleLoad(null, {
+        text: match[1] ? atob(match[2]) : decodeURIComponent(match[2])
+      });
+    }
+
+    return this.getFile(this.handleLoad);
+  }
+
+  handleLoad = (err, res, isCached = false) => {
+    if (err) {
+      this.fail(err);
+      return;
+    }
+
+    if (this.isActive) {
+      this.setState({
+        loadedText: res.text,
+        status: Status.LOADED
+      }, () => {
+        this.props.onLoad(this.props.src, isCached);
+      });
+    }
+  };
+
+  getClassName() {
+    let className = `isvg ${this.state.status}`;
+
+    if (this.props.className) {
+      className += ` ${this.props.className}`;
+    }
+
+    return className;
+  }
+
+  processSVG(svgText) {
+    const { uniquifyIDs, uniqueHash } = this.props;
+
+    if (uniquifyIDs) {
+      return uniquifySVGIDs(svgText, uniqueHash || randomString());
+    }
+
+    return svgText;
+  }
+
+  renderContents() {
+    switch (this.state.status) {
+      case Status.UNSUPPORTED:
+      case Status.FAILED:
+        return this.props.children;
+      default:
+        return this.props.preloader;
+    }
+  }
+
+  render() {
+    let content;
+    let html;
+
+    if (this.state.loadedText) {
+      html = {
+        __html: this.processSVG(this.state.loadedText)
+      };
+    }
+    else {
+      content = this.renderContents();
+    }
+
+    return this.props.wrapper({
+      style: this.props.style,
+      className: this.getClassName(),
+      dangerouslySetInnerHTML: html,
+    }, content);
+  }
+}

package/src/utils.js

@@ -0,0 +1,99 @@
+import once from 'once';
+
+export const supportsInlineSVG = once(() => {
+  /* istanbul ignore next */
+  if (!document) {
+    return false;
+  }
+
+  const div = document.createElement('div');
+  div.innerHTML = '<svg />';
+  return div.firstChild && div.firstChild.namespaceURI === 'http://www.w3.org/2000/svg';
+});
+
+export const isSupportedEnvironment = once(() =>
+  (
+    supportsInlineSVG() &&
+    typeof window !== 'undefined' && window !== null
+      ? window.XMLHttpRequest || window.XDomainRequest
+      : false
+  )
+);
+
+export const randomString = (length = 8) => {
+  const letters = 'abcdefghijklmnopqrstuvwxyz';
+  const numbers = '1234567890';
+  const charset = letters + letters.toUpperCase() + numbers;
+
+  const randomCharacter = array => array[Math.floor(Math.random() * array.length)];
+
+  let R = '';
+  for (let i = 0; i < length; i++) {
+    R += randomCharacter(charset);
+  }
+  return R;
+};
+
+export const uniquifySVGIDs = (() => {
+  const mkAttributePattern = attr => `(?:(?:\\s|\\:)${attr})`;
+
+  const idPattern = new RegExp(`(?:(${(mkAttributePattern('id'))})="([^"]+)")|(?:(${(mkAttributePattern('href'))}|${(mkAttributePattern('role'))}|${(mkAttributePattern('arcrole'))})="\\#([^"]+)")|(?:="url\\(\\#([^\\)]+)\\)")`, 'g');
+
+  return (svgText, svgID) => {
+    const uniquifyID = id => `${id}___${svgID}`;
+
+    return svgText.replace(idPattern, (m, p1, p2, p3, p4, p5) => { //eslint-disable-line consistent-return
+      /* istanbul ignore else */
+      if (p2) {
+        return `${p1}="${(uniquifyID(p2))}"`;
+      }
+      else if (p4) {
+        return `${p3}="#${(uniquifyID(p4))}"`;
+      }
+      else if (p5) {
+        return `="url(#${(uniquifyID(p5))})"`;
+      }
+    });
+  };
+})();
+
+class InlineSVGError extends Error {
+  constructor(message) {
+    super();
+
+    this.name = 'InlineSVGError';
+    this.isSupportedBrowser = true;
+    this.isConfigurationError = false;
+    this.isUnsupportedBrowserError = false;
+    this.message = message;
+
+    return this;
+  }
+}
+
+const createError = (message, attrs) => {
+  const err = new InlineSVGError(message);
+
+  return {
+    ...err,
+    ...attrs,
+  };
+};
+
+export const unsupportedBrowserError = message => {
+  let newMessage = message;
+
+  /* istanbul ignore else */
+  if (!newMessage) {
+    newMessage = 'Unsupported Browser';
+  }
+
+  return createError(newMessage, {
+    isSupportedBrowser: false,
+    isUnsupportedBrowserError: true
+  });
+};
+
+export const configurationError = message => createError(message, {
+  isConfigurationError: true
+});

package/.codeclimate.yml

@@ -1,29 +0,0 @@
----
-engines:
-  eslint:
-    enabled: true
-    channel: "eslint-4"
-    config:
-      extensions:
-        - .js
-        - .jsx
-    checks:
-      import/no-duplicates:
-        enabled: false
-      no-template-curly-in-string:
-        enabled: false
-      import/no-unresolved:
-        enabled: false
-      import/no-extraneous-dependencies:
-        enabled: false
-      import/no-named-as-default-member:
-        enabled: false
-ratings:
-  paths:
-  - "**.js"
-  - "**.jsx"
-exclude_paths:
-  - lib/**/*
-  - node_modules/**/*
-  - standalone/**/*
-  - tests/**/*

package/.idea/copyright/profiles_settings.xml

@@ -1,3 +0,0 @@
-<component name="CopyrightManager">
-  <settings default="" />
-</component>

package/.idea/dictionaries/gilbarbara.xml

@@ -1,7 +0,0 @@
-<component name="ProjectDictionaryState">
-  <dictionary name="gilbarbara">
-    <words>
-      <w>uniquify</w>
-    </words>
-  </dictionary>
-</component>

package/.idea/encodings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Encoding">
-    <file url="PROJECT" charset="UTF-8" />
-  </component>
-</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,26 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="ES6ConvertVarToLetConst" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="ES6ModulesDependencies" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="ES6UnusedImports" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="Eslint" enabled="true" level="ERROR" enabled_by_default="true" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="false" level="WARNING" enabled_by_default="false">
-      <option name="myValues">
-        <value>
-          <list size="0" />
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-    <inspection_tool class="JSCheckFunctionSignatures" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="JSMethodCanBeStatic" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="JSUnresolvedFunction" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="JSUnresolvedVariable" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="JSUnusedGlobalSymbols" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="JSValidateTypes" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="NodeModulesDependencies" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="NpmUsedModulesInstalled" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="SassScssResolvedByNameOnly" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-  </profile>
-</component>

package/.idea/inspectionProfiles/profiles_settings.xml

@@ -1,7 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <settings>
-    <option name="PROJECT_PROFILE" value="Project Default" />
-    <option name="USE_PROJECT_PROFILE" value="true" />
-    <version value="1.0" />
-  </settings>
-</component>

package/.idea/jsLibraryMappings.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <file url="file://$PROJECT_DIR$" libraries="{react-inlinesvg/node_modules}" />
-    <file url="PROJECT" libraries="{classnames-DefinitelyTyped, enzyme-DefinitelyTyped, gulp-DefinitelyTyped, jest-DefinitelyTyped, jsdom-DefinitelyTyped, react-DefinitelyTyped, react-inlinesvg/node_modules, webpack-DefinitelyTyped}" />
-    <includedPredefinedLibrary name="Node.js Core" />
-  </component>
-</project>

package/.idea/misc.xml

@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="JSX" />
-  </component>
-  <component name="JsBowerSettings">
-    <exe-path>/usr/local/bin/bower</exe-path>
-    <config-path />
-  </component>
-  <component name="ProjectInspectionProfilesVisibleTreeState">
-    <entry key="Project Default">
-      <profile-state>
-        <expanded-state>
-          <State>
-            <id />
-          </State>
-          <State>
-            <id>CSS</id>
-          </State>
-          <State>
-            <id>GeneralJavaScript</id>
-          </State>
-          <State>
-            <id>Invalid elementsCSS</id>
-          </State>
-          <State>
-            <id>JavaScript</id>
-          </State>
-          <State>
-            <id>Less</id>
-          </State>
-          <State>
-            <id>PHP</id>
-          </State>
-          <State>
-            <id>Sass/SCSS</id>
-          </State>
-          <State>
-            <id>TypeScript</id>
-          </State>
-          <State>
-            <id>UnusedPHP</id>
-          </State>
-        </expanded-state>
-        <selected-state>
-          <State>
-            <id>SassScssResolvedByNameOnly</id>
-          </State>
-        </selected-state>
-      </profile-state>
-    </entry>
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/react-inlinesvg.iml" filepath="$PROJECT_DIR$/.idea/react-inlinesvg.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/php.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PhpUnit">
-    <phpunit_settings>
-      <PhpUnitSettings load_method="CUSTOM_LOADER" />
-    </phpunit_settings>
-  </component>
-</project>

package/.idea/react-inlinesvg.iml

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="enzyme-DefinitelyTyped" level="application" />
-    <orderEntry type="library" name="classnames-DefinitelyTyped" level="application" />
-    <orderEntry type="library" name="gulp-DefinitelyTyped" level="application" />
-    <orderEntry type="library" name="jest-DefinitelyTyped" level="application" />
-    <orderEntry type="library" name="jsdom-DefinitelyTyped" level="application" />
-    <orderEntry type="library" name="react-DefinitelyTyped" level="application" />
-    <orderEntry type="library" name="webpack-DefinitelyTyped" level="application" />
-  </component>
-</module>

package/.idea/scssLintPlugin.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ScssLintProjectComponent">
-    <option name="scssLintExecutable" value="$USER_HOME$/.rvm/gems/ruby-2.3.1/bin/scss-lint" />
-    <option name="pluginEnabled" value="true" />
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>