@oddle.me/react-calendar-timeline 0.29.6 → 0.29.7

package/lib/lib/Timeline.js

@@ -39,6 +39,8 @@ var _TimelineHeaders = _interopRequireDefault(require("./headers/TimelineHeaders
 
 var _DateHeader = _interopRequireDefault(require("./headers/DateHeader"));
 
+var _moment = _interopRequireDefault(require("moment"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -166,10 +168,6 @@ function (_Component) {
 
       if (scrollY) {
         _this.outerScrollElm.scrollTop += scrollY;
-
-        if (_this.props.onVerticalScroll) {
-          _this.props.onVerticalScroll(_this.outerScrollElm.scrollTop);
-        }
       }
     });
 
@@ -500,6 +498,8 @@ function (_Component) {
   _createClass(ReactCalendarTimeline, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this3 = this;
+
       this.resize(this.props);
 
       if (this.props.resizeDetector && this.props.resizeDetector.addListener) {
@@ -513,6 +513,10 @@ function (_Component) {
       if (this.props.initialScrollTop) {
         this.outerScrollElm.scrollTop = this.props.initialScrollTop;
       }
+
+      this.outerScrollElm.addEventListener('scroll', function () {
+        _this3.props.onVerticalScroll(_this3.outerScrollElm.scrollTop);
+      });
     }
   }, {
     key: "componentWillUnmount",
@@ -644,7 +648,7 @@ function (_Component) {
   }, {
     key: "childrenWithProps",
     value: function childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (!this.props.children) {
         return null;
@@ -672,7 +676,7 @@ function (_Component) {
         timeSteps: timeSteps
       };
       return _react["default"].Children.map(childArray, function (child) {
-        if (!_this3.isTimelineHeader(child)) {
+        if (!_this4.isTimelineHeader(child)) {
           return _react["default"].cloneElement(child, childProps);
         } else {
           return null;
@@ -701,7 +705,7 @@ function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$props3 = this.props,
           items = _this$props3.items,
@@ -757,7 +761,7 @@ function (_Component) {
       }, _react["default"].createElement("div", {
         style: this.props.style,
         ref: function ref(el) {
-          return _this4.container = el;
+          return _this5.container = el;
         },
         className: "react-calendar-timeline ".concat(this.props.className)
       }, this.renderHeaders(), _react["default"].createElement("div", {

package/lib/lib/headers/CustomDateHeader.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Interval = _interopRequireDefault(require("./Interval"));
 
+var _moment = _interopRequireDefault(require("moment"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _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; }; return _extends.apply(this, arguments); }
@@ -20,6 +22,7 @@ function CustomDateHeader(_ref) {
       getRootProps = _ref.getRootProps,
       getIntervalProps = _ref.getIntervalProps,
       showPeriod = _ref.showPeriod,
+      markerTimeProps = _ref.markerTimeProps,
       _ref$data = _ref.data,
       style = _ref$data.style,
       intervalRenderer = _ref$data.intervalRenderer,
@@ -44,5 +47,11 @@ function CustomDateHeader(_ref) {
       intervalRenderer: intervalRenderer,
       headerData: headerData
     });
-  }));
+  }), markerTimeProps && _react["default"].createElement("div", {
+    className: 'rct-header-time-marker ' + markerTimeProps.className,
+    style: {
+      position: 'absolute',
+      left: markerTimeProps.left
+    }
+  }, markerTimeProps.formatter ? markerTimeProps.formatter(markerTimeProps.time) : (0, _moment["default"])(markerTimeProps.time).format('hh:mm aa')));
 }

package/lib/lib/headers/CustomHeader.js

@@ -107,6 +107,26 @@ function (_React$Component) {
       };
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getMarkerTimeProps", function () {
+      var _this$props = _this.props,
+          markerTime = _this$props.markerTime,
+          getLeftOffsetFromDate = _this$props.getLeftOffsetFromDate;
+
+      if (!markerTime) {
+        return null;
+      }
+
+      var className = markerTime.className,
+          time = markerTime.time,
+          formatter = markerTime.formatter;
+      return {
+        className: className,
+        time: time,
+        formatter: formatter,
+        left: getLeftOffsetFromDate(time)
+      };
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getIntervalStyle", function (_ref2) {
       var left = _ref2.left,
           labelWidth = _ref2.labelWidth,
@@ -119,15 +139,15 @@ function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "getStateAndHelpers", function () {
-      var _this$props = _this.props,
-          canvasTimeStart = _this$props.canvasTimeStart,
-          canvasTimeEnd = _this$props.canvasTimeEnd,
-          unit = _this$props.unit,
-          showPeriod = _this$props.showPeriod,
-          timelineWidth = _this$props.timelineWidth,
-          visibleTimeStart = _this$props.visibleTimeStart,
-          visibleTimeEnd = _this$props.visibleTimeEnd,
-          headerData = _this$props.headerData; //TODO: only evaluate on changing params
+      var _this$props2 = _this.props,
+          canvasTimeStart = _this$props2.canvasTimeStart,
+          canvasTimeEnd = _this$props2.canvasTimeEnd,
+          unit = _this$props2.unit,
+          showPeriod = _this$props2.showPeriod,
+          timelineWidth = _this$props2.timelineWidth,
+          visibleTimeStart = _this$props2.visibleTimeStart,
+          visibleTimeEnd = _this$props2.visibleTimeEnd,
+          headerData = _this$props2.headerData; //TODO: only evaluate on changing params
 
       return {
         timelineContext: {
@@ -144,7 +164,8 @@ function (_React$Component) {
         getRootProps: _this.getRootProps,
         getIntervalProps: _this.getIntervalProps,
         showPeriod: showPeriod,
-        data: headerData
+        data: headerData,
+        markerTimeProps: _this.getMarkerTimeProps()
       };
     });
 
@@ -175,7 +196,7 @@ function (_React$Component) {
   _createClass(CustomHeader, [{
     key: "shouldComponentUpdate",
     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 || nextProps.headerData !== this.props.headerData) {
+      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 || nextProps.markerTime !== this.props.markerTime) {
         return true;
       }
 
@@ -234,14 +255,16 @@ _defineProperty(CustomHeader, "propTypes", {
   showPeriod: _propTypes["default"].func.isRequired,
   headerData: _propTypes["default"].object,
   getLeftOffsetFromDate: _propTypes["default"].func.isRequired,
-  height: _propTypes["default"].number.isRequired
+  height: _propTypes["default"].number.isRequired,
+  markerTime: _propTypes["default"].object
 });
 
 var CustomHeaderWrapper = function CustomHeaderWrapper(_ref3) {
   var children = _ref3.children,
       unit = _ref3.unit,
       headerData = _ref3.headerData,
-      height = _ref3.height;
+      height = _ref3.height,
+      markerTime = _ref3.markerTime;
   return _react["default"].createElement(_TimelineStateContext.TimelineStateConsumer, null, function (_ref4) {
     var getTimelineState = _ref4.getTimelineState,
         showPeriod = _ref4.showPeriod,
@@ -257,7 +280,8 @@ var CustomHeaderWrapper = function CustomHeaderWrapper(_ref3) {
       }, timelineState, {
         headerData: headerData,
         getLeftOffsetFromDate: getLeftOffsetFromDate,
-        height: height
+        height: height,
+        markerTime: markerTime
       }));
     });
   });

package/lib/lib/headers/DateHeader.js

@@ -120,12 +120,14 @@ function (_React$Component) {
       var unit = this.getHeaderUnit();
       var _this$props = this.props,
           headerData = _this$props.headerData,
-          height = _this$props.height;
+          height = _this$props.height,
+          markerTime = _this$props.markerTime;
       return _react["default"].createElement(_CustomHeader["default"], {
         unit: unit,
         height: height,
         headerData: this.getHeaderData(this.props.intervalRenderer, this.getRootStyle(this.props.style), this.props.className, this.getLabelFormat, this.props.unit, this.props.headerData),
-        children: _CustomDateHeader.CustomDateHeader
+        children: _CustomDateHeader.CustomDateHeader,
+        markerTime: markerTime
       });
     }
   }]);
@@ -141,7 +143,8 @@ _defineProperty(DateHeader, "propTypes", {
   labelFormat: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].objectOf(_propTypes["default"].objectOf(_propTypes["default"].string)), _propTypes["default"].string]).isRequired,
   intervalRenderer: _propTypes["default"].func,
   headerData: _propTypes["default"].object,
-  height: _propTypes["default"].number
+  height: _propTypes["default"].number,
+  markerTime: _propTypes["default"].object
 });
 
 var DateHeaderWrapper = function DateHeaderWrapper(_ref) {
@@ -151,7 +154,8 @@ var DateHeaderWrapper = function DateHeaderWrapper(_ref) {
       className = _ref.className,
       intervalRenderer = _ref.intervalRenderer,
       headerData = _ref.headerData,
-      height = _ref.height;
+      height = _ref.height,
+      markerTime = _ref.markerTime;
   return _react["default"].createElement(_TimelineStateContext.TimelineStateConsumer, null, function (_ref2) {
     var getTimelineState = _ref2.getTimelineState;
     var timelineState = getTimelineState();
@@ -163,7 +167,8 @@ var DateHeaderWrapper = function DateHeaderWrapper(_ref) {
       className: className,
       intervalRenderer: intervalRenderer,
       headerData: headerData,
-      height: height
+      height: height,
+      markerTime: markerTime
     });
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddle.me/react-calendar-timeline",
-  "version": "0.29.6",
+  "version": "0.29.7",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "types": "src/global.d.ts",

package/src/global.d.ts

@@ -409,6 +409,11 @@ declare module '@oddle.me/react-calendar-timeline' {
       | ((props: SidebarHeaderChildrenFnProps<Data>) => React.ReactNode)
       | undefined
     height?: number | undefined
+    markerTime?: {
+      className?: string
+      time: Date
+      formatter?: (date: Date) => string
+    }
   }
   export class DateHeader<Data = any> extends React.Component<
     DateHeaderProps<Data>