refactor: specialize svg to breakpointsvg

Author: th7nder

images/BreakpointSvg.js

@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import React from "react";
+
+const BREAKPOINT_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 15" width="60" height="15"><path d="M53.07.5H1.5c-.54 0-1 .46-1 1v12c0 .54.46 1 1 1h51.57c.58 0 1.15-.26 1.53-.7l4.7-6.3-4.7-6.3c-.38-.44-.95-.7-1.53-.7z"/></svg>';
+const COLUMN_MARKER_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 13" width="11" height="13"><path d="M5.07.5H1.5c-.54 0-1 .46-1 1v10c0 .54.46 1 1 1h3.57c.58 0 1.15-.26 1.53-.7l3.7-5.3-3.7-5.3C6.22.76 5.65.5 5.07.5z"/></svg>';
+
+type Props = {
+  column: boolean
+};
+
+export default function BreakpointSvg({ column }: Props) {
+  const svg = column ? COLUMN_MARKER_SVG : BREAKPOINT_SVG;
+
+  /* eslint-disable react/no-danger */
+  return <span dangerouslySetInnerHTML={{ __html: svg }} />;
+}

images/Svg.js

@@ -7,7 +7,7 @@
 import React, { PureComponent } from "react";
 import ReactDOM from "react-dom";
 import classnames from "classnames";
-import Svg from "../shared/Svg";
+import BreakpointSvg from "../shared/BreakpointSvg";
 
 import { getDocument, toEditorLine } from "../../utils/editor";
 import { getSelectedLocation } from "../../utils/source-maps";
@@ -20,7 +20,7 @@ import type { EditorItemActions } from "./menus/editor";
 import type { Source, Breakpoint as BreakpointType } from "../../types";
 
 const breakpointSvg = document.createElement("div");
-ReactDOM.render(<Svg name="breakpoint" />, breakpointSvg);
+ReactDOM.render(<BreakpointSvg column={false} />, breakpointSvg);
 
 type Props = {
   breakpoint: BreakpointType,

src/components/Editor/Breakpoint.js

@@ -7,7 +7,7 @@ import React, { PureComponent } from "react";
 import ReactDOM from "react-dom";
 import classnames from "classnames";
 import { getDocument } from "../../utils/editor";
-import Svg from "../shared/Svg";
+import BreakpointSvg from "../shared/BreakpointSvg";
 import { showMenu } from "devtools-contextmenu";
 import { breakpointItems, createBreakpointItems } from "./menus/breakpoints";
 
@@ -28,7 +28,7 @@ type Props = {
 };
 
 const breakpointImg = document.createElement("button");
-ReactDOM.render(<Svg name={"column-marker"} />, breakpointImg);
+ReactDOM.render(<BreakpointSvg column={true} />, breakpointImg);
 
 function makeBookmark({ breakpoint }, { onClick, onContextMenu }) {
   const bp = breakpointImg.cloneNode(true);

src/components/Editor/ColumnBreakpoint.js

@@ -7,6 +7,6 @@
  * This file maps the SVG React Components in the images directory.
  */
 
-import Svg from "../../../images/Svg";
+import BreakpointSvg from "../../../images/BreakpointSvg";
 
-export default Svg;
+export default BreakpointSvg;

src/components/shared/Svg.js src/components/shared/BreakpointSvg.js

@@ -33,7 +33,7 @@ import * as reselect from "reselect";
 import classnames from "classnames";
 import devtoolsSplitter from "devtools-splitter";
 import move from "lodash-move";
-import Svg from "./components/shared/Svg";
+import BreakpointSvg from "./components/shared/BreakpointSvg";
 
 // We cannot directly export literals containing special characters
 // (eg. "my-module/Test") which is why they are nested in "vendored".
@@ -55,5 +55,5 @@ export const vendored = {
   reselect,
   // Svg is required via relative paths, so the key is not imported path.
   // See .babel/transform-mc.js
-  Svg
+  BreakpointSvg
 };