@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
47 lines • 2.77 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/Announcer.js
import React, { useEffect } from 'react';
import MessageBlock from './MessageBlock';
/** @private */
export const EMPTY_MESSAGE = {
message: '',
id: ''
};
/** @private */
const Announcer = (props) => {
var _a, _b;
const newAssertive = (_a = props.assertive) !== null && _a !== void 0 ? _a : EMPTY_MESSAGE;
const oldAssertive = React.useRef(EMPTY_MESSAGE);
const [activeAssertive1, setActiveAssertive1] = React.useState(EMPTY_MESSAGE);
const [activeAssertive2, setActiveAssertive2] = React.useState(EMPTY_MESSAGE);
const alternateAssertive = React.useRef(false);
useEffect(() => {
if (oldAssertive.current.message !== (newAssertive === null || newAssertive === void 0 ? void 0 : newAssertive.message) || oldAssertive.current.id !== (newAssertive === null || newAssertive === void 0 ? void 0 : newAssertive.id)) {
setActiveAssertive1(alternateAssertive.current ? EMPTY_MESSAGE : newAssertive);
setActiveAssertive2(alternateAssertive.current ? newAssertive : EMPTY_MESSAGE);
oldAssertive.current = newAssertive;
alternateAssertive.current = !alternateAssertive.current;
}
}, [newAssertive]);
const newPolite = (_b = props.polite) !== null && _b !== void 0 ? _b : EMPTY_MESSAGE;
const oldPolite = React.useRef(EMPTY_MESSAGE);
const [activePolite1, setActivePolite1] = React.useState(EMPTY_MESSAGE);
const [activePolite2, setActivePolite2] = React.useState(EMPTY_MESSAGE);
const alternatePolite = React.useRef(false);
useEffect(() => {
if (oldPolite.current.message !== (newPolite === null || newPolite === void 0 ? void 0 : newPolite.message) || oldPolite.current.id !== (newPolite === null || newPolite === void 0 ? void 0 : newPolite.id)) {
setActivePolite1(alternatePolite.current ? EMPTY_MESSAGE : newPolite);
setActivePolite2(alternatePolite.current ? newPolite : EMPTY_MESSAGE);
oldPolite.current = newPolite;
alternatePolite.current = !alternatePolite.current;
}
}, [newPolite]);
return React.createElement("div", null,
React.createElement(MessageBlock, { ariaLive: "assertive", message: activeAssertive1.message }),
React.createElement(MessageBlock, { ariaLive: "assertive", message: activeAssertive2.message }),
React.createElement(MessageBlock, { ariaLive: "polite", message: activePolite1.message }),
React.createElement(MessageBlock, { ariaLive: "polite", message: activePolite2.message }));
};
export default Announcer;
//# sourceMappingURL=Announcer.js.map