react-vertical-timeline-component - npm Package Compare versions

Comparing version 3.3.3 to 3.6.0

babel.config.js

 module.exports = {
   presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-env', { loose: true, targets: { node: 10 } }],
     '@babel/preset-react',
   ],
   plugins: ['@babel/plugin-syntax-dynamic-import'],
-  env: {
-    modules: {
-      presets: ['@babel/preset-env'],
-    },
-  },
 };

catalog.config.js

 /* eslint no-param-reassign: 0 */
 module.exports = {
   webpack: catalogWebpackConfig => {
+    // Remove uglify
+    catalogWebpackConfig.plugins.shift();
+
     catalogWebpackConfig.output.publicPath = '';
@@ -5,0 +8,0 @@ return catalogWebpackConfig;

dist-es6/VerticalTimeline.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.default = void 0;
@@ -17,15 +15,22 @@
 const VerticalTimeline = ({
-  animate,
-  className,
-  layout,
+  animate = true,
+  className = '',
+  layout = '2-columns',
+  lineColor = '#FFF',
   children
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  className: (0, _classnames.default)(className, 'vertical-timeline', {
-    'vertical-timeline--animate': animate,
-    'vertical-timeline--two-columns': layout === '2-columns',
-    'vertical-timeline--one-column-left': layout === '1-column' || layout === '1-column-left',
-    'vertical-timeline--one-column-right': layout === '1-column-right'
-  })
-}, children);
+}) => {
+  if (typeof window === 'object') {
+    document.documentElement.style.setProperty('--line-color', lineColor);
+  }
 
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(className, 'vertical-timeline', {
+      'vertical-timeline--animate': animate,
+      'vertical-timeline--two-columns': layout === '2-columns',
+      'vertical-timeline--one-column-left': layout === '1-column' || layout === '1-column-left',
+      'vertical-timeline--one-column-right': layout === '1-column-right'
+    })
+  }, children);
+};
+
 VerticalTimeline.propTypes = {
@@ -35,10 +40,6 @@ children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
   animate: _propTypes.default.bool,
-  layout: _propTypes.default.oneOf(['1-column-left', '1-column', '2-columns', '1-column-right'])
+  layout: _propTypes.default.oneOf(['1-column-left', '1-column', '2-columns', '1-column-right']),
+  lineColor: _propTypes.default.string
 };
-VerticalTimeline.defaultProps = {
-  animate: true,
-  className: '',
-  layout: '2-columns'
-};
 var _default = VerticalTimeline;
 exports.default = _default;

