Typeguard icon usage in composites

.github/workflows/update-api-files.yml

@@ -55,7 +55,7 @@ jobs:
         if: ${{ matrix.flavor == 'stable' }}
         run: rush switch-flavor:stable
       - name: Build NPM Package
-        run: rush build -t @azure/communication-react
+        run: rush build -v -t @azure/communication-react
         id: buildapifiles
       - name: Check for API file changes
         # If API files changed, they cause the build step to "fail" due to warnings

change/@internal-react-composites-38112c05-c837-4ae2-8df1-089075688aaa.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Create CallWithChatCompositeIcons type. Move ControlBarButtonBadgeIcon out of CallCompositeIcons",
+  "packageName": "@internal/react-composites",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -589,13 +589,16 @@ export interface CallWithChatClientState extends Pick<CallAdapterClientState, 'd
 // @beta
 export const CallWithChatComposite: (props: CallWithChatCompositeProps) => JSX.Element;
 
+// @beta
+export type CallWithChatCompositeIcons = Partial<Pick<CompositeIcons, 'ControlBarButtonBadgeIcon' | 'ChevronLeft' | 'ControlButtonCameraOff' | 'ControlButtonCameraOn' | 'ControlButtonEndCall' | 'ControlButtonMicOff' | 'ControlButtonMicOn' | 'ControlButtonOptions' | 'ControlButtonScreenShareStart' | 'ControlButtonScreenShareStop' | 'ErrorBarCallCameraAccessDenied' | 'ErrorBarCallCameraAlreadyInUse' | 'ErrorBarCallLocalVideoFreeze' | 'ErrorBarCallMacOsCameraAccessDenied' | 'ErrorBarCallMacOsMicrophoneAccessDenied' | 'ErrorBarCallMicrophoneAccessDenied' | 'ErrorBarCallMicrophoneMutedBySystem' | 'ErrorBarCallNetworkQualityLow' | 'ErrorBarCallNoMicrophoneFound' | 'ErrorBarCallNoSpeakerFound' | 'HorizontalGalleryLeftButton' | 'HorizontalGalleryRightButton' | 'LobbyScreenConnectingToCall' | 'LobbyScreenWaitingToBeAdmitted' | 'LocalDeviceSettingsCamera' | 'LocalDeviceSettingsMic' | 'LocalDeviceSettingsSpeaker' | 'LocalPreviewPlaceholder' | 'Muted' | 'NetworkReconnectIcon' | 'NoticePageAccessDeniedTeamsMeeting' | 'NoticePageJoinCallFailedDueToNoNetwork' | 'NoticePageLeftCall' | 'NoticePageRemovedFromCall' | 'OptionsCamera' | 'OptionsMic' | 'OptionsSpeaker' | 'ParticipantItemMicOff' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'ParticipantItemScreenShareStart' | 'VideoTileMicOff' | 'LocalCameraSwitch' | 'MessageDelivered' | 'MessageFailed' | 'MessageSeen' | 'MessageSending' | 'MessageEdit' | 'MessageRemove' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'SendBoxSend' | 'SendBoxSendHovered' | 'EditBoxCancel' | 'EditBoxSubmit' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'SendBoxAttachFile'>>;
+
 // @beta
 export type CallWithChatCompositeOptions = {
     callControls?: boolean | CallWithChatControlOptions;
 };
 
 // @beta
