Segmented Element

lib/components/Elements/Basic.js

@@ -23,7 +23,7 @@ var Basic = function Basic(_ref) {
     { className: 'element', style: style },
     _react2.default.createElement(
       'div',
-      { className: 'element__content', 'aria-hidden': 'true' },
+      { className: 'element__title' },
       title
     ),
     _react2.default.createElement(

lib/components/Elements/Segmented.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require("babel-runtime/helpers/extends");
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Segment = function Segment(_ref) {
+  var time = _ref.time,
+      offsetX = _ref.offsetX,
+      start = _ref.start,
+      end = _ref.end,
+      style = _ref.style;
+
+  var left = time.toX(start) - offsetX;
+  var width = time.toX(end) - left - offsetX;
+  var segmentStyle = (0, _extends3.default)({}, style, {
+    left: left,
+    width: width
+  });
+  return _react2.default.createElement("div", { className: "segmented__segment", style: segmentStyle });
+};
+
+Segment.propTypes = {
+  time: _react.PropTypes.shape({}).isRequired,
+  offsetX: _react.PropTypes.number.isRequired,
+  start: _react.PropTypes.instanceOf(Date).isRequired,
+  end: _react.PropTypes.instanceOf(Date).isRequired,
+  style: _react.PropTypes.shape({})
+};
+
+// eslint-disable-next-line no-unused-vars
+var Segmented = function Segmented(_ref2) {
+  var time = _ref2.time,
+      title = _ref2.title,
+      start = _ref2.start,
+      end = _ref2.end,
+      tooltip = _ref2.tooltip,
+      segments = _ref2.segments;
+
+  var offsetX = time.toX(start);
+  return _react2.default.createElement(
+    "div",
+    { className: "element segmented" },
+    segments.map(function (segment) {
+      return _react2.default.createElement(Segment, (0, _extends3.default)({
+        key: segment.id
+      }, segment, {
+        offsetX: offsetX,
+        time: time
+      }));
+    }),
+    _react2.default.createElement(
+      "div",
+      { className: "element__title" },
+      title
+    )
+  );
+};
+
+Segmented.propTypes = {
+  time: _react.PropTypes.shape({}).isRequired,
+  title: _react.PropTypes.string,
+  start: _react.PropTypes.instanceOf(Date),
+  end: _react.PropTypes.instanceOf(Date),
+  tooltip: _react.PropTypes.string,
+  segments: _react.PropTypes.arrayOf(_react.PropTypes.shape({ id: _react.PropTypes.string.isRequired })).isRequired
+};
+
+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

@@ -4,54 +4,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 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,
-      style = _ref.style,
-      id = _ref.id,
-      title = _ref.title,
-      start = _ref.start,
-      end = _ref.end,
-      tooltip = _ref.tooltip;
+var TrackElement = function TrackElement(props) {
+  var _props$type = props.type,
+      type = _props$type === undefined ? 'Basic' : _props$type,
+      id = props.id,
+      start = props.start,
+      end = props.end,
+      time = props.time;
+
+  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, {
-      tooltip: tooltip,
-      title: title,
-      start: start,
-      end: end,
-      style: (0, _extends3.default)({}, style)
-    })
+    _react2.default.createElement(Element, props)
   );
 };
 
-Element.propTypes = {
+TrackElement.propTypes = {
   time: _react.PropTypes.shape({}).isRequired,
-  style: _react.PropTypes.shape({}),
+  type: _react.PropTypes.string,
   id: _react.PropTypes.string.isRequired,
-  title: _react.PropTypes.string,
   start: _react.PropTypes.instanceOf(Date).isRequired,
-  end: _react.PropTypes.instanceOf(Date).isRequired,
-  tooltip: _react.PropTypes.string
+  end: _react.PropTypes.instanceOf(Date).isRequired
 };
 
-exports.default = Element;
+exports.default = TrackElement;
 module.exports = exports['default'];

lib/css/style.css

@@ -43,10 +43,11 @@
     position: relative;
     height: 40px;
     line-height: 40px;
-    background: #06f;
-    color: #fff;
+    background: "#000";
+    color: "#fff";
     text-align: center; }
-  .react-timeline .element__content {
+  .react-timeline .element__title {
+    position: relative;
     padding: 0 10px;
     overflow: hidden;
     white-space: nowrap;
@@ -246,3 +247,8 @@
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iOCIgdmlld0JveD0iMTYgMjQgMjQgOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMjRoMjR2OEgxNnoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg=="); }
   .react-timeline .track-key__toggle--open::before {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjE2IDE1IDI0IDI1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTMyIDE2djI0aC04VjE2eiIvPjxwYXRoIGQ9Ik0xNiAyNGgyNHY4SDE2eiIvPjwvZz48L3N2Zz4="); }
+  .react-timeline .segmented__segment {
+    position: absolute;
+    top: 0;
+    height: 40px;
+    line-height: 40px; }

src/components/Elements/Basic.jsx

@@ -4,7 +4,7 @@ import { getDayMonth } from '../../utils/formatDate'
 
 const Basic = ({ title, start, end, style, tooltip }) =>
   <div className="element" style={style}>
-    <div className="element__content" aria-hidden="true">
+    <div className="element__title">
       { title }
     </div>
     <div className="element__tooltip">

src/components/Elements/Segmented.jsx

@@ -0,0 +1,57 @@
+import React, { PropTypes } from 'react'
+
+const Segment = ({ time, offsetX, start, end, style }) => {
+  const left = time.toX(start) - offsetX
+  const width = time.toX(end) - left - offsetX
+  const segmentStyle = {
+    ...style,
+    left,
+    width
+  }
+  return (
+    <div className="segmented__segment" style={segmentStyle} />
+  )
+}
+
+Segment.propTypes = {
+  time: PropTypes.shape({}).isRequired,
+  offsetX: PropTypes.number.isRequired,
+  start: PropTypes.instanceOf(Date).isRequired,
+  end: PropTypes.instanceOf(Date).isRequired,
+  style: PropTypes.shape({})
+}
+
+// eslint-disable-next-line no-unused-vars
+const Segmented = ({ time, title, start, end, tooltip, segments }) => {
+  const offsetX = time.toX(start)
+  return (
+    <div className="element segmented">
+      {
+        segments.map(segment =>
+          <Segment
+            key={segment.id}
+            {...segment}
+            offsetX={offsetX}
+            time={time}
+          />
+        )
+      }
+      <div className="element__title">
+        { title }
+      </div>
+    </div>
+  )
+}
+
+Segmented.propTypes = {
+  time: PropTypes.shape({}).isRequired,
+  title: PropTypes.string,
+  start: PropTypes.instanceOf(Date),
+  end: PropTypes.instanceOf(Date),
+  tooltip: PropTypes.string,
+  segments: PropTypes.arrayOf(
+    PropTypes.shape({ id: PropTypes.string.isRequired })
+  ).isRequired
+}
+
+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,29 +1,26 @@
 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 = (props) => {
+  const { type = 'Basic', id, start, end, time } = props
+  const Element = elements[type]
+  return (
+    <div
+      key={id}
+      className="track__element"
+      style={time.toStyleLeftAndWidth(start, end)}
+    >
+      <Element {...props} />
+    </div>
+  )
+}
 
-Element.propTypes = {
+TrackElement.propTypes = {
   time: PropTypes.shape({}).isRequired,
-  style: PropTypes.shape({}),
+  type: PropTypes.string,
   id: PropTypes.string.isRequired,
-  title: PropTypes.string,
   start: PropTypes.instanceOf(Date).isRequired,
-  end: PropTypes.instanceOf(Date).isRequired,
-  tooltip: PropTypes.string
+  end: PropTypes.instanceOf(Date).isRequired
 }
 
-export default Element
+export default TrackElement

src/scss/components/_element.scss

@@ -1,15 +1,14 @@
 .element {
-  $height: $react-timeline-track-height - 2 * $react-timeline-element-spacing;
-
   position: relative;
-  height: $height;
-  line-height: $height;
-  background: #06f;
-  color: #fff;
+  height: $react-timeline-element-height;
+  line-height: $react-timeline-element-height;
+  background: $react-timeline-element-text-background-color;
+  color: $react-timeline-element-text-color;
   text-align: center;
 }
 
-.element__content {
+.element__title {
+  position: relative;
   padding: 0 10px;
   overflow: hidden;
   white-space: nowrap;

src/scss/components/_track-key.scss

@@ -1,7 +1,4 @@
 .track-key {
-  // height: $react-timeline-track-height;
-  // background: #999;
-  // color: #fff;
 }
 
 .track-key__entry {

src/scss/components/elements/_segmented.scss

@@ -0,0 +1,6 @@
+.segmented__segment {
+  position: absolute;
+  top: 0;
+  height: $react-timeline-element-height;
+  line-height: $react-timeline-element-height;
+}

src/scss/style.scss

@@ -16,6 +16,10 @@ $react-timeline-sidebar-key-indent-width: 20px !default;
 // Track / Elements
 $react-timeline-track-height: 60px !default;
 $react-timeline-element-spacing: 10px !default;
+$react-timeline-element-text-color: '#fff' !default;
+$react-timeline-element-text-background-color: '#000' !default;
+$react-timeline-element-height: $react-timeline-track-height - 2 * $react-timeline-element-spacing;
+
 
 // Markers
 $react-timeline-marker-label-height: 50px !default;
@@ -35,6 +39,7 @@ $react-timeline-button-background-color-hover: #4c4c4c !default;
   font-family: $react-timeline-font-family;
   color: $react-timeline-text-color;
 
+  // Components
   @import 'components/controls';
   @import 'components/element';
   @import 'components/layout';
@@ -47,4 +52,7 @@ $react-timeline-button-background-color-hover: #4c4c4c !default;
   @import 'components/tracks';
   @import 'components/track-key';
   @import 'components/track-keys';
+
+  // Elements
+  @import 'components/elements/segmented';
 }