Skip to content

Commit 88396da

Browse files
Leah-Xia-MicrosoftLeah-Xia-Microsoft
committed
Revert "[Chat] Wrap ImageOverlay with theme provider and change some of the APIs (#4117)"
This reverts commit 81d6697.
1 parent 704b5e3 commit 88396da

11 files changed

Lines changed: 170 additions & 114 deletions

‎change-beta/@azure-communication-react-3a80bcab-c478-4c94-ab47-4e50d71fbf8a.json‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎change/@azure-communication-react-3a80bcab-c478-4c94-ab47-4e50d71fbf8a.json‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎packages/communication-react/review/beta/communication-react.api.md‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ import { SendMessageOptions } from '@azure/communication-chat';
8787
import { SpotlightedParticipant } from '@azure/communication-calling';
8888
import { StartCallOptions } from '@azure/communication-calling';
8989
import { StartCaptionsOptions } from '@azure/communication-calling';
90+
import { SyntheticEvent } from 'react';
9091
import { TeamsCall } from '@azure/communication-calling';
9192
import { TeamsCallAgent } from '@azure/communication-calling';
9293
import { TeamsMeetingLinkLocator } from '@azure/communication-calling';
@@ -1806,6 +1807,17 @@ export type ChatParticipantListSelector = (state: ChatClientState, props: ChatBa
18061807
// @public
18071808
export type ChatReturnProps<Component extends (props: any) => JSX.Element> = GetChatSelector<Component> extends (state: ChatClientState, props: any) => any ? ReturnType<GetChatSelector<Component>> & Common<ChatHandlers, Parameters<Component>[0]> : never;
18081809

1810+
// @beta
1811+
export interface ChatTheme {
1812+
chatPalette: {
1813+
modalOverlayBlack: string;
1814+
modalTitleWhite: string;
1815+
modalButtonBackground: string;
1816+
modalButtonBackgroundHover: string;
1817+
modalButtonBackgroundActive: string;
1818+
};
1819+
}
1820+
18091821
// @public
18101822
export const ChatThreadClientProvider: (props: ChatThreadClientProviderProps) => JSX.Element;
18111823

@@ -2374,7 +2386,7 @@ export interface CustomMessage extends MessageCommon {
23742386
}
23752387

23762388
// @public
2377-
export const darkTheme: PartialTheme & CallingTheme;
2389+
export const darkTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-overlay) */ ChatTheme;
23782390

23792391
// @beta
23802392
export type DeclarativeCallAgent = CallAgent & IncomingCallManagement;
@@ -3017,7 +3029,8 @@ export interface ImageOverlayProps {
30173029
imageSrc: string;
30183030
isOpen: boolean;
30193031
onDismiss: () => void;
3020-
onDownloadButtonClicked?: (imageSrc: string) => void;
3032+
onDownloadButtonClicked: (imageSrc: string) => void;
3033+
onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
30213034
title?: string;
30223035
titleIcon?: JSX.Element;
30233036
}
@@ -3028,9 +3041,6 @@ export interface ImageOverlayStrings {
30283041
downloadButtonLabel: string;
30293042
}
30303043

3031-
// @beta
3032-
export const imageOverlayTheme: PartialTheme;
3033-
30343044
// @beta
30353045
export type IncomingCallManagement = {
30363046
incomingCalls: ReadonlyArray<DeclarativeIncomingCall>;
@@ -3111,7 +3121,7 @@ export interface JumpToNewMessageButtonProps {
31113121
}
31123122

31133123
// @public
3114-
export const lightTheme: PartialTheme & CallingTheme;
3124+
export const lightTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-overlay) */ ChatTheme;
31153125

31163126
// @public
31173127
export type LoadingState = 'loading' | 'none';

‎packages/react-components/review/beta/react-components.api.md‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import { PropsWithChildren } from 'react';
3535
import { default as React_2 } from 'react';
3636
import * as React_3 from 'react';
3737
import { RefObject } from 'react';
38+
import { SyntheticEvent } from 'react';
3839
import { Theme } from '@fluentui/react';
3940

4041
// @public
@@ -488,6 +489,17 @@ export interface ChatMessage extends MessageCommon {
488489
status?: MessageStatus;
489490
}
490491

