react-calendar-timeline - npm Package Compare versions

Comparing version 0.24.0-beta.1 to 0.24.0-beta.3

lib/lib/columns/Columns.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -20,4 +22,8 @@
 
+var _TimelineStateContext = require('../timeline/TimelineStateContext');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -29,2 +35,13 @@
 
+var passThroughPropTypes = {
+  canvasTimeStart: _propTypes2.default.number.isRequired,
+  canvasTimeEnd: _propTypes2.default.number.isRequired,
+  canvasWidth: _propTypes2.default.number.isRequired,
+  lineCount: _propTypes2.default.number.isRequired,
+  minUnit: _propTypes2.default.string.isRequired,
+  timeSteps: _propTypes2.default.object.isRequired,
+  height: _propTypes2.default.number.isRequired,
+  verticalLineClassNamesForTime: _propTypes2.default.func
+};
+
 var Columns = function (_Component) {
@@ -54,3 +71,4 @@ _inherits(Columns, _Component);
           height = _props.height,
-          verticalLineClassNamesForTime = _props.verticalLineClassNamesForTime;
+          verticalLineClassNamesForTime = _props.verticalLineClassNamesForTime,
+          getLeftOffsetFromDate = _props.getLeftOffsetFromDate;
 
@@ -62,8 +80,4 @@ var ratio = canvasWidth / (canvasTimeEnd - canvasTimeStart);
       (0, _calendar.iterateTimes)(canvasTimeStart, canvasTimeEnd, minUnit, timeSteps, function (time, nextTime) {
-        var left = Math.round((time.valueOf() - canvasTimeStart) * ratio, -2);
         var minUnitValue = time.get(minUnit === 'day' ? 'date' : minUnit);
         var firstOfType = minUnitValue === (minUnit === 'day' ? 1 : 0);
-        var lineWidth = firstOfType ? 2 : 1;
-        var labelWidth = Math.ceil((nextTime.valueOf() - time.valueOf()) * ratio) - lineWidth;
-        var leftPush = firstOfType ? -1 : 0;
 
@@ -79,2 +93,4 @@ var classNamesForTime = [];
 
+        var left = getLeftOffsetFromDate(time.valueOf());
+        var right = getLeftOffsetFromDate(nextTime.valueOf());
         lines.push(_react2.default.createElement('div', {
@@ -86,4 +102,4 @@ key: 'line-' + time.valueOf(),
             top: '0px',
-            left: left + leftPush + 'px',
-            width: labelWidth + 'px',
+            left: left + 'px',
+            width: right - left + 'px',
             height: height + 'px'
@@ -105,12 +121,22 @@ }
 
-Columns.propTypes = {
-  canvasTimeStart: _propTypes2.default.number.isRequired,
-  canvasTimeEnd: _propTypes2.default.number.isRequired,
-  canvasWidth: _propTypes2.default.number.isRequired,
-  lineCount: _propTypes2.default.number.isRequired,
-  minUnit: _propTypes2.default.string.isRequired,
-  timeSteps: _propTypes2.default.object.isRequired,
-  height: _propTypes2.default.number.isRequired,
-  verticalLineClassNamesForTime: _propTypes2.default.func
+Columns.propTypes = _extends({}, passThroughPropTypes, {
+  getLeftOffsetFromDate: _propTypes2.default.func.isRequired
+});
+
+
+var ColumnsWrapper = function ColumnsWrapper(_ref) {
+  var props = _objectWithoutProperties(_ref, []);
+
+  return _react2.default.createElement(
+    _TimelineStateContext.TimelineStateConsumer,
+    null,
+    function (_ref2) {
+      var getLeftOffsetFromDate = _ref2.getLeftOffsetFromDate;
+      return _react2.default.createElement(Columns, _extends({ getLeftOffsetFromDate: getLeftOffsetFromDate }, props));
+    }
+  );
 };
-exports.default = Columns;
+
+ColumnsWrapper.defaultProps = _extends({}, passThroughPropTypes);
+
+exports.default = ColumnsWrapper;

lib/lib/headers/CustomHeader.js

@@ -72,3 +72,3 @@ 'use strict';
     value: function shouldComponentUpdate(nextProps) {
-      if (nextProps.canvasTimeStart !== this.props.canvasTimeStart || nextProps.canvasTimeEnd !== this.props.canvasTimeEnd || nextProps.canvasWidth !== this.props.canvasWidth || nextProps.unit !== this.props.unit || nextProps.timeSteps !== this.props.timeSteps || nextProps.showPeriod !== this.props.showPeriod || nextProps.children !== this.props.children) {
+      if (nextProps.canvasTimeStart !== this.props.canvasTimeStart || nextProps.canvasTimeEnd !== this.props.canvasTimeEnd || nextProps.canvasWidth !== this.props.canvasWidth || nextProps.unit !== this.props.unit || nextProps.timeSteps !== this.props.timeSteps || nextProps.showPeriod !== this.props.showPeriod || nextProps.children !== this.props.children || nextProps.headerData !== this.props.headerData) {
         return true;
@@ -108,3 +108,4 @@ }
       var props = this.getStateAndHelpers();
-      return this.props.children(props, this.props.props);
+      var Renderer = this.props.children;
+      return _react2.default.createElement(Renderer, props);
     }
@@ -128,4 +129,5 @@ }]);
   showPeriod: _propTypes2.default.func.isRequired,
-  props: _propTypes2.default.object,
-  getLeftOffsetFromDate: _propTypes2.default.func.isRequired
+  headerData: _propTypes2.default.object,
+  getLeftOffsetFromDate: _propTypes2.default.func.isRequired,
+  height: _propTypes2.default.number.isRequired
 };
@@ -158,8 +160,2 @@
 
-  this.rootProps = {
-    style: {
-      position: 'relative'
-    }
-  };
-
   this.getRootProps = function () {
@@ -172,3 +168,4 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         position: 'relative',
-        width: _this2.props.canvasWidth
+        width: _this2.props.canvasWidth,
+        height: _this2.props.height
       })
@@ -221,3 +218,4 @@ };
         visibleTimeStart = _props.visibleTimeStart,
-        visibleTimeEnd = _props.visibleTimeEnd;
+        visibleTimeEnd = _props.visibleTimeEnd,
+        headerData = _props.headerData;
     //TODO: only evaluate on changing params
@@ -239,3 +237,4 @@
       getIntervalProps: _this2.getIntervalProps,
-      showPeriod: showPeriod
+      showPeriod: showPeriod,
+      data: headerData
     };
@@ -248,3 +247,4 @@ };
       unit = _ref.unit,
