communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
102 lines • 6.68 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { DefaultButton, PrimaryButton, Stack, useTheme } from '@fluentui/react';
import { _DrawerMenu, Announcer } from "../../../../react-components/src";
import copy from 'copy-to-clipboard';
import { useMemo, useState } from 'react';
import { CallWithChatCompositeIcon } from './icons';
import { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';
import { CallingDialpad } from './CallingDialpad';
import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs-ui-common/src";
import { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';
import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
import { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';
import { useId } from '@fluentui/react-hooks';
import { CalloutWithIcon } from './CalloutWithIcon';
/** @private */
export const AddPeopleDropdown = (props) => {
var _a, _b;
const theme = useTheme();
const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId, onCopyInviteLink, inviteLinkCopiedRecently } = props;
const [showDialpad, setShowDialpad] = useState(false);
const [announcerStrings, setAnnouncerStrings] = useState();
const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);
const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);
const defaultMenuProps = useMemo(() => {
const menuProps = {
styles: menuStyleThemed,
items: [],
useTargetWidth: true,
calloutProps: {
preventDismissOnEvent
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onMenuOpened(contextualMenu) {
setAnnouncerStrings(undefined);
}
};
if (inviteLink) {
menuProps.items.push({
key: 'InviteLinkKey',
text: strings.copyInviteLinkButtonLabel,
itemProps: { styles: copyLinkButtonStylesThemed },
iconProps: { iconName: 'Link', style: iconStyles },
onClick: () => {
setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
copy(inviteLink);
onCopyInviteLink === null || onCopyInviteLink === void 0 ? void 0 : onCopyInviteLink();
}
});
}
// only show the dialpad option when alternateCallerId is set
if (alternateCallerId) {
menuProps.items.push({
key: 'DialpadKey',
text: strings.openDialpadButtonLabel,
itemProps: { styles: copyLinkButtonStylesThemed },
iconProps: { iconName: 'PeoplePaneOpenDialpad', style: iconStyles },
onClick: () => setShowDialpad(true),
'data-ui-id': 'call-dial-phone-number-button'
});
}
return menuProps;
}, [
menuStyleThemed,
inviteLink,
alternateCallerId,
strings.copyInviteLinkButtonLabel,
strings.copyInviteLinkActionedAriaLabel,
strings.openDialpadButtonLabel,
copyLinkButtonStylesThemed,
onCopyInviteLink
]);
const onDismissDialpad = () => {
setShowDialpad(false);
};
const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState([]);
const setDrawerMenuItemsForAddPeople = useMemo(() => {
return () => {
const drawerMenuItems = defaultMenuProps.items.map((contextualMenu) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([])));
setAddPeopleDrawerMenuItems(drawerMenuItems);
};
}, [defaultMenuProps, setAddPeopleDrawerMenuItems]);
const calloutButtonId = useId('callout-button');
if (mobileView) {
return (React.createElement(Stack, null,
React.createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
defaultMenuProps.items.length > 0 && (React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
React.createElement(PrimaryButton, { autoFocus: true, id: calloutButtonId, onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "PeoplePaneAddPerson" }), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" }),
inviteLinkCopiedRecently && (React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: (_a = strings.copyInviteLinkButtonActionedLabel) !== null && _a !== void 0 ? _a : '', doNotLayer: true })))),
addPeopleDrawerMenuItems.length > 0 && (React.createElement(Stack, { styles: drawerContainerStyles(), "data-ui-id": "call-add-people-dropdown" },
React.createElement(_DrawerMenu, { disableMaxHeight: true, onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems }))),
alternateCallerId && (React.createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }))));
}
return (React.createElement(React.Fragment, null, React.createElement(Stack, null,
React.createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
alternateCallerId && (React.createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId })),
defaultMenuProps.items.length > 0 && (React.createElement(Stack, { styles: copyLinkButtonStackStyles },
React.createElement(DefaultButton, { id: calloutButtonId, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "PeoplePaneAddPerson" }), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" }),
inviteLinkCopiedRecently && (React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: (_b = strings.copyInviteLinkButtonActionedLabel) !== null && _b !== void 0 ? _b : '' })))))));
};
//# sourceMappingURL=AddPeopleDropdown.js.map