convert-svg-react/lib/components/StringToJSX.js

Converts SVG XML code to be used as ReactJS component.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StringToJSX = void 0;

var _react = _interopRequireDefault(require("react"));

var _CreateSVG = _interopRequireDefault(require("./createSVG/CreateSVG"));

var _Button = _interopRequireDefault(require("./Button"));

var getColsWidth = function getColsWidth(nodeArray) {
  var maxLineLength = nodeArray[0].length;
  var lineNumber = [];
  nodeArray.forEach(function (line, i) {
    lineNumber.push(i + 1);
    if (line.length > maxLineLength) maxLineLength = line.length;
  });
  return {
    lineLength: maxLineLength,
    lineNumber: lineNumber
  };
};

var getNodes = function getNodes() {
  for (var _len = arguments.length, arr = new Array(_len), _key = 0; _key < _len; _key++) {
    arr[_key] = arguments[_key];
  }

  var string = arr[0],
      type = arr[1];
  var nodeArray;

  if (type === 'fromFile') {
    nodeArray = new DOMParser().parseFromString(string.renderedSVG, "text/html").querySelectorAll('svg');
  } else {
    var childNodes = new DOMParser().parseFromString(string.renderedSVG, "text/html").childNodes; // Removes any other childnode that isn't html 

    var html = Array.from(childNodes.values()).filter(function (child) {
      return child.nodeName === 'HTML';
    })[0];
    nodeArray = html.querySelectorAll('svg');
  }

  return {
    nodeArray: nodeArray,
    string: string.forCopy.split('\n')
  };
};

var createJSX = function createJSX(nodeObj) {
  var svgString = nodeObj.string;
  var nodeArray = nodeObj.nodeArray;
  return [/*#__PURE__*/_react["default"].createElement('div', {
    key: 'wrapper',
    style: {
      display: 'flex',
      flexDirection: 'column-reverse',
      position: 'relative'
    }
  }, (0, _CreateSVG["default"])(nodeArray), /*#__PURE__*/_react["default"].createElement('div', {
    key: 'container',
    style: {
      display: 'flex',
      alignItems: 'baseline',
      overflow: 'scroll',
      background: 'rgb(45 45 45)',
      width: 'auto',
      height: '80vh',
      resize: 'none'
    }
  }, /*#__PURE__*/_react["default"].createElement('textarea', {
    rows: svgString.length,
    cols: 1,
    defaultValue: getColsWidth(svgString).lineNumber.join('\n'),
    style: {
      className: 'numbered',
      textAlign: 'right',
      minWidth: 'fit-content',
      padding: '10px 5px 0 5px',
      border: 'none',
      background: 'rgb(45 45 45)',
      color: 'rgb(183 183 183)',
      resize: 'none'
    }
  }), /*#__PURE__*/_react["default"].createElement('textarea', {
    rows: svgString.length + 1,
    cols: getColsWidth(svgString).lineLength,
    defaultValue: svgString.join('\n'),
    style: {
      className: 'svg-code',
      flexShrink: '0',
      border: 'none',
      background: 'rgb(45 45 45)',
      color: 'rgb(237 236 255)',
      overflow: 'scroll',
      paddingLeft: '15px',
      paddingTop: '10px',
      resize: 'none'
    }
  })), (0, _Button["default"])())];
};

var StringToJSX = function StringToJSX() {
  return createJSX(getNodes.apply(void 0, arguments));
};

exports.StringToJSX = StringToJSX;