@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
67 lines • 3 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { MessageBar, MessageBarType } from '@fluentui/react';
import React, { useRef, useState } from 'react';
import { BannerMessage } from './BannerMessage';
const BANNER_OVERWRITE_DELAY_MS = 3000;
/**
* Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.
*
* This component delays and combines frequent updates to `variant` such that:
* - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.
* - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.
*
* This ensures that there is enough time for the user to see a banner message before it is overwritten.
* In case of multiple delayed messages, the user always sees the final message as it reflects the final state
* of recording and transcription.
*
* @private
*/
export function DelayedUpdateBanner(props) {
const { variant, lastUpdated: variantLastUpdated } = props.variant;
// Tracks the variant that is currently visible in the UI.
const [visible, setVisible] = useState({
variant,
lastUpdated: Date.now()
});
const pendingUpdateHandle = useRef(null);
if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {
// Always clear pending updates.
// We'll either update now, or schedule an update for later.
if (pendingUpdateHandle.current) {
clearTimeout(pendingUpdateHandle.current);
}
const now = Date.now();
const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);
if (variant === 'NO_STATE' || timeToNextUpdate <= 0) {
setVisible({
variant,
lastUpdated: now
});
}
else {
pendingUpdateHandle.current = setTimeout(() => {
// Set the actual update time, not the computed time when the update should happen.
// The actual update might be later than we planned.
setVisible({
variant,
lastUpdated: Date.now()
});
}, timeToNextUpdate);
}
}
if (visible.variant === 'NO_STATE') {
return React.createElement(React.Fragment, null);
}
return React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
// when closing the banner, change variant to nostate and change stopped state to off state.
// Reason: on banner close, going back to the default state.
setVisible({
variant: 'NO_STATE',
lastUpdated: Date.now()
});
props.onDismiss();
}, dismissButtonAriaLabel: props.strings.close },
React.createElement(BannerMessage, { variant: visible.variant, strings: props.strings }));
}
//# sourceMappingURL=DelayedUpdateBanner.js.map