react-event-timeline - npm Package Compare versions

Comparing version 1.4.2 to 1.5.0

dist/styles.js

@@ -20,3 +20,2 @@ 'use strict';
     top: 0,
-    left: 18,
     height: '100%',
@@ -26,2 +25,8 @@ width: 2,
   },
+  'containerBefore--left': {
+    left: '16px'
+  },
+  'containerBefore--right': {
+    right: '14px'
+  },
   containerAfter: {
@@ -34,5 +39,12 @@ content: '',
     position: 'relative',
-    margin: '10px 0',
-    paddingLeft: 45
+    margin: '10px 0'
   },
+  'event--left': {
+    paddingLeft: 45,
+    textAlign: 'left'
+  },
+  'event--right': {
+    paddingRight: 45,
+    textAlign: 'right'
+  },
   eventAfter: {
@@ -46,3 +58,2 @@ clear: 'both',
     top: 0,
-    left: 0,
     borderRadius: '50%',
@@ -56,2 +67,8 @@ width: 30,
   },
+  'eventType--left': {
+    left: 0
+  },
+  'eventType--right': {
+    right: 0
+  },
   materialIcons: {
@@ -98,6 +115,12 @@ display: 'flex',
   actionButtons: {
-    float: 'right',
-    textAlign: 'right',
     marginTop: -20
   },
+  'actionButtons--left': {
+    float: 'left',
+    textAlign: 'left'
+  },
+  'actionButtons--right': {
+    float: 'right',
+    textAlign: 'right'
+  },
   card: {
@@ -104,0 +127,0 @@ boxShadow: 'rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px',

dist/Timeline.js

@@ -25,2 +25,4 @@ 'use strict';
 
+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"); } }
@@ -44,2 +46,14 @@
     value: function render() {
+      var _props = this.props,
+          _props$orientation = _props.orientation,
+          orientation = _props$orientation === undefined ? 'left' : _props$orientation,
+          children = _props.children,
+          _props$style = _props.style,
+          style = _props$style === undefined ? {} : _props$style,
+          otherProps = _objectWithoutProperties(_props, ['orientation', 'children', 'style']);
+
+      var childrenWithProps = _react2.default.Children.map(children, function (child) {
+        return _react2.default.cloneElement(child, { orientation: orientation });
+      });
+      var leftOrRight = orientation === 'right' ? _extends({}, _styles2.default['containerBefore--right']) : _extends({}, _styles2.default['containerBefore--left']);
       return _react2.default.createElement(
@@ -50,5 +64,5 @@ 'div',
           'section',
-          _extends({ style: _styles2.default.container }, this.props),
-          _react2.default.createElement('div', { style: _styles2.default.containerBefore }),
-          this.props.children,
+          _extends({ style: _extends({}, _styles2.default.container, style) }, otherProps),
+          _react2.default.createElement('div', { style: _extends({}, _styles2.default.containerBefore, leftOrRight) }),
+          childrenWithProps,
           _react2.default.createElement('div', { style: _styles2.default.containerAfter })
@@ -64,5 +78,7 @@ )
 Timeline.propTypes = {
-  children: _propTypes2.default.node.isRequired
+  children: _propTypes2.default.node.isRequired,
+  orientation: _propTypes2.default.string,
+  style: _propTypes2.default.object
 };
 
 exports.default = Timeline;

dist/TimelineEvent.js

@@ -44,5 +44,6 @@ 'use strict';
     key: 'mergeNotificationStyle',
-    value: function mergeNotificationStyle(iconColor, bubbleStyle) {
+    value: function mergeNotificationStyle(iconColor, bubbleStyle, orientation) {
       var iconColorStyle = iconColor ? _extends({}, _styles2.default.eventType, { color: iconColor, borderColor: iconColor }) : _styles2.default.eventType;
-      return _extends({}, iconColorStyle, bubbleStyle);
+      var leftOrRight = orientation === 'right' ? _extends({}, _styles2.default['eventType--right']) : _extends({}, _styles2.default['eventType--left']);
+      return _extends({}, iconColorStyle, bubbleStyle, leftOrRight);
     }
@@ -92,10 +93,13 @@ }, {
           subtitleStyle = _props.subtitleStyle,
-          otherProps = _objectWithoutProperties(_props, ['createdAt', 'title', 'subtitle', 'contentStyle', 'iconStyle', 'bubbleStyle', 'buttons', 'icon', 'iconColor', 'container', 'cardHeaderStyle', 'titleStyle', 'subtitleStyle']);
+          orientation = _props.orientation,
+          otherProps = _objectWithoutProperties(_props, ['createdAt', 'title', 'subtitle', 'contentStyle', 'iconStyle', 'bubbleStyle', 'buttons', 'icon', 'iconColor', 'container', 'cardHeaderStyle', 'titleStyle', 'subtitleStyle', 'orientation']);
 
+      var leftOrRightEvent = orientation === 'right' ? _extends({}, _styles2.default['event--right']) : _extends({}, _styles2.default['event--left']);
+      var leftOrRightButton = orientation === 'left' ? _extends({}, _styles2.default['actionButtons--right']) : _extends({}, _styles2.default['actionButtons--left']);
       return _react2.default.createElement(
         'div',
-        { style: _styles2.default.event },
+        { style: _extends({}, _styles2.default.event, leftOrRightEvent) },
         _react2.default.createElement(
           'div',
-          { style: this.mergeNotificationStyle(iconColor, bubbleStyle) },
+          { style: this.mergeNotificationStyle(iconColor, bubbleStyle, orientation) },
           _react2.default.createElement(
@@ -131,3 +135,3 @@ 'span',
               'div',
-              { style: _styles2.default.actionButtons },
+              { style: _extends({}, _styles2.default.actionButtons, leftOrRightButton) },
               buttons
@@ -162,2 +166,3 @@ )
   bubbleStyle: _propTypes2.default.object,
+  orientation: _propTypes2.default.string,
   contentStyle: _propTypes2.default.object,
@@ -178,5 +183,6 @@ cardHeaderStyle: _propTypes2.default.object,
   titleStyle: {},
-  subtitleStyle: {}
+  subtitleStyle: {},
+  orientation: 'left'
 };
 
 exports.default = TimelineEvent;

package.json

@@ -91,3 +91,3 @@ {
   },
-  "version": "1.4.2"
+  "version": "1.5.0"
 }

README.md

@@ -66,6 +66,7 @@ # react-event-timeline
 
-| Name      | Type   | Description                              |
-| --------- | ------ | ---------------------------------------- |
-| className | string | The css class name of timeline container|
-| style     | object | Override inline styles of timeline container |
+| Name           | Type   | Description                              |
+| -------------- | ------ | ---------------------------------------- |
+| className      | string | The css class name of timeline container|
+| style          | object | Override inline styles of timeline container |
+| orientatoin    | string | Display the timeline on `right` or `left`. Default: `left` |
 
@@ -72,0 +73,0 @@ ### TimelineEvent

No alert changes

Improved metrics

Total package byte prevSize

30164

increased by8.23%

Lines of code

454

increased by10.46%

Number of lines in readme file

124

increased by0.81%

No dependency changes