@elastic/eui
Version:
Elastic UI Component Library
97 lines (94 loc) • 4.03 kB
JavaScript
/*
* 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.
*/
import React from 'react';
import { useEuiTheme } from '../../services';
import classNames from 'classnames';
import { EuiPanel } from '../panel';
import { EuiAvatar } from '../avatar';
import { euiCommentEventStyles, euiCommentEventHeaderStyles, euiCommentEventBodyStyles } from './comment_event.styles';
import { jsx as ___EmotionJSX } from "@emotion/react";
export 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 = classNames('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 = useEuiTheme();
var styles = euiCommentEventStyles(euiTheme);
var cssStyles = [styles.euiCommentEvent, styles[type]];
var headerStyles = euiCommentEventHeaderStyles(euiTheme);
var cssHeaderStyles = [headerStyles.euiCommentEvent__header, eventColor && headerStyles.hasEventColor, isTypeRegular && headerStyles.regular];
var bodyStyles = 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 ___EmotionJSX(Element, {
className: classes,
css: cssStyles,
"data-type": type
}, hasEventElements && ___EmotionJSX(HeaderElement, {
className: "euiCommentEvent__header",
css: cssHeaderStyles
}, ___EmotionJSX(EuiPanel, panelProps, ___EmotionJSX("div", {
className: "euiCommentEvent__headerMain",
css: headerStyles.euiCommentEvent__headerMain
}, ___EmotionJSX("div", {
className: "euiCommentEvent__headerData",
css: headerStyles.euiCommentEvent__headerData
}, eventIcon && ___EmotionJSX(EuiAvatar, {
className: "euiCommentEvent__headerEventIcon",
css: headerStyles.euiCommentEvent__headerEventIcon,
size: "s",
iconType: eventIcon,
name: eventIconAriaLabel ? eventIconAriaLabel : '',
color: "subdued",
"aria-hidden": !eventIconAriaLabel
}), username && ___EmotionJSX("div", {
className: "euiCommentEvent__headerUsername",
css: headerStyles.euiCommentEvent__headerUsername
}, username), event && ___EmotionJSX("div", {
className: "euiCommentEvent__headerEvent",
css: headerStyles.euiCommentEvent__headerEvent
}, event), timestamp && ___EmotionJSX("div", {
className: "euiCommentEvent__headerTimestamp"
}, ___EmotionJSX("time", null, timestamp))), actions && ___EmotionJSX("div", {
className: "euiCommentEvent__headerActions",
css: headerStyles.euiCommentEvent__headerActions
}, actions)))), children && ___EmotionJSX("div", {
className: "euiCommentEvent__body",
css: cssBodyStyles
}, children));
};