communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
75 lines • 5.42 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, DefaultButton, PrimaryButton, Stack, useTheme } from '@fluentui/react';
import copy from 'copy-to-clipboard';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { CallWithChatCompositeIcon } from './icons';
import { peoplePaneContainerTokens } from './styles/ParticipantContainer.styles';
import { copyLinkButtonContainerStyles, copyLinkButtonStackStyles, copyLinkButtonStyles, linkIconStyles, themedCopyLinkButtonStyles } from './styles/PeoplePaneContent.styles';
import { AddPeopleDropdown } from './AddPeopleDropdown';
import { Announcer } from "../../../../react-components/src";
import { useId } from '@fluentui/react-hooks';
import { CalloutWithIcon } from './CalloutWithIcon';
/** @private */
export const AddPeopleButton = (props) => {
const { inviteLink, mobileView, strings, participantList } = props;
const theme = useTheme();
const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState('');
const copyLinkButtonStylesThemed = useMemo(() => concatStyleSets(copyLinkButtonStyles, themedCopyLinkButtonStyles(mobileView, theme)), [mobileView, theme]);
/**
* sets the announcement string for when the link is copied.
*/
const toggleAnnouncerString = useCallback(() => {
setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
/**
* Clears the announcer string after the user clicks the
* copyInviteLink button allowing it to be re-announced.
*/
setTimeout(() => {
setCopyInviteLinkAnnouncerStrings('');
}, 3000);
}, [strings.copyInviteLinkActionedAriaLabel]);
const dateInviteLinkCopied = useRef(undefined);
const [inviteLinkCopiedRecently, setInviteLinkCopiedRecently] = useState(false);
const onCopyInviteLink = useCallback(() => {
setInviteLinkCopiedRecently(true);
dateInviteLinkCopied.current = Date.now();
setTimeout(() => {
if (dateInviteLinkCopied.current && Date.now() - dateInviteLinkCopied.current >= 2000) {
setInviteLinkCopiedRecently(false);
}
}, 2000);
}, [setInviteLinkCopiedRecently, dateInviteLinkCopied]);
const calloutButtonId = useId('callout-button');
if (mobileView) {
return (React.createElement(AddPeopleDropdown, { strings: Object.assign({}, strings), mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId, onCopyInviteLink: onCopyInviteLink, inviteLinkCopiedRecently: inviteLinkCopiedRecently }));
}
else {
return (React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content", verticalFill: true },
React.createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId, onCopyInviteLink: onCopyInviteLink, inviteLinkCopiedRecently: inviteLinkCopiedRecently }),
React.createElement(Stack.Item, { grow: true, styles: { root: { overflowY: 'hidden' } } }, participantList)));
}
if (mobileView) {
return (React.createElement(Stack, null, inviteLink && (React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
React.createElement(Announcer, { announcementString: copyInviteLinkAnnouncerStrings, ariaLive: 'polite' }),
React.createElement(PrimaryButton, { id: calloutButtonId, onClick: () => {
copy(inviteLink !== null && inviteLink !== void 0 ? inviteLink : '');
toggleAnnouncerString();
onCopyInviteLink();
}, styles: copyLinkButtonStylesThemed, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), text: strings.copyInviteLinkButtonLabel }),
inviteLinkCopiedRecently && (React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: strings.copyInviteLinkButtonActionedLabel, doNotLayer: true }))))));
}
else {
return (React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content", verticalFill: true },
inviteLink && (React.createElement(Stack, { styles: copyLinkButtonStackStyles },
React.createElement(Announcer, { announcementString: copyInviteLinkAnnouncerStrings, ariaLive: 'polite' }),
React.createElement(DefaultButton, { id: calloutButtonId, text: strings.copyInviteLinkButtonLabel, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), onClick: () => {
copy(inviteLink !== null && inviteLink !== void 0 ? inviteLink : '');
toggleAnnouncerString();
onCopyInviteLink();
}, styles: copyLinkButtonStylesThemed }),
inviteLinkCopiedRecently && (React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: strings.copyInviteLinkButtonActionedLabel })))),
React.createElement(Stack.Item, { grow: true, styles: { root: { overflowY: 'hidden' } } }, participantList)));
}
};
//# sourceMappingURL=AddPeopleButton.js.map