react-vertical-timeline-component
Advanced tools
Comparing version 3.3.3 to 3.6.0
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'], | ||
}, | ||
}, | ||
}; |
/* eslint no-param-reassign: 0 */ | ||
module.exports = { | ||
webpack: catalogWebpackConfig => { | ||
// Remove uglify | ||
catalogWebpackConfig.plugins.shift(); | ||
catalogWebpackConfig.output.publicPath = ''; | ||
@@ -5,0 +8,0 @@ return catalogWebpackConfig; |
"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; |
"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; |
"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; |
"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; |
@@ -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", |
@@ -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 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis 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 riskPackage 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
37
238
1
31756
295