From 9fad640fbe5065a17b819a841d1a7e5a374842ae Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Fri, 4 Jan 2019 15:59:04 +0100
Subject: [PATCH] Move labels and handles to presentational

---
 src/components/Timeline.jsx                   |  4 +-
 src/components/TimelineHandles.jsx            | 25 -----------
 src/components/TimelineLabels.jsx             | 21 ---------
 .../presentational/TimelineHandles.js         | 26 +++++++++++
 .../presentational/TimelineLabels.js          | 44 +++++++++++++++++++
 5 files changed, 72 insertions(+), 48 deletions(-)
 delete mode 100644 src/components/TimelineHandles.jsx
 delete mode 100644 src/components/TimelineLabels.jsx
 create mode 100644 src/components/presentational/TimelineHandles.js
 create mode 100644 src/components/presentational/TimelineLabels.js

diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 77bd3dd..deafaa3 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -8,9 +8,9 @@ import { formatterWithYear, parseDate } from '../js/utilities';
 import TimelineHeader from './presentational/TimelineHeader';
 import TimelineAxis from './TimelineAxis.jsx';
 import TimelineClip from './presentational/TimelineClip';
-import TimelineHandles from './TimelineHandles.jsx';
+import TimelineHandles from './presentational/TimelineHandles.js';
 import TimelineZoomControls from './TimelineZoomControls.jsx';
-import TimelineLabels from './TimelineLabels.jsx';
+import TimelineLabels from './presentational/TimelineLabels.js';
 import TimelineMarkers from './TimelineMarkers.jsx'
 import TimelineEvents from './TimelineEvents.jsx';
 import TimelineCategories from './TimelineCategories.jsx';
diff --git a/src/components/TimelineHandles.jsx b/src/components/TimelineHandles.jsx
deleted file mode 100644
index 1e8b5df..0000000
--- a/src/components/TimelineHandles.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-class TimelineHandles extends React.Component {
-
-  render() {
-    const dims = this.props.dims;
-    return (
-      <g className="time-controls-inline">
-        <g transform={`translate(${dims.margin_left + 20}, 62)`} onClick={() => this.props.onMoveTime('backwards')}>
-          <circle r="15">
-          </circle>
-          <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(270)"></path>
-        </g>
-        <g transform={`translate(${dims.width - dims.width_controls - 20}, 62)`}  onClick={() => this.props.onMoveTime('forward')}>
-          <circle r="15">
-          </circle>
-          <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(90)"></path>
-        </g>
-      </g>
-    )
-  }
-
-}
-
-export default TimelineHandles;
\ No newline at end of file
diff --git a/src/components/TimelineLabels.jsx b/src/components/TimelineLabels.jsx
deleted file mode 100644
index 7390acf..0000000
--- a/src/components/TimelineLabels.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { formatterWithYear } from '../js/utilities';
-
-const TimelineLabels = ({ dims, timelabels }) => {
-
-  return (
-    <g>
-      <line class="axisBoundaries" x1={dims.margin_left} x2={dims.margin_left} y1="10" y2="20"></line>
-      <line class="axisBoundaries" x1={dims.width - dims.width_controls} x2={dims.width - dims.width_controls} y1="10" y2="20"></line>
-      <text class="timeLabel0 timeLabel" x="5" y="15">
-        {formatterWithYear(timelabels[0])}
-      </text>
-      <text class="timelabelF timeLabel" x={dims.width - dims.width_controls - 5} y="15" style={{ textAnchor: 'end' }}>
-        {formatterWithYear(timelabels[1])}
-      </text>      
-    </g>
-  )
-}
-
-export default TimelineLabels;
\ No newline at end of file
diff --git a/src/components/presentational/TimelineHandles.js b/src/components/presentational/TimelineHandles.js
new file mode 100644
index 0000000..30e0ca2
--- /dev/null
+++ b/src/components/presentational/TimelineHandles.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const TimelineHandles = ({ dims, onMoveTime }) => {
+
+  return (
+    <g className="time-controls-inline">
+      <g
+        transform={`translate(${dims.margin_left + 20}, 62)`}
+        onClick={() => this.props.onMoveTime('backwards')}
+      >
+        <circle r="15"></circle>
+        <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(270)"></path>
+      </g>
+      <g
+        transform={`translate(${dims.width - dims.width_controls - 20}, 62)`}
+        onClick={() => this.props.onMoveTime('forward')}
+      >
+        <circle r="15"></circle>
+        <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(90)"></path>
+      </g>
+    </g>
+  )
+
+}
+
+export default TimelineHandles;
\ No newline at end of file
diff --git a/src/components/presentational/TimelineLabels.js b/src/components/presentational/TimelineLabels.js
new file mode 100644
index 0000000..bd6f8ad
--- /dev/null
+++ b/src/components/presentational/TimelineLabels.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { formatterWithYear } from '../js/utilities';
+
+const TimelineLabels = ({ dims, timelabels }) => {
+
+  return (
+    <g>
+      <line
+        class="axisBoundaries"
+        x1={dims.margin_left}
+        x2={dims.margin_left}
+        y1="10"
+        y2="20"
+      >
+      </line>
+      <line
+        class="axisBoundaries"
+        x1={dims.width - dims.width_controls}
+        x2={dims.width - dims.width_controls}
+        y1="10"
+        y2="20"
+      >
+      </line>
+      <text
+        class="timeLabel0 timeLabel"
+        x="5"
+        y="15"
+      >
+        {formatterWithYear(timelabels[0])}
+      </text>
+      <text
+        class="timelabelF timeLabel"
+        x={dims.width - dims.width_controls - 5}
+        y="15"
+        style={{ textAnchor: 'end' }}
+      >
+        {formatterWithYear(timelabels[1])}
+      </text>      
+    </g>
+  )
+}
+
+export default TimelineLabels;
\ No newline at end of file