-      props = _ref.props;
+      headerData = _ref.headerData,
+      height = _ref.height;
   return _react2.default.createElement(
@@ -270,4 +270,5 @@ _TimelineStateContext.TimelineStateConsumer,
           }, timelineState, {
-            props: props,
-            getLeftOffsetFromDate: getLeftOffsetFromDate
+            headerData: headerData,
+            getLeftOffsetFromDate: getLeftOffsetFromDate,
+            height: height
           }));
@@ -283,5 +284,10 @@ }
   unit: _propTypes2.default.string,
-  props: _propTypes2.default.object
+  headerData: _propTypes2.default.object,
+  height: _propTypes2.default.number
 };
 
+CustomHeaderWrapper.defaultProps = {
+  height: 30
+};
+
 exports.default = CustomHeaderWrapper;

lib/lib/headers/DateHeader.js

@@ -9,4 +9,2 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -61,6 +59,6 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DateHeader.__proto__ || Object.getPrototypeOf(DateHeader)).call.apply(_ref, [this].concat(args))), _this), _this.getHeaderUnit = function () {
-      if (_this.props.unit) {
+      if (_this.props.unit === 'primaryHeader') {
+        return (0, _calendar.getNextUnit)(_this.props.timelineUnit);
+      } else if (_this.props.unit) {
         return _this.props.unit;
-      } else if (_this.props.primaryHeader) {
-        return (0, _calendar.getNextUnit)(_this.props.timelineUnit);
       }
@@ -76,2 +74,16 @@ return _this.props.timelineUnit;
   _createClass(DateHeader, [{
+    key: 'getLabelFormat',
+    value: function getLabelFormat(interval, unit, labelWidth) {
+      var labelFormat = this.props.labelFormat;
+
+      if (typeof labelFormat === 'string') {
+        var startTime = interval[0];
+        return startTime.format(labelFormat);
+      } else if (typeof labelFormat === 'function') {
+        return labelFormat(interval, unit, labelWidth);
+      } else {
+        throw new Error('labelFormat should be function or string');
+      }
+    }
+  }, {
     key: 'render',
@@ -82,12 +94,15 @@ value: function render() {
       var unit = this.getHeaderUnit();
-      var props = this.props.props;
+      var _props = this.props,
+          headerData = _props.headerData,
+          height = _props.height;
 
       return _react2.default.createElement(
         _CustomHeader2.default,
-        { unit: unit, props: props },
-        function (_ref2, props) {
+        { unit: unit, height: height, headerData: headerData },
+        function (_ref2) {
           var intervals = _ref2.headerContext.intervals,
               getRootProps = _ref2.getRootProps,
               getIntervalProps = _ref2.getIntervalProps,
-              showPeriod = _ref2.showPeriod;
+              showPeriod = _ref2.showPeriod,
+              data = _ref2.data;
 
@@ -109,7 +124,6 @@ var unit = _this2.getHeaderUnit();
                 intervalText: intervalText,
-                primaryHeader: !!_this2.props.primaryHeader,
-                secondaryHeader: !!_this2.props.secondaryHeader,
+                primaryHeader: _this2.props.unit === 'primaryHeader',
                 getIntervalProps: getIntervalProps,
                 intervalRenderer: _this2.props.intervalRenderer,
-                props: props
+                headerData: data
               });
@@ -121,18 +135,2 @@ })
     }
-  }, {
-    key: 'getLabelFormat',
-    value: function getLabelFormat(interval, unit, labelWidth) {
-      var labelFormat = this.props.labelFormat;
-
-      if (typeof labelFormat === 'string') {
-        var startTime = interval[0];
-        return startTime.format(labelFormat);
-      } else if ((typeof labelFormat === 'undefined' ? 'undefined' : _typeof(labelFormat)) === 'object') {
-        return formatLabel(interval, unit, labelWidth, labelFormat);
-      } else if (typeof labelFormat === 'function') {
-        return labelFormat(interval, unit, labelWidth);
-      } else {
-        throw new Error('labelFormat should be function, object or string');
-      }
-    }
   }]);
@@ -144,4 +142,2 @@
 DateHeader.propTypes = {
-  primaryHeader: _propTypes2.default.bool,
-  secondaryHeader: _propTypes2.default.bool,
   unit: _propTypes2.default.string,
@@ -153,3 +149,4 @@ style: _propTypes2.default.object,
   intervalRenderer: _propTypes2.default.func,
-  props: _propTypes2.default.object
+  headerData: _propTypes2.default.object,
+  height: _propTypes2.default.number
 };
@@ -159,5 +156,3 @@
 var DateHeaderWrapper = function DateHeaderWrapper(_ref3) {
-  var primaryHeader = _ref3.primaryHeader,
-      secondaryHeader = _ref3.secondaryHeader,
-      unit = _ref3.unit,
+  var unit = _ref3.unit,
       labelFormat = _ref3.labelFormat,
@@ -167,3 +162,4 @@ style = _ref3.style,
       intervalRenderer = _ref3.intervalRenderer,
-      props = _ref3.props;
+      headerData = _ref3.headerData,
+      height = _ref3.height;
   return _react2.default.createElement(
@@ -178,4 +174,2 @@ _TimelineStateContext.TimelineStateConsumer,
         timelineUnit: timelineState.timelineUnit,
-        primaryHeader: primaryHeader,
-        secondaryHeader: secondaryHeader,
         unit: unit,
@@ -186,3 +180,4 @@ labelFormat: labelFormat,
         intervalRenderer: intervalRenderer,
-        props: props
+        headerData: headerData,
+        height: height
       });
@@ -196,12 +191,10 @@ }
   className: _propTypes2.default.string,
-  primaryHeader: _propTypes2.default.bool,
-  secondaryHeader: _propTypes2.default.bool,
   unit: _propTypes2.default.string,
   labelFormat: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.objectOf(_propTypes2.default.objectOf(_propTypes2.default.string)), _propTypes2.default.string]),
   intervalRenderer: _propTypes2.default.func,
-  props: _propTypes2.default.object
+  headerData: _propTypes2.default.object,
+  height: _propTypes2.default.number
 };
 
 DateHeaderWrapper.defaultProps = {
-  secondaryHeader: true,
   labelFormat: formatLabel
@@ -208,0 +201,0 @@ };

lib/lib/headers/Interval.js