492+
// @beta
493+
export interface ChatTheme {
494+
chatPalette: {
495+
modalOverlayBlack: string;
496+
modalTitleWhite: string;
497+
modalButtonBackground: string;
498+
modalButtonBackgroundHover: string;
499+
modalButtonBackgroundActive: string;
500+
};
501+
}
502+
491503
// @beta
492504
export interface CommonSitePermissionsProps {
493505
appName: string;
@@ -749,7 +761,7 @@ export interface CustomMessage extends MessageCommon {
749761
}
750762

751763
// @public
752-
export const darkTheme: PartialTheme & CallingTheme;
764+
export const darkTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-overlay) */ ChatTheme;
753765

754766
// @public
755767
export const DEFAULT_COMPONENT_ICONS: {
@@ -1315,7 +1327,8 @@ export interface ImageOverlayProps {
13151327
imageSrc: string;
13161328
isOpen: boolean;
13171329
onDismiss: () => void;
1318-
onDownloadButtonClicked?: (imageSrc: string) => void;
1330+
onDownloadButtonClicked: (imageSrc: string) => void;
1331+
onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
13191332
title?: string;
13201333
titleIcon?: JSX.Element;
13211334
}
@@ -1326,9 +1339,6 @@ export interface ImageOverlayStrings {
13261339
downloadButtonLabel: string;
13271340
}
13281341

1329-
// @beta
1330-
export const imageOverlayTheme: PartialTheme;
1331-
13321342
// @beta
13331343
export interface InlineImage {
13341344
imgAttrs: React_2.ImgHTMLAttributes<HTMLImageElement>;
@@ -1360,7 +1370,7 @@ export interface JumpToNewMessageButtonProps {
13601370
}
13611371

13621372
// @public
1363-
export const lightTheme: PartialTheme & CallingTheme;
1373+
export const lightTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-overlay) */ ChatTheme;
13641374

13651375
// @public
13661376
export type LoadingState = 'loading' | 'none';

‎packages/react-components/src/components/ImageOverlay.test.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ describe('ImageOverlay default layout tests', () => {
4141
title?: string,
4242
titleIcon?: JSX.Element,
4343
onDismiss?: () => void,
44-
onDownloadButtonClicked?: () => void
44+
onDownloadButtonClicked?: () => void,
45+
onError?: () => void
4546
): HTMLElement => {
4647
const { container } = render(
4748
<ImageOverlay
@@ -51,6 +52,7 @@ describe('ImageOverlay default layout tests', () => {
5152
altText="altText"
5253
onDismiss={onDismiss || jest.fn()}
5354
onDownloadButtonClicked={onDownloadButtonClicked || jest.fn()}
55+
onError={onError || jest.fn()}
5456
isOpen={true}
5557
/>
5658
);

‎packages/react-components/src/components/ImageOverlay.tsx‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
/* @conditional-compile-remove(image-overlay) */
55
import { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
66
/* @conditional-compile-remove(image-overlay) */
7-
import React, { useState } from 'react';
7+
import React, { SyntheticEvent, useState } from 'react';
88
/* @conditional-compile-remove(image-overlay) */
99
import {
1010
bodyContainer,
@@ -25,11 +25,11 @@ import {
2525
titleStyle
2626
} from './styles/ImageOverlay.style';
2727
/* @conditional-compile-remove(image-overlay) */
28-
import { FluentThemeProvider } from '../theming/FluentThemeProvider';
28+
import { useTheme } from '../theming/FluentThemeProvider';
2929
/* @conditional-compile-remove(image-overlay) */
3030
import { useLocale } from '../localization';
3131
/* @conditional-compile-remove(image-overlay) */
32-
import { imageOverlayTheme } from '../theming';
32+
import { ChatTheme } from '../theming';
3333

3434
/* @conditional-compile-remove(image-overlay) */
3535
/**
@@ -63,9 +63,13 @@ export interface ImageOverlayProps {
6363
*/
6464
onDismiss: () => void;
6565
/**
66-
* Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.
66+
* Callback called when the download button is clicked.
6767
*/
68-
onDownloadButtonClicked?: (imageSrc: string) => void;
68+
onDownloadButtonClicked: (imageSrc: string) => void;
69+
/**
70+
* Callback called when there's an error loading the image.
71+
*/
72+
onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
6973
}
7074
/* @conditional-compile-remove(image-overlay) */
7175
/**
@@ -90,50 +94,47 @@ export interface ImageOverlayStrings {
9094
* @beta
9195
*/
9296
export const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {
93-
const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;
97+
const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss, onError } = props;
98+
const theme = useTheme() as unknown as ChatTheme;
9499

95100
/* @conditional-compile-remove(image-overlay) */
96101
const localeStrings = useLocale().strings.imageOverlay;
97102

98103
const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);
99104

100-
const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);
105+
const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
101106

102107
const renderHeaderBar = (): JSX.Element => {
103108
return (
104109
<Stack className={mergeStyles(headerStyle)}>
105110
<Stack className={mergeStyles(titleBarContainerStyle)}>
106111
{titleIcon}
107-
<Stack.Item className={mergeStyles(titleStyle(imageOverlayTheme))} aria-label={title || 'Image'}>
112+
<Stack.Item className={mergeStyles(titleStyle(theme))} aria-label={title || 'Image'}>
108113
{title}
109114
</Stack.Item>
110115
</Stack>
111116
<Stack className={mergeStyles(controlBarContainerStyle)}>
112-
{onDownloadButtonClicked && (
113-
<DefaultButton
114-
className={mergeStyles(downloadButtonStyle)}
115-
/* @conditional-compile-remove(image-overlay) */
116-
text={localeStrings.downloadButtonLabel}
117-
onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}
118-
onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}
119-
aria-live={'polite'}
120-
/* @conditional-compile-remove(image-overlay) */
121-
aria-label={localeStrings.downloadButtonLabel}
122-
/>
123-
)}
124-
{onDownloadButtonClicked && (
125-
<IconButton
126-
iconProps={downloadIcon}
127-
className={mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme))}
128-
onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}
129-
/* @conditional-compile-remove(image-overlay) */
130-
aria-label={localeStrings.downloadButtonLabel}
131-
aria-live={'polite'}
132-
/>
133-
)}
117+
<DefaultButton
118+
className={mergeStyles(downloadButtonStyle(theme))}
119+
/* @conditional-compile-remove(image-overlay) */
120+
text={localeStrings.downloadButtonLabel}
121+
onClick={() => onDownloadButtonClicked(imageSrc)}
122+
onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}
123+
aria-live={'polite'}
124+
/* @conditional-compile-remove(image-overlay) */
125+
aria-label={localeStrings.downloadButtonLabel}
126+
/>
127+
<IconButton
128+
iconProps={downloadIcon}
129+
className={mergeStyles(smallDownloadButtonContainerStyle(theme))}
130+
onClick={() => onDownloadButtonClicked(imageSrc)}
131+
/* @conditional-compile-remove(image-overlay) */
132+
aria-label={localeStrings.downloadButtonLabel}
133+
aria-live={'polite'}
134+
/>
134135
<IconButton
135136
iconProps={cancelIcon}
136-
className={mergeStyles(closeButtonStyles(imageOverlayTheme))}
137+
className={mergeStyles(closeButtonStyles(theme))}
137138
onClick={onDismiss}
138139
/* @conditional-compile-remove(image-overlay) */
139140
ariaLabel={localeStrings.dismissButtonAriaLabel}
@@ -154,8 +155,9 @@ export const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {
154155
alt={altText || 'image'}
155156
aria-label={'image-overlay-main-image'}
156157
aria-live={'polite'}
157-
onError={() => {
158+
onError={(event) => {
158159
setIsImageLoaded(false);
160+
onError && onError(event);
159161
}}
160162
onClick={(event) => event.stopPropagation()}
161163
onDoubleClick={(event) => {
@@ -168,18 +170,16 @@ export const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {
168170
};
169171

170172
return (
171-
<FluentThemeProvider fluentTheme={imageOverlayTheme}>
172-
<Modal
173-
titleAriaId={title}
174-
isOpen={isOpen}
175-
onDismiss={onDismiss}
176-
overlay={{ styles: { ...overlayStyles(imageOverlayTheme) } }}
177-
styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}
178-
isDarkOverlay={true}
179-
>
180-
{renderHeaderBar()}
181-
{renderBodyWithLightDismiss()}
182-
</Modal>
183-
</FluentThemeProvider>
173+
<Modal
174+
titleAriaId={title}
175+
isOpen={isOpen}
176+
onDismiss={onDismiss}
177+
overlay={{ styles: { ...overlayStyles(theme) } }}
178+
styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}
179+
isDarkOverlay={true}
180+
>
181+
{renderHeaderBar()}
182+
{renderBodyWithLightDismiss()}
183+
</Modal>
184184
);
185185
};

0 commit comments

Comments
 (0)
⚡