@elastic/eui/optimize/lib/components/comment_list/comment_event.js

Elastic UI Component Library

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EuiCommentEvent = void 0;
var _react = _interopRequireDefault(require("react"));
var _services = require("../../services");
var _classnames = _interopRequireDefault(require("classnames"));
var _panel = require("../panel");
var _avatar = require("../avatar");
var _comment_event = require("./comment_event.styles");
var _react2 = require("@emotion/react");
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

var EuiCommentEvent = function EuiCommentEvent(_ref) {
  var children = _ref.children,
    className = _ref.className,
    eventIcon = _ref.eventIcon,
    eventIconAriaLabel = _ref.eventIconAriaLabel,
    username = _ref.username,
    timestamp = _ref.timestamp,
    event = _ref.event,
    actions = _ref.actions,
    eventColor = _ref.eventColor;
  var classes = (0, _classnames.default)('euiCommentEvent', className);

  // the username is required so we only check if other elements are define
  var hasEventElements = eventIcon || timestamp || event || actions;
  var isTypeRegular = children && hasEventElements;
  var isTypeUpdate = !children && hasEventElements;
  var type;
  if (isTypeRegular) {
    type = 'regular';
  } else if (isTypeUpdate) {
    type = 'update';
  } else {
    type = 'custom';
  }
  var euiTheme = (0, _services.useEuiTheme)();
  var styles = (0, _comment_event.euiCommentEventStyles)(euiTheme);
  var cssStyles = [styles.euiCommentEvent, styles[type]];
  var headerStyles = (0, _comment_event.euiCommentEventHeaderStyles)(euiTheme);
  var cssHeaderStyles = [headerStyles.euiCommentEvent__header, eventColor && headerStyles.hasEventColor, isTypeRegular && headerStyles.regular];
  var bodyStyles = (0, _comment_event.euiCommentEventBodyStyles)(euiTheme);
  var cssBodyStyles = [bodyStyles.euiCommentEvent__body, bodyStyles[type]];
  var isFigure = isTypeRegular;
  var Element = isFigure ? 'figure' : 'div';
  var HeaderElement = isFigure ? 'figcaption' : 'div';

  // The 'plain' color creates a shadow and adds a border radius that we don't want.
  // So for these cases we use the transparent color instead.
  var finalEventColor = eventColor === 'plain' ? 'transparent' : eventColor;
  var panelProps = finalEventColor ? {
    color: finalEventColor,
    paddingSize: 's'
  } : {
    color: 'transparent',
    paddingSize: 'none'
  };
  return (0, _react2.jsx)(Element, {
    className: classes,
    css: cssStyles,
    "data-type": type
  }, hasEventElements && (0, _react2.jsx)(HeaderElement, {
    className: "euiCommentEvent__header",
    css: cssHeaderStyles
  }, (0, _react2.jsx)(_panel.EuiPanel, panelProps, (0, _react2.jsx)("div", {
    className: "euiCommentEvent__headerMain",
    css: headerStyles.euiCommentEvent__headerMain
  }, (0, _react2.jsx)("div", {
    className: "euiCommentEvent__headerData",
    css: headerStyles.euiCommentEvent__headerData
  }, eventIcon && (0, _react2.jsx)(_avatar.EuiAvatar, {
    className: "euiCommentEvent__headerEventIcon",
    css: headerStyles.euiCommentEvent__headerEventIcon,
    size: "s",
    iconType: eventIcon,
    name: eventIconAriaLabel ? eventIconAriaLabel : '',
    color: "subdued",
    "aria-hidden": !eventIconAriaLabel
  }), username && (0, _react2.jsx)("div", {
    className: "euiCommentEvent__headerUsername",
    css: headerStyles.euiCommentEvent__headerUsername
  }, username), event && (0, _react2.jsx)("div", {
    className: "euiCommentEvent__headerEvent",
    css: headerStyles.euiCommentEvent__headerEvent
  }, event), timestamp && (0, _react2.jsx)("div", {
    className: "euiCommentEvent__headerTimestamp"
  }, (0, _react2.jsx)("time", null, timestamp))), actions && (0, _react2.jsx)("div", {
    className: "euiCommentEvent__headerActions",
    css: headerStyles.euiCommentEvent__headerActions
  }, actions)))), children && (0, _react2.jsx)("div", {
    className: "euiCommentEvent__body",
    css: cssBodyStyles
  }, children));
};
exports.EuiCommentEvent = EuiCommentEvent;