dist-es6/VerticalTimelineElement.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.default = void 0;
@@ -19,19 +17,22 @@
 const VerticalTimelineElement = ({
-  children,
-  className,
-  contentArrowStyle,
-  contentStyle,
-  date,
-  dateClassName,
-  icon,
-  iconClassName,
-  iconOnClick,
-  onTimelineElementClick,
-  iconStyle,
-  id,
-  position,
-  style,
-  textClassName,
-  intersectionObserverProps,
-  visible
+  children = '',
+  className = '',
+  contentArrowStyle = null,
+  contentStyle = null,
+  date = '',
+  dateClassName = '',
+  icon = null,
+  iconClassName = '',
+  iconOnClick = null,
+  onTimelineElementClick = null,
+  iconStyle = null,
+  id = '',
+  position = '',
+  style = null,
+  textClassName = '',
+  intersectionObserverProps = {
+    rootMargin: '0px 0px -40px 0px',
+    triggerOnce: true
+  },
+  visible = false
 }) => /*#__PURE__*/_react.default.createElement(_reactIntersectionObserver.InView, intersectionObserverProps, ({
@@ -95,24 +96,3 @@ inView,
 };
-VerticalTimelineElement.defaultProps = {
-  children: '',
-  className: '',
-  contentArrowStyle: null,
-  contentStyle: null,
-  icon: null,
-  iconClassName: '',
-  iconOnClick: null,
-  onTimelineElementClick: null,
-  iconStyle: null,
-  id: '',
-  style: null,
-  date: '',
-  dateClassName: '',
-  position: '',
-  textClassName: '',
-  visible: false,
-  intersectionObserverProps: {
-    rootMargin: '0px 0px -40px 0px'
-  }
-};
 var _default = VerticalTimelineElement;
 exports.default = _default;

dist-modules/VerticalTimeline.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.default = void 0;
@@ -16,7 +14,13 @@
 
-var VerticalTimeline = function VerticalTimeline(_ref) {
-  var animate = _ref.animate,
-      className = _ref.className,
-      layout = _ref.layout,
-      children = _ref.children;
+const VerticalTimeline = ({
+  animate = true,
+  className = '',
+  layout = '2-columns',
+  lineColor = '#FFF',
+  children
+}) => {
+  if (typeof window === 'object') {
+    document.documentElement.style.setProperty('--line-color', lineColor);
+  }
+
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -36,10 +40,6 @@ className: (0, _classnames.default)(className, 'vertical-timeline', {
   animate: _propTypes.default.bool,
-  layout: _propTypes.default.oneOf(['1-column-left', '1-column', '2-columns', '1-column-right'])
+  layout: _propTypes.default.oneOf(['1-column-left', '1-column', '2-columns', '1-column-right']),
+  lineColor: _propTypes.default.string
 };
-VerticalTimeline.defaultProps = {
-  animate: true,
-  className: '',
-  layout: '2-columns'
-};
 var _default = VerticalTimeline;
 exports.default = _default;

dist-modules/VerticalTimelineElement.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.default = void 0;
@@ -18,55 +16,56 @@
 
-var VerticalTimelineElement = function VerticalTimelineElement(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      contentArrowStyle = _ref.contentArrowStyle,
-      contentStyle = _ref.contentStyle,
-      date = _ref.date,
-      dateClassName = _ref.dateClassName,
-      icon = _ref.icon,
-      iconClassName = _ref.iconClassName,
-      iconOnClick = _ref.iconOnClick,
-      onTimelineElementClick = _ref.onTimelineElementClick,
-      iconStyle = _ref.iconStyle,
-      id = _ref.id,
-      position = _ref.position,
-      style = _ref.style,
-      textClassName = _ref.textClassName,
-      intersectionObserverProps = _ref.intersectionObserverProps,
-      visible = _ref.visible;
-  return /*#__PURE__*/_react.default.createElement(_reactIntersectionObserver.InView, intersectionObserverProps, function (_ref2) {
-    var inView = _ref2.inView,
-        ref = _ref2.ref;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref,
-      id: id,
-      className: (0, _classnames.default)(className, 'vertical-timeline-element', {
-        'vertical-timeline-element--left': position === 'left',
-        'vertical-timeline-element--right': position === 'right',
-        'vertical-timeline-element--no-children': children === ''
-      }),
-      style: style
-    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      // eslint-disable-line jsx-a11y/no-static-element-interactions
-      style: iconStyle,
-      onClick: iconOnClick,
-      className: (0, _classnames.default)(iconClassName, 'vertical-timeline-element-icon', {
-        'bounce-in': inView || visible,
-        'is-hidden': !(inView || visible)
-      })
-    }, icon), /*#__PURE__*/_react.default.createElement("div", {
-      style: contentStyle,
-      onClick: onTimelineElementClick,
-      className: (0, _classnames.default)(textClassName, 'vertical-timeline-element-content', {
-        'bounce-in': inView || visible,
-        'is-hidden': !(inView || visible)
-      })
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: contentArrowStyle,
-      className: "vertical-timeline-element-content-arrow"
-    }), children, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(dateClassName, 'vertical-timeline-element-date')
-    }, date))));
-  });
-};
+const VerticalTimelineElement = ({
+  children = '',
+  className = '',
+  contentArrowStyle = null,
+  contentStyle = null,
+  date = '',
+  dateClassName = '',
+  icon = null,
+  iconClassName = '',
+  iconOnClick = null,
+  onTimelineElementClick = null,
+  iconStyle = null,
+  id = '',
+  position = '',
+  style = null,
+  textClassName = '',
+  intersectionObserverProps = {
+    rootMargin: '0px 0px -40px 0px',
+    triggerOnce: true
+  },
+  visible = false
+}) => /*#__PURE__*/_react.default.createElement(_reactIntersectionObserver.InView, intersectionObserverProps, ({
+  inView,
+  ref
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  ref: ref,
+  id: id,
+  className: (0, _classnames.default)(className, 'vertical-timeline-element', {
+    'vertical-timeline-element--left': position === 'left',
+    'vertical-timeline-element--right': position === 'right',
+    'vertical-timeline-element--no-children': children === ''
+  }),
+  style: style
+}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+  // eslint-disable-line jsx-a11y/no-static-element-interactions
+  style: iconStyle,
+  onClick: iconOnClick,
+  className: (0, _classnames.default)(iconClassName, 'vertical-timeline-element-icon', {
+    'bounce-in': inView || visible,
+    'is-hidden': !(inView || visible)
+  })
+}, icon), /*#__PURE__*/_react.default.createElement("div", {
+  style: contentStyle,
+  onClick: onTimelineElementClick,
+  className: (0, _classnames.default)(textClassName, 'vertical-timeline-element-content', {
+    'bounce-in': inView || visible,
+    'is-hidden': !(inView || visible)
+  })
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: contentArrowStyle,
+  className: "vertical-timeline-element-content-arrow"
+}), children, /*#__PURE__*/_react.default.createElement("span", {
+  className: (0, _classnames.default)(dateClassName, 'vertical-timeline-element-date')
+}, date)))));
 
