communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
27 lines • 1.55 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';
import React, { useEffect, useState } from 'react';
import { systemMessageIconStyle } from './styles/SystemMessage.styles';
import LiveMessage from './Announcer/LiveMessage';
/**
* @private
*/
export const SystemMessage = (props) => {
const { iconName, content } = props;
const Icon = React.createElement(FontIcon, { iconName: iconName, className: mergeStyles(systemMessageIconStyle) });
const [liveMessage, setLiveMessage] = useState('');
useEffect(() => {
// Timeout is needed to handle situation when the same user joins and leaves a chat a few times in a row, otherwise Narrator won't repeat the system message text.
// Because delay value is not provided, setMessage function will be executed asynchronously in the next event cycle
setTimeout(() => {
setLiveMessage(content);
});
}, [content]);
return (React.createElement(React.Fragment, null,
React.createElement(LiveMessage, { message: liveMessage, ariaLive: "polite", clearOnUnmount: true }),
React.createElement(Stack, { horizontal: true, className: mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), role: "status", "aria-label": content, tabIndex: 0 },
Icon,
React.createElement(Text, { style: { wordBreak: 'break-word' }, variant: 'small' }, content))));
};
//# sourceMappingURL=SystemMessage.js.map