communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
61 lines • 4.99 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useMemo } from 'react';
import { participantListContainerStyle, participantListMobileStyle, participantListStack, participantListStyle, participantListWrapper, displayNameStyles, headingMoreButtonStyles } from './styles/ParticipantContainer.styles';
import { ParticipantList } from "../../../../react-components/src";
import { Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';
import { DefaultButton } from '@fluentui/react';
import { AvatarPersona } from './AvatarPersona';
import { useId } from '@fluentui/react-hooks';
import { _formatString } from "../../../../acs-ui-common/src";
/**
* @private
*/
export const ParticipantContainer = (props) => {
const theme = useTheme();
const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);
return (React.createElement(Stack, { className: participantListWrapperClassName },
React.createElement(ParticipantListWithHeading, Object.assign({}, props))));
};
/**
* @private
*/
export const ParticipantListWithHeading = (props) => {
const { onFetchAvatarPersonaData, onFetchParticipantMenuItems, title, participantListProps, headingMoreButtonAriaLabel, onClickHeadingMoreButton, headingMoreButtonMenuProps, pinnedParticipants } = props;
const subheadingUniqueId = useId();
const theme = useTheme();
/* @conditional-compile-remove(total-participant-count) */
const totalParticipantCount = participantListProps.totalParticipantCount;
const tooltipId = getId('text-tooltip');
const subheadingStyleThemed = useMemo(() => ({
root: {
h2: {
color: theme.palette.neutralSecondary,
margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',
fontSize: theme.fonts.smallPlus.fontSize,
fontWeight: 'normal'
}
}
}), [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]);
return (React.createElement(Stack, { className: participantListStack },
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
React.createElement(Stack.Item, { grow: true, styles: subheadingStyleThemed, "aria-label": title, id: subheadingUniqueId },
React.createElement("h2", null, paneTitleTrampoline(title !== null && title !== void 0 ? title : '',
/* @conditional-compile-remove(total-participant-count) */ totalParticipantCount))),
(onClickHeadingMoreButton ||
((headingMoreButtonMenuProps === null || headingMoreButtonMenuProps === void 0 ? void 0 : headingMoreButtonMenuProps.items) && headingMoreButtonMenuProps.items.length > 0)) && (React.createElement(Stack.Item, null,
React.createElement(DefaultButton, { "data-ui-id": "people-pane-header-more-button", ariaLabel: headingMoreButtonAriaLabel, styles: headingMoreButtonStyles(theme), iconProps: { iconName: 'PeoplePaneMoreButton' }, onClick: onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined, menuProps: props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps, onRenderMenuIcon: () => null })))),
React.createElement(Stack, { className: participantListContainerStyle },
React.createElement(ParticipantList, Object.assign({}, participantListProps, { pinnedParticipants: pinnedParticipants, styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React.createElement(React.Fragment, null,
React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text), dataProvider: onFetchAvatarPersonaData, allowActiveBorder: true })),
(options === null || options === void 0 ? void 0 : options.text) && (React.createElement("div", { style: displayNameStyles },
React.createElement(TooltipHost, { content: options === null || options === void 0 ? void 0 : options.text, id: tooltipId, overflowMode: TooltipOverflowMode.Parent },
React.createElement(Text, { nowrap: false, "aria-labelledby": tooltipId }, options === null || options === void 0 ? void 0 : options.text)))))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId })))));
};
const paneTitleTrampoline = (paneTitle, totalParticipantCount) => {
const participantCountString = totalParticipantCount
? { numberOfPeople: `(${totalParticipantCount})` }
: { numberOfPeople: ' ' };
return _formatString(paneTitle, participantCountString);
};
//# sourceMappingURL=ParticipantContainer.js.map