@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
113 lines • 7.26 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import classnames from 'classnames';
import { DEFAULTS, STYLE } from './SpaceRowContent.constants';
import './SpaceRowContent.style.scss';
import ListItemBaseSection from '../ListItemBaseSection';
import Text from '../Text';
import Icon from '../Icon';
import DividerDot from '../DividerDot';
import SecondLineElement from './SecondLineElement';
import { cleanSecondLine } from './SpaceRowContent.utils';
import ButtonCircle from '../ButtonCircle';
import { Item } from '@react-stately/collections';
import MenuTrigger from '../MenuTrigger';
import Menu from '../Menu';
//TODO: support 2-line labels for right/position-end section.
/**
* The SpaceRowContent component.
*/
var SpaceRowContent = function (props) {
var _a;
var isNewActivity = props.isNewActivity, isDraft = props.isDraft, avatar = props.avatar, firstLine = props.firstLine, secondLine = props.secondLine, isUnread = props.isUnread, _b = props.teamColor, teamColor = _b === void 0 ? DEFAULTS.TEAM_COLOR : _b, isMention = props.isMention, isEnterRoom = props.isEnterRoom, isAlert = props.isAlert, isAlertMuted = props.isAlertMuted, isError = props.isError, action = props.action, isSelected = props.isSelected, _c = props.isCompact, isCompact = _c === void 0 ? false : _c, rightIconTooltip = props.rightIconTooltip, _d = props.isDisabled, isDisabled = _d === void 0 ? DEFAULTS.DISABLED : _d, menuItems = props.menuItems, onSelectMenuItem = props.onSelectMenuItem, menuTriggerLabel = props.menuTriggerLabel;
var renderText = function () {
var secondLineArrayClean = cleanSecondLine(secondLine);
// All --mds-color-theme-text-team* tokens have a dash before the color --mds-color-theme-text-team-cobalt-* --mds-color-theme-text-team-cyan-* etc
// except for --mds-color-theme-teamdefault-*
var teamColorForToken = teamColor === DEFAULTS.TEAM_COLOR ? teamColor : "-".concat(teamColor);
var secondLineColor = isDisabled
? 'var(--mds-color-theme-text-primary-disabled)'
: "var(--mds-color-theme-text-team".concat(teamColorForToken, "-normal)");
if (secondLineArrayClean.length) {
return (React.createElement(React.Fragment, null,
React.createElement(Text, { type: "body-primary", tagName: "div", "data-test": "list-item-first-line", "data-disabled": isDisabled }, firstLine),
isCompact && React.createElement(DividerDot, { "data-test": "compact-mode-divider-dot" }),
React.createElement(Text, { style: { color: secondLineColor }, type: "body-secondary", tagName: "small", "data-test": "list-item-second-line", "aria-label": secondLineArrayClean.join(', ') }, secondLineArrayClean.map(function (secondLineContent, i) { return (React.createElement(SecondLineElement, { key: "second-line-item-".concat(i), showDividerDot: i > 0 }, secondLineContent)); }))));
}
else {
return (React.createElement(Text, { "data-test": "list-item-first-line", tagName: "div", type: "body-primary", "data-disabled": isDisabled }, firstLine));
}
};
var renderRightSection = function () {
var iconProps = {
weight: 'bold',
scale: 14,
strokeColor: 'none',
title: rightIconTooltip,
};
if (isMention) {
return (React.createElement(Icon, __assign({ fillColor: isDisabled
? 'var(--mds-color-theme-text-primary-disabled)'
: 'var(--mds-color-theme-control-active-normal)', name: "mention" }, iconProps)));
}
else if (isEnterRoom) {
return (React.createElement(Icon, __assign({ fillColor: isDisabled
? 'var(--mds-color-theme-text-primary-disabled)'
: 'var(--mds-color-theme-control-active-normal)', name: "enter-room" }, iconProps)));
}
else if (isAlertMuted) {
return (React.createElement(Icon, __assign({ fillColor: isDisabled
? 'var(--mds-color-theme-text-primary-disabled)'
: 'var(--mds-color-theme-text-primary-normal)', name: "alert-muted" }, iconProps)));
}
else if (isAlert) {
return (React.createElement(Icon, __assign({ fillColor: isDisabled
? 'var(--mds-color-theme-text-primary-disabled)'
: 'var(--mds-color-theme-text-primary-normal)', name: "alert" }, iconProps)));
}
else if (!isSelected && isDraft) {
return (React.createElement(Icon, __assign({ fillColor: isDisabled
? 'var(--mds-color-theme-text-primary-disabled)'
: 'var(--mds-color-theme-text-primary-normal)', name: "draft-indicator" }, iconProps)));
}
else if (isError) {
return (React.createElement(Icon, __assign({ fillColor: isDisabled
? 'var(--mds-color-theme-text-primary-disabled)'
: 'var(--mds-color-theme-text-error-normal)', name: "priority-circle" }, iconProps, { weight: "filled" })));
}
else if (isUnread) {
return (React.createElement(Icon, __assign({ name: "unread", fillColor: isDisabled
? 'var(--mds-color-theme-text-primary-disabled)'
: 'var(--mds-color-theme-control-active-normal)' }, iconProps)));
}
else if (action) {
return React.createElement(React.Fragment, null, action);
}
else
return null;
};
return (React.createElement(React.Fragment, null,
React.createElement(ListItemBaseSection, { position: "start" }, avatar),
React.createElement(ListItemBaseSection, { position: "middle", className: classnames(STYLE.textWrapper, isCompact ? 'text-row' : 'text-column', (_a = {},
_a[STYLE.isNewActivity] = isNewActivity || isMention || isEnterRoom || isUnread,
_a)) }, renderText()),
React.createElement(ListItemBaseSection, { position: "end" }, renderRightSection()),
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React.createElement(ListItemBaseSection, { position: "end", className: STYLE.menuTriggerWrapper }, React.createElement(MenuTrigger, { triggerComponent: React.createElement(ButtonCircle, { variant: "tertiary", size: isCompact ? 20 : 28, "aria-label": menuTriggerLabel, "data-testid": "menu-trigger-button", prefixIcon: "more-bold" }) },
React.createElement(Menu, { selectionMode: "single", onAction: onSelectMenuItem }, menuItems.map(function (_a) {
var key = _a.key, text = _a.text;
return (React.createElement(Item, { key: key }, text));
}))))) : null));
};
SpaceRowContent.displayName = 'SpaceRowContent';
export default SpaceRowContent;
//# sourceMappingURL=SpaceRowContent.js.map