@@ -97,24 +96,3 @@ VerticalTimelineElement.propTypes = {
 };
-VerticalTimelineElement.defaultProps = {
-  children: '',
-  className: '',
-  contentArrowStyle: null,
-  contentStyle: null,
-  icon: null,
-  iconClassName: '',
-  iconOnClick: null,
-  onTimelineElementClick: null,
-  iconStyle: null,
-  id: '',
-  style: null,
-  date: '',
-  dateClassName: '',
-  position: '',
-  textClassName: '',
-  visible: false,
-  intersectionObserverProps: {
-    rootMargin: '0px 0px -40px 0px'
-  }
-};
 var _default = VerticalTimelineElement;
 exports.default = _default;

package.json

@@ -6,3 +6,3 @@ {
   "user": "stephane-monnot",
-  "version": "3.3.3",
+  "version": "3.6.0",
   "scripts": {
@@ -31,34 +31,33 @@ "start": "catalog start docs",
     "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.5.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.10.1",
-    "@babel/preset-es2015": "^7.0.0-beta.53",
     "@babel/preset-react": "^7.12.10",
     "@material-ui/core": "^4.10.0",
     "@material-ui/icons": "^4.9.1",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.0.1",
+    "babel-jest": "^27.3.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "catalog": "^3.0.0",
     "chai": "^4.1.2",
-    "clean-css-cli": "^4.1.10",
+    "clean-css-cli": "^5.4.2",
     "cross-env": "^7.0.2",
-    "del-cli": "^3.0.1",
+    "del-cli": "^4.0.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^7.1.0",
+    "eslint": "^8.0.1",
     "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.20.0",
-    "gh-pages": "^2.1.1",
+    "gh-pages": "^3.2.3",
     "git-prepush-hook": "^1.0.2",
-    "jest": "^26.0.1",
+    "jest": "^27.3.1",
     "jest-css-modules": "^2.1.0",
     "prettier": "^2.0.5",
     "purecss": "^2.0.3",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
     "react-github-corner": "^2.3.0",
@@ -65,0 +64,0 @@ "replace": "^1.2.0",

README.md

@@ -136,3 +136,6 @@ [![build status](https://secure.travis-ci.org/stephane-monnot/react-vertical-timeline.svg)](http://travis-ci.org/stephane-monnot/react-vertical-timeline) [![Dependency Status](https://david-dm.org/stephane-monnot/react-vertical-timeline.svg)](https://david-dm.org/stephane-monnot/react-vertical-timeline)
 
+### `lineColor={ String }`
 
+Choose a color for the timeline (default: `'white'`).
+
 ## VerticalTimelineElement Props
@@ -139,0 +142,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

37

decreased by-2.63%

Number of lines in readme file

238

increased by1.28%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

31756

decreased by-3.26%

Lines of code

295

decreased by-13.49%

No dependency changes