convert-svg-react/lib/converter/format.js

Converts SVG XML code to be used as ReactJS component.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

// Put elements on their own line if on the same line together

/**
 * Class to create new indented stringed svg elements
 * 
 */
var j = 0;

var Format = /*#__PURE__*/function () {
  function Format() {
    var spaces = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
    (0, _classCallCheck2["default"])(this, Format);
    this.string = '';
    this.spaces = spaces;
  }

  (0, _createClass2["default"])(Format, [{
    key: "removeSpaces",
    value: function removeSpaces() {
      return this.string.replace(/[ ]{3,}/igm, ' ');
    }
    /* *** Not being used, refactoring *** */

  }, {
    key: "trimLines",
    value: function trimLines(string) {
      // Splits each line that is 180 characters or long at the very next space 
      var regex = new RegExp('(.{180}[ ])(.*)', 'igm');
      var newArr = []; // j < 50 incase extremely long and multiple lines 

      if (string.match(regex) && j < 10) {
        var strings = string.split('\n');
        var i = strings.length;

        while (i--) {
          // Each line that is too long splits and second line gets it's own
          newArr.unshift(strings[i].replace(regex, '$1\n$2'));
        }

        var newString = newArr.join('\n');
        j++;
        return this.trimLines(newString);
      } else {
        return string.replace(/^\s*\n/gm, '');
      }
    }
  }, {
    key: "newLine",
    value: function newLine() {
      var string = this.removeSpaces();
      if (typeof string !== 'string') return {
        error: '<h1>Not a valid string</h1>'
      };
      return string.replace(/^\s+|\s+$/gm, '').match(/<.[\s\S]*?>(?=[^a-z])|(<\/svg>)|(.+?}")/gm).join('\n');
    }
  }, {
    key: "leftFormat",
    value: function leftFormat() {
      var elementOnOwnLines = this.newLine(); // console.log('elementOnOwnLines:', elementOnOwnLines)

      if (!elementOnOwnLines) {
        console.log('Can\'t format Elements on Own Lines');
        return {
          error: '<h1>Can\'t format Elements on Own Lines</h1>'
        };
      } // Remove spaces from both sides


      var removeTabsPattern = /^\s*|\s*$/gm;
      var formatLeft = elementOnOwnLines.replace(removeTabsPattern, '');
      return formatLeft;
    }
  }, {
    key: "indent",
    value: function indent(string, styleElement) {
      this.string = string;
      var leftFormat = this.leftFormat();
      var selectAllLines = /.+/ig;
      var allArray = leftFormat.match(selectAllLines);
      var prevBeginnings = '';
      var length = allArray.length;
      var newString = '';
      var space = 0;
      var spaces = this.spaces;

      try {
        for (var i = 0; i < length; i++) {
          var element = allArray[i];
          var beginnings = /<svg.+>|<style type="text\/css">|<[^\/].*>|^<[^\/].*[^>]$/i.test(element); // <...> or <.....

          var onelines = /<.*>.*<\/.*>|^<\w.*\/>$|^(\w|-|\.).+[^>]$|^[\w",-].+\/?>$|^['"]?\..*|<\/image>/gi.test(element); //  <./>...<./> or <..../>  or .... or .../>  or ...> or '.photo-st0{fill:#061E2D;}'+

          var endings = /<\/.*>|^}?<\/style>$/gi.test(element); // Indents open elements <g> or <g className="someclass" not closing..

          if (beginnings) {
            if (/<[^\/].+[^\/]>|^\w.+[^\/]>$|<[a-z]+>/gi.test(allArray[i - 1])) {
              // Tests previous element is the same, if so add space
              space += spaces;
              prevBeginnings = element;
              newString += element.replace(/^/g, '\n' + ' '.repeat(space));
            } else {
              prevBeginnings = element;
              newString += element.replace(/^/g, i === 0 ? '' : '\n' + ' '.repeat(space)); // First line, only adds new line (\n) if it's not the first line
            }
          } // Indents single open and closing elements <.../> or <..>...</..>
          else if (onelines) {
            if (/^<[^\/]+>$|^<style.+{?>?$|^[\w|-|\.].+[^\/]>$/gi.test(allArray[i - 1])) {
              // tests if previouos element is <...> or <style...{ or ...> 
              space += spaces;
              newString += element.replace(/^/g, '\n' + ' '.repeat(space)); // Indents if previous line is different
            } else {
              // const extraSpace = space + 2  add more spaces if needed
              var extraSpace = space + 1; // single lines ... or ...>

              newString += element.replace(/^/g, '\n' + ' '.repeat(extraSpace));
            }
          } // Doesn't indent closing elements </g>, </div>, }</style> etc etc..
          else if (endings) {
            var justLetters = element.replace(/[^a-zA-Z]/ig, '');
            var regex = new RegExp("^<".concat(justLetters), 'gi');
            /* If indented tag is same ending tag */

            if (regex.test(prevBeginnings) && justLetters != 'style') {
              newString += element.replace(/^/g, '\n' + ' '.repeat(space));
            } else {
              space -= spaces;
              newString += element.replace(/^/g, '\n' + ' '.repeat(space));
            }
          }
        }
      } catch (e) {
        console.log(e);
        return "<span>".concat(e, "</span>");
      }

      return newString;
    }
  }]);
  return Format;
}();

;
module.exports = new Format();