-export interface CallWithChatCompositeProps extends BaseCompositeProps<CallCompositeIcons & ChatCompositeIcons> {
+export interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {
     // (undocumented)
     callWithChatAdapter: CallWithChatAdapter;
     fluentTheme?: PartialTheme | Theme;
@@ -752,7 +755,7 @@ export type ChatCompositeClientState = {
 };
 
 // @public
-export type ChatCompositeIcons = Partial<Pick<CompositeIcons, 'MessageDelivered' | 'MessageFailed' | 'MessageSeen' | 'MessageSending' | 'MessageEdit' | 'MessageRemove' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'SendBoxSend' | 'SendBoxSendHovered' | 'EditBoxCancel' | 'EditBoxSubmit' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'SendBoxAttachFile'>>;
+export type ChatCompositeIcons = Partial<Pick<CompositeIcons, 'MessageDelivered' | 'MessageFailed' | 'MessageSeen' | 'MessageSending' | 'MessageEdit' | 'MessageRemove' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'SendBoxSend' | 'SendBoxSendHovered' | 'EditBoxCancel' | 'EditBoxSubmit' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'SendBoxAttachFile' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'Download' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'Cancel'>>;
 
 // @public
 export type ChatCompositeOptions = {
@@ -1018,6 +1021,9 @@ export const COMPOSITE_LOCALE_ZH_TW: CompositeLocale;
 
 // @public
 export const COMPOSITE_ONLY_ICONS: {
+    Cancel: JSX.Element;
+    ChevronLeft: JSX.Element;
+    Download: JSX.Element;
     LobbyScreenConnectingToCall: JSX.Element;
     LobbyScreenWaitingToBeAdmitted: JSX.Element;
     LocalDeviceSettingsCamera: JSX.Element;
@@ -1216,6 +1222,9 @@ export const DEFAULT_COMPONENT_ICONS: {
 
 // @public
 export const DEFAULT_COMPOSITE_ICONS: {
+    Cancel: JSX.Element;
+    ChevronLeft: JSX.Element;
+    Download: JSX.Element;
     LobbyScreenConnectingToCall: JSX.Element;
     LobbyScreenWaitingToBeAdmitted: JSX.Element;
     LocalDeviceSettingsCamera: JSX.Element;

packages/react-composites/review/react-composites.api.md

@@ -390,13 +390,16 @@ export interface CallWithChatClientState extends Pick<CallAdapterClientState, 'd
 // @beta
 export const CallWithChatComposite: (props: CallWithChatCompositeProps) => JSX.Element;
 
+// @beta
+export type CallWithChatCompositeIcons = Partial<Pick<CompositeIcons, 'ControlBarButtonBadgeIcon' | 'ChevronLeft' | 'ControlButtonCameraOff' | 'ControlButtonCameraOn' | 'ControlButtonEndCall' | 'ControlButtonMicOff' | 'ControlButtonMicOn' | 'ControlButtonOptions' | 'ControlButtonScreenShareStart' | 'ControlButtonScreenShareStop' | 'ErrorBarCallCameraAccessDenied' | 'ErrorBarCallCameraAlreadyInUse' | 'ErrorBarCallLocalVideoFreeze' | 'ErrorBarCallMacOsCameraAccessDenied' | 'ErrorBarCallMacOsMicrophoneAccessDenied' | 'ErrorBarCallMicrophoneAccessDenied' | 'ErrorBarCallMicrophoneMutedBySystem' | 'ErrorBarCallNetworkQualityLow' | 'ErrorBarCallNoMicrophoneFound' | 'ErrorBarCallNoSpeakerFound' | 'HorizontalGalleryLeftButton' | 'HorizontalGalleryRightButton' | 'LobbyScreenConnectingToCall' | 'LobbyScreenWaitingToBeAdmitted' | 'LocalDeviceSettingsCamera' | 'LocalDeviceSettingsMic' | 'LocalDeviceSettingsSpeaker' | 'LocalPreviewPlaceholder' | 'Muted' | 'NetworkReconnectIcon' | 'NoticePageAccessDeniedTeamsMeeting' | 'NoticePageJoinCallFailedDueToNoNetwork' | 'NoticePageLeftCall' | 'NoticePageRemovedFromCall' | 'OptionsCamera' | 'OptionsMic' | 'OptionsSpeaker' | 'ParticipantItemMicOff' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'ParticipantItemScreenShareStart' | 'VideoTileMicOff' | 'LocalCameraSwitch' | 'MessageDelivered' | 'MessageFailed' | 'MessageSeen' | 'MessageSending' | 'MessageEdit' | 'MessageRemove' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'SendBoxSend' | 'SendBoxSendHovered' | 'EditBoxCancel' | 'EditBoxSubmit' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'SendBoxAttachFile'>>;
+
 // @beta
 export type CallWithChatCompositeOptions = {
     callControls?: boolean | CallWithChatControlOptions;
 };
 
 // @beta
-export interface CallWithChatCompositeProps extends BaseCompositeProps<CallCompositeIcons & ChatCompositeIcons> {
+export interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {
     // (undocumented)
     callWithChatAdapter: CallWithChatAdapter;
     fluentTheme?: PartialTheme | Theme;
@@ -484,7 +487,7 @@ export type ChatCompositeClientState = {
 };
 
 // @public
-export type ChatCompositeIcons = Partial<Pick<CompositeIcons, 'MessageDelivered' | 'MessageFailed' | 'MessageSeen' | 'MessageSending' | 'MessageEdit' | 'MessageRemove' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'SendBoxSend' | 'SendBoxSendHovered' | 'EditBoxCancel' | 'EditBoxSubmit' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'SendBoxAttachFile'>>;
+export type ChatCompositeIcons = Partial<Pick<CompositeIcons, 'MessageDelivered' | 'MessageFailed' | 'MessageSeen' | 'MessageSending' | 'MessageEdit' | 'MessageRemove' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'SendBoxSend' | 'SendBoxSendHovered' | 'EditBoxCancel' | 'EditBoxSubmit' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'SendBoxAttachFile' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'Download' | /* @conditional-compile-remove-from(stable): FILE_SHARING */ 'Cancel'>>;
 
 // @public
 export type ChatCompositeOptions = {
@@ -552,6 +555,9 @@ export const COMPOSITE_LOCALE_ZH_TW: CompositeLocale;
 
 // @public
 export const COMPOSITE_ONLY_ICONS: {
+    Cancel: JSX.Element;
+    ChevronLeft: JSX.Element;
+    Download: JSX.Element;
     LobbyScreenConnectingToCall: JSX.Element;
     LobbyScreenWaitingToBeAdmitted: JSX.Element;
     LocalDeviceSettingsCamera: JSX.Element;
@@ -623,6 +629,9 @@ export interface CustomCallControlButtonProps extends ControlBarButtonProps {
 
 // @public
 export const DEFAULT_COMPOSITE_ICONS: {
+    Cancel: JSX.Element;
+    ChevronLeft: JSX.Element;
+    Download: JSX.Element;
     LobbyScreenConnectingToCall: JSX.Element;
     LobbyScreenWaitingToBeAdmitted: JSX.Element;
     LocalDeviceSettingsCamera: JSX.Element;

packages/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.tsx

@@ -2,9 +2,10 @@
 // Licensed under the MIT license.
 
 import { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';
-import { Dropdown, Icon, IDropdownOption, Label, mergeStyles, Stack } from '@fluentui/react';
+import { Dropdown, IDropdownOption, Label, mergeStyles, Stack } from '@fluentui/react';
 import { useTheme, VideoStreamOptions } from '@internal/react-components';
 import React from 'react';
+import { CallCompositeIcon } from '../../common/icons';
 import { useLocale } from '../../localization';
 import {
   dropDownStyles,
@@ -33,11 +34,11 @@ const getDropDownList = (list: Array<VideoDeviceInfo | AudioDeviceInfo>): IDropd
 
 const getOptionIcon = (type: iconType): JSX.Element | undefined => {
   if (type === 'Camera') {
-    return <Icon iconName="LocalDeviceSettingsCamera" className={optionIconStyles} />;
+    return <CallCompositeIcon iconName="LocalDeviceSettingsCamera" className={optionIconStyles} />;
   } else if (type === 'Microphone') {
-    return <Icon iconName="LocalDeviceSettingsMic" className={optionIconStyles} />;
+    return <CallCompositeIcon iconName="LocalDeviceSettingsMic" className={optionIconStyles} />;
   } else if (type === 'Speaker') {
-    return <Icon iconName="LocalDeviceSettingsSpeaker" className={optionIconStyles} />;
+    return <CallCompositeIcon iconName="LocalDeviceSettingsSpeaker" className={optionIconStyles} />;
   } else {
     return undefined;
   }

packages/react-composites/src/composites/CallComposite/components/LocalPreview.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Icon, mergeStyles, Stack, Text } from '@fluentui/react';
+import { mergeStyles, Stack, Text } from '@fluentui/react';
 import {
   CameraButton,
   ControlBar,
@@ -12,6 +12,7 @@ import {
   VideoTile
 } from '@internal/react-components';
 import React, { useCallback } from 'react';
+import { CallCompositeIcon } from '../../common/icons';
 import { useLocale } from '../../localization';
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { usePropsFor } from '../hooks/usePropsFor';
@@ -61,7 +62,7 @@ export const LocalPreview = (props: LocalPreviewProps): JSX.Element => {
         tokens={{ childrenGap: '0.25rem' }}
       >
         <Stack.Item align="center">
-          <Icon
+          <CallCompositeIcon
             iconName="LocalPreviewPlaceholder"
             className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary })}
           />

packages/react-composites/src/composites/CallComposite/components/MutedNotification.tsx

@@ -1,8 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Icon, IStyle, ITheme, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';
+import { IStyle, ITheme, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';
 import React from 'react';
+import { CallCompositeIcon } from '../../common/icons';
 import { useLocale } from '../../localization';
 
 /**
@@ -26,7 +27,7 @@ export function MutedNotification(props: MutedNotificationProps): JSX.Element {
   return (
     <Stack horizontal horizontalAlign="center">
       <Stack horizontal className={mergeStyles(stackStyle(theme))}>
-        <Icon iconName="Muted" className={mergeStyles(iconStyle(theme))} />
+        <CallCompositeIcon iconName="Muted" className={mergeStyles(iconStyle(theme))} />
         <Text className={mergeStyles(textStyle(theme))} aria-live={'polite'}>
           {locale.strings.call.mutedMessage}
         </Text>

packages/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { VideoGalleryStream, useTheme } from '@internal/react-components';
 import { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';
-import { Icon, mergeStyles, Stack, Text } from '@fluentui/react';
+import { mergeStyles, Stack, Text } from '@fluentui/react';
 import { useLocale } from '../../localization';
 import {
   containerStyle,
@@ -14,6 +14,7 @@ import {
 } from '../styles/NetworkReconnectTile.styles';
 import { useHandlers } from '../hooks/useHandlers';
 import { useLocalVideoStartTrigger } from './MediaGallery';
+import { CallCompositeIcon } from '../../common/icons';
 
 /**
  * @private
@@ -42,7 +43,7 @@ export const NetworkReconnectTile = (props: NetworkReconnectTileProps): JSX.Elem
       overlayContent={
         <Stack verticalFill horizontalAlign="center" verticalAlign="center" className={mergeStyles(containerStyle)}>
           <Stack horizontal className={mergeStyles(titleContainerStyle)}>
-            <Icon iconName="NetworkReconnectIcon" className={mergeStyles(titleStyle)} />
+            <CallCompositeIcon iconName="NetworkReconnectIcon" className={mergeStyles(titleStyle)} />
             <Text className={mergeStyles(titleStyle(palette, isVideoReady))} aria-live={'polite'}>
               {strings.networkReconnectTitle}
             </Text>

packages/react-composites/src/composites/CallComposite/pages/LobbyPage.tsx

@@ -13,8 +13,8 @@ import { reduceCallControlsForMobile } from '../utils';
 import { CallControlOptions } from '../types/CallControlOptions';
 import { CallCompositeStrings } from '../Strings';
 import { useLocale } from '../../localization';
-import { Icon } from '@fluentui/react';
 import { useLocalVideoStartTrigger } from '../components/MediaGallery';
+import { CallCompositeIcon } from '../../common/icons';
 
 /**
  * @private
@@ -87,11 +87,11 @@ const overlayProps = (strings: CallCompositeStrings, inLobby: boolean): LobbyOve
 const overlayPropsConnectingToCall = (strings: CallCompositeStrings, inLobby: boolean): LobbyOverlayProps => ({
   title: strings.lobbyScreenConnectingToCallTitle,
   moreDetails: strings.lobbyScreenConnectingToCallMoreDetails,
-  overlayIcon: <Icon iconName="LobbyScreenConnectingToCall" />
+  overlayIcon: <CallCompositeIcon iconName="LobbyScreenConnectingToCall" />
 });
 
 const overlayPropsWaitingToBeAdmitted = (strings: CallCompositeStrings, inLobby: boolean): LobbyOverlayProps => ({
   title: strings.lobbyScreenWaitingToBeAdmittedTitle,
   moreDetails: strings.lobbyScreenWaitingToBeAdmittedMoreDetails,
-  overlayIcon: <Icon iconName="LobbyScreenWaitingToBeAdmitted" />
+  overlayIcon: <CallCompositeIcon iconName="LobbyScreenWaitingToBeAdmitted" />
 });

packages/react-composites/src/composites/CallComposite/pages/NoticePage.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import React from 'react';
-import { Icon, mergeStyles, Stack, Text } from '@fluentui/react';
+import { mergeStyles, Stack, Text } from '@fluentui/react';
 import {
   containerStyle,
   moreDetailsStyles,
@@ -12,12 +12,13 @@ import {
 } from '../styles/NoticePage.styles';
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { StartCallButton } from '../components/StartCallButton';
+import { CallCompositeIcon, CallCompositeIcons } from '../../common/icons';
 
 /**
  * @private
  */
 export interface NoticePageProps {
-  iconName: string;
+  iconName: keyof CallCompositeIcons;
   title: string;
   moreDetails?: string;
   dataUiId: string;
@@ -33,7 +34,7 @@ export function NoticePage(props: NoticePageProps): JSX.Element {
   return (
     <Stack verticalFill verticalAlign="center" horizontalAlign="center" data-ui-id={props.dataUiId}>
       <Stack className={mergeStyles(containerStyle)} tokens={containerItemGap}>
-        {props.iconName && <Icon iconName={props.iconName} />}
+        {props.iconName && <CallCompositeIcon iconName={props.iconName} />}
         <Text className={mergeStyles(titleStyles)}>{props.title}</Text>
         <Text className={mergeStyles(moreDetailsStyles)}>{props.moreDetails}</Text>
         <Stack styles={rejoinCallButtonContainerStyles}>

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx

@@ -20,7 +20,7 @@ import { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatA
 import { CallAdapter } from '../CallComposite';
 import { ChatCompositeProps } from '../ChatComposite';
 import { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';
-import { CallCompositeIcons, ChatCompositeIcons } from '../common/icons';
+import { CallWithChatCompositeIcons } from '../common/icons';
 import { AvatarPersonaDataCallback } from '../common/AvatarPersona';
 import { ChatAdapterProvider } from '../ChatComposite/adapter/ChatAdapterProvider';
 import { CallWithChatAdapterState } from './state/CallWithChatAdapterState';
@@ -31,7 +31,7 @@ import { PreparedMoreDrawer } from './PreparedMoreDrawer';
  *
  * @beta
  */
-export interface CallWithChatCompositeProps extends BaseCompositeProps<CallCompositeIcons & ChatCompositeIcons> {
+export interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {
   callWithChatAdapter: CallWithChatAdapter;
   /**
    * Fluent theme for the composite.

packages/react-composites/src/composites/CallWithChatComposite/MobilePane.tsx

@@ -1,8 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { concatStyleSets, DefaultButton, Icon, Stack } from '@fluentui/react';
+import { concatStyleSets, DefaultButton, Stack } from '@fluentui/react';
 import { useTheme } from '@internal/react-components';
 import React, { useMemo } from 'react';
+import { CallWithChatCompositeIcon } from '../common/icons';
 import {
   paneBodyContainer,
   scrollableContainer,
@@ -55,7 +56,7 @@ export const MobilePane = (props: {
         <DefaultButton
           onClick={props.onClose}
           styles={mobilePaneBackButtonStyles}
-          onRenderIcon={() => <Icon iconName="ChevronLeft" />}
+          onRenderIcon={() => <CallWithChatCompositeIcon iconName="ChevronLeft" />}
         ></DefaultButton>
         <DefaultButton
           onClick={props.onChatButtonClicked}

packages/react-composites/src/composites/CallWithChatComposite/NotificationIcon.tsx

@@ -2,7 +2,8 @@
 // Licensed under the MIT license.
 
 import React from 'react';
-import { Icon, IIconStyles, IStackStyles, ITheme, memoizeFunction, Stack, useTheme, Text } from '@fluentui/react';
+import { IIconStyles, IStackStyles, ITheme, memoizeFunction, Stack, useTheme, Text } from '@fluentui/react';
+import { CallWithChatCompositeIcon } from '../common/icons';
 
 /**
  * @private
@@ -32,7 +33,7 @@ export const NotificationIcon = (props: NotificationIconProps): JSX.Element => {
 
   return (
     <Stack horizontalAlign="center" verticalAlign="center" styles={notificationIconContainerStyles}>
-      <Icon styles={notificationIconStyles(theme)} iconName="ControlBarButtonBadgeIcon" />
+      <CallWithChatCompositeIcon styles={notificationIconStyles(theme)} iconName="ControlBarButtonBadgeIcon" />
       {renderNumber(chatMessagesCount)}
     </Stack>
   );

packages/react-composites/src/composites/ChatComposite/FileDownloadCards.tsx

@@ -1,6 +1,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { Icon } from '@fluentui/react';
 import {
   FileCard,
   FileCardGroup,
@@ -12,6 +11,7 @@ import {
 } from './file-sharing';
 import React from 'react';
 import { ChatMessage } from '@internal/react-components';
+import { ChatCompositeIcon } from '../common/icons';
 
 /**
  * @beta
@@ -48,7 +48,7 @@ export const FileDownloadCards = (props: FileDownloadCards): JSX.Element => {
             fileName={truncatedFileName(file.name, truncateLength)}
             key={file.name}
             fileExtension={extension(file.name)}
-            actionIcon={<Icon iconName="Download" />}
+            actionIcon={<ChatCompositeIcon iconName="Download" />}
             actionHandler={() => {
               props.downloadHandler && props.downloadHandler(userId, file);
               !props.downloadHandler && window.open(file.url, '_blank', 'noopener,noreferrer');