react-event-timeline
Version:
A responsive event timeline in React.js
237 lines (210 loc) • 11.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _styles = _interopRequireDefault(require("./styles"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var TimelineEvent =
/*#__PURE__*/
function (_Component) {
_inherits(TimelineEvent, _Component);
function TimelineEvent(props) {
var _this;
_classCallCheck(this, TimelineEvent);
_this = _possibleConstructorReturn(this, _getPrototypeOf(TimelineEvent).call(this, props));
_this.state = {
showContent: _this.props.showContent
};
_this.toggleContent = _this.toggleContent.bind(_assertThisInitialized(_assertThisInitialized(_this)));
return _this;
}
_createClass(TimelineEvent, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (this.props.showContent !== prevProps.showContent) {
this.state({
showContent: this.props.showContent
});
}
}
}, {
key: "mergeNotificationStyle",
value: function mergeNotificationStyle(iconColor, bubbleStyle, orientation) {
var iconColorStyle = iconColor ? _objectSpread({}, _styles.default.eventType, {
color: iconColor,
borderColor: iconColor
}) : _styles.default.eventType;
var leftOrRight = orientation === 'right' ? _objectSpread({}, _styles.default['eventType--right']) : _objectSpread({}, _styles.default['eventType--left']);
return _objectSpread({}, iconColorStyle, leftOrRight, bubbleStyle);
}
}, {
key: "mergeContentStyle",
value: function mergeContentStyle(contentStyle) {
var messageStyle = this.showAsCard() ? _styles.default.cardBody : _styles.default.message;
return contentStyle ? _objectSpread({}, messageStyle, contentStyle) : messageStyle;
}
}, {
key: "timeStyle",
value: function timeStyle() {
return this.showAsCard() ? _styles.default.time : _objectSpread({}, _styles.default.time, {
color: '#303e49'
});
}
}, {
key: "showAsCard",
value: function showAsCard() {
var container = this.props.container;
return container === 'card';
}
}, {
key: "containerStyle",
value: function containerStyle() {
var style = this.props.style;
var containerStyle = _objectSpread({}, _styles.default.eventContainer, style);
return this.showAsCard() ? _objectSpread({}, _styles.default.card, containerStyle) : containerStyle;
}
}, {
key: "toggleStyle",
value: function toggleStyle() {
var _this$props = this.props,
container = _this$props.container,
cardHeaderStyle = _this$props.cardHeaderStyle,
collapsible = _this$props.collapsible;
var messageStyle = container === 'card' ? _objectSpread({}, _styles.default.cardTitle, cardHeaderStyle) : {};
return collapsible ? _objectSpread({}, _styles.default.toggleEnabled, messageStyle) : messageStyle;
}
}, {
key: "toggleContent",
value: function toggleContent() {
this.setState({
showContent: !this.state.showContent
});
}
}, {
key: "renderChildren",
value: function renderChildren() {
var _this$props2 = this.props,
collapsible = _this$props2.collapsible,
contentStyle = _this$props2.contentStyle;
return collapsible && this.state.showContent || !collapsible ? _react.default.createElement("div", {
style: this.mergeContentStyle(contentStyle)
}, this.props.children, _react.default.createElement("div", {
style: _styles.default.messageAfter
})) : _react.default.createElement("span", {
style: {
fontWeight: 500,
fontSize: 16,
cursor: 'pointer'
},
onClick: this.toggleContent
}, "\u2026");
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
createdAt = _this$props3.createdAt,
title = _this$props3.title,
subtitle = _this$props3.subtitle,
iconStyle = _this$props3.iconStyle,
bubbleStyle = _this$props3.bubbleStyle,
buttons = _this$props3.buttons,
icon = _this$props3.icon,
iconColor = _this$props3.iconColor,
titleStyle = _this$props3.titleStyle,
subtitleStyle = _this$props3.subtitleStyle,
orientation = _this$props3.orientation,
collapsible = _this$props3.collapsible,
onClick = _this$props3.onClick,
onIconClick = _this$props3.onIconClick,
className = _this$props3.className;
var leftOrRightEventStyling = orientation === 'right' ? _objectSpread({}, _styles.default['event--right']) : _objectSpread({}, _styles.default['event--left']);
var leftOrRightButtonStyling = orientation === 'left' ? _objectSpread({}, _styles.default['actionButtons--right']) : _objectSpread({}, _styles.default['actionButtons--left']);
return _react.default.createElement("div", {
style: _objectSpread({}, _styles.default.event, leftOrRightEventStyling)
}, _react.default.createElement("div", {
style: this.mergeNotificationStyle(iconColor, bubbleStyle, orientation)
}, _react.default.createElement("span", {
style: _objectSpread({}, _styles.default.materialIcons, iconStyle),
onClick: onIconClick
}, icon)), _react.default.createElement("div", _extends({
style: this.containerStyle()
}, {
onClick: onClick,
className: className
}), _react.default.createElement("div", {
style: _styles.default.eventContainerBefore
}), _react.default.createElement("div", {
style: this.toggleStyle(),
onClick: collapsible && this.toggleContent
}, createdAt && _react.default.createElement("div", {
style: this.timeStyle()
}, createdAt), _react.default.createElement("div", {
style: titleStyle
}, title), subtitle && _react.default.createElement("div", {
style: _objectSpread({}, _styles.default.subtitle, subtitleStyle)
}, subtitle), _react.default.createElement("div", {
style: _objectSpread({}, _styles.default.actionButtons, leftOrRightButtonStyling)
}, buttons)), this.props.children && this.renderChildren()), _react.default.createElement("div", {
style: _styles.default.eventAfter
}));
}
}]);
return TimelineEvent;
}(_react.Component);
TimelineEvent.propTypes = {
title: _propTypes.default.node.isRequired,
subtitle: _propTypes.default.node,
createdAt: _propTypes.default.node,
children: _propTypes.default.node,
buttons: _propTypes.default.node,
container: _propTypes.default.string,
icon: _propTypes.default.node,
iconColor: _propTypes.default.string,
iconStyle: _propTypes.default.object,
bubbleStyle: _propTypes.default.object,
orientation: _propTypes.default.string,
contentStyle: _propTypes.default.object,
cardHeaderStyle: _propTypes.default.object,
style: _propTypes.default.object,
titleStyle: _propTypes.default.object,
subtitleStyle: _propTypes.default.object,
collapsible: _propTypes.default.bool,
showContent: _propTypes.default.bool,
className: _propTypes.default.string,
onClick: _propTypes.default.func,
onIconClick: _propTypes.default.func
};
TimelineEvent.defaultProps = {
createdAt: undefined,
iconStyle: {},
bubbleStyle: {},
contentStyle: {},
cardHeaderStyle: {},
style: {},
titleStyle: {},
subtitleStyle: {},
orientation: 'left',
showContent: false,
className: '',
onClick: function onClick() {},
onIconClick: function onIconClick() {}
};
var _default = TimelineEvent;
exports.default = _default;