react-vertical-timeline-component/dist-es6/VerticalTimelineElement.js

Vertical timeline for React.js

/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { InView } from 'react-intersection-observer';
var VerticalTimelineElement = function VerticalTimelineElement(_ref) {
  var _ref$children = _ref.children,
    children = _ref$children === void 0 ? '' : _ref$children,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$contentArrowStyl = _ref.contentArrowStyle,
    contentArrowStyle = _ref$contentArrowStyl === void 0 ? null : _ref$contentArrowStyl,
    _ref$contentStyle = _ref.contentStyle,
    contentStyle = _ref$contentStyle === void 0 ? null : _ref$contentStyle,
    _ref$date = _ref.date,
    date = _ref$date === void 0 ? '' : _ref$date,
    _ref$dateClassName = _ref.dateClassName,
    dateClassName = _ref$dateClassName === void 0 ? '' : _ref$dateClassName,
    _ref$icon = _ref.icon,
    icon = _ref$icon === void 0 ? null : _ref$icon,
    _ref$iconClassName = _ref.iconClassName,
    iconClassName = _ref$iconClassName === void 0 ? '' : _ref$iconClassName,
    _ref$iconOnClick = _ref.iconOnClick,
    iconOnClick = _ref$iconOnClick === void 0 ? null : _ref$iconOnClick,
    _ref$onTimelineElemen = _ref.onTimelineElementClick,
    onTimelineElementClick = _ref$onTimelineElemen === void 0 ? null : _ref$onTimelineElemen,
    _ref$iconStyle = _ref.iconStyle,
    iconStyle = _ref$iconStyle === void 0 ? null : _ref$iconStyle,
    _ref$id = _ref.id,
    id = _ref$id === void 0 ? '' : _ref$id,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? '' : _ref$position,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? null : _ref$style,
    _ref$textClassName = _ref.textClassName,
    textClassName = _ref$textClassName === void 0 ? '' : _ref$textClassName,
    _ref$intersectionObse = _ref.intersectionObserverProps,
    intersectionObserverProps = _ref$intersectionObse === void 0 ? {
      rootMargin: '0px 0px -40px 0px',
      triggerOnce: true
    } : _ref$intersectionObse,
    _ref$visible = _ref.visible,
    visible = _ref$visible === void 0 ? false : _ref$visible,
    _ref$shadowSize = _ref.shadowSize,
    shadowSize = _ref$shadowSize === void 0 ? 'small' : _ref$shadowSize;
  return /*#__PURE__*/React.createElement(InView, intersectionObserverProps, function (_ref2) {
    var inView = _ref2.inView,
      ref = _ref2.ref;
    return /*#__PURE__*/React.createElement("div", {
      ref: ref,
      id: id,
      className: classNames(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
      // eslint-disable-line jsx-a11y/no-static-element-interactions
      style: iconStyle,
      onClick: iconOnClick,
      className: classNames(iconClassName, 'vertical-timeline-element-icon', "shadow-size-" + shadowSize,
      // for shadow size
      {
        'bounce-in': inView || visible,
        'is-hidden': !(inView || visible)
      })
    }, icon), /*#__PURE__*/React.createElement("div", {
      style: contentStyle,
      onClick: onTimelineElementClick,
      className: classNames(textClassName, 'vertical-timeline-element-content', {
        'bounce-in': inView || visible,
        'is-hidden': !(inView || visible)
      })
    }, /*#__PURE__*/React.createElement("div", {
      style: contentArrowStyle,
      className: "vertical-timeline-element-content-arrow"
    }), children, /*#__PURE__*/React.createElement("span", {
      className: classNames(dateClassName, 'vertical-timeline-element-date')
    }, date))));
  });
};
VerticalTimelineElement.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  className: PropTypes.string,
  contentArrowStyle: PropTypes.shape({}),
  contentStyle: PropTypes.shape({}),
  date: PropTypes.node,
  dateClassName: PropTypes.string,
  icon: PropTypes.element,
  iconClassName: PropTypes.string,
  iconStyle: PropTypes.shape({}),
  iconOnClick: PropTypes.func,
  onTimelineElementClick: PropTypes.func,
  id: PropTypes.string,
  position: PropTypes.string,
  style: PropTypes.shape({}),
  textClassName: PropTypes.string,
  visible: PropTypes.bool,
  shadowSize: PropTypes.string,
  intersectionObserverProps: PropTypes.shape({
    root: PropTypes.object,
    rootMargin: PropTypes.string,
    threshold: PropTypes.number,
    triggerOnce: PropTypes.bool
  })
};
export default VerticalTimelineElement;