communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
53 lines • 3.64 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useState } from 'react';
import { useMemo } from 'react';
import { Dialpad } from "../../../../react-components/src";
import { _DrawerSurface } from "../../../../react-components/src";
import { Modal, Stack, useTheme, Text, IconButton } from '@fluentui/react';
import { PrimaryButton } from '@fluentui/react';
import { themeddialpadModalStyle } from './CallingDialpad.styles';
import { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styles';
import { CallWithChatCompositeIcon } from './icons';
import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
/** @private */
export const CallingDialpad = (props) => {
const { strings, isMobile, showDialpad, onDismissDialpad, onAddParticipant, alternateCallerId } = props;
const [textFieldInput, setTextFieldInput] = useState('');
const theme = useTheme();
const onDismissTriggered = () => {
setTextFieldInput('');
onDismissDialpad();
};
const onClickCall = () => {
if (onAddParticipant) {
/**
* Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.
* We assume the input number always include countrycode
*/
const phoneNumber = { phoneNumber: '+' + textFieldInput.replace(/\D/g, '').replaceAll(' ', '') };
onAddParticipant(phoneNumber, { alternateCallerId: { phoneNumber: alternateCallerId } });
onDismissTriggered();
}
};
const dialpadModalStyle = useMemo(() => themeddialpadModalStyle(theme), [theme]);
const dialpadStyle = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
const callButtonStyle = useMemo(() => themedCallButtonStyle(theme), [theme]);
const dialpadComponent = () => {
return (React.createElement(React.Fragment, null,
React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, longPressTrigger: isMobile ? 'touch' : 'mouseAndTouch' }),
React.createElement(PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "DialpadStartCall" }), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
};
if (isMobile) {
return (React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-dialpad" }, showDialpad && (React.createElement(Stack, { styles: drawerContainerStyles() },
React.createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered, disableMaxHeight: true },
React.createElement(Stack, { style: { padding: '1rem' } }, dialpadComponent()))))));
}
return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle, "data-ui-id": "call-with-chat-composite-dialpad" },
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
React.createElement(Text, null, strings.dialpadModalTitle),
React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
React.createElement(Stack, { style: { overflow: 'hidden' } }, dialpadComponent()))));
};
//# sourceMappingURL=CallingDialpad.js.map