@azure/communication-react 1.3.3-alpha-202208300017.0 → 1.3.3-alpha-202208310017.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dist-cjs/communication-react/index.js +8 -3
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.js +7 -3
- package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.styles.js +1 -0
- package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.styles.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.3.3-alpha-
|
|
1
|
+
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.3.3-alpha-202208310017.0';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useCallback } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n | 'A'\n | 'B'\n | 'C'\n | 'D'\n | 'Flash'\n | 'Num0'\n | 'Num1'\n | 'Num2'\n | 'Num3'\n | 'Num4'\n | 'Num5'\n | 'Num6'\n | 'Num7'\n | 'Num8'\n | 'Num9'\n | 'Pound'\n | 'Star';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /** function to send dtmf tones on button click */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior*/\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** set dialpad textfield content */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text*/\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n isMobile?: boolean;\n styles?: DialpadStyles;\n}\n\ntype DialpadButtonContent = {\n /** Number displayed on each dialpad button */\n digit: string;\n /** Letters displayed on each dialpad button */\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: string;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n isMobile?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, isMobile = false } = props;\n\n const clickFunction = useCallback(async () => {\n onClick(digit, index);\n }, [digit, index, onClick]);\n\n const longPressFunction = useCallback(async () => {\n onLongPress(digit, index);\n }, [digit, index, onLongPress]);\n\n const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...handlers}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** Pass in custom content to dialpad textfield */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text */\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n isMobile?: boolean;\n styles?: DialpadStyles;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n isMobile = false\n } = props;\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n useEffect(() => {\n if (onChange) {\n onChange(plainTextValue);\n }\n }, [plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <div\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n >\n <TextField\n styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'BackSpace' }}\n />\n )}\n </>\n )}\n />\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n */\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n isMobile={isMobile}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </div>\n );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n const localeStrings = useLocale().strings.dialpad;\n\n const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n return localeStrings;\n // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n // the string values exist. So unsafe cast for stable build.\n return '' as unknown as DialpadStrings;\n };\n const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n\"../../../../acs-ui-common/src\""]}
|
|
1
|
+
{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useCallback } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n | 'A'\n | 'B'\n | 'C'\n | 'D'\n | 'Flash'\n | 'Num0'\n | 'Num1'\n | 'Num2'\n | 'Num3'\n | 'Num4'\n | 'Num5'\n | 'Num6'\n | 'Num7'\n | 'Num8'\n | 'Num9'\n | 'Pound'\n | 'Star';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /** function to send dtmf tones on button click */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior*/\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** set dialpad textfield content */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text*/\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n isMobile?: boolean;\n styles?: DialpadStyles;\n}\n\ntype DialpadButtonContent = {\n /** Number displayed on each dialpad button */\n digit: string;\n /** Letters displayed on each dialpad button */\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: string;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n isMobile?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, isMobile = false } = props;\n\n const clickFunction = useCallback(async () => {\n onClick(digit, index);\n }, [digit, index, onClick]);\n\n const longPressFunction = useCallback(async () => {\n onLongPress(digit, index);\n }, [digit, index, onLongPress]);\n\n const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...handlers}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** Pass in custom content to dialpad textfield */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text */\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n isMobile?: boolean;\n styles?: DialpadStyles;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n isMobile = false\n } = props;\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n useEffect(() => {\n if (onChange) {\n onChange(plainTextValue);\n }\n }, [plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <div\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n >\n <TextField\n styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'BackSpace' }}\n />\n )}\n </>\n )}\n />\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n */\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n isMobile={isMobile}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </div>\n );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n const localeStrings = useLocale().strings.dialpad;\n\n const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n return localeStrings;\n // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n // the string values exist. So unsafe cast for stable build.\n return '' as unknown as DialpadStrings;\n };\n const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n\"../../../../acs-ui-common/src\""]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
|
2
2
|
// Licensed under the MIT license.
|
|
3
|
-
import React from 'react';
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
import { Dialpad } from "../../../../react-components/src";
|
|
6
6
|
import { _DrawerSurface } from "../../../../react-components/src";
|
|
@@ -16,18 +16,22 @@ export const SendDtmfDialpad = (props) => {
|
|
|
16
16
|
const onDismissTriggered = () => {
|
|
17
17
|
onDismissDialpad();
|
|
18
18
|
};
|
|
19
|
+
const [textFieldValue, setTextFieldValue] = useState();
|
|
20
|
+
const onChange = (input) => {
|
|
21
|
+
setTextFieldValue(input);
|
|
22
|
+
};
|
|
19
23
|
const dialpadModalStyle = useMemo(() => themeddialpadModalStyle(theme), [theme]);
|
|
20
24
|
const dialpadStyle = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
|
|
21
25
|
if (isMobile) {
|
|
22
26
|
return (React.createElement(Stack, null, showDialpad && (React.createElement(Stack, { styles: drawerContainerStyles },
|
|
23
27
|
React.createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered },
|
|
24
28
|
React.createElement(Stack, { style: { padding: '1rem' } },
|
|
25
|
-
React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings, isMobile: isMobile }))))))));
|
|
29
|
+
React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, strings: strings, isMobile: isMobile }))))))));
|
|
26
30
|
}
|
|
27
31
|
return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
|
|
28
32
|
React.createElement(Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
|
|
29
33
|
React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
|
|
30
34
|
React.createElement(Stack, { style: { overflow: 'hidden' } },
|
|
31
|
-
React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
|
|
35
|
+
React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
|
|
32
36
|
};
|
|
33
37
|
//# sourceMappingURL=SendDtmfDialpad.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SendDtmfDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SendDtmfDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useState } from 'react';\nimport { useMemo } from 'react';\nimport { Dialpad, DialpadStyles } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { IModalStyles, Modal, Stack, useTheme, IconButton } from '@fluentui/react';\n\nimport { themeddialpadModalStyle, themedDialpadStyle } from './SendDtmfDialpad.styles';\nimport { drawerContainerStyles } from '../CallWithChatComposite/styles/CallWithChatCompositeStyles';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport interface SendDtmfDialpadStrings {\n dialpadModalAriaLabel: string;\n dialpadCloseModalButtonAriaLabel: string;\n placeholderText: string;\n}\n\n/** @private */\nexport interface SendDtmfDialpadProps {\n isMobile: boolean;\n showDialpad: boolean;\n strings: SendDtmfDialpadStrings;\n onDismissDialpad: () => void;\n}\n\n/** @private */\nexport const SendDtmfDialpad = (props: SendDtmfDialpadProps): JSX.Element => {\n const dialpadProps = usePropsFor(Dialpad);\n\n const { strings, isMobile, showDialpad, onDismissDialpad } = props;\n\n const theme = useTheme();\n\n const onDismissTriggered = (): void => {\n onDismissDialpad();\n };\n\n const [textFieldValue, setTextFieldValue] = useState<string>();\n\n const onChange = (input: string): void => {\n setTextFieldValue(input);\n };\n\n const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n\n const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n\n if (isMobile) {\n return (\n <Stack>\n {showDialpad && (\n <Stack styles={drawerContainerStyles}>\n <_DrawerSurface onLightDismiss={onDismissTriggered}>\n <Stack style={{ padding: '1rem' }}>\n <Dialpad\n styles={dialpadStyle}\n {...dialpadProps}\n showDeleteButton={false}\n textFieldValue={textFieldValue}\n onChange={onChange}\n strings={strings}\n isMobile={isMobile}\n />\n </Stack>\n </_DrawerSurface>\n </Stack>\n )}\n </Stack>\n );\n }\n\n return (\n <>\n {\n <Modal\n titleAriaId={strings.dialpadModalAriaLabel}\n isOpen={showDialpad}\n onDismiss={onDismissTriggered}\n isBlocking={true}\n styles={dialpadModalStyle}\n >\n <Stack horizontal horizontalAlign=\"end\" verticalAlign=\"center\">\n <IconButton\n iconProps={{ iconName: 'Cancel' }}\n ariaLabel={strings.dialpadCloseModalButtonAriaLabel}\n onClick={onDismissTriggered}\n style={{ color: theme.palette.black }}\n />\n </Stack>\n\n <Stack style={{ overflow: 'hidden' }}>\n <Dialpad\n styles={dialpadStyle}\n {...dialpadProps}\n textFieldValue={textFieldValue}\n onChange={onChange}\n showDeleteButton={false}\n strings={strings}\n isMobile={isMobile}\n />\n </Stack>\n </Modal>\n }\n </>\n );\n};\n\"../../../../react-components/src\""]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SendDtmfDialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAiB,EAAE,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9F,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;SAC9D;QACD,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;YACpC,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IModalStyles, Theme } from '@fluentui/react';\n\nimport { DialpadStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const themeddialpadModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n main: {\n borderRadius: theme.effects.roundedCorner6,\n padding: '1rem'\n }\n});\n\n/**\n * @private\n */\nexport const themedDialpadStyle = (isMobile: boolean, theme: Theme): Partial<DialpadStyles> => ({\n root: {\n padding: 0,\n marginLeft: 0,\n marginRight: 0,\n maxWidth: '100%'\n },\n textField: {\n root: {\n borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`\n },\n field: {\n backgroundColor: theme.palette.white,\n fontSize: theme.fonts.large.fontSize,\n padding: '0 0.5rem ',\n textAlign: 'center',\n ':active': {\n padding: '0 0.5rem'\n }\n }\n },\n digit: {\n color: theme.palette.themeDarkAlt\n }\n});\n\"../../../../react-components/src\""]}
|
|
1
|
+
{"version":3,"file":"SendDtmfDialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAiB,EAAE,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9F,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;SAC9D;QACD,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;YACpC,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE,KAAK;YAChB,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IModalStyles, Theme } from '@fluentui/react';\n\nimport { DialpadStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const themeddialpadModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n main: {\n borderRadius: theme.effects.roundedCorner6,\n padding: '1rem'\n }\n});\n\n/**\n * @private\n */\nexport const themedDialpadStyle = (isMobile: boolean, theme: Theme): Partial<DialpadStyles> => ({\n root: {\n padding: 0,\n marginLeft: 0,\n marginRight: 0,\n maxWidth: '100%'\n },\n textField: {\n root: {\n borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`\n },\n field: {\n backgroundColor: theme.palette.white,\n fontSize: theme.fonts.large.fontSize,\n padding: '0 0.5rem ',\n direction: 'rtl',\n textAlign: 'center',\n ':active': {\n padding: '0 0.5rem'\n }\n }\n },\n digit: {\n color: theme.palette.themeDarkAlt\n }\n});\n\"../../../../react-components/src\""]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@azure/communication-react",
|
|
3
|
-
"version": "1.3.3-alpha-
|
|
3
|
+
"version": "1.3.3-alpha-202208310017.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React library for building modern communication user experiences utilizing Azure Communication Services",
|
|
6
6
|
"keywords": [
|
|
@@ -85,13 +85,13 @@
|
|
|
85
85
|
"@azure/core-auth": "1.3.2",
|
|
86
86
|
"@babel/cli": "~7.16.0",
|
|
87
87
|
"@babel/core": "~7.16.0",
|
|
88
|
-
"@internal/calling-component-bindings": "1.3.3-alpha-
|
|
89
|
-
"@internal/calling-stateful-client": "1.3.3-alpha-
|
|
90
|
-
"@internal/chat-component-bindings": "1.3.3-alpha-
|
|
91
|
-
"@internal/chat-stateful-client": "1.3.3-alpha-
|
|
92
|
-
"@internal/fake-backends": "1.3.3-alpha-
|
|
93
|
-
"@internal/react-components": "1.3.3-alpha-
|
|
94
|
-
"@internal/react-composites": "1.3.3-alpha-
|
|
88
|
+
"@internal/calling-component-bindings": "1.3.3-alpha-202208310017.0",
|
|
89
|
+
"@internal/calling-stateful-client": "1.3.3-alpha-202208310017.0",
|
|
90
|
+
"@internal/chat-component-bindings": "1.3.3-alpha-202208310017.0",
|
|
91
|
+
"@internal/chat-stateful-client": "1.3.3-alpha-202208310017.0",
|
|
92
|
+
"@internal/fake-backends": "1.3.3-alpha-202208310017.0",
|
|
93
|
+
"@internal/react-components": "1.3.3-alpha-202208310017.0",
|
|
94
|
+
"@internal/react-composites": "1.3.3-alpha-202208310017.0",
|
|
95
95
|
"@microsoft/api-documenter": "~7.12.11",
|
|
96
96
|
"@microsoft/api-extractor": "~7.18.0",
|
|
97
97
|
"@rollup/plugin-json": "~4.1.0",
|