@azure/communication-react 1.23.0-alpha-202501080016 → 1.23.0-alpha-202501100017
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/communication-react.d.ts +8 -0
- package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-DkOxwoZA.js → ChatMessageComponentAsRichTextEditBox-DT0cdPPC.js} +2 -2
- package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-DkOxwoZA.js.map → ChatMessageComponentAsRichTextEditBox-DT0cdPPC.js.map} +1 -1
- package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-BO_44r6-.js → RichTextSendBoxWrapper-lT8BiqS6.js} +2 -2
- package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-BO_44r6-.js.map → RichTextSendBoxWrapper-lT8BiqS6.js.map} +1 -1
- package/dist/dist-cjs/communication-react/{index-BGBPNiPb.js → index-CjMI0Yzv.js} +83 -47
- package/dist/dist-cjs/communication-react/index-CjMI0Yzv.js.map +1 -0
- package/dist/dist-cjs/communication-react/index.js +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/ParticipantItem.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantList.js +8 -6
- package/dist/dist-esm/react-components/src/components/ParticipantList.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js +13 -10
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js +2 -2
- package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoTile.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/VideoTile.js +35 -18
- package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js +7 -1
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/utils.js +6 -2
- package/dist/dist-esm/react-components/src/components/utils.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +9 -5
- package/dist/dist-esm/react-composites/src/composites/common/SendBoxPicker.js +6 -2
- package/dist/dist-esm/react-composites/src/composites/common/SendBoxPicker.js.map +1 -1
- package/package.json +1 -1
- package/dist/dist-cjs/communication-react/index-BGBPNiPb.js.map +0 -1
@@ -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,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.23.0-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,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.23.0-alpha-202501100017';\n"]}
|
@@ -47,6 +47,10 @@ export interface ParticipantItemStrings {
|
|
47
47
|
participantItemWithMoreOptionsAriaLabel?: string;
|
48
48
|
/** String for the attendee role */
|
49
49
|
attendeeRole: string;
|
50
|
+
/** Label for the disabled microphone icon in participant state stack */
|
51
|
+
micDisabledIconLabel: string;
|
52
|
+
/** Label for the disabled camera icon in participant state stack */
|
53
|
+
cameraDisabledIconLabel: string;
|
50
54
|
}
|
51
55
|
/**
|
52
56
|
* Props for {@link ParticipantItem}.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n ContextualMenu,\n DirectionalHint,\n Icon,\n IContextualMenuItem,\n IStyle,\n mergeStyles,\n Persona,\n PersonaPresence,\n PersonaSize,\n Stack,\n Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n displayNoneStyle,\n iconContainerStyle,\n iconStyles,\n meContainerStyle,\n menuButtonContainerStyle,\n participantItemContainerStyle,\n participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _formatString, _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n /** Styles for the avatar. */\n avatar?: IStyle;\n /** Styles for the (You) string. */\n me?: IStyle;\n /** Styles for the container of the icon. */\n iconContainer?: IStyle;\n /** Styles for the menu. */\n menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n /** String shown when participant is me */\n isMeText: string;\n /** String shown when hovering over menu button */\n menuTitle: string;\n /** Label for the remove button in participant menu */\n removeButtonLabel: string;\n /** Label for the sharing icon in participant state stack */\n sharingIconLabel: string;\n /** Label for the muted icon in participant state stack */\n mutedIconLabel: string;\n /** Label for the raised hand icon in participant state stack */\n handRaisedIconLabel?: string;\n /** placeholder text for participants who does not have a display name*/\n displayNamePlaceholder?: string;\n /** String shown when `participantState` is `Ringing` */\n participantStateRinging?: string;\n /** String shown when `participantState` is `Hold` */\n participantStateHold?: string;\n /** Aria Label applied to the base element of the `participantItem` */\n participantItemAriaLabel?: string;\n /** Aria Label applied to the base element of the `participantItem` when there are more options present */\n participantItemWithMoreOptionsAriaLabel?: string;\n /** String for the attendee role */\n attendeeRole: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n userId?: string;\n /** Name of participant. */\n displayName?: string;\n /** Optional indicator to show participant is the user. */\n me?: boolean;\n /** Optional callback returning a JSX element to override avatar. */\n onRenderAvatar?: OnRenderAvatarCallback;\n /** Optional array of IContextualMenuItem for contextual menu. */\n menuItems?: IContextualMenuItem[];\n /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n presence?: PersonaPresence;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: ParticipantItemStyles;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<ParticipantItemStrings>;\n /**\n * Optional callback when component is clicked\n */\n onClick?: (props?: ParticipantItemProps) => void;\n /** Optional value to determine if the tooltip should be shown for participants or not */\n showParticipantOverflowTooltip?: boolean;\n /**\n * Optional value to determine and display a participants connection status.\n * For example, `Connecting`, `Ringing` etc.\n * The actual text that is displayed is determined by the localized string\n * corresponding to the provided participant state.\n * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n */\n participantState?: ParticipantState;\n /**\n * Optional aria property that prefixes the ParticipantItems aria content\n * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n */\n ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n const {\n userId,\n displayName,\n onRenderAvatar,\n menuItems,\n onRenderIcon,\n presence,\n styles,\n me,\n onClick,\n showParticipantOverflowTooltip\n } = props;\n const [itemHovered, setItemHovered] = useState<boolean>(false);\n const [menuHidden, setMenuHidden] = useState<boolean>(true);\n const containerRef = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const localeStrings = useLocale().strings.participantItem;\n const ids = useIdentifiers();\n const participantItemId = useId();\n const participantItemFlyoutId = useId();\n const hasFlyout = !!(menuItems && menuItems?.length > 0);\n const flyoutShowing = hasFlyout && menuHidden;\n\n const strings = { ...localeStrings, ...props.strings };\n const participantStateString = formatParticipantStateString(props, strings);\n\n const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && hasFlyout;\n\n // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n const meAvatarText = displayName?.trim() || '';\n\n const avatarOptions = {\n text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n size: PersonaSize.size32,\n presence: presence,\n initialsTextColor: 'white',\n showOverflowTooltip: showParticipantOverflowTooltip,\n showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n };\n\n const avatar = onRenderAvatar ? (\n onRenderAvatar(userId ?? '', avatarOptions)\n ) : (\n <Persona\n className={mergeStyles(\n {\n // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n lineHeight: '1.15rem'\n },\n styles?.avatar\n )}\n {...avatarOptions}\n />\n );\n\n const meTextStyle = useMemo(\n () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n [theme.palette.neutralSecondary, styles?.me]\n );\n const contextualMenuStyle = useMemo(\n () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n [theme.palette.neutralLighterAlt, styles?.menu]\n );\n const infoContainerStyle = useMemo(\n () =>\n mergeStyles(\n iconContainerStyle,\n { color: theme.palette.neutralSecondary, marginLeft: 'auto' },\n styles?.iconContainer\n ),\n [theme.palette.neutralSecondary, styles?.iconContainer]\n );\n\n const onDismissMenu = (): void => {\n setItemHovered(false);\n setMenuHidden(true);\n };\n\n const menuButton = useMemo(\n () => (\n <Stack\n horizontal={true}\n horizontalAlign=\"end\"\n className={mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary })}\n title={strings.menuTitle}\n data-ui-id={ids.participantItemMenuButton}\n >\n <Icon\n iconName=\"ParticipantItemOptionsHovered\"\n className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})}\n />\n </Stack>\n ),\n [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]\n );\n\n return (\n <div\n ref={containerRef}\n role={'menuitem'}\n id={participantItemId}\n aria-label={\n (hasFlyout ? props.strings?.participantItemWithMoreOptionsAriaLabel : undefined) ??\n props.strings?.participantItemAriaLabel\n }\n aria-labelledby={`${props.ariaLabelledBy} ${participantItemId}`}\n aria-expanded={flyoutShowing}\n aria-disabled={hasFlyout || props.onClick ? false : true}\n aria-haspopup={hasFlyout ? true : undefined}\n aria-controls={participantItemFlyoutId}\n data-is-focusable={hasFlyout}\n data-ui-id=\"participant-item\"\n className={mergeStyles(participantItemContainerStyle({ clickable: hasFlyout }, theme), styles?.root)}\n onMouseEnter={() => setItemHovered(true)}\n onMouseLeave={() => setItemHovered(false)}\n onClick={() => {\n if (!participantStateString) {\n setItemHovered(true);\n setMenuHidden(false);\n onClick?.(props);\n }\n if (!menuHidden) {\n onDismissMenu();\n }\n }}\n tabIndex={hasFlyout ? 0 : undefined}\n >\n <Stack\n horizontal\n className={mergeStyles({\n flexGrow: 1,\n maxWidth: '100%',\n alignItems: 'center'\n })}\n >\n {avatar}\n {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n {/* When the participantStateString has a value, we don't show the menu */}\n {!me && participantStateString ? (\n <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n {participantStateString}\n </Text>\n ) : (\n <>\n {hasFlyout && (\n <>\n {menuButton}\n <ContextualMenu\n id={participantItemFlyoutId}\n items={menuItems}\n hidden={menuHidden}\n target={containerRef}\n onItemClick={onDismissMenu}\n onDismiss={onDismissMenu}\n directionalHint={DirectionalHint.bottomRightEdge}\n className={contextualMenuStyle}\n calloutProps={{\n preventDismissOnEvent\n }}\n />\n </>\n )}\n </>\n )}\n </Stack>\n </Stack>\n </div>\n );\n};\n\n/** @private */\nexport const formatParticipantStateString = (\n props: ParticipantItemProps,\n strings: ParticipantItemStrings\n): string | undefined => {\n return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n};\n"]}
|
1
|
+
{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n ContextualMenu,\n DirectionalHint,\n Icon,\n IContextualMenuItem,\n IStyle,\n mergeStyles,\n Persona,\n PersonaPresence,\n PersonaSize,\n Stack,\n Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n displayNoneStyle,\n iconContainerStyle,\n iconStyles,\n meContainerStyle,\n menuButtonContainerStyle,\n participantItemContainerStyle,\n participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _formatString, _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n /** Styles for the avatar. */\n avatar?: IStyle;\n /** Styles for the (You) string. */\n me?: IStyle;\n /** Styles for the container of the icon. */\n iconContainer?: IStyle;\n /** Styles for the menu. */\n menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n /** String shown when participant is me */\n isMeText: string;\n /** String shown when hovering over menu button */\n menuTitle: string;\n /** Label for the remove button in participant menu */\n removeButtonLabel: string;\n /** Label for the sharing icon in participant state stack */\n sharingIconLabel: string;\n /** Label for the muted icon in participant state stack */\n mutedIconLabel: string;\n /** Label for the raised hand icon in participant state stack */\n handRaisedIconLabel?: string;\n /** placeholder text for participants who does not have a display name*/\n displayNamePlaceholder?: string;\n /** String shown when `participantState` is `Ringing` */\n participantStateRinging?: string;\n /** String shown when `participantState` is `Hold` */\n participantStateHold?: string;\n /** Aria Label applied to the base element of the `participantItem` */\n participantItemAriaLabel?: string;\n /** Aria Label applied to the base element of the `participantItem` when there are more options present */\n participantItemWithMoreOptionsAriaLabel?: string;\n /** String for the attendee role */\n attendeeRole: string;\n /** Label for the disabled microphone icon in participant state stack */\n micDisabledIconLabel: string;\n /** Label for the disabled camera icon in participant state stack */\n cameraDisabledIconLabel: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n userId?: string;\n /** Name of participant. */\n displayName?: string;\n /** Optional indicator to show participant is the user. */\n me?: boolean;\n /** Optional callback returning a JSX element to override avatar. */\n onRenderAvatar?: OnRenderAvatarCallback;\n /** Optional array of IContextualMenuItem for contextual menu. */\n menuItems?: IContextualMenuItem[];\n /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n presence?: PersonaPresence;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: ParticipantItemStyles;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<ParticipantItemStrings>;\n /**\n * Optional callback when component is clicked\n */\n onClick?: (props?: ParticipantItemProps) => void;\n /** Optional value to determine if the tooltip should be shown for participants or not */\n showParticipantOverflowTooltip?: boolean;\n /**\n * Optional value to determine and display a participants connection status.\n * For example, `Connecting`, `Ringing` etc.\n * The actual text that is displayed is determined by the localized string\n * corresponding to the provided participant state.\n * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n */\n participantState?: ParticipantState;\n /**\n * Optional aria property that prefixes the ParticipantItems aria content\n * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n */\n ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n const {\n userId,\n displayName,\n onRenderAvatar,\n menuItems,\n onRenderIcon,\n presence,\n styles,\n me,\n onClick,\n showParticipantOverflowTooltip\n } = props;\n const [itemHovered, setItemHovered] = useState<boolean>(false);\n const [menuHidden, setMenuHidden] = useState<boolean>(true);\n const containerRef = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const localeStrings = useLocale().strings.participantItem;\n const ids = useIdentifiers();\n const participantItemId = useId();\n const participantItemFlyoutId = useId();\n const hasFlyout = !!(menuItems && menuItems?.length > 0);\n const flyoutShowing = hasFlyout && menuHidden;\n\n const strings = { ...localeStrings, ...props.strings };\n const participantStateString = formatParticipantStateString(props, strings);\n\n const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && hasFlyout;\n\n // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n const meAvatarText = displayName?.trim() || '';\n\n const avatarOptions = {\n text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n size: PersonaSize.size32,\n presence: presence,\n initialsTextColor: 'white',\n showOverflowTooltip: showParticipantOverflowTooltip,\n showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n };\n\n const avatar = onRenderAvatar ? (\n onRenderAvatar(userId ?? '', avatarOptions)\n ) : (\n <Persona\n className={mergeStyles(\n {\n // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n lineHeight: '1.15rem'\n },\n styles?.avatar\n )}\n {...avatarOptions}\n />\n );\n\n const meTextStyle = useMemo(\n () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n [theme.palette.neutralSecondary, styles?.me]\n );\n const contextualMenuStyle = useMemo(\n () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n [theme.palette.neutralLighterAlt, styles?.menu]\n );\n const infoContainerStyle = useMemo(\n () =>\n mergeStyles(\n iconContainerStyle,\n { color: theme.palette.neutralSecondary, marginLeft: 'auto' },\n styles?.iconContainer\n ),\n [theme.palette.neutralSecondary, styles?.iconContainer]\n );\n\n const onDismissMenu = (): void => {\n setItemHovered(false);\n setMenuHidden(true);\n };\n\n const menuButton = useMemo(\n () => (\n <Stack\n horizontal={true}\n horizontalAlign=\"end\"\n className={mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary })}\n title={strings.menuTitle}\n data-ui-id={ids.participantItemMenuButton}\n >\n <Icon\n iconName=\"ParticipantItemOptionsHovered\"\n className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})}\n />\n </Stack>\n ),\n [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]\n );\n\n return (\n <div\n ref={containerRef}\n role={'menuitem'}\n id={participantItemId}\n aria-label={\n (hasFlyout ? props.strings?.participantItemWithMoreOptionsAriaLabel : undefined) ??\n props.strings?.participantItemAriaLabel\n }\n aria-labelledby={`${props.ariaLabelledBy} ${participantItemId}`}\n aria-expanded={flyoutShowing}\n aria-disabled={hasFlyout || props.onClick ? false : true}\n aria-haspopup={hasFlyout ? true : undefined}\n aria-controls={participantItemFlyoutId}\n data-is-focusable={hasFlyout}\n data-ui-id=\"participant-item\"\n className={mergeStyles(participantItemContainerStyle({ clickable: hasFlyout }, theme), styles?.root)}\n onMouseEnter={() => setItemHovered(true)}\n onMouseLeave={() => setItemHovered(false)}\n onClick={() => {\n if (!participantStateString) {\n setItemHovered(true);\n setMenuHidden(false);\n onClick?.(props);\n }\n if (!menuHidden) {\n onDismissMenu();\n }\n }}\n tabIndex={hasFlyout ? 0 : undefined}\n >\n <Stack\n horizontal\n className={mergeStyles({\n flexGrow: 1,\n maxWidth: '100%',\n alignItems: 'center'\n })}\n >\n {avatar}\n {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n {/* When the participantStateString has a value, we don't show the menu */}\n {!me && participantStateString ? (\n <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n {participantStateString}\n </Text>\n ) : (\n <>\n {hasFlyout && (\n <>\n {menuButton}\n <ContextualMenu\n id={participantItemFlyoutId}\n items={menuItems}\n hidden={menuHidden}\n target={containerRef}\n onItemClick={onDismissMenu}\n onDismiss={onDismissMenu}\n directionalHint={DirectionalHint.bottomRightEdge}\n className={contextualMenuStyle}\n calloutProps={{\n preventDismissOnEvent\n }}\n />\n </>\n )}\n </>\n )}\n </Stack>\n </Stack>\n </div>\n );\n};\n\n/** @private */\nexport const formatParticipantStateString = (\n props: ParticipantItemProps,\n strings: ParticipantItemStrings\n): string | undefined => {\n return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n};\n"]}
|
@@ -11,7 +11,7 @@ import { formatParticipantStateString, ParticipantItem } from './ParticipantItem
|
|
11
11
|
import { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';
|
12
12
|
import { _formatString } from "../../../acs-ui-common/src";
|
13
13
|
const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants) => {
|
14
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
14
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
15
15
|
const callingParticipant = participant;
|
16
16
|
let presence = undefined;
|
17
17
|
if (callingParticipant) {
|
@@ -74,12 +74,14 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
|
|
74
74
|
displayName: displayName !== null && displayName !== void 0 ? displayName : '',
|
75
75
|
connectionState: (_b = formatParticipantStateString(callingParticipant, strings)) !== null && _b !== void 0 ? _b : '',
|
76
76
|
mutedState: (_c = (callingParticipant.isMuted ? strings === null || strings === void 0 ? void 0 : strings.mutedIconLabel : undefined)) !== null && _c !== void 0 ? _c : '',
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
77
|
+
micDisabledState: (_e = (((_d = callingParticipant.mediaAccess) === null || _d === void 0 ? void 0 : _d.isAudioPermitted) === false ? strings === null || strings === void 0 ? void 0 : strings.micDisabledIconLabel : undefined)) !== null && _e !== void 0 ? _e : '',
|
78
|
+
cameraDisabledState: (_g = (((_f = callingParticipant.mediaAccess) === null || _f === void 0 ? void 0 : _f.isVideoPermitted) === false ? strings === null || strings === void 0 ? void 0 : strings.cameraDisabledIconLabel : undefined)) !== null && _g !== void 0 ? _g : '',
|
79
|
+
sharingState: (_h = (callingParticipant.isScreenSharing ? strings === null || strings === void 0 ? void 0 : strings.sharingIconLabel : undefined)) !== null && _h !== void 0 ? _h : '',
|
80
|
+
handRaisedState: (_p = (((_j = callingParticipant.raisedHand) === null || _j === void 0 ? void 0 : _j.raisedHandOrderPosition)
|
81
|
+
? _formatString((_k = strings === null || strings === void 0 ? void 0 : strings.handRaisedIconLabel) !== null && _k !== void 0 ? _k : '', {
|
82
|
+
position: (_o = (_m = (_l = callingParticipant.raisedHand) === null || _l === void 0 ? void 0 : _l.raisedHandOrderPosition) === null || _m === void 0 ? void 0 : _m.toString()) !== null && _o !== void 0 ? _o : ''
|
81
83
|
})
|
82
|
-
: undefined)) !== null &&
|
84
|
+
: undefined)) !== null && _p !== void 0 ? _p : ''
|
83
85
|
});
|
84
86
|
return (React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatarWithRaiseHand, onClick: onParticipantClick ? () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant) : undefined, showParticipantOverflowTooltip: showParticipantOverflowTooltip, participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy, strings: {
|
85
87
|
participantItemAriaLabel: ariaLabel
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n Icon,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n merge,\n mergeStyles,\n PersonaPresence,\n Stack,\n Theme\n} from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n BaseCustomStyles,\n CallParticipantListParticipant,\n OnRenderAvatarCallback,\n ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport {\n formatParticipantStateString,\n ParticipantItem,\n ParticipantItemStrings,\n ParticipantItemStyles\n} from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n participantItemStyles?: ParticipantListItemStyles;\n}\n\n/* @conditional-compile-remove(total-participant-count) */\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n /**\n * String for rendering the count of participants not contained in the displayed participant list\n */\n overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n participantUserId: string,\n userId?: string,\n defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n /** Participants in user call or chat */\n participants: ParticipantListParticipant[];\n /** User ID of user */\n myUserId?: string;\n /**\n * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n *\n * @defaultValue `false`\n */\n excludeMe?: boolean;\n /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem` */\n onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned. */\n onRenderAvatar?: OnRenderAvatarCallback;\n /** Optional callback to render the context menu for each participant */\n onRemoveParticipant?: (userId: string) => void;\n /** Optional callback to render custom menu items for each participant. */\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /** Optional callback when rendered ParticipantItem is clicked */\n onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n /** Optional callback to render a context menu to mute a participant */\n onMuteParticipant?: (userId: string) => Promise<void>;\n styles?: ParticipantListStyles;\n /** Optional value to determine if the tooltip should be shown for participants or not */\n showParticipantOverflowTooltip?: boolean;\n /* @conditional-compile-remove(total-participant-count) */\n /** Total number of people in the call. This number can be larger than the remote participant count. */\n totalParticipantCount?: number;\n /* @conditional-compile-remove(total-participant-count) */\n /** Strings for the participant list */\n strings?: ParticipantListStrings;\n /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n participantAriaLabelledBy?: string;\n /** List of pinned participants */\n pinnedParticipants?: string[];\n};\n\nconst onRenderParticipantDefault = (\n participant: ParticipantListParticipant,\n strings: ParticipantItemStrings,\n myUserId?: string,\n onRenderAvatar?: OnRenderAvatarCallback,\n createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n styles?: ParticipantListItemStyles,\n onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n showParticipantOverflowTooltip?: boolean,\n participantAriaLabelledBy?: string,\n theme?: Theme,\n pinnedParticipants?: string[]\n): JSX.Element | null => {\n const callingParticipant = participant as CallParticipantListParticipant;\n\n let presence: PersonaPresence | undefined = undefined;\n if (callingParticipant) {\n presence = PersonaPresence.none;\n }\n\n const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n const formatDisplayName = (displayName?: string): string | undefined => {\n if (displayName && strings.attendeeRole) {\n return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n }\n return displayName;\n };\n const displayName = formatDisplayName(participant.displayName);\n\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n\n const showRenderIconTrampoline = (): boolean => {\n /* @conditional-compile-remove(media-access) */\n return !!(\n callingParticipant?.isScreenSharing ||\n callingParticipant?.isMuted ||\n callingParticipant?.raisedHand ||\n isPinned ||\n !(callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) ||\n !(callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isVideoPermitted : true)\n );\n\n return !!(\n callingParticipant?.isScreenSharing ||\n callingParticipant?.isMuted ||\n callingParticipant?.raisedHand ||\n isPinned\n );\n };\n\n const onRenderIcon = showRenderIconTrampoline()\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {callingParticipant.raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n style={{\n alignItems: 'center',\n padding: '0.1rem 0.2rem',\n backgroundColor: theme?.palette.neutralLighter,\n borderRadius: '0.3rem'\n }}\n >\n {callingParticipant.raisedHand.raisedHandOrderPosition && (\n <Stack.Item>\n <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n </Stack.Item>\n )}\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )}\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n {\n /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&\n !callingParticipant.mediaAccess.isVideoPermitted ? (\n <Icon\n iconName=\"ControlButtonCameraProhibited\"\n className={iconStyles}\n ariaLabel={strings.mutedIconLabel}\n />\n ) : undefined\n }\n {\n /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&\n !callingParticipant.mediaAccess?.isAudioPermitted ? (\n <Icon iconName=\"ControlButtonMicProhibited\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n ) : undefined\n }\n {\n /* @conditional-compile-remove(media-access) */ (callingParticipant.mediaAccess\n ? callingParticipant.mediaAccess.isAudioPermitted\n : true) && callingParticipant.isMuted ? (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n ) : undefined\n }\n </Stack>\n )\n : () => null;\n\n const onRenderAvatarWithRaiseHand =\n callingParticipant?.raisedHand && onRenderAvatar\n ? (\n userId?: string,\n options?: CustomAvatarOptions,\n defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n ) =>\n onRenderAvatar(\n userId,\n { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n defaultOnRender\n )\n : onRenderAvatar;\n\n const ariaLabelTemplate =\n (menuItems && menuItems.length > 0 ? strings?.participantItemWithMoreOptionsAriaLabel : undefined) ??\n strings?.participantItemAriaLabel;\n const ariaLabel = _formatString(ariaLabelTemplate ?? '', {\n displayName: displayName ?? '',\n connectionState: formatParticipantStateString(callingParticipant, strings) ?? '',\n mutedState: (callingParticipant.isMuted ? strings?.mutedIconLabel : undefined) ?? '',\n sharingState: (callingParticipant.isScreenSharing ? strings?.sharingIconLabel : undefined) ?? '',\n handRaisedState:\n (callingParticipant.raisedHand?.raisedHandOrderPosition\n ? _formatString(strings?.handRaisedIconLabel ?? '', {\n position: callingParticipant.raisedHand?.raisedHandOrderPosition?.toString() ?? ''\n })\n : undefined) ?? ''\n });\n\n return (\n <ParticipantItem\n styles={styles}\n key={participant.userId}\n userId={participant.userId}\n displayName={displayName}\n me={myUserId ? participant.userId === myUserId : false}\n menuItems={menuItems}\n presence={presence}\n onRenderIcon={onRenderIcon}\n onRenderAvatar={onRenderAvatarWithRaiseHand}\n onClick={onParticipantClick ? () => onParticipantClick?.(participant) : undefined}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n strings={{\n participantItemAriaLabel: ariaLabel\n }}\n />\n );\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n participants.sort((a, b) => {\n if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n return 0;\n }\n const callA = a as CallParticipantListParticipant;\n const callB = b as CallParticipantListParticipant;\n if (callA.raisedHand && callB.raisedHand) {\n return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n } else if (callA.raisedHand) {\n return -1;\n } else if (callB.raisedHand) {\n return 1;\n }\n return 0;\n });\n return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n participants: ParticipantListParticipant[],\n excludeMe: boolean,\n myUserId: string | undefined\n): ParticipantListParticipant[] => {\n if (!excludeMe || !myUserId) {\n return [...participants];\n }\n\n const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n if (userIndex === -1) {\n return [...participants];\n }\n\n const remoteParticipants = [...participants];\n remoteParticipants.splice(userIndex, 1);\n\n return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n const {\n excludeMe = false,\n myUserId,\n participants,\n onRemoveParticipant,\n onRenderAvatar,\n onRenderParticipant,\n onFetchParticipantMenuItems,\n showParticipantOverflowTooltip,\n /* @conditional-compile-remove(total-participant-count) */\n totalParticipantCount,\n /* @conditional-compile-remove(total-participant-count) */\n strings,\n participantAriaLabelledBy,\n pinnedParticipants\n } = props;\n\n const theme = useTheme();\n const ids = useIdentifiers();\n const participantItemStrings = useLocale().strings.participantItem;\n /* @conditional-compile-remove(total-participant-count) */\n const participantListStrings = useLocale().strings.ParticipantList;\n\n const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n sortParticipants(displayedParticipants);\n\n const createParticipantMenuItems = useCallback(\n (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n let menuItems: IContextualMenuItem[] = [];\n\n const participantIsRemovable = participant.isRemovable;\n if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n menuItems.push({\n key: 'remove',\n text: participantItemStrings.removeButtonLabel,\n onClick: () => onRemoveParticipant(participant.userId),\n itemProps: {\n styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n },\n iconProps: {\n iconName: 'ContextMenuRemoveParticipant',\n styles: { root: { lineHeight: 0 } }\n },\n 'data-ui-id': ids.participantListRemoveParticipantButton\n });\n }\n\n if (onFetchParticipantMenuItems) {\n menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n }\n\n return menuItems;\n },\n [\n ids.participantListRemoveParticipantButton,\n myUserId,\n onFetchParticipantMenuItems,\n onRemoveParticipant,\n props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n participantItemStrings.removeButtonLabel\n ]\n );\n\n const participantItemStyles = useMemo(\n () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n [props.styles?.participantItemStyles]\n );\n\n /* @conditional-compile-remove(total-participant-count) */\n const overflowParticipantCountString =\n strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n return (\n <Stack\n data-ui-id={ids.participantList}\n className={mergeStyles(participantListStyle, props.styles?.root)}\n role={'menu'}\n >\n {displayedParticipants.map((participant: ParticipantListParticipant) =>\n onRenderParticipant\n ? onRenderParticipant(participant)\n : onRenderParticipantDefault(\n participant,\n participantItemStrings,\n myUserId,\n onRenderAvatar,\n createParticipantMenuItems,\n participantItemStyles,\n props.onParticipantClick,\n showParticipantOverflowTooltip,\n participantAriaLabelledBy,\n theme,\n pinnedParticipants\n )\n )}\n {\n /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n totalParticipantCount &&\n totalParticipantCount > displayedParticipants.length && (\n <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n {_formatString(overflowParticipantCountString, {\n overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n })}\n </Text>\n )\n }\n </Stack>\n );\n};\n"]}
|
1
|
+
{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n Icon,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n merge,\n mergeStyles,\n PersonaPresence,\n Stack,\n Theme\n} from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n BaseCustomStyles,\n CallParticipantListParticipant,\n OnRenderAvatarCallback,\n ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport {\n formatParticipantStateString,\n ParticipantItem,\n ParticipantItemStrings,\n ParticipantItemStyles\n} from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n participantItemStyles?: ParticipantListItemStyles;\n}\n\n/* @conditional-compile-remove(total-participant-count) */\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n /**\n * String for rendering the count of participants not contained in the displayed participant list\n */\n overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n participantUserId: string,\n userId?: string,\n defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n /** Participants in user call or chat */\n participants: ParticipantListParticipant[];\n /** User ID of user */\n myUserId?: string;\n /**\n * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n *\n * @defaultValue `false`\n */\n excludeMe?: boolean;\n /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem` */\n onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned. */\n onRenderAvatar?: OnRenderAvatarCallback;\n /** Optional callback to render the context menu for each participant */\n onRemoveParticipant?: (userId: string) => void;\n /** Optional callback to render custom menu items for each participant. */\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /** Optional callback when rendered ParticipantItem is clicked */\n onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n /** Optional callback to render a context menu to mute a participant */\n onMuteParticipant?: (userId: string) => Promise<void>;\n styles?: ParticipantListStyles;\n /** Optional value to determine if the tooltip should be shown for participants or not */\n showParticipantOverflowTooltip?: boolean;\n /* @conditional-compile-remove(total-participant-count) */\n /** Total number of people in the call. This number can be larger than the remote participant count. */\n totalParticipantCount?: number;\n /* @conditional-compile-remove(total-participant-count) */\n /** Strings for the participant list */\n strings?: ParticipantListStrings;\n /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n participantAriaLabelledBy?: string;\n /** List of pinned participants */\n pinnedParticipants?: string[];\n};\n\nconst onRenderParticipantDefault = (\n participant: ParticipantListParticipant,\n strings: ParticipantItemStrings,\n myUserId?: string,\n onRenderAvatar?: OnRenderAvatarCallback,\n createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n styles?: ParticipantListItemStyles,\n onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n showParticipantOverflowTooltip?: boolean,\n participantAriaLabelledBy?: string,\n theme?: Theme,\n pinnedParticipants?: string[]\n): JSX.Element | null => {\n const callingParticipant = participant as CallParticipantListParticipant;\n\n let presence: PersonaPresence | undefined = undefined;\n if (callingParticipant) {\n presence = PersonaPresence.none;\n }\n\n const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n const formatDisplayName = (displayName?: string): string | undefined => {\n if (displayName && strings.attendeeRole) {\n return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n }\n return displayName;\n };\n const displayName = formatDisplayName(participant.displayName);\n\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n\n const showRenderIconTrampoline = (): boolean => {\n /* @conditional-compile-remove(media-access) */\n return !!(\n callingParticipant?.isScreenSharing ||\n callingParticipant?.isMuted ||\n callingParticipant?.raisedHand ||\n isPinned ||\n !(callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) ||\n !(callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isVideoPermitted : true)\n );\n\n return !!(\n callingParticipant?.isScreenSharing ||\n callingParticipant?.isMuted ||\n callingParticipant?.raisedHand ||\n isPinned\n );\n };\n\n const onRenderIcon = showRenderIconTrampoline()\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {callingParticipant.raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n style={{\n alignItems: 'center',\n padding: '0.1rem 0.2rem',\n backgroundColor: theme?.palette.neutralLighter,\n borderRadius: '0.3rem'\n }}\n >\n {callingParticipant.raisedHand.raisedHandOrderPosition && (\n <Stack.Item>\n <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n </Stack.Item>\n )}\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )}\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n {\n /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&\n !callingParticipant.mediaAccess.isVideoPermitted ? (\n <Icon\n iconName=\"ControlButtonCameraProhibited\"\n className={iconStyles}\n ariaLabel={strings.mutedIconLabel}\n />\n ) : undefined\n }\n {\n /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&\n !callingParticipant.mediaAccess?.isAudioPermitted ? (\n <Icon iconName=\"ControlButtonMicProhibited\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n ) : undefined\n }\n {\n /* @conditional-compile-remove(media-access) */ (callingParticipant.mediaAccess\n ? callingParticipant.mediaAccess.isAudioPermitted\n : true) && callingParticipant.isMuted ? (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n ) : undefined\n }\n </Stack>\n )\n : () => null;\n\n const onRenderAvatarWithRaiseHand =\n callingParticipant?.raisedHand && onRenderAvatar\n ? (\n userId?: string,\n options?: CustomAvatarOptions,\n defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n ) =>\n onRenderAvatar(\n userId,\n { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n defaultOnRender\n )\n : onRenderAvatar;\n\n const ariaLabelTemplate =\n (menuItems && menuItems.length > 0 ? strings?.participantItemWithMoreOptionsAriaLabel : undefined) ??\n strings?.participantItemAriaLabel;\n const ariaLabel = _formatString(ariaLabelTemplate ?? '', {\n displayName: displayName ?? '',\n connectionState: formatParticipantStateString(callingParticipant, strings) ?? '',\n mutedState: (callingParticipant.isMuted ? strings?.mutedIconLabel : undefined) ?? '',\n micDisabledState:\n (callingParticipant.mediaAccess?.isAudioPermitted === false ? strings?.micDisabledIconLabel : undefined) ?? '',\n cameraDisabledState:\n (callingParticipant.mediaAccess?.isVideoPermitted === false ? strings?.cameraDisabledIconLabel : undefined) ?? '',\n sharingState: (callingParticipant.isScreenSharing ? strings?.sharingIconLabel : undefined) ?? '',\n handRaisedState:\n (callingParticipant.raisedHand?.raisedHandOrderPosition\n ? _formatString(strings?.handRaisedIconLabel ?? '', {\n position: callingParticipant.raisedHand?.raisedHandOrderPosition?.toString() ?? ''\n })\n : undefined) ?? ''\n });\n\n return (\n <ParticipantItem\n styles={styles}\n key={participant.userId}\n userId={participant.userId}\n displayName={displayName}\n me={myUserId ? participant.userId === myUserId : false}\n menuItems={menuItems}\n presence={presence}\n onRenderIcon={onRenderIcon}\n onRenderAvatar={onRenderAvatarWithRaiseHand}\n onClick={onParticipantClick ? () => onParticipantClick?.(participant) : undefined}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n strings={{\n participantItemAriaLabel: ariaLabel\n }}\n />\n );\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n participants.sort((a, b) => {\n if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n return 0;\n }\n const callA = a as CallParticipantListParticipant;\n const callB = b as CallParticipantListParticipant;\n if (callA.raisedHand && callB.raisedHand) {\n return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n } else if (callA.raisedHand) {\n return -1;\n } else if (callB.raisedHand) {\n return 1;\n }\n return 0;\n });\n return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n participants: ParticipantListParticipant[],\n excludeMe: boolean,\n myUserId: string | undefined\n): ParticipantListParticipant[] => {\n if (!excludeMe || !myUserId) {\n return [...participants];\n }\n\n const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n if (userIndex === -1) {\n return [...participants];\n }\n\n const remoteParticipants = [...participants];\n remoteParticipants.splice(userIndex, 1);\n\n return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n const {\n excludeMe = false,\n myUserId,\n participants,\n onRemoveParticipant,\n onRenderAvatar,\n onRenderParticipant,\n onFetchParticipantMenuItems,\n showParticipantOverflowTooltip,\n /* @conditional-compile-remove(total-participant-count) */\n totalParticipantCount,\n /* @conditional-compile-remove(total-participant-count) */\n strings,\n participantAriaLabelledBy,\n pinnedParticipants\n } = props;\n\n const theme = useTheme();\n const ids = useIdentifiers();\n const participantItemStrings = useLocale().strings.participantItem;\n /* @conditional-compile-remove(total-participant-count) */\n const participantListStrings = useLocale().strings.ParticipantList;\n\n const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n sortParticipants(displayedParticipants);\n\n const createParticipantMenuItems = useCallback(\n (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n let menuItems: IContextualMenuItem[] = [];\n\n const participantIsRemovable = participant.isRemovable;\n if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n menuItems.push({\n key: 'remove',\n text: participantItemStrings.removeButtonLabel,\n onClick: () => onRemoveParticipant(participant.userId),\n itemProps: {\n styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n },\n iconProps: {\n iconName: 'ContextMenuRemoveParticipant',\n styles: { root: { lineHeight: 0 } }\n },\n 'data-ui-id': ids.participantListRemoveParticipantButton\n });\n }\n\n if (onFetchParticipantMenuItems) {\n menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n }\n\n return menuItems;\n },\n [\n ids.participantListRemoveParticipantButton,\n myUserId,\n onFetchParticipantMenuItems,\n onRemoveParticipant,\n props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n participantItemStrings.removeButtonLabel\n ]\n );\n\n const participantItemStyles = useMemo(\n () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n [props.styles?.participantItemStyles]\n );\n\n /* @conditional-compile-remove(total-participant-count) */\n const overflowParticipantCountString =\n strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n return (\n <Stack\n data-ui-id={ids.participantList}\n className={mergeStyles(participantListStyle, props.styles?.root)}\n role={'menu'}\n >\n {displayedParticipants.map((participant: ParticipantListParticipant) =>\n onRenderParticipant\n ? onRenderParticipant(participant)\n : onRenderParticipantDefault(\n participant,\n participantItemStrings,\n myUserId,\n onRenderAvatar,\n createParticipantMenuItems,\n participantItemStyles,\n props.onParticipantClick,\n showParticipantOverflowTooltip,\n participantAriaLabelledBy,\n theme,\n pinnedParticipants\n )\n )}\n {\n /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n totalParticipantCount &&\n totalParticipantCount > displayedParticipants.length && (\n <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n {_formatString(overflowParticipantCountString, {\n overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n })}\n </Text>\n )\n }\n </Stack>\n );\n};\n"]}
|
@@ -160,19 +160,16 @@ export const RichTextSendBox = (props) => {
|
|
160
160
|
strings.imageUploadsPendingError,
|
161
161
|
onSendMessage
|
162
162
|
]);
|
163
|
-
|
164
|
-
|
163
|
+
// ignore attachments error (errored attachment will not be added, shouldn't disable SendButton)
|
164
|
+
const hasBlockingErrorMessages = useMemo(() => {
|
165
|
+
var _a;
|
165
166
|
return (!!systemMessage ||
|
166
167
|
!!contentTooLongMessage ||
|
167
168
|
/* @conditional-compile-remove(file-sharing-acs) */
|
168
169
|
!!attachmentUploadsPendingError ||
|
169
|
-
/* @conditional-compile-remove(file-sharing-acs) */
|
170
|
-
!!((_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error) ||
|
171
170
|
/* @conditional-compile-remove(rich-text-editor-image-upload) */
|
172
|
-
!!((
|
171
|
+
!!((_a = inlineImagesWithProgress === null || inlineImagesWithProgress === void 0 ? void 0 : inlineImagesWithProgress.filter((image) => image.error).pop()) === null || _a === void 0 ? void 0 : _a.error));
|
173
172
|
}, [
|
174
|
-
/* @conditional-compile-remove(file-sharing-acs) */
|
175
|
-
attachments,
|
176
173
|
contentTooLongMessage,
|
177
174
|
/* @conditional-compile-remove(file-sharing-acs) */
|
178
175
|
attachmentUploadsPendingError,
|
@@ -184,10 +181,10 @@ export const RichTextSendBox = (props) => {
|
|
184
181
|
return isSendBoxButtonDisabled({
|
185
182
|
hasContent,
|
186
183
|
/* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),
|
187
|
-
hasError:
|
184
|
+
hasError: hasBlockingErrorMessages,
|
188
185
|
disabled
|
189
186
|
});
|
190
|
-
}, [/* @conditional-compile-remove(file-sharing-acs) */ attachments, disabled, hasContent,
|
187
|
+
}, [/* @conditional-compile-remove(file-sharing-acs) */ attachments, disabled, hasContent, hasBlockingErrorMessages]);
|
191
188
|
const onRenderSendIcon = useCallback((isHover) => {
|
192
189
|
return (React.createElement(Icon, { iconName: isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
|
193
190
|
theme,
|
@@ -203,6 +200,12 @@ export const RichTextSendBox = (props) => {
|
|
203
200
|
const imageUploadErrorMessage = (_d = (_c = inlineImagesWithProgress === null || inlineImagesWithProgress === void 0 ? void 0 : inlineImagesWithProgress.filter((image) => image.error).pop()) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.message;
|
204
201
|
/* @conditional-compile-remove(file-sharing-acs) */
|
205
202
|
const errorMessage = uploadErrorMessage || /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageUploadErrorMessage;
|
203
|
+
/* @conditional-compile-remove(rich-text-editor-image-upload) */
|
204
|
+
let errorBarType = SendBoxErrorBarType.error;
|
205
|
+
/* @conditional-compile-remove(file-sharing-acs) */
|
206
|
+
if (uploadErrorMessage) {
|
207
|
+
errorBarType = SendBoxErrorBarType.warning;
|
208
|
+
}
|
206
209
|
return {
|
207
210
|
/* @conditional-compile-remove(file-sharing-acs) */
|
208
211
|
attachmentUploadsPendingError: attachmentUploadsPendingError,
|
@@ -212,7 +215,7 @@ export const RichTextSendBox = (props) => {
|
|
212
215
|
message: errorMessage,
|
213
216
|
timestamp: Date.now(),
|
214
217
|
/* @conditional-compile-remove(rich-text-editor-image-upload) */
|
215
|
-
errorBarType:
|
218
|
+
errorBarType: errorBarType
|
216
219
|
}
|
217
220
|
: undefined,
|
218
221
|
systemMessage: systemMessage,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useV9CustomStyles } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport {\n isMessageTooLong,\n isSendBoxButtonDisabled,\n sanitizeText,\n modifyInlineImagesInContentString\n} from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { hasInlineImageContent, getContentWithUpdatedInlineImagesInfo } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { _AttachmentUploadCards } from '../Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport {\n isAttachmentUploadCompleted,\n hasIncompleteAttachmentUploads,\n toAttachmentMetadata\n} from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { SendBoxErrorBarType } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {}\n\n/* @conditional-compile-remove(rich-text-editor) */\n/**\n * Options for the rich text editor configuration.\n *\n * @beta\n */\nexport interface RichTextEditorOptions {\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional callback to handle paste event.\n */\n onPaste?: (event: { content: DocumentFragment }) => void;\n}\n\n/**\n * Strings of RichText that can be overridden.\n *\n * @beta\n */\nexport interface RichTextStrings {\n /**\n * Tooltip text for the bold button.\n */\n richTextBoldTooltip: string;\n /**\n * Tooltip text for the italic button.\n */\n richTextItalicTooltip: string;\n /**\n * Tooltip text for the underline button.\n */\n richTextUnderlineTooltip: string;\n /**\n * Tooltip text for the bullet list button.\n */\n richTextBulletListTooltip: string;\n /**\n * Tooltip text for the number list button.\n */\n richTextNumberListTooltip: string;\n /**\n * Tooltip text for the increase indent button.\n */\n richTextIncreaseIndentTooltip: string;\n /**\n * Tooltip text for the decrease indent button.\n */\n richTextDecreaseIndentTooltip: string;\n /**\n * Tooltip text insert table button.\n */\n richTextInsertTableTooltip: string;\n /**\n * Tooltip text for the rich text format button button.\n */\n richTextFormatButtonTooltip: string;\n /**\n * Text for the insert menu item.\n */\n richTextInsertRowOrColumnMenu: string;\n /**\n * Title for the insert table menu.\n */\n richTextInsertTableMenuTitle: string;\n /**\n * Text for the insert menu item to insert row above the current selection.\n */\n richTextInsertRowAboveMenu: string;\n /**\n * Text for the insert menu item to insert row below the current selection.\n */\n richTextInsertRowBelowMenu: string;\n /**\n * Text for the insert menu item to insert column to the left from the current selection.\n */\n richTextInsertColumnLeftMenu: string;\n /**\n * Text for the insert menu item to insert column to the right from the current selection.\n */\n richTextInsertColumnRightMenu: string;\n /**\n * Text for the delete row or column menu.\n */\n richTextDeleteRowOrColumnMenu: string;\n /**\n * Text for the delete column menu.\n */\n richTextDeleteColumnMenu: string;\n /**\n * Text for the delete row menu.\n */\n richTextDeleteRowMenu: string;\n /**\n * Text for the delete table menu.\n */\n richTextDeleteTableMenu: string;\n /**\n * Text for the rich text toolbar.\n */\n richTextToolbarAriaLabel: string;\n /**\n * Text for the rich text toolbar more button.\n */\n richTextToolbarMoreButtonAriaLabel: string;\n /**\n * Text for announcement when a new bulleted list item is added.\n */\n richTextNewBulletedListItemAnnouncement: string;\n /**\n * Text for announcement when a new numbered list item is added.\n */\n richTextNewNumberedListItemAnnouncement: string;\n /**\n * Text for announcement when the bulleted list style is applied.\n */\n richTextBulletedListAppliedAnnouncement: string;\n /**\n * Text for announcement when the numbered list style is applied.\n */\n richTextNumberedListAppliedAnnouncement: string;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Error message indicating image upload is not complete.\n */\n imageUploadsPendingError: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n /**\n * Optional boolean to disable text box\n * @defaultValue false\n */\n disabled?: boolean;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional callback to handle paste event.\n */\n onPaste?: (event: { content: DocumentFragment }) => void;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<RichTextSendBoxStrings>;\n /**\n * Optional text for system message above the text box\n */\n systemMessage?: string;\n /* @conditional-compile-remove(file-sharing-acs) */\n /**\n * Optional array of type {@link AttachmentMetadataInProgress}\n * to render attachments being uploaded in the SendBox.\n * @beta\n */\n attachments?: AttachmentMetadataInProgress[];\n /**\n * enumerable to determine if the input box has focus on render or not.\n * When undefined nothing has focus on render\n */\n autoFocus?: 'sendBoxTextField';\n /* @conditional-compile-remove(file-sharing-acs) */\n /**\n * Optional callback to remove the attachment upload before sending by clicking on\n * cancel icon.\n */\n onCancelAttachmentUpload?: (attachmentId: string) => void;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional callback invoked after inline image is removed from the UI.\n * @param imageAttributes - attributes of the image such as id, src, style, etc.\n * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].\n * Note that if the src attribute is a local blob url, it has been revoked at this point.\n */\n onRemoveInlineImage?: (imageAttributes: Record<string, string>) => void;\n /**\n * Callback function used when the send button is clicked.\n */\n onSendMessage: (\n content: string,\n /* @conditional-compile-remove(file-sharing-acs) */\n options?: MessageOptions\n ) => Promise<void>;\n /**\n * Optional callback called when user is typing\n */\n onTyping?: () => Promise<void>;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional callback to handle an inline image that's inserted in the rich text editor.\n * When not provided, pasting images into rich text editor will be disabled.\n * @param imageAttributes - attributes of the image such as id, src, style, etc.\n * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']\n */\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional Array of type {@link AttachmentMetadataInProgress}\n * to render the errorBar for inline images inserted in the RichTextSendBox when:\n * - there is an error provided in the inlineImagesWithProgress\n * - progress is less than 1 when the send button is clicked\n * - content html string is longer than the max allowed length.\n * (Note that the id and the url prop of the inlineImagesWithProgress will be used as the id and src attribute of the content html\n * when calculating the content length, only for the purpose of displaying the content length overflow error.)\n */\n inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n const {\n disabled = false,\n systemMessage,\n autoFocus,\n onSendMessage,\n onTyping,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachments,\n /* @conditional-compile-remove(file-sharing-acs) */\n onCancelAttachmentUpload,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onPaste,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onInsertInlineImage,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n inlineImagesWithProgress,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onRemoveInlineImage\n } = props;\n\n const theme = useTheme();\n const locale = useLocale();\n\n const localeStrings = useMemo(() => {\n /* @conditional-compile-remove(rich-text-editor) */\n return locale.strings.richTextSendBox;\n return locale.strings.sendBox;\n }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n const strings = useMemo(() => {\n return { ...localeStrings, ...props.strings };\n }, [localeStrings, props.strings]);\n\n const [contentValue, setContentValue] = useState('');\n const [contentValueOverflow, setContentValueOverflow] = useState(false);\n /* @conditional-compile-remove(file-sharing-acs) */\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n undefined\n );\n const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const customV9Styles = useV9CustomStyles();\n\n const contentTooLongMessage = useMemo(\n () => (contentValueOverflow ? strings.textTooLong : undefined),\n [contentValueOverflow, strings.textTooLong]\n );\n\n const setContent = useCallback((newValue?: string): void => {\n if (newValue === undefined) {\n return;\n }\n\n setContentValueOverflow(isMessageTooLong(newValue.length));\n setContentValue(newValue);\n }, []);\n\n const onChangeHandler = useCallback(\n (\n newValue?: string,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages?: Record<string, string>[]\n ) => {\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n removedInlineImages?.forEach(\n (removedInlineImage: Record<string, string>) => onRemoveInlineImage && onRemoveInlineImage(removedInlineImage)\n );\n setContent(newValue);\n },\n [setContent, /* @conditional-compile-remove(rich-text-editor-image-upload) */ onRemoveInlineImage]\n );\n\n const hasContent = useMemo(() => {\n // get plain text content from the editor to check if the message is empty\n // as the content may contain tags even when the content is empty\n const plainTextContent = editorComponentRef.current?.getPlainContent();\n const hasPlainText = sanitizeText(contentValue ?? '').length > 0 && sanitizeText(plainTextContent ?? '').length > 0;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n const hasInlineImages = hasInlineImageContent(contentValue);\n return hasPlainText || /* @conditional-compile-remove(rich-text-editor-image-upload) */ hasInlineImages;\n }, [contentValue]);\n\n const sendMessageOnClick = useCallback((): void => {\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(\n contentValue,\n inlineImagesWithProgress\n );\n const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n // Set contentValueOverflow state to display the error bar\n setContentValueOverflow(messageTooLong);\n // The change from the setContentValueOverflow in the previous line will not kick in yet.\n // We need to relay on the local value of messageTooLong to return early if the message is too long.\n if (messageTooLong) {\n return;\n }\n }\n if (disabled || contentValueOverflow) {\n return;\n }\n // Don't send message until all attachments have been uploaded successfully\n /* @conditional-compile-remove(file-sharing-acs) */\n setAttachmentUploadsPendingError(undefined);\n\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n const hasIncompleteImageUploads = hasIncompleteAttachmentUploads(inlineImagesWithProgress);\n /* @conditional-compile-remove(file-sharing-acs) */\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n if (\n /* @conditional-compile-remove(file-sharing-acs) */ hasIncompleteAttachmentUploads(attachments) ||\n /* @conditional-compile-remove(rich-text-editor-image-upload) */ hasIncompleteImageUploads\n ) {\n /* @conditional-compile-remove(file-sharing-acs) */\n let errorMessage = strings.attachmentUploadsPendingError;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n if (hasIncompleteImageUploads) {\n errorMessage = strings.imageUploadsPendingError || '';\n }\n setAttachmentUploadsPendingError({\n message: errorMessage,\n timestamp: Date.now(),\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n errorBarType: SendBoxErrorBarType.info\n });\n return;\n }\n\n // we don't want to send empty messages including spaces, newlines, tabs\n // Message can be empty if there is a valid attachment upload\n if (hasContent || /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments)) {\n const sendMessage = (content: string): void => {\n onSendMessage(\n content,\n /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */\n {\n /* @conditional-compile-remove(file-sharing-acs) */\n attachments: toAttachmentMetadata(attachments),\n /* @conditional-compile-remove(rich-text-editor-composite-support) */\n type: 'html'\n }\n );\n setContentValue('');\n editorComponentRef.current?.setEmptyContent();\n editorComponentRef.current?.focus();\n };\n\n modifyInlineImagesInContentString(contentValue, [], (content: string) => {\n sendMessage(content);\n });\n }\n }, [\n disabled,\n contentValueOverflow,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachments,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n inlineImagesWithProgress,\n contentValue,\n hasContent,\n /* @conditional-compile-remove(file-sharing-acs) */\n strings.attachmentUploadsPendingError,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n strings.imageUploadsPendingError,\n onSendMessage\n ]);\n\n const hasErrorMessage = useMemo(() => {\n return (\n !!systemMessage ||\n !!contentTooLongMessage ||\n /* @conditional-compile-remove(file-sharing-acs) */\n !!attachmentUploadsPendingError ||\n /* @conditional-compile-remove(file-sharing-acs) */\n !!attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error ||\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n !!inlineImagesWithProgress?.filter((image) => image.error).pop()?.error\n );\n }, [\n /* @conditional-compile-remove(file-sharing-acs) */\n attachments,\n contentTooLongMessage,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentUploadsPendingError,\n systemMessage,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n inlineImagesWithProgress\n ]);\n\n const isSendBoxButtonDisabledValue = useMemo(() => {\n return isSendBoxButtonDisabled({\n hasContent,\n /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads:\n isAttachmentUploadCompleted(attachments),\n hasError: hasErrorMessage,\n disabled\n });\n }, [/* @conditional-compile-remove(file-sharing-acs) */ attachments, disabled, hasContent, hasErrorMessage]);\n\n const onRenderSendIcon = useCallback(\n (isHover: boolean) => {\n return (\n <Icon\n iconName={isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend'}\n className={sendIconStyle({\n theme,\n isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n defaultTextColor: theme.palette.neutralSecondary\n })}\n />\n );\n },\n [theme, isSendBoxButtonDisabledValue, hasContent]\n );\n\n const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n /* @conditional-compile-remove(file-sharing-acs) */\n const uploadErrorMessage = attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error?.message;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n const imageUploadErrorMessage = inlineImagesWithProgress?.filter((image) => image.error).pop()?.error?.message;\n /* @conditional-compile-remove(file-sharing-acs) */\n const errorMessage =\n uploadErrorMessage || /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageUploadErrorMessage;\n return {\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentUploadsPendingError: attachmentUploadsPendingError,\n\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentProgressError: errorMessage\n ? {\n message: errorMessage,\n timestamp: Date.now(),\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n errorBarType: SendBoxErrorBarType.error\n }\n : undefined,\n systemMessage: systemMessage,\n textTooLongMessage: contentTooLongMessage\n };\n }, [\n /* @conditional-compile-remove(file-sharing-acs) */\n attachments,\n contentTooLongMessage,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentUploadsPendingError,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n inlineImagesWithProgress,\n systemMessage\n ]);\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>\n <_AttachmentUploadCards\n attachments={attachments}\n onCancelAttachmentUpload={onCancelAttachmentUpload}\n strings={{\n removeAttachment: strings.removeAttachment,\n uploading: strings.uploading,\n uploadCompleted: strings.uploadCompleted,\n attachmentMoreMenu: strings.attachmentMoreMenu\n }}\n disabled={disabled}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [\n theme,\n customV9Styles.clearBackground,\n attachments,\n onCancelAttachmentUpload,\n strings.removeAttachment,\n strings.uploading,\n strings.uploadCompleted,\n strings.attachmentMoreMenu,\n disabled\n ]);\n\n const sendButton = useMemo(() => {\n return (\n <InputBoxButton\n onRenderIcon={onRenderSendIcon}\n onClick={(e) => {\n sendMessageOnClick();\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }}\n className={richTextActionButtonsStyle}\n ariaLabel={localeStrings.sendButtonAriaLabel}\n tooltipContent={localeStrings.sendButtonAriaLabel}\n disabled={isSendBoxButtonDisabledValue}\n />\n );\n }, [isSendBoxButtonDisabledValue, localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const hasAttachmentUploads = useMemo(() => {\n return isAttachmentUploadCompleted(attachments) || hasIncompleteAttachmentUploads(attachments);\n }, [attachments]);\n\n return (\n <Stack>\n <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n <RichTextInputBoxComponent\n placeholderText={strings.placeholderText}\n autoFocus={autoFocus}\n onChange={onChangeHandler}\n onEnterKeyDown={sendMessageOnClick}\n onTyping={onTyping}\n editorComponentRef={editorComponentRef}\n strings={strings}\n disabled={disabled}\n actionComponents={sendButton}\n richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n /* @conditional-compile-remove(file-sharing-acs) */\n onRenderAttachmentUploads={onRenderAttachmentUploads}\n /* @conditional-compile-remove(file-sharing-acs) */\n hasAttachments={hasAttachmentUploads}\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onPaste={onPaste}\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onInsertInlineImage={onInsertInlineImage}\n />\n </Stack>\n );\n};\n"]}
|
1
|
+
{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useV9CustomStyles } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport {\n isMessageTooLong,\n isSendBoxButtonDisabled,\n sanitizeText,\n modifyInlineImagesInContentString\n} from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { hasInlineImageContent, getContentWithUpdatedInlineImagesInfo } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { _AttachmentUploadCards } from '../Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport {\n isAttachmentUploadCompleted,\n hasIncompleteAttachmentUploads,\n toAttachmentMetadata\n} from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { SendBoxErrorBarType } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {}\n\n/* @conditional-compile-remove(rich-text-editor) */\n/**\n * Options for the rich text editor configuration.\n *\n * @beta\n */\nexport interface RichTextEditorOptions {\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional callback to handle paste event.\n */\n onPaste?: (event: { content: DocumentFragment }) => void;\n}\n\n/**\n * Strings of RichText that can be overridden.\n *\n * @beta\n */\nexport interface RichTextStrings {\n /**\n * Tooltip text for the bold button.\n */\n richTextBoldTooltip: string;\n /**\n * Tooltip text for the italic button.\n */\n richTextItalicTooltip: string;\n /**\n * Tooltip text for the underline button.\n */\n richTextUnderlineTooltip: string;\n /**\n * Tooltip text for the bullet list button.\n */\n richTextBulletListTooltip: string;\n /**\n * Tooltip text for the number list button.\n */\n richTextNumberListTooltip: string;\n /**\n * Tooltip text for the increase indent button.\n */\n richTextIncreaseIndentTooltip: string;\n /**\n * Tooltip text for the decrease indent button.\n */\n richTextDecreaseIndentTooltip: string;\n /**\n * Tooltip text insert table button.\n */\n richTextInsertTableTooltip: string;\n /**\n * Tooltip text for the rich text format button button.\n */\n richTextFormatButtonTooltip: string;\n /**\n * Text for the insert menu item.\n */\n richTextInsertRowOrColumnMenu: string;\n /**\n * Title for the insert table menu.\n */\n richTextInsertTableMenuTitle: string;\n /**\n * Text for the insert menu item to insert row above the current selection.\n */\n richTextInsertRowAboveMenu: string;\n /**\n * Text for the insert menu item to insert row below the current selection.\n */\n richTextInsertRowBelowMenu: string;\n /**\n * Text for the insert menu item to insert column to the left from the current selection.\n */\n richTextInsertColumnLeftMenu: string;\n /**\n * Text for the insert menu item to insert column to the right from the current selection.\n */\n richTextInsertColumnRightMenu: string;\n /**\n * Text for the delete row or column menu.\n */\n richTextDeleteRowOrColumnMenu: string;\n /**\n * Text for the delete column menu.\n */\n richTextDeleteColumnMenu: string;\n /**\n * Text for the delete row menu.\n */\n richTextDeleteRowMenu: string;\n /**\n * Text for the delete table menu.\n */\n richTextDeleteTableMenu: string;\n /**\n * Text for the rich text toolbar.\n */\n richTextToolbarAriaLabel: string;\n /**\n * Text for the rich text toolbar more button.\n */\n richTextToolbarMoreButtonAriaLabel: string;\n /**\n * Text for announcement when a new bulleted list item is added.\n */\n richTextNewBulletedListItemAnnouncement: string;\n /**\n * Text for announcement when a new numbered list item is added.\n */\n richTextNewNumberedListItemAnnouncement: string;\n /**\n * Text for announcement when the bulleted list style is applied.\n */\n richTextBulletedListAppliedAnnouncement: string;\n /**\n * Text for announcement when the numbered list style is applied.\n */\n richTextNumberedListAppliedAnnouncement: string;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Error message indicating image upload is not complete.\n */\n imageUploadsPendingError: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n /**\n * Optional boolean to disable text box\n * @defaultValue false\n */\n disabled?: boolean;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional callback to handle paste event.\n */\n onPaste?: (event: { content: DocumentFragment }) => void;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<RichTextSendBoxStrings>;\n /**\n * Optional text for system message above the text box\n */\n systemMessage?: string;\n /* @conditional-compile-remove(file-sharing-acs) */\n /**\n * Optional array of type {@link AttachmentMetadataInProgress}\n * to render attachments being uploaded in the SendBox.\n * @beta\n */\n attachments?: AttachmentMetadataInProgress[];\n /**\n * enumerable to determine if the input box has focus on render or not.\n * When undefined nothing has focus on render\n */\n autoFocus?: 'sendBoxTextField';\n /* @conditional-compile-remove(file-sharing-acs) */\n /**\n * Optional callback to remove the attachment upload before sending by clicking on\n * cancel icon.\n */\n onCancelAttachmentUpload?: (attachmentId: string) => void;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional callback invoked after inline image is removed from the UI.\n * @param imageAttributes - attributes of the image such as id, src, style, etc.\n * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].\n * Note that if the src attribute is a local blob url, it has been revoked at this point.\n */\n onRemoveInlineImage?: (imageAttributes: Record<string, string>) => void;\n /**\n * Callback function used when the send button is clicked.\n */\n onSendMessage: (\n content: string,\n /* @conditional-compile-remove(file-sharing-acs) */\n options?: MessageOptions\n ) => Promise<void>;\n /**\n * Optional callback called when user is typing\n */\n onTyping?: () => Promise<void>;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional callback to handle an inline image that's inserted in the rich text editor.\n * When not provided, pasting images into rich text editor will be disabled.\n * @param imageAttributes - attributes of the image such as id, src, style, etc.\n * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']\n */\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n /**\n * Optional Array of type {@link AttachmentMetadataInProgress}\n * to render the errorBar for inline images inserted in the RichTextSendBox when:\n * - there is an error provided in the inlineImagesWithProgress\n * - progress is less than 1 when the send button is clicked\n * - content html string is longer than the max allowed length.\n * (Note that the id and the url prop of the inlineImagesWithProgress will be used as the id and src attribute of the content html\n * when calculating the content length, only for the purpose of displaying the content length overflow error.)\n */\n inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n const {\n disabled = false,\n systemMessage,\n autoFocus,\n onSendMessage,\n onTyping,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachments,\n /* @conditional-compile-remove(file-sharing-acs) */\n onCancelAttachmentUpload,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onPaste,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onInsertInlineImage,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n inlineImagesWithProgress,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onRemoveInlineImage\n } = props;\n\n const theme = useTheme();\n const locale = useLocale();\n\n const localeStrings = useMemo(() => {\n /* @conditional-compile-remove(rich-text-editor) */\n return locale.strings.richTextSendBox;\n return locale.strings.sendBox;\n }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n const strings = useMemo(() => {\n return { ...localeStrings, ...props.strings };\n }, [localeStrings, props.strings]);\n\n const [contentValue, setContentValue] = useState('');\n const [contentValueOverflow, setContentValueOverflow] = useState(false);\n /* @conditional-compile-remove(file-sharing-acs) */\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n undefined\n );\n const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const customV9Styles = useV9CustomStyles();\n\n const contentTooLongMessage = useMemo(\n () => (contentValueOverflow ? strings.textTooLong : undefined),\n [contentValueOverflow, strings.textTooLong]\n );\n\n const setContent = useCallback((newValue?: string): void => {\n if (newValue === undefined) {\n return;\n }\n\n setContentValueOverflow(isMessageTooLong(newValue.length));\n setContentValue(newValue);\n }, []);\n\n const onChangeHandler = useCallback(\n (\n newValue?: string,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages?: Record<string, string>[]\n ) => {\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n removedInlineImages?.forEach(\n (removedInlineImage: Record<string, string>) => onRemoveInlineImage && onRemoveInlineImage(removedInlineImage)\n );\n setContent(newValue);\n },\n [setContent, /* @conditional-compile-remove(rich-text-editor-image-upload) */ onRemoveInlineImage]\n );\n\n const hasContent = useMemo(() => {\n // get plain text content from the editor to check if the message is empty\n // as the content may contain tags even when the content is empty\n const plainTextContent = editorComponentRef.current?.getPlainContent();\n const hasPlainText = sanitizeText(contentValue ?? '').length > 0 && sanitizeText(plainTextContent ?? '').length > 0;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n const hasInlineImages = hasInlineImageContent(contentValue);\n return hasPlainText || /* @conditional-compile-remove(rich-text-editor-image-upload) */ hasInlineImages;\n }, [contentValue]);\n\n const sendMessageOnClick = useCallback((): void => {\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(\n contentValue,\n inlineImagesWithProgress\n );\n const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n // Set contentValueOverflow state to display the error bar\n setContentValueOverflow(messageTooLong);\n // The change from the setContentValueOverflow in the previous line will not kick in yet.\n // We need to relay on the local value of messageTooLong to return early if the message is too long.\n if (messageTooLong) {\n return;\n }\n }\n if (disabled || contentValueOverflow) {\n return;\n }\n // Don't send message until all attachments have been uploaded successfully\n /* @conditional-compile-remove(file-sharing-acs) */\n setAttachmentUploadsPendingError(undefined);\n\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n const hasIncompleteImageUploads = hasIncompleteAttachmentUploads(inlineImagesWithProgress);\n /* @conditional-compile-remove(file-sharing-acs) */\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n if (\n /* @conditional-compile-remove(file-sharing-acs) */ hasIncompleteAttachmentUploads(attachments) ||\n /* @conditional-compile-remove(rich-text-editor-image-upload) */ hasIncompleteImageUploads\n ) {\n /* @conditional-compile-remove(file-sharing-acs) */\n let errorMessage = strings.attachmentUploadsPendingError;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n if (hasIncompleteImageUploads) {\n errorMessage = strings.imageUploadsPendingError || '';\n }\n setAttachmentUploadsPendingError({\n message: errorMessage,\n timestamp: Date.now(),\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n errorBarType: SendBoxErrorBarType.info\n });\n return;\n }\n\n // we don't want to send empty messages including spaces, newlines, tabs\n // Message can be empty if there is a valid attachment upload\n if (hasContent || /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments)) {\n const sendMessage = (content: string): void => {\n onSendMessage(\n content,\n /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */\n {\n /* @conditional-compile-remove(file-sharing-acs) */\n attachments: toAttachmentMetadata(attachments),\n /* @conditional-compile-remove(rich-text-editor-composite-support) */\n type: 'html'\n }\n );\n setContentValue('');\n editorComponentRef.current?.setEmptyContent();\n editorComponentRef.current?.focus();\n };\n\n modifyInlineImagesInContentString(contentValue, [], (content: string) => {\n sendMessage(content);\n });\n }\n }, [\n disabled,\n contentValueOverflow,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachments,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n inlineImagesWithProgress,\n contentValue,\n hasContent,\n /* @conditional-compile-remove(file-sharing-acs) */\n strings.attachmentUploadsPendingError,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n strings.imageUploadsPendingError,\n onSendMessage\n ]);\n\n // ignore attachments error (errored attachment will not be added, shouldn't disable SendButton)\n const hasBlockingErrorMessages = useMemo(() => {\n return (\n !!systemMessage ||\n !!contentTooLongMessage ||\n /* @conditional-compile-remove(file-sharing-acs) */\n !!attachmentUploadsPendingError ||\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n !!inlineImagesWithProgress?.filter((image) => image.error).pop()?.error\n );\n }, [\n contentTooLongMessage,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentUploadsPendingError,\n systemMessage,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n inlineImagesWithProgress\n ]);\n\n const isSendBoxButtonDisabledValue = useMemo(() => {\n return isSendBoxButtonDisabled({\n hasContent,\n /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads:\n isAttachmentUploadCompleted(attachments),\n hasError: hasBlockingErrorMessages,\n disabled\n });\n }, [/* @conditional-compile-remove(file-sharing-acs) */ attachments, disabled, hasContent, hasBlockingErrorMessages]);\n\n const onRenderSendIcon = useCallback(\n (isHover: boolean) => {\n return (\n <Icon\n iconName={isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend'}\n className={sendIconStyle({\n theme,\n isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n defaultTextColor: theme.palette.neutralSecondary\n })}\n />\n );\n },\n [theme, isSendBoxButtonDisabledValue, hasContent]\n );\n\n const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n /* @conditional-compile-remove(file-sharing-acs) */\n const uploadErrorMessage = attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error?.message;\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n const imageUploadErrorMessage = inlineImagesWithProgress?.filter((image) => image.error).pop()?.error?.message;\n /* @conditional-compile-remove(file-sharing-acs) */\n const errorMessage =\n uploadErrorMessage || /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageUploadErrorMessage;\n\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n let errorBarType = SendBoxErrorBarType.error;\n /* @conditional-compile-remove(file-sharing-acs) */\n if (uploadErrorMessage) {\n errorBarType = SendBoxErrorBarType.warning;\n }\n\n return {\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentUploadsPendingError: attachmentUploadsPendingError,\n\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentProgressError: errorMessage\n ? {\n message: errorMessage,\n timestamp: Date.now(),\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n errorBarType: errorBarType\n }\n : undefined,\n systemMessage: systemMessage,\n textTooLongMessage: contentTooLongMessage\n };\n }, [\n /* @conditional-compile-remove(file-sharing-acs) */\n attachments,\n contentTooLongMessage,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentUploadsPendingError,\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n inlineImagesWithProgress,\n systemMessage\n ]);\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>\n <_AttachmentUploadCards\n attachments={attachments}\n onCancelAttachmentUpload={onCancelAttachmentUpload}\n strings={{\n removeAttachment: strings.removeAttachment,\n uploading: strings.uploading,\n uploadCompleted: strings.uploadCompleted,\n attachmentMoreMenu: strings.attachmentMoreMenu\n }}\n disabled={disabled}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [\n theme,\n customV9Styles.clearBackground,\n attachments,\n onCancelAttachmentUpload,\n strings.removeAttachment,\n strings.uploading,\n strings.uploadCompleted,\n strings.attachmentMoreMenu,\n disabled\n ]);\n\n const sendButton = useMemo(() => {\n return (\n <InputBoxButton\n onRenderIcon={onRenderSendIcon}\n onClick={(e) => {\n sendMessageOnClick();\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }}\n className={richTextActionButtonsStyle}\n ariaLabel={localeStrings.sendButtonAriaLabel}\n tooltipContent={localeStrings.sendButtonAriaLabel}\n disabled={isSendBoxButtonDisabledValue}\n />\n );\n }, [isSendBoxButtonDisabledValue, localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const hasAttachmentUploads = useMemo(() => {\n return isAttachmentUploadCompleted(attachments) || hasIncompleteAttachmentUploads(attachments);\n }, [attachments]);\n\n return (\n <Stack>\n <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n <RichTextInputBoxComponent\n placeholderText={strings.placeholderText}\n autoFocus={autoFocus}\n onChange={onChangeHandler}\n onEnterKeyDown={sendMessageOnClick}\n onTyping={onTyping}\n editorComponentRef={editorComponentRef}\n strings={strings}\n disabled={disabled}\n actionComponents={sendButton}\n richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n /* @conditional-compile-remove(file-sharing-acs) */\n onRenderAttachmentUploads={onRenderAttachmentUploads}\n /* @conditional-compile-remove(file-sharing-acs) */\n hasAttachments={hasAttachmentUploads}\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onPaste={onPaste}\n /* @conditional-compile-remove(rich-text-editor-image-upload) */\n onInsertInlineImage={onInsertInlineImage}\n />\n </Stack>\n );\n};\n"]}
|
@@ -51,7 +51,7 @@ export const useVideoTileContextualMenuProps = (props) => {
|
|
51
51
|
styles: { root: { lineHeight: 0 } }
|
52
52
|
},
|
53
53
|
onClick: () => onPermitAudio([participant.userId]),
|
54
|
-
'data-ui-id': '
|
54
|
+
'data-ui-id': 'video-tile-permit-audio',
|
55
55
|
ariaLabel: strings === null || strings === void 0 ? void 0 : strings.permitAudioTileMenuLabel
|
56
56
|
});
|
57
57
|
}
|
@@ -65,7 +65,7 @@ export const useVideoTileContextualMenuProps = (props) => {
|
|
65
65
|
styles: { root: { lineHeight: 0 } }
|
66
66
|
},
|
67
67
|
onClick: () => onForbidAudio([participant.userId]),
|
68
|
-
'data-ui-id': '
|
68
|
+
'data-ui-id': 'video-tile-forbid-audio',
|
69
69
|
ariaLabel: strings === null || strings === void 0 ? void 0 : strings.forbidAudioTileMenuLabel
|
70
70
|
});
|
71
71
|
}
|