Segmented Element

lib/components/Elements/Segment.js

@@ -0,0 +1 @@
+"use strict";

lib/components/Elements/Segmented.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _formatDate = require('../../utils/formatDate');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line no-unused-vars
+var Segmented = function Segmented(_ref) {
+  var title = _ref.title,
+      start = _ref.start,
+      end = _ref.end,
+      style = _ref.style,
+      tooltip = _ref.tooltip;
+  return _react2.default.createElement(
+    'div',
+    { className: 'element', style: style },
+    _react2.default.createElement(
+      'div',
+      { className: 'element__content', 'aria-hidden': 'true' },
+      'Segmented'
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'element__tooltip' },
+      tooltip ? _react2.default.createElement(
+        'div',
+        null,
+        tooltip
+      ) : _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'div',
+          null,
+          'Segmented'
+        ),
+        _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'strong',
+            null,
+            'Start'
+          ),
+          ' ',
+          (0, _formatDate.getDayMonth)(start)
+        ),
+        _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'strong',
+            null,
+            'End'
+          ),
+          ' ',
+          (0, _formatDate.getDayMonth)(end)
+        )
+      )
+    )
+  );
+};
+
+Segmented.propTypes = {
+  title: _react.PropTypes.string,
+  start: _react.PropTypes.instanceOf(Date),
+  end: _react.PropTypes.instanceOf(Date),
+  style: _react.PropTypes.shape({}),
+  tooltip: _react.PropTypes.string
+};
+
+exports.default = Segmented;
+module.exports = exports['default'];

lib/components/Elements/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Basic = require('./Basic');
+
+var _Basic2 = _interopRequireDefault(_Basic);
+
+var _Segmented = require('./Segmented');
+
+var _Segmented2 = _interopRequireDefault(_Segmented);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  Basic: _Basic2.default,
+  Segmented: _Segmented2.default
+};
+module.exports = exports['default'];

lib/components/Timeline/Tracks/Element.js

@@ -12,28 +12,32 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _Basic = require('../../Elements/Basic');
+var _Elements = require('../../Elements');
 
-var _Basic2 = _interopRequireDefault(_Basic);
+var _Elements2 = _interopRequireDefault(_Elements);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Element = function Element(_ref) {
-  var time = _ref.time,
+var TrackElement = function TrackElement(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === undefined ? 'Basic' : _ref$type,
+      time = _ref.time,
       style = _ref.style,
       id = _ref.id,
       title = _ref.title,
       start = _ref.start,
       end = _ref.end,
       tooltip = _ref.tooltip;
+
+  var Element = _Elements2.default[type];
   return _react2.default.createElement(
     'div',
     {
       key: id,
       className: 'track__element',
       style: time.toStyleLeftAndWidth(start, end)
     },
-    _react2.default.createElement(_Basic2.default, {
+    _react2.default.createElement(Element, {
       tooltip: tooltip,
       title: title,
       start: start,
@@ -43,7 +47,8 @@ var Element = function Element(_ref) {
   );
 };
 
-Element.propTypes = {
+TrackElement.propTypes = {
+  type: _react.PropTypes.string,
   time: _react.PropTypes.shape({}).isRequired,
   style: _react.PropTypes.shape({}),
   id: _react.PropTypes.string.isRequired,
@@ -53,5 +58,5 @@ Element.propTypes = {
   tooltip: _react.PropTypes.string
 };
 
-exports.default = Element;
+exports.default = TrackElement;
 module.exports = exports['default'];

src/components/Elements/Segmented.jsx

@@ -0,0 +1,34 @@
+import React, { PropTypes } from 'react'
+
+import { getDayMonth } from '../../utils/formatDate'
+
+// eslint-disable-next-line no-unused-vars
+const Segmented = ({ title, start, end, style, tooltip }) =>
+  <div className="element" style={style}>
+    <div className="element__content" aria-hidden="true">
+      Segmented
+    </div>
+    <div className="element__tooltip">
+      {
+        tooltip
+        ? <div>{tooltip}</div>
+        : (
+          <div>
+            <div>Segmented</div>
+            <div><strong>Start</strong> {getDayMonth(start)}</div>
+            <div><strong>End</strong> {getDayMonth(end)}</div>
+          </div>
+        )
+      }
+    </div>
+  </div>
+
+Segmented.propTypes = {
+  title: PropTypes.string,
+  start: PropTypes.instanceOf(Date),
+  end: PropTypes.instanceOf(Date),
+  style: PropTypes.shape({}),
+  tooltip: PropTypes.string
+}
+
+export default Segmented

src/components/Elements/index.js

@@ -0,0 +1,7 @@
+import Basic from './Basic'
+import Segmented from './Segmented'
+
+export default {
+  Basic,
+  Segmented
+}

src/components/Timeline/Tracks/Element.jsx

@@ -1,22 +1,29 @@
 import React, { PropTypes } from 'react'
-import BasicElement from '../../Elements/Basic'
+import elements from '../../Elements'
 
-const Element = ({ time, style, id, title, start, end, tooltip }) =>
-  <div
-    key={id}
-    className="track__element"
-    style={time.toStyleLeftAndWidth(start, end)}
-  >
-    <BasicElement
-      tooltip={tooltip}
-      title={title}
-      start={start}
-      end={end}
-      style={{ ...style }}
-    />
-  </div>
+const TrackElement = ({ type = 'Basic', time, style, id, title, start, end, tooltip }) => {
+  const Element = elements[type]
+  return (
+    <div
+      key={id}
+      className="track__element"
+      style={time.toStyleLeftAndWidth(start, end)}
+    >
+      {
+        <Element
+          tooltip={tooltip}
+          title={title}
+          start={start}
+          end={end}
+          style={{ ...style }}
+        />
+      }
+    </div>
+  )
+}
 
-Element.propTypes = {
+TrackElement.propTypes = {
+  type: PropTypes.string,
   time: PropTypes.shape({}).isRequired,
   style: PropTypes.shape({}),
   id: PropTypes.string.isRequired,
@@ -26,4 +33,4 @@ Element.propTypes = {
   tooltip: PropTypes.string
 }
 
-export default Element
+export default TrackElement