@@ -45,17 +45,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Interval.__proto__ || Object.getPrototypeOf(Interval)).call.apply(_ref, [this].concat(args))), _this), _this.getIntervalStyle = function () {
-      return {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: _this.props.secondaryHeader && !_this.props.primaryHeader ? 'rgb(240, 240, 240)' : 'initial',
-        height: '100%',
-        borderLeft: _this.props.primaryHeader ? '1px solid #bbb' : '2px solid #bbb',
-        borderRight: _this.props.primaryHeader ? '1px solid #bbb' : 'none',
-        borderBottom: '1px solid #bbb',
-        color: _this.props.primaryHeader ? '#fff' : 'initial',
-        cursor: 'pointer',
-        fontSize: '14px'
-      };
-    }, _this.onIntervalClick = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Interval.__proto__ || Object.getPrototypeOf(Interval)).call.apply(_ref, [this].concat(args))), _this), _this.onIntervalClick = function () {
       var _this$props = _this.props,
@@ -93,15 +79,20 @@ primaryHeader = _this$props.primaryHeader,
           intervalRenderer = _props.intervalRenderer,
-          props = _props.props;
+          headerData = _props.headerData;
 
-      if (intervalRenderer) return intervalRenderer({
-        getIntervalProps: this.getIntervalProps,
-        intervalContext: {
-          interval: interval,
-          intervalText: intervalText
-        }
-      }, props);
+      var Renderer = intervalRenderer;
+      if (Renderer) {
+        return _react2.default.createElement(Renderer, {
+          getIntervalProps: this.getIntervalProps,
+          intervalContext: {
+            interval: interval,
+            intervalText: intervalText
+          },
+          data: headerData
+        });
+      }
+
       return _react2.default.createElement(
         'div',
-        this.getIntervalProps({
-          style: this.getIntervalStyle()
+        _extends({}, this.getIntervalProps({}), {
+          className: 'rct-dateHeader ' + (this.props.primaryHeader ? 'rct-dateHeader-primary' : '')
         }),
@@ -127,6 +118,5 @@ _react2.default.createElement(
   primaryHeader: _propTypes2.default.bool.isRequired,
-  secondaryHeader: _propTypes2.default.bool.isRequired,
   getIntervalProps: _propTypes2.default.func.isRequired,
-  props: _propTypes2.default.object
+  headerData: _propTypes2.default.object
 };
 exports.default = Interval;

lib/lib/headers/SidebarHeader.js

@@ -57,3 +57,4 @@ 'use strict';
       return {
-        getRootProps: _this.getRootProps
+        getRootProps: _this.getRootProps,
+        data: _this.props.headerData
       };
@@ -67,3 +68,4 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
       var props = this.getStateAndHelpers();
-      return this.props.children(props, this.props.props);
+      var Renderer = this.props.children;
+      return _react2.default.createElement(Renderer, props);
     }
@@ -80,3 +82,3 @@ }]);
   variant: _propTypes2.default.string,
-  props: _propTypes2.default.object
+  headerData: _propTypes2.default.object
 };
@@ -88,3 +90,3 @@
       variant = _ref2.variant,
-      props = _ref2.props;
+      headerData = _ref2.headerData;
   return _react2.default.createElement(
@@ -102,3 +104,3 @@ _HeadersContext.TimelineHeadersConsumer,
         variant: variant,
-        props: props
+        headerData: headerData
       });
@@ -112,3 +114,3 @@ }
   variant: _propTypes2.default.string,
-  props: _propTypes2.default.object
+  headerData: _propTypes2.default.object
 };
@@ -115,0 +117,0 @@

lib/lib/headers/TimelineHeaders.js

@@ -44,6 +44,3 @@ 'use strict';
     _this.getRootStyle = function () {
-      return _extends({
-        background: '#c52020',
-        borderBottom: '1px solid #bbb'
-      }, _this.props.style, {
+      return _extends({}, _this.props.style, {
         display: 'flex',
@@ -60,5 +57,3 @@ width: '100%'
 
-      return _extends({
-        border: '1px solid #bbb'
-      }, calendarHeaderStyle, {
+      return _extends({}, calendarHeaderStyle, {
         overflow: 'hidden',
@@ -69,2 +64,8 @@ width: 'calc(100% - ' + (leftSidebarWidth + rightSidebarWidth) + 'px)'
 
+    _this.handleRootRef = function (element) {
+      if (_this.props.headerRef) {
+        _this.props.headerRef(element);
+      }
+    };
+
     return _this;
@@ -96,4 +97,6 @@ }
         {
+          ref: this.handleRootRef,
+
           style: this.getRootStyle(),
-          className: this.props.className
+          className: 'rct-header-root ' + this.props.className
         },
@@ -106,3 +109,3 @@ leftSidebarHeader,
             style: this.getCalendarHeaderStyle(),
-            className: this.props.calendarHeaderClassName
+            className: 'rct-calendar-header ' + this.props.calendarHeaderClassName
           },
@@ -126,3 +129,4 @@ calendarHeaders
   calendarHeaderStyle: _propTypes2.default.object,
-  calendarHeaderClassName: _propTypes2.default.string
+  calendarHeaderClassName: _propTypes2.default.string,
+  headerRef: _propTypes2.default.func
 };
@@ -163,5 +167,6 @@
   calendarHeaderStyle: _propTypes2.default.object,
-  calendarHeaderClassName: _propTypes2.default.string
+  calendarHeaderClassName: _propTypes2.default.string,
+  headerRef: _propTypes2.default.func
 };
 
 exports.default = TimelineHeadersWrapper;

lib/lib/Timeline.js

@@ -327,3 +327,3 @@ 'use strict';
     key: 'childrenWithProps',
-    value: function childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, headerHeight, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps) {
+    value: function childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps) {
       if (!this.props.children) {
@@ -352,3 +352,2 @@ return null;
         height: height,
-        headerHeight: headerHeight,
         minUnit: minUnit,
@@ -374,4 +373,2 @@ timeSteps: timeSteps
           groups = _props.groups,
-          headerLabelGroupHeight = _props.headerLabelGroupHeight,
-          headerLabelHeight = _props.headerLabelHeight,
           sidebarWidth = _props.sidebarWidth,
@@ -399,3 +396,2 @@ rightSidebarWidth = _props.rightSidebarWidth,
       var minUnit = (0, _calendar.getMinUnit)(zoom, width, timeSteps);
-      var headerHeight = headerLabelGroupHeight + headerLabelHeight;
 
@@ -469,6 +465,6 @@ var isInteractingWithItem = !!draggingItem || !!resizingItem;
                     this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops),
-                    this.columns(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight),
+                    this.columns(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height),
                     this.rows(canvasWidth, groupHeights, groups),
                     this.infoLabel(),
-                    this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, headerHeight, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps)
+                    this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps)
                   )
@@ -523,7 +519,4 @@ ),
   minResizeWidth: _propTypes2.default.number,
-  stickyOffset: _propTypes2.default.number,
   stickyHeader: _propTypes2.default.bool,
   lineHeight: _propTypes2.default.number,
-  headerLabelGroupHeight: _propTypes2.default.number,
-  headerLabelHeight: _propTypes2.default.number,
   itemHeightRatio: _propTypes2.default.number,
@@ -648,7 +641,4 @@
   minResizeWidth: 20,
-  stickyOffset: 0,
   stickyHeader: true,
   lineHeight: 30,
-  headerLabelGroupHeight: 30,
-  headerLabelHeight: 30,
   itemHeightRatio: 0.65,
@@ -997,3 +987,3 @@
       _react2.default.createElement(_SidebarHeader2.default, null),
-      _react2.default.createElement(_DateHeader2.default, { primaryHeader: true }),
+      _react2.default.createElement(_DateHeader2.default, { unit: 'primaryHeader' }),
       _react2.default.createElement(_DateHeader2.default, null),
@@ -1000,0 +990,0 @@ _this4.props.rightSidebarWidth ? _react2.default.createElement(_SidebarHeader2.default, { variant: 'right' }) : null

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.24.0-beta.1",
+  "version": "0.24.0-beta.3",
   "description": "react calendar timeline",
@@ -142,3 +142,3 @@ "main": "lib/index.js",
     "react-router-dom": "^4.1.1",
-    "react-testing-library": "^5.1.0",
+    "react-testing-library": "^6.0.3",
     "rimraf": "^2.6.2",
@@ -145,0 +145,0 @@ "sass-loader": "^7.0.3",

README.md

@@ -180,15 +180,2 @@ # React Calendar Timeline
 
-## stickyOffset
-
-At what height from the top of the screen should we start "sticking" the header (i.e. position: sticky)? This is useful if for example you already have
-a sticky navbar and want to push the timeline header down further. Defaults `0`.
-
-## stickyHeader
-
-Specify whether you want the timeline header to be "sticky". Pass `false` if you want the header to fix at top of element and not fix when you scroll down the page. Defaults to `true`
-
-## headerRef
-
-Ref callback that gets a DOM reference to the header element. See [FAQ below](#the-timeline-header-doesnt-fix-to-the-top-of-the-container-when-i-scroll-down).
-
 ## lineHeight
@@ -198,10 +185,2 @@
 
-## headerLabelGroupHeight
-
-Height of the top header line. Default `30`
-
-## headerLabelHeight
-
-Height of the bottom header line. Default `30`
-
 ## itemHeightRatio
@@ -337,75 +316,3 @@
 
-## headerLabelFormats and subHeaderLabelFormats
 
-The formats passed to moment to render times in the header and subheader. Defaults to these:
-
-```js
-import {
-  defaultHeaderLabelFormats,
-  defaultSubHeaderLabelFormats
-} from 'react-calendar-timeline'
-
-defaultHeaderLabelFormats ==
-  {
-    yearShort: 'YY',
-    yearLong: 'YYYY',
-    monthShort: 'MM/YY',
-    monthMedium: 'MM/YYYY',
-    monthMediumLong: 'MMM YYYY',
-    monthLong: 'MMMM YYYY',
-    dayShort: 'L',
-    dayLong: 'dddd, LL',
-    hourShort: 'HH',
-    hourMedium: 'HH:00',
-    hourMediumLong: 'L, HH:00',
-    hourLong: 'dddd, LL, HH:00',
-    time: 'LLL'
-  }
-
-defaultSubHeaderLabelFormats ==
-  {
-    yearShort: 'YY',
-    yearLong: 'YYYY',
-    monthShort: 'MM',
-    monthMedium: 'MMM',
-    monthLong: 'MMMM',
-    dayShort: 'D',
-    dayMedium: 'dd D',
-    dayMediumLong: 'ddd, Do',
-    dayLong: 'dddd, Do',
-    hourShort: 'HH',
-    hourLong: 'HH:00',
-    minuteShort: 'mm',
-    minuteLong: 'HH:mm'
-  }
-```
-
-For US time formats (AM/PM), use these:
-
-```js
-import {
-  defaultHeaderLabelFormats,
-  defaultSubHeaderLabelFormats
-} from 'react-calendar-timeline'
-
-const usHeaderLabelFormats = Object.assign({}, defaultSubHeaderLabelFormats, {
-  hourShort: 'h A',
-  hourMedium: 'h A',
-  hourMediumLong: 'L, h A',
-  hourLong: 'dddd, LL, h A'
-})
-
-const usSubHeaderLabelFormats = Object.assign(
-  {},
-  defaultSubHeaderLabelFormats,
-  {
-    hourShort: 'h A',
-    hourLong: 'h A',
-    minuteLong: 'h:mm A'
-  }
-)
-```
-
-... and then pass these as `headerLabelFormats` and `subHeaderLabelFormats`
-
 ## onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas)
@@ -811,3 +718,3 @@
     </SidebarHeader>
-    <DateHeader primaryHeader />
+    <DateHeader unit="primaryHeader" />
     <DateHeader />
@@ -833,4 +740,4 @@ </TimelineHeaders>
 | `calendarHeaderClassName`| `string`| applied to the root component of the calendar headers -scrolable div- `DateHeader` and `CustomHeader`)|
+| `headerRef` | `function` | used to get the ref of the header element
 
-
 ### `SidebarHeader`
@@ -846,2 +753,3 @@
 | `children` | `Function`| function as a child component to render the header|
+| `headerData` | `any`|  Contextual data to be passed to the item renderer as a data prop |
 
@@ -859,2 +767,3 @@ #### Child function renderer
 | `getRootProps`   | `function(props={})` | returns the props you should apply to the root div element.|
+| `data`   | `any` | Contextual data passed by `headerData` prop|
 
@@ -885,8 +794,8 @@ * `getRootProps` The returned props are:
     </SidebarHeader>
-    <SidebarHeader variant="right">
-      {({ getRootProps }) => {
-        return <div {...getRootProps()}>Right</div>
+    <SidebarHeader variant="right" headerData={{someData: 'extra'}}>
+      {({ getRootProps, data }) => {
+        return <div {...getRootProps()}>Right {data.someData}</div>
       }}
     </SidebarHeader>
-    <DateHeader primaryHeader />
+    <DateHeader unit="primaryHeader" />
     <DateHeader />
@@ -897,2 +806,4 @@ </TimelineHeaders>
 
+_Note_ : the Child function renderer can be a component or a function for convenience 
+
 ### `DateHeader`
@@ -909,35 +820,43 @@
 | `className` | `string`| applied to the root of the header|
-| `unit`| `second`, `minute`, `hour`, `day`, `week`, `month`, `year` | intervals between columns |
-| `primaryHeader`| `boolean` | main header with interval unit larger than timeline unit by 1 |
-| `secondaryHeader` | `boolean` (`true` by default) | sub header with interval equal to timeline unit |
-| `labelFormat` | `Function` or `object` or `string`| controls the how to format the interval label |
-| `intervalRenderer`| `Function`| render prop to render each interval in the header |
+| `unit`| `second`, `minute`, `hour`, `day`, `week`, `month`, `year` or `primaryHeader` | intervals between columns |
+| `labelFormat` | `Function` or `string`| controls the how to format the interval label |
+| `intervalRenderer`| `Function`| render prop to render each interval in the header 
+| `headerData` | `any`|  Contextual data to be passed to the item renderer as a data prop |
+| `height` | `number` default (30)|  height of the header in pixels |
 
+_Note_: passing `primaryHeader` to unit the header will act as the main header with interval unit larger than timeline unit by 1
+
 #### Interval unit
 
-intervals are decided through three props: `unit`, `primaryHeader` and `secondaryHeader` (default true). `secondaryHeader` is the default if no prop are set. The unit of the intervals will be the same the timeline and a special style is matches the default style of the secondary header from when no custom headers are applied. 
+intervals are decided through the prop: `unit`. By default, the unit of the intervals will be the same the timeline.
 
-If `primaryHeader` is set to true, it will override `secondaryHeader` and the unit if the timeline will be larger by 1 of the timeline unit. The default style will match the primary header from when no custom headers are applied.
+If `primaryHeader` is passed to unit, it will override the unit with a unit a unit larger by 1 of the timeline unit. 
 
-If `unit` is set, it will override both `primaryHeader` and `secondaryHeader`. The unit of the header will be the unit passed though the prop and can be any `unit of time` from `momentjs`. The default style will match the primary header from when no custom headers are applied.
+If `unit` is set, the unit of the header will be the unit passed though the prop and can be any `unit of time` from `momentjs`. 
 
 #### Label format
 
-To format each interval label you can use 3 types of props to format which are:
+To format each interval label you can use 2 types of props to format which are:
 
 - `string`: if a string was passed it will be passed to `startTime` method `format` which is a `momentjs` object  .
 
-- `object`: this will give you more flexibility to format the label with respect to `labelWidth`. Internally the `startTime` will be formated with the string corresponding to `formatObject[unit][range]`
 
-  The object will be in the following type: 
+- `Function`: This is the more powerful method and offers the most control over what is rendered. The returned `string` will be rendered inside the interval
+
   ```typescript
-  type unit = `second` | `minute` | `hour` | `day` | `week` | `month` | `year`
-  interface LabelFormat {
-    [unit]: {
-      long: string,
-      mediumLong: string,
-      medium: string,
-      short: string
-    }
-  }
+    type Unit = `second` | `minute` | `hour` | `day` | `month` | `year`
+  ([startTime, endTime] : [Moment, Moment], unit: Unit, labelWidth: number, formatOptions: LabelFormat = defaultFormat ) => string
+  ```
+##### Default format
+
+by default we provide a responsive format for the dates based on the label width. it follows the following rules:
+
+  The `long`, `mediumLong`, `medium` and `short` will be be decided through the `labelWidth` value according to where it lays upon the following scale:
+
+  ```
+  |-----`short`-----50px-----`medium`-----100px-----`mediumLong`-----150px--------`long`-----
+  ```
+
+
+  ```typescript
   // default format object
@@ -978,15 +897,5 @@ const format : LabelFormat = {
 
-  The `long`, `mediumLong`, `medium` and `short` will be be decided through the `labelWidth` value according to where it lays upon the following scale:
+_Note_: this is only an implementation of the function param. You can do this on your own easily
 
-  ```
-  |-----`short`-----50px-----`medium`-----100px-----`mediumLong`-----150px--------`long`-----
-  ```
 
-- `Function`: This is the more powerful method and offers the most control over what is rendered. The returned `string` will be rendered inside the interval
-
-  ```typescript
-    type Unit = `second` | `minute` | `hour` | `day` | `month` | `year`
-  ([startTime, endTime] : [Moment, Moment], unit: Unit, labelWidth: number, formatOptions: LabelFormat = defaultFormat ) => string
-  ```
-
 #### intervalRenderer
@@ -998,2 +907,4 @@
 
+_Note_ : the renderProp can be a component or a function for convenience 
+
 ##### interval context
@@ -1005,3 +916,3 @@
 | ------------------ | -------- | ---------------------------------------------------- |
-| `interval`    | `array : [Moment, Moment]` | an tuple array conating two moment object the first `startTime` and the second `endTime`|
+| `interval`    | `object : {startTime, endTime, labelWidth, left}` | an object containing data related to the interval|
 | `intervalText` | `string` | the string returned from `labelFormat` prop |
@@ -1029,2 +940,6 @@
 
+##### data
+
+data passed through headerData 
+
 #### example
@@ -1046,3 +961,3 @@
     </SidebarHeader>
-    <DateHeader primaryHeader />
+    <DateHeader unit="primaryHeader" />
     <DateHeader />
@@ -1053,5 +968,7 @@ <DateHeader
       style={{ height: 50 }}
-      intervalRenderer={({ getIntervalProps, intervalContext }) => {
+      data={{someData: 'example'}}
+      intervalRenderer={({ getIntervalProps, intervalContext, data }) => {
         return <div {...getIntervalProps()}>
           {intervalContext.intervalText}
+          {data.example}
         </div>
@@ -1074,2 +991,4 @@ }}
 | `children` | `Function`| function as a child component to render the header|
+| `headerData` | `any`|  Contextual data to be passed to the item renderer as a data prop |
+| `height` | `number` default (30)|  height of the header in pixels |
 
@@ -1086,2 +1005,4 @@ #### unit
 
+_Note_ : the Child function renderer can be a component or a function for convenience 
+
 ```
@@ -1102,3 +1023,5 @@ ({
   getIntervalProps: this.getIntervalProps,
-  showPeriod
+  showPeriod,
+  //contextual data passed through headerData
+  data,
 })=> React.Node
@@ -1116,7 +1039,7 @@ ```
 | ------------------ | -------- | ---------------------------------------------------- |
-| `timelineWidth`    | `array : [Moment, Moment]` | an tuple array conating two moment object the first `startTime` and the second `endTime`|
-| `visibleTimeStart` | `string` | the string returned from `labelFormat` prop |
-| `visibleTimeEnd`    | `array : [Moment, Moment]` | an tuple array conating two moment object the first `startTime` and the second `endTime`|
-| `canvasTimeStart` | `string` | the string returned from `labelFormat` prop |
-| `canvasTimeEnd`    | `array : [Moment, Moment]` | an tuple array conating two moment object the first `startTime` and the second `endTime`|
+| `timelineWidth`    | `number` | width of timeline|
+| `visibleTimeStart` | `number` | unix milliseconds of start visible time |
+| `visibleTimeEnd`    | `number` | unix milliseconds of end visible time|
+| `canvasTimeStart` | `number` | unix milliseconds of start buffer time |
+| `canvasTimeEnd`    | `number` |unix milliseconds of end buffer time|
 
@@ -1158,3 +1081,5 @@ ###### Header context
 
+##### data:
 
+pass through the `headerData` prop content 
 
@@ -1177,5 +1102,5 @@ #### example
     </SidebarHeader>
-    <DateHeader primaryHeader />
+    <DateHeader unit="primaryHeader" />
     <DateHeader />
-    <CustomHeader unit="year">
+    <CustomHeader headerData={{someData: 'data'}} unit="year">
       {({
@@ -1185,3 +1110,4 @@ headerContext: { intervals },
         getIntervalProps,
-        showPeriod
+        showPeriod,
+        data,
       }) => {
@@ -1240,7 +1166,6 @@ return (
 
-To use it, you need to add two props to the `<Timeline />` component:
+To use it, you need to add a props to the `<Timeline />` component:
 
 ```jsx
 rightSidebarWidth={150}
-rightSidebarContent={<p>Second filter</p>}
 ```
@@ -1258,29 +1183,8 @@
 
+If you are using Custom Headers then you need to add `SidebarHeader` component under `TimelineHeader` with variant `right`
+
 ## The timeline header doesn't fix to the top of the container when I scroll down.
 
-There are two causes of this:
+you need to add sticky to the header like [this example](https://github.com/FoothillSolutions/react-calendar-timeline/tree/dest-build/examples#sticky-header).
 
-* you are passing `stickyHeader={false}` to the timeline component. The header by default has sticky behavior unless you tell it not to using this prop.
-* the browser you are viewing the timeline in doesn't support `position: sticky`. In this scenario, you will need to polyfill this behavior using the `headerRef`.
-
-In this example, we use [stickyfill](https://github.com/wilddeer/stickyfill) as our sticky polyfill
-
-```jsx
-// add a handler in your parent component that accepts a DOM element
-// with this element, pass the element into a polyfill library
-
-handleHeaderRef = (el) => {
-  // polyfill dom element with stickyfill
-  Stickyfill.addOne(el)
-}
-
-// in render, pass this handler to the `headerRef` prop:
-
-render() {
-  <Timeline
-  //other props
-  headerRef={this.handleHeaderRef}
-
-  />
-}
 ```
@@ -1287,0 +1191,0 @@

src/lib/columns/Columns.js

@@ -5,13 +5,19 @@ import PropTypes from 'prop-types'
 import { iterateTimes } from '../utility/calendar'
+import { TimelineStateConsumer } from '../timeline/TimelineStateContext'
 
-export default class Columns extends Component {
+const passThroughPropTypes = {
+  canvasTimeStart: PropTypes.number.isRequired,
+  canvasTimeEnd: PropTypes.number.isRequired,
+  canvasWidth: PropTypes.number.isRequired,
+  lineCount: PropTypes.number.isRequired,
+  minUnit: PropTypes.string.isRequired,
+  timeSteps: PropTypes.object.isRequired,
+  height: PropTypes.number.isRequired,
+  verticalLineClassNamesForTime: PropTypes.func
+}
+
+class Columns extends Component {
   static propTypes = {
-    canvasTimeStart: PropTypes.number.isRequired,
-    canvasTimeEnd: PropTypes.number.isRequired,
-    canvasWidth: PropTypes.number.isRequired,
-    lineCount: PropTypes.number.isRequired,
-    minUnit: PropTypes.string.isRequired,
-    timeSteps: PropTypes.object.isRequired,
-    height: PropTypes.number.isRequired,
-    verticalLineClassNamesForTime: PropTypes.func
+    ...passThroughPropTypes,
+    getLeftOffsetFromDate: PropTypes.func.isRequired
   }
@@ -41,3 +47,4 @@
       height,
-      verticalLineClassNamesForTime
+      verticalLineClassNamesForTime,
+      getLeftOffsetFromDate
     } = this.props
@@ -54,9 +61,4 @@ const ratio = canvasWidth / (canvasTimeEnd - canvasTimeStart)
       (time, nextTime) => {
-        const left = Math.round((time.valueOf() - canvasTimeStart) * ratio, -2)
         const minUnitValue = time.get(minUnit === 'day' ? 'date' : minUnit)
         const firstOfType = minUnitValue === (minUnit === 'day' ? 1 : 0)
-        const lineWidth = firstOfType ? 2 : 1
-        const labelWidth =
-          Math.ceil((nextTime.valueOf() - time.valueOf()) * ratio) - lineWidth
-        const leftPush = firstOfType ? -1 : 0
 
@@ -80,2 +82,4 @@ let classNamesForTime = []
 
+        const left = getLeftOffsetFromDate(time.valueOf())
+        const right = getLeftOffsetFromDate(nextTime.valueOf())
         lines.push(
@@ -88,4 +92,4 @@ <div
               top: '0px',
-              left: `${left + leftPush}px`,
-              width: `${labelWidth}px`,
+              left: `${left}px`,
+              width: `${right - left}px`,
               height: `${height}px`
@@ -100,2 +104,18 @@ }}
   }
-}
+}
+
+const ColumnsWrapper = ({ ...props }) => {
+  return (
+    <TimelineStateConsumer>
+      {({ getLeftOffsetFromDate }) => (
+        <Columns getLeftOffsetFromDate={getLeftOffsetFromDate} {...props} />
+      )}
+    </TimelineStateConsumer>
+  )
+}
+
+ColumnsWrapper.defaultProps = {
+  ...passThroughPropTypes
+}
+
+export default ColumnsWrapper

src/lib/headers/CustomHeader.js

@@ -20,4 +20,5 @@ import React from 'react'
     showPeriod: PropTypes.func.isRequired,
-    props: PropTypes.object,
-    getLeftOffsetFromDate: PropTypes.func.isRequired
+    headerData: PropTypes.object,
+    getLeftOffsetFromDate: PropTypes.func.isRequired,
+    height: PropTypes.number.isRequired,
   }
@@ -59,3 +60,4 @@ constructor(props) {
       nextProps.showPeriod !== this.props.showPeriod ||
-      nextProps.children !== this.props.children
+      nextProps.children !== this.props.children ||
+      nextProps.headerData !== this.props.headerData
     ) {
@@ -128,8 +130,2 @@ return true
 
-  rootProps = {
-    style: {
-      position: 'relative'
-    }
-  }
-
   getRootProps = (props = {}) => {
@@ -140,3 +136,4 @@ const { style } = props
         position: 'relative',
-        width: this.props.canvasWidth
+        width: this.props.canvasWidth,
+        height: this.props.height,
       })
@@ -181,3 +178,4 @@ }
       visibleTimeStart,
-      visibleTimeEnd
+      visibleTimeEnd,
+      headerData,
     } = this.props
@@ -199,3 +197,4 @@ //TODO: only evaluate on changing params
       getIntervalProps: this.getIntervalProps,
-      showPeriod
+      showPeriod,
+      data: headerData,
     }
@@ -206,7 +205,8 @@ }
     const props = this.getStateAndHelpers()
-    return this.props.children(props, this.props.props)
+    const Renderer = this.props.children
+    return <Renderer {...props}/>
   }
 }
 
-const CustomHeaderWrapper = ({ children, unit, props }) => (
+const CustomHeaderWrapper = ({ children, unit, headerData, height }) => (
   <TimelineStateConsumer>
@@ -224,4 +224,5 @@ {({ getTimelineState, showPeriod, getLeftOffsetFromDate }) => {
               {...timelineState}
-              props={props}
+              headerData={headerData}
               getLeftOffsetFromDate={getLeftOffsetFromDate}
+              height={height}
             />
@@ -238,5 +239,10 @@ )}
   unit: PropTypes.string,
-  props: PropTypes.object
+  headerData: PropTypes.object,
+  height: PropTypes.number,
 }
 
+CustomHeaderWrapper.defaultProps = {
+  height: 30,
+}
+
 export default CustomHeaderWrapper

src/lib/headers/DateHeader.js

@@ -11,4 +11,2 @@ import React from 'react'
   static propTypes = {
-    primaryHeader: PropTypes.bool,
-    secondaryHeader: PropTypes.bool,
     unit: PropTypes.string,
@@ -24,10 +22,11 @@ style: PropTypes.object,
     intervalRenderer: PropTypes.func,
-    props: PropTypes.object,
+    headerData: PropTypes.object,
+    height: PropTypes.number,
   }
 
   getHeaderUnit = () => {
-    if (this.props.unit) {
+    if (this.props.unit === 'primaryHeader') {
+      return getNextUnit(this.props.timelineUnit)
+    } else if (this.props.unit) {
       return this.props.unit
-    } else if (this.props.primaryHeader) {
-      return getNextUnit(this.props.timelineUnit)
     }
@@ -37,7 +36,26 @@ return this.props.timelineUnit
 
+  getRootStyle = () => {
+    return {
+      height: 30,
+      ...this.props.style
+    }
+  }
+
+  getLabelFormat(interval, unit, labelWidth) {
+    const { labelFormat } = this.props
+    if (typeof labelFormat === 'string') {
+      const startTime = interval[0]
+      return startTime.format(labelFormat)
+    } else if (typeof labelFormat === 'function') {
+      return labelFormat(interval, unit, labelWidth)
+    } else {
+      throw new Error('labelFormat should be function or string')
+    }
+  }
+
   render() {
     const unit = this.getHeaderUnit()
-    const {props} = this.props;
+    const { headerData, height } = this.props
     return (
-      <CustomHeader unit={unit} props={props}>
+      <CustomHeader unit={unit} height={height} headerData={headerData}>
         {({
@@ -47,4 +65,5 @@ headerContext: { intervals },
           getIntervalProps,
-          showPeriod
-        }, props) => {
+          showPeriod,
+          data
+        }) => {
           const unit = this.getHeaderUnit()
@@ -54,3 +73,3 @@
             <div
-            data-testid={`dateHeader`}
+              data-testid={`dateHeader`}
               className={this.props.className}
@@ -72,7 +91,6 @@ {...getRootProps({ style: this.getRootStyle() })}
                     intervalText={intervalText}
-                    primaryHeader={!!this.props.primaryHeader}
-                    secondaryHeader={!!this.props.secondaryHeader}
+                    primaryHeader={this.props.unit === 'primaryHeader'}
                     getIntervalProps={getIntervalProps}
                     intervalRenderer={this.props.intervalRenderer}
-                    props={props}
+                    headerData={data}
                   />
@@ -87,28 +105,5 @@ )
   }
-
-  getRootStyle = () => {
-    return {
-      height: 30,
-      ...this.props.style
-    }
-  }
-
-  getLabelFormat(interval, unit, labelWidth) {
-    const { labelFormat } = this.props
-    if (typeof labelFormat === 'string') {
-      const startTime = interval[0]
-      return startTime.format(labelFormat)
-    } else if (typeof labelFormat === 'object') {
-      return formatLabel(interval, unit, labelWidth, labelFormat)
-    } else if (typeof labelFormat === 'function') {
-      return labelFormat(interval, unit, labelWidth)
-    } else {
-      throw new Error('labelFormat should be function, object or string')
-    }
-  }
 }
 
 const DateHeaderWrapper = ({
-  primaryHeader,
-  secondaryHeader,
   unit,
@@ -119,3 +114,4 @@ labelFormat,
   intervalRenderer,
-  props,
+  headerData,
+  height,
 }) => (
@@ -128,4 +124,2 @@ <TimelineStateConsumer>
           timelineUnit={timelineState.timelineUnit}
-          primaryHeader={primaryHeader}
-          secondaryHeader={secondaryHeader}
           unit={unit}
@@ -136,3 +130,4 @@ labelFormat={labelFormat}
           intervalRenderer={intervalRenderer}
-          props={props}
+          headerData={headerData}
+          height={height}
         />
@@ -147,4 +142,2 @@ )
   className: PropTypes.string,
-  primaryHeader: PropTypes.bool,
-  secondaryHeader: PropTypes.bool,
   unit: PropTypes.string,
@@ -157,7 +150,7 @@ labelFormat: PropTypes.oneOfType([
   intervalRenderer: PropTypes.func,
-  props: PropTypes.object,
+  headerData: PropTypes.object,
+  height: PropTypes.number,
 }
 
 DateHeaderWrapper.defaultProps = {
-  secondaryHeader: true,
   labelFormat: formatLabel
@@ -164,0 +157,0 @@ }

src/lib/headers/Interval.js

@@ -14,28 +14,6 @@ import React from 'react'
     primaryHeader: PropTypes.bool.isRequired,
-    secondaryHeader: PropTypes.bool.isRequired,
     getIntervalProps: PropTypes.func.isRequired,
-    props: PropTypes.object
+    headerData: PropTypes.object
   }
 
-  getIntervalStyle = () => {
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor:
-        this.props.secondaryHeader && !this.props.primaryHeader
-          ? 'rgb(240, 240, 240)'
-          : 'initial',
-      height: '100%',
-      borderLeft: this.props.primaryHeader
-        ? '1px solid #bbb'
-        : '2px solid #bbb',
-      borderRight: this.props.primaryHeader ? '1px solid #bbb' : 'none',
-      borderBottom: '1px solid #bbb',
-      color: this.props.primaryHeader ? '#fff' : 'initial',
-      cursor: 'pointer',
-      fontSize: '14px'
-    }
-  }
-
   onIntervalClick = () => {
@@ -53,3 +31,3 @@ const { primaryHeader, interval, unit, showPeriod } = this.props
 
-  getIntervalProps = (props={}) => {
+  getIntervalProps = (props = {}) => {
     return {
@@ -65,11 +43,17 @@ ...this.props.getIntervalProps({
   render() {
-    const { intervalText, interval, intervalRenderer, props } = this.props
-    if (intervalRenderer)
-      return intervalRenderer({
-        getIntervalProps: this.getIntervalProps,
-        intervalContext: {
-          interval,
-          intervalText
-        }
-      }, props)
+    const { intervalText, interval, intervalRenderer, headerData } = this.props
+    const Renderer = intervalRenderer
+    if (Renderer) {
+      return (
+        <Renderer
+          getIntervalProps={this.getIntervalProps}
+          intervalContext={{
+            interval,
+            intervalText
+          }}
+          data={headerData}
+        />
+      )
+    }
+
     return (
@@ -79,4 +63,4 @@ <div
         {...this.getIntervalProps({
-          style: this.getIntervalStyle()
         })}
+        className={`rct-dateHeader ${this.props.primaryHeader? 'rct-dateHeader-primary' : ''}`}
       >
@@ -83,0 +67,0 @@ <span>{intervalText}</span>

src/lib/headers/SidebarHeader.js

@@ -12,3 +12,3 @@ import React from 'react'
     variant: PropTypes.string,
-    props: PropTypes.object
+    headerData: PropTypes.object
   }
@@ -32,3 +32,4 @@
     return {
-      getRootProps: this.getRootProps
+      getRootProps: this.getRootProps,
+      data: this.props.headerData,
     }
@@ -39,7 +40,8 @@ }
     const props = this.getStateAndHelpers()
-    return this.props.children(props, this.props.props)
+    const Renderer = this.props.children
+    return <Renderer {...props}/>
   }
 }
 
-const SidebarWrapper = ({ children, variant, props }) => (
+const SidebarWrapper = ({ children, variant, headerData }) => (
   <TimelineHeadersConsumer>
@@ -53,3 +55,3 @@ {({ leftSidebarWidth, rightSidebarWidth }) => {
           variant={variant}
-          props={props}
+          headerData={headerData}
         />
@@ -64,3 +66,3 @@ )
   variant: PropTypes.string,
-  props: PropTypes.object
+  headerData: PropTypes.object
 }
@@ -67,0 +69,0 @@

src/lib/headers/TimelineHeaders.js

@@ -14,3 +14,4 @@ import React from 'react'
     calendarHeaderStyle: PropTypes.object,
-    calendarHeaderClassName: PropTypes.string
+    calendarHeaderClassName: PropTypes.string,
+    headerRef: PropTypes.func,
   }
@@ -24,4 +25,2 @@
     return {
-      background: '#c52020',
-      borderBottom: '1px solid #bbb',
       ...this.props.style,
@@ -40,3 +39,2 @@ display: 'flex',
     return {
-      border: '1px solid #bbb',
       ...calendarHeaderStyle,
@@ -48,2 +46,8 @@ overflow: 'hidden',
 
+  handleRootRef = (element) => {
+    if(this.props.headerRef){
+      this.props.headerRef(element)
+    }
+  }
+
   render() {
@@ -69,5 +73,6 @@ let rightSidebarHeader
       <div
+        ref={this.handleRootRef}
         data-testid="headerRootDiv"
         style={this.getRootStyle()}
-        className={this.props.className}
+        className={`rct-header-root ${this.props.className}`}
       >
@@ -78,3 +83,3 @@ {leftSidebarHeader}
           style={this.getCalendarHeaderStyle()}
-          className={this.props.calendarHeaderClassName}
+          className={`rct-calendar-header ${this.props.calendarHeaderClassName}`}
           data-testid="headerContainer"
@@ -119,5 +124,6 @@ >
   calendarHeaderStyle: PropTypes.object,
-  calendarHeaderClassName: PropTypes.string
+  calendarHeaderClassName: PropTypes.string,
+  headerRef: PropTypes.func,
 }
 
 export default TimelineHeadersWrapper

src/lib/Timeline.js

@@ -46,7 +46,4 @@ import PropTypes from 'prop-types'
     minResizeWidth: PropTypes.number,
-    stickyOffset: PropTypes.number,
     stickyHeader: PropTypes.bool,
     lineHeight: PropTypes.number,
-    headerLabelGroupHeight: PropTypes.number,
-    headerLabelHeight: PropTypes.number,
     itemHeightRatio: PropTypes.number,
@@ -172,7 +169,4 @@
     minResizeWidth: 20,
-    stickyOffset: 0,
     stickyHeader: true,
     lineHeight: 30,
-    headerLabelGroupHeight: 30,
-    headerLabelHeight: 30,
     itemHeightRatio: 0.65,
@@ -628,2 +622,3 @@
       canvasTimeStart,
+      
       canvasTimeEnd,
@@ -877,3 +872,2 @@ getCanvasWidth(width),
     height,
-    headerHeight,
     visibleTimeStart,
@@ -910,3 +904,2 @@ visibleTimeEnd,
       height: height,
-      headerHeight: headerHeight,
       minUnit: minUnit,
@@ -940,3 +933,3 @@ timeSteps: timeSteps
         <SidebarHeader />
-        <DateHeader primaryHeader />
+        <DateHeader unit="primaryHeader" />
         <DateHeader />
@@ -957,4 +950,2 @@ {this.props.rightSidebarWidth ? <SidebarHeader variant="right"/> : null}
       groups,
-      headerLabelGroupHeight,
-      headerLabelHeight,
       sidebarWidth,
@@ -979,3 +970,2 @@ rightSidebarWidth,
     const minUnit = getMinUnit(zoom, width, timeSteps)
-    const headerHeight = headerLabelGroupHeight + headerLabelHeight
 
@@ -1066,3 +1056,2 @@ const isInteractingWithItem = !!draggingItem || !!resizingItem
                       height,
-                      headerHeight
                     )}
@@ -1079,3 +1068,2 @@ {this.rows(canvasWidth, groupHeights, groups)}
                       height,
-                      headerHeight,
                       visibleTimeStart,
@@ -1082,0 +1070,0 @@ visibleTimeEnd,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

9324

increased by0.08%

Worsened metrics

Total package byte prevSize

440050

decreased by-0.52%

Number of lines in readme file

1245

decreased by-7.16%

No dependency changes