@r365/react-calendar-timeline - npm Package Compare versions

Comparing version 0.24.1 to 0.25.0-beta

lib/lib/headers/TimelineHeaders.js

@@ -27,2 +27,4 @@ 'use strict';
 
+var _TimelineStateContext = require('../timeline/TimelineStateContext');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,3 +52,3 @@
         display: 'flex',
-        width: '100%'
+        width: 'max-content'
       });
@@ -65,3 +67,3 @@ };
         overflow: 'hidden',
-        width: 'calc(100% - ' + (leftSidebarWidth + rightSidebarWidth) + 'px)'
+        width: _this.props.width
       });
@@ -119,3 +121,4 @@ };
   calendarHeaderStyle: _propTypes2.default.object,
-  calendarHeaderClassName: _propTypes2.default.string
+  calendarHeaderClassName: _propTypes2.default.string,
+  width: _propTypes2.default.number.isRequired
 };
@@ -131,19 +134,30 @@
   return _react2.default.createElement(
-    _HeadersContext.TimelineHeadersConsumer,
+    _TimelineStateContext.TimelineStateConsumer,
     null,
     function (_ref2) {
-      var leftSidebarWidth = _ref2.leftSidebarWidth,
-          rightSidebarWidth = _ref2.rightSidebarWidth,
-          registerScroll = _ref2.registerScroll;
+      var getTimelineState = _ref2.getTimelineState,
+          showPeriod = _ref2.showPeriod;
 
-      return _react2.default.createElement(TimelineHeaders, {
-        leftSidebarWidth: leftSidebarWidth,
-        rightSidebarWidth: rightSidebarWidth,
-        registerScroll: registerScroll,
-        children: children,
-        style: style,
-        className: className,
-        calendarHeaderStyle: calendarHeaderStyle,
-        calendarHeaderClassName: calendarHeaderClassName
-      });
+      var state = getTimelineState();
+      return _react2.default.createElement(
+        _HeadersContext.TimelineHeadersConsumer,
+        null,
+        function (_ref3) {
+          var leftSidebarWidth = _ref3.leftSidebarWidth,
+              rightSidebarWidth = _ref3.rightSidebarWidth,
+              registerScroll = _ref3.registerScroll;
+
+          return _react2.default.createElement(TimelineHeaders, {
+            leftSidebarWidth: leftSidebarWidth,
+            rightSidebarWidth: rightSidebarWidth,
+            registerScroll: registerScroll,
+            children: children,
+            style: style,
+            className: className,
+            calendarHeaderStyle: calendarHeaderStyle,
+            calendarHeaderClassName: calendarHeaderClassName,
+            width: state.width
+          });
+        }
+      );
     }
@@ -150,0 +164,0 @@ );

lib/lib/Timeline.js

@@ -130,3 +130,3 @@ 'use strict';
     _this.state = {
-      width: 1000,
+      width: _this.props.width ? _this.props.width : 1000,
       visibleTimeStart: visibleTimeStart,
@@ -167,3 +167,3 @@ visibleTimeEnd: visibleTimeEnd,
     value: function componentDidMount() {
-      this.resize(this.props);
+      if (!this.props.width) this.resize(this.props);
 
@@ -414,2 +414,4 @@ if (this.props.resizeDetector && this.props.resizeDetector.addListener) {
 
+      console.log("render", width);
+
       return _react2.default.createElement(
@@ -423,2 +425,3 @@ _TimelineStateContext.TimelineStateProvider,
           canvasWidth: canvasWidth,
+          width: width,
           showPeriod: this.showPeriod,
@@ -491,12 +494,15 @@ timelineUnit: minUnit,
 
+      // if the items or groups have changed we must re-render
+
+      var forceUpdate = items !== prevState.items || groups !== prevState.groups || nextProps.width !== prevState.width;
+
+      //get width from prop is passed or from state if not passed by user
+      var width = nextProps.width ? nextProps.width : prevState.width;
+
       // This is a gross hack pushing items and groups in to state only to allow
       // For the forceUpdate check
+      var derivedState = { items: items, groups: groups, width: width
 
-      var derivedState = { items: items, groups: groups
-
-        // if the items or groups have changed we must re-render
-      };var forceUpdate = items !== prevState.items || groups !== prevState.groups;
-
-      // We are a controlled component
-      if (visibleTimeStart && visibleTimeEnd) {
+        // We are a controlled component
+      };if (visibleTimeStart && visibleTimeEnd) {
         // Get the new canvas position
@@ -506,3 +512,3 @@ Object.assign(derivedState, (0, _calendar.calculateScrollCanvas)(visibleTimeStart, visibleTimeEnd, forceUpdate, items, groups, nextProps, prevState));
         // Calculate new item stack position as canvas may have changed
-        var canvasWidth = (0, _calendar.getCanvasWidth)(prevState.width);
+        var canvasWidth = (0, _calendar.getCanvasWidth)(width);
         Object.assign(derivedState, (0, _calendar.stackTimelineItems)(items, groups, canvasWidth, prevState.canvasTimeStart, prevState.canvasTimeEnd, nextProps.keys, nextProps.lineHeight, nextProps.itemHeightRatio, nextProps.stackItems, prevState.draggingItem, prevState.resizingItem, prevState.dragTime, prevState.resizingEdge, prevState.resizeTime, prevState.newGroupOrder));
@@ -642,3 +648,4 @@ }
 
-  children: _propTypes2.default.node
+  children: _propTypes2.default.node,
+  width: _propTypes2.default.number
 };
@@ -748,3 +755,3 @@ ReactCalendarTimeline.defaultProps = {
 
-    var width = containerWidth - props.sidebarWidth - props.rightSidebarWidth;
+    var width = props.width ? props.width : containerWidth - props.sidebarWidth - props.rightSidebarWidth;
     var canvasWidth = (0, _calendar.getCanvasWidth)(width);
@@ -751,0 +758,0 @@

lib/lib/timeline/TimelineStateContext.js

@@ -77,3 +77,4 @@ 'use strict';
           timelineWidth = _this$props.timelineWidth,
-          keys = _this$props.keys;
+          keys = _this$props.keys,
+          width = _this$props.width;
 
@@ -88,3 +89,4 @@ return {
         timelineWidth: timelineWidth,
-        keys: keys // REVIEW,
+        keys: keys,
+        width: width // REVIEW,
       };
@@ -148,4 +150,5 @@ };
   timelineWidth: _propTypes2.default.number.isRequired,
-  keys: _propTypes2.default.object.isRequired
+  keys: _propTypes2.default.object.isRequired,
+  width: _propTypes2.default.number.isRequired
 };
 var TimelineStateConsumer = exports.TimelineStateConsumer = Consumer;

package.json

 {
   "name": "@r365/react-calendar-timeline",
-  "version": "0.24.1",
+  "version": "0.25.0-beta",
   "description": "react calendar timeline",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/lib/headers/TimelineHeaders.js

@@ -6,2 +6,3 @@ import React from 'react'
 import { RIGHT_VARIANT, LEFT_VARIANT } from './constants'
+import { TimelineStateConsumer } from '../timeline/TimelineStateContext';
 class TimelineHeaders extends React.PureComponent {
@@ -15,3 +16,4 @@ static propTypes = {
     calendarHeaderStyle: PropTypes.object,
-    calendarHeaderClassName: PropTypes.string
+    calendarHeaderClassName: PropTypes.string,
+    width: PropTypes.number.isRequired
   }
@@ -29,3 +31,3 @@
       display: 'flex',
-      width: '100%'
+      width: 'max-content'
     }
@@ -44,3 +46,3 @@ }
       overflow: 'hidden',
-      width: `calc(100% - ${leftSidebarWidth + rightSidebarWidth}px)`
+      width: this.props.width
     }
@@ -94,18 +96,26 @@ }
 }) => (
-  <TimelineHeadersConsumer>
-    {({ leftSidebarWidth, rightSidebarWidth, registerScroll }) => {
+  <TimelineStateConsumer>
+    {({ getTimelineState, showPeriod }) => {
+      const state = getTimelineState()
       return (
-        <TimelineHeaders
-          leftSidebarWidth={leftSidebarWidth}
-          rightSidebarWidth={rightSidebarWidth}
-          registerScroll={registerScroll}
-          children={children}
-          style={style}
-          className={className}
-          calendarHeaderStyle={calendarHeaderStyle}
-          calendarHeaderClassName={calendarHeaderClassName}
-        />
+        <TimelineHeadersConsumer>
+          {({ leftSidebarWidth, rightSidebarWidth, registerScroll }) => {
+            return (
+              <TimelineHeaders
+                leftSidebarWidth={leftSidebarWidth}
+                rightSidebarWidth={rightSidebarWidth}
+                registerScroll={registerScroll}
+                children={children}
+                style={style}
+                className={className}
+                calendarHeaderStyle={calendarHeaderStyle}
+                calendarHeaderClassName={calendarHeaderClassName}
+                width={state.width}
+              />
+            )
+          }}
+        </TimelineHeadersConsumer>
       )
     }}
-  </TimelineHeadersConsumer>
+  </TimelineStateConsumer>
 )
@@ -112,0 +122,0 @@

src/lib/Timeline.js

@@ -17,2 +17,3 @@ import PropTypes from 'prop-types'
   getMinUnit,
+  getNextUnit,
   calculateTimeForXPosition,
@@ -163,3 +164,4 @@ calculateScrollCanvas,
 
-    children: PropTypes.node
+    children: PropTypes.node,
+    width: PropTypes.number,
   }
@@ -296,3 +298,3 @@
     this.state = {
-      width: 1000,
+      width: this.props.width? this.props.width: 1000,
       visibleTimeStart: visibleTimeStart,
@@ -340,3 +342,3 @@ visibleTimeEnd: visibleTimeEnd,
   componentDidMount() {
-    this.resize(this.props)
+    if(!this.props.width) this.resize(this.props)
 
@@ -361,10 +363,20 @@ if (this.props.resizeDetector && this.props.resizeDetector.addListener) {
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { visibleTimeStart, visibleTimeEnd, items, groups } = nextProps
+    const {
+      visibleTimeStart,
+      visibleTimeEnd,
+      items,
+      groups,
+    } = nextProps
 
+    
+    // if the items or groups have changed we must re-render
+    const forceUpdate = items !== prevState.items || groups !== prevState.groups || nextProps.width!==prevState.width
+    
+    //get width from prop is passed or from state if not passed by user
+    const width = nextProps.width? nextProps.width : prevState.width
+
     // This is a gross hack pushing items and groups in to state only to allow
     // For the forceUpdate check
-    let derivedState = { items, groups }
+    let derivedState = {items, groups, width}
 
-    // if the items or groups have changed we must re-render
-    const forceUpdate = items !== prevState.items || groups !== prevState.groups
 
@@ -388,3 +400,3 @@ // We are a controlled component
       // Calculate new item stack position as canvas may have changed
-      const canvasWidth = getCanvasWidth(prevState.width)
+      const canvasWidth = getCanvasWidth(width)
       Object.assign(derivedState, 
@@ -406,3 +418,3 @@ stackTimelineItems(
           prevState.resizeTime,
-          prevState.newGroupOrder
+          prevState.newGroupOrder,
         ))
@@ -454,3 +466,3 @@ }
 
-    let width = containerWidth - props.sidebarWidth - props.rightSidebarWidth
+    let width = props.width? props.width : containerWidth - props.sidebarWidth - props.rightSidebarWidth
     const canvasWidth = getCanvasWidth(width)
@@ -1011,2 +1023,4 @@ const { dimensionItems, height, groupHeights, groupTops } = stackTimelineItems(
 
+    console.log("render", width)
+
     return (
@@ -1019,2 +1033,3 @@ <TimelineStateProvider
         canvasWidth={canvasWidth}
+        width={width}
         showPeriod={this.showPeriod}
@@ -1021,0 +1036,0 @@ timelineUnit={minUnit}

src/lib/timeline/TimelineStateContext.js

@@ -48,2 +48,3 @@ import React from 'react'
     keys:PropTypes.object.isRequired,
+    width: PropTypes.number.isRequired
   }
@@ -74,2 +75,3 @@
       keys,
+      width,
     } = this.props
@@ -85,2 +87,3 @@ return {
       keys,
+      width,
     } // REVIEW,
@@ -87,0 +90,0 @@ }

src/lib/utility/calendar.js

@@ -349,2 +349,3 @@ import moment from 'moment'
   }
+
 }
@@ -351,0 +352,0 @@

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

Total package byte prevSize

470799

increased by0.39%

Lines of code

9865

increased by0.45%

No dependency changes