From 4074c83e9dd36b4b03e48b6cf856214baf718bb9 Mon Sep 17 00:00:00 2001 From: Steve Berdy <86739818+steveberdy@users.noreply.github.com> Date: Thu, 5 Sep 2024 14:41:33 -0400 Subject: [PATCH] Replace defaultProps with default parameters --- packages/api/src/hooks/Composer.tsx | 186 +++++++----------- packages/api/src/hooks/internal/ErrorBox.js | 6 +- .../src/hooks/middleware/UserlandBoundary.js | 7 +- packages/api/src/hooks/utils/ErrorBoundary.js | 7 +- .../providers/Ponyfill/PonyfillComposer.tsx | 6 +- packages/bundle/src/AddFullBundle.tsx | 6 +- packages/bundle/src/FullComposer.tsx | 7 - .../Attachment/AdaptiveCardAttachment.tsx | 6 +- .../Attachment/AdaptiveCardContent.tsx | 7 +- .../Attachment/AdaptiveCardRenderer.tsx | 12 +- .../Attachment/AnimationCardAttachment.js | 6 +- .../Attachment/AnimationCardContent.tsx | 7 +- .../Attachment/AudioCardAttachment.js | 6 +- .../Attachment/AudioCardContent.tsx | 7 +- .../adaptiveCards/Attachment/CommonCard.js | 7 +- .../Attachment/HeroCardAttachment.js | 6 +- .../Attachment/HeroCardContent.tsx | 7 +- .../Attachment/OAuthCardAttachment.js | 6 +- .../Attachment/OAuthCardContent.tsx | 7 +- .../Attachment/ReceiptCardAttachment.js | 6 +- .../Attachment/ReceiptCardContent.tsx | 7 +- .../Attachment/SignInCardAttachment.js | 6 +- .../Attachment/SignInCardContent.tsx | 7 +- .../Attachment/ThumbnailCardAttachment.js | 6 +- .../Attachment/ThumbnailCardContent.tsx | 7 +- .../Attachment/VideoCardAttachment.js | 6 +- .../Attachment/VideoCardContent.tsx | 7 +- packages/component/src/Activity/Avatar.tsx | 8 +- packages/component/src/Activity/Bubble.tsx | 30 ++- .../src/Activity/CarouselFilmStrip.js | 18 +- .../Activity/CarouselFilmStripAttachment.js | 6 +- .../component/src/Activity/CarouselLayout.js | 19 +- packages/component/src/Activity/SayAlt.js | 6 +- .../src/ActivityStatus/AbsoluteTime.js | 6 +- .../src/Attachment/Assets/DownloadIcon.js | 7 +- .../component/src/Attachment/AudioContent.tsx | 9 +- .../component/src/Attachment/FileContent.tsx | 15 +- .../src/Attachment/HTMLVideoContent.tsx | 9 +- .../src/Attachment/Text/TextContent.tsx | 1 - .../component/src/Attachment/VideoContent.tsx | 9 +- .../component/src/Attachment/VimeoContent.tsx | 8 +- .../src/Attachment/YouTubeContent.tsx | 8 +- .../component/src/Avatar/InitialsAvatar.js | 6 +- packages/component/src/BasicTranscript.tsx | 46 ++--- packages/component/src/BasicWebChat.tsx | 7 +- packages/component/src/Composer.tsx | 29 +-- .../Assets/ErrorNotificationIcon.js | 7 +- .../Assets/WarningNotificationIcon.js | 7 +- .../src/ConnectivityStatus/Connecting.js | 6 +- packages/component/src/Dictation.js | 6 +- packages/component/src/ErrorBox.tsx | 6 +- .../Avatar/createCoreMiddleware.tsx | 21 +- packages/component/src/ReactWebChat.tsx | 8 +- packages/component/src/ScreenReaderText.tsx | 7 +- .../src/SendBox/DictationInterims.tsx | 34 ++-- packages/component/src/SendBox/IconButton.tsx | 10 +- packages/component/src/SendBox/SendButton.tsx | 6 +- .../component/src/SendBox/SuggestedAction.tsx | 47 ++--- .../src/SendBox/SuggestedActions.tsx | 41 ++-- .../src/SendBoxToolbar/UploadButton.tsx | 6 +- packages/component/src/Toast/CheckMarkIcon.js | 7 +- packages/component/src/Toast/CollapseIcon.js | 6 +- packages/component/src/Toast/DismissIcon.js | 6 +- .../src/Toast/ExclamationMarkIcon.js | 7 +- packages/component/src/Toast/ExpandIcon.js | 6 +- .../component/src/Toast/NotificationIcon.js | 6 +- .../component/src/Transcript/ActivityRow.tsx | 6 +- .../src/Utils/AccessKeySink/Surface.js | 6 +- .../component/src/Utils/AccessibleButton.tsx | 10 +- .../src/Utils/AccessibleTextArea.tsx | 43 ++-- .../component/src/Utils/FocusRedirector.tsx | 8 +- .../component/src/Utils/InlineMarkdown.js | 8 +- .../src/Utils/TypeFocusSink/FocusBox.js | 11 +- .../private/LiveRegionTwinContainer.tsx | 18 +- .../RovingTabIndex/RovingTabIndexComposer.tsx | 7 +- .../ActivityGroupingSurface.js | 28 ++- .../testHelpers/activityGrouping/Toggle.js | 9 +- .../createRenderWebChatWithHook.js | 4 +- .../app/src/gitHubProfile/Composer.js | 9 +- .../app/src/microsoftGraphProfile/Composer.js | 9 +- .../app/src/oauth/Composer.js | 67 +++---- .../app/src/ui/GitHubProfileMenu.js | 24 +-- .../app/src/ui/MicrosoftGraphProfileMenu.js | 22 +-- .../app/src/oauth/Composer.js | 35 ++-- 84 files changed, 327 insertions(+), 855 deletions(-) diff --git a/packages/api/src/hooks/Composer.tsx b/packages/api/src/hooks/Composer.tsx index 31c2f8fff2..156ed6d89d 100644 --- a/packages/api/src/hooks/Composer.tsx +++ b/packages/api/src/hooks/Composer.tsx @@ -141,23 +141,23 @@ function createCardActionContext({ getSignInUrl: cardAction.type === 'signin' ? () => { - const { value } = cardAction; - - if (directLine.getSessionId) { - /** - * @todo TODO: [P3] We should change this one to async/await. - * This is the first place in this project to use async. - * Thus, we need to add @babel/plugin-transform-runtime and @babel/runtime. - */ - return observableToPromise(directLine.getSessionId(), ponyfill).then( - sessionId => `${value}${encodeURIComponent(`&code_challenge=${sessionId}`)}` - ); - } - - console.warn('botframework-webchat: OAuth is not supported on this Direct Line adapter.'); - - return value; + const { value } = cardAction; + + if (directLine.getSessionId) { + /** + * @todo TODO: [P3] We should change this one to async/await. + * This is the first place in this project to use async. + * Thus, we need to add @babel/plugin-transform-runtime and @babel/runtime. + */ + return observableToPromise(directLine.getSessionId(), ponyfill).then( + sessionId => `${value}${encodeURIComponent(`&code_challenge=${sessionId}`)}` + ); } + + console.warn('botframework-webchat: OAuth is not supported on this Direct Line adapter.'); + + return value; + } : null, target }); @@ -252,34 +252,34 @@ type ComposerCoreProps = Readonly<{ }>; const ComposerCore = ({ - activityMiddleware, - activityStatusMiddleware, - attachmentForScreenReaderMiddleware, - attachmentMiddleware, - avatarMiddleware, - cardActionMiddleware, - children, - dir, + activityMiddleware = undefined, + activityStatusMiddleware = undefined, + attachmentForScreenReaderMiddleware = undefined, + attachmentMiddleware = undefined, + avatarMiddleware = undefined, + cardActionMiddleware = undefined, + children = undefined, + dir = 'auto', directLine, - disabled, - downscaleImageToDataURL, - grammars, - groupActivitiesMiddleware, - internalErrorBoxClass, - locale, - onTelemetry, - overrideLocalizedStrings, - renderMarkdown, - scrollToEndButtonMiddleware, - selectVoice, + disabled = false, + downscaleImageToDataURL = undefined, + grammars = [], + groupActivitiesMiddleware = undefined, + internalErrorBoxClass = undefined, + locale = window.navigator.language || 'en-US', + onTelemetry = undefined, + overrideLocalizedStrings = undefined, + renderMarkdown = undefined, + scrollToEndButtonMiddleware = undefined, + selectVoice = undefined, sendBoxMiddleware, sendBoxToolbarMiddleware, - sendTypingIndicator, - styleOptions, - toastMiddleware, - typingIndicatorMiddleware, - userID, - username + sendTypingIndicator = false, + styleOptions = {}, + toastMiddleware = undefined, + typingIndicatorMiddleware = undefined, + userID = '', + username = '' }: ComposerCoreProps) => { const [ponyfill] = usePonyfill(); const dispatch = useDispatch(); @@ -398,13 +398,13 @@ const ComposerCore = ({ ...singleToArray(activityMiddleware), () => () => - ({ activity }) => { - if (activity) { - throw new Error(`No renderer for activity of type "${activity.type}"`); - } else { - throw new Error('No activity to render'); + ({ activity }) => { + if (activity) { + throw new Error(`No renderer for activity of type "${activity.type}"`); + } else { + throw new Error('No activity to render'); + } } - } )({}), [activityMiddleware] ); @@ -428,19 +428,19 @@ const ComposerCore = ({ ...singleToArray(attachmentForScreenReaderMiddleware), () => () => - ({ attachment }) => { - if (attachment) { - console.warn(`No renderer for attachment for screen reader of type "${attachment.contentType}"`); - return false; - } + ({ attachment }) => { + if (attachment) { + console.warn(`No renderer for attachment for screen reader of type "${attachment.contentType}"`); + return false; + } - return () => { - /** - * @todo TODO: [P4] Might be able to throw without returning a function -- investigate and possibly fix - */ - throw new Error('No attachment to render'); - }; - } + return () => { + /** + * @todo TODO: [P4] Might be able to throw without returning a function -- investigate and possibly fix + */ + throw new Error('No attachment to render'); + }; + } )({}), [attachmentForScreenReaderMiddleware] ); @@ -452,13 +452,13 @@ const ComposerCore = ({ ...singleToArray(attachmentMiddleware), () => () => - ({ attachment }) => { - if (attachment) { - throw new Error(`No renderer for attachment of type "${attachment.contentType}"`); - } else { - throw new Error('No attachment to render'); + ({ attachment }) => { + if (attachment) { + throw new Error(`No renderer for attachment of type "${attachment.contentType}"`); + } else { + throw new Error('No attachment to render'); + } } - } )({}), [attachmentMiddleware] ); @@ -482,13 +482,13 @@ const ComposerCore = ({ ...singleToArray(toastMiddleware), () => () => - ({ notification }) => { - if (notification) { - throw new Error(`No renderer for notification of type "${notification.contentType}"`); - } else { - throw new Error('No notification to render'); + ({ notification }) => { + if (notification) { + throw new Error(`No renderer for notification of type "${notification.contentType}"`); + } else { + throw new Error('No notification to render'); + } } - } )({}), [toastMiddleware] ); @@ -616,34 +616,6 @@ const ComposerCore = ({ * we should clean up the responsibility between Context and Redux store * We should decide which data is needed for React but not in other environment such as CLI/VSCode */ -ComposerCore.defaultProps = { - activityMiddleware: undefined, - activityStatusMiddleware: undefined, - attachmentForScreenReaderMiddleware: undefined, - attachmentMiddleware: undefined, - avatarMiddleware: undefined, - cardActionMiddleware: undefined, - children: undefined, - dir: 'auto', - disabled: false, - downscaleImageToDataURL: undefined, - grammars: [], - groupActivitiesMiddleware: undefined, - internalErrorBoxClass: undefined, - locale: window.navigator.language || 'en-US', - onTelemetry: undefined, - overrideLocalizedStrings: undefined, - renderMarkdown: undefined, - scrollToEndButtonMiddleware: undefined, - selectVoice: undefined, - sendTypingIndicator: false, - styleOptions: {}, - toastMiddleware: undefined, - typingIndicatorMiddleware: undefined, - userID: '', - username: '' -}; - ComposerCore.propTypes = { activityMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]), activityStatusMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]), @@ -708,7 +680,7 @@ type ComposerProps = ComposerWithStoreProps & { }; // We will create a Redux store if it was not passed in -const ComposerWithStore = ({ onTelemetry, store, ...props }: ComposerWithStoreProps) => { +const ComposerWithStore = ({ onTelemetry = undefined, store = undefined, ...props }: ComposerWithStoreProps) => { const [ponyfill] = usePonyfill(); const memoizedStore = useMemo(() => { @@ -757,17 +729,12 @@ const ComposerWithStore = ({ onTelemetry, store, ...props }: ComposerWithStorePr ); }; -ComposerWithStore.defaultProps = { - onTelemetry: undefined, - store: undefined -}; - ComposerWithStore.propTypes = { onTelemetry: PropTypes.func, store: PropTypes.any }; -const Composer = ({ internalRenderErrorBox, onTelemetry, ponyfill, ...props }: ComposerProps) => { +const Composer = ({ internalRenderErrorBox = undefined, onTelemetry = undefined, ponyfill = undefined, ...props }: ComposerProps) => { const [error, setError] = useState(); const handleError = useCallback( @@ -792,13 +759,6 @@ const Composer = ({ internalRenderErrorBox, onTelemetry, ponyfill, ...props }: C ); }; -Composer.defaultProps = { - ...ComposerWithStore.defaultProps, - internalRenderErrorBox: undefined, - onTelemetry: undefined, - ponyfill: undefined -}; - Composer.propTypes = { ...ComposerWithStore.propTypes, internalRenderErrorBox: PropTypes.any, diff --git a/packages/api/src/hooks/internal/ErrorBox.js b/packages/api/src/hooks/internal/ErrorBox.js index a5437831ac..4ff21b5c6a 100644 --- a/packages/api/src/hooks/internal/ErrorBox.js +++ b/packages/api/src/hooks/internal/ErrorBox.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import useErrorBoxClass from './useErrorBoxClass'; import useTrackException from '../useTrackException'; -const ErrorBox = ({ error, type }) => { +const ErrorBox = ({ error, type = undefined }) => { const [errorBoxClass] = useErrorBoxClass(); const trackException = useTrackException(); @@ -22,10 +22,6 @@ const ErrorBox = ({ error, type }) => { return !!errorBoxClass && createElement(errorBoxClass, { error, type }); }; -ErrorBox.defaultProps = { - type: undefined -}; - ErrorBox.propTypes = { error: PropTypes.any.isRequired, type: PropTypes.string diff --git a/packages/api/src/hooks/middleware/UserlandBoundary.js b/packages/api/src/hooks/middleware/UserlandBoundary.js index a7d44f21a2..0374b466bd 100644 --- a/packages/api/src/hooks/middleware/UserlandBoundary.js +++ b/packages/api/src/hooks/middleware/UserlandBoundary.js @@ -4,7 +4,7 @@ import React, { useCallback, useState } from 'react'; import ErrorBoundary from '../utils/ErrorBoundary'; import ErrorBox from '../internal/ErrorBox'; -const UserlandBoundary = ({ children, type }) => { +const UserlandBoundary = ({ children = undefined, type = undefined }) => { const [error, setError] = useState(); const handleError = useCallback(error => setError(error), []); @@ -16,11 +16,6 @@ const UserlandBoundary = ({ children, type }) => { ); }; -UserlandBoundary.defaultProps = { - children: undefined, - type: undefined -}; - UserlandBoundary.propTypes = { children: PropTypes.any, type: PropTypes.string diff --git a/packages/api/src/hooks/utils/ErrorBoundary.js b/packages/api/src/hooks/utils/ErrorBoundary.js index 229fbd489b..dc2f5f0822 100644 --- a/packages/api/src/hooks/utils/ErrorBoundary.js +++ b/packages/api/src/hooks/utils/ErrorBoundary.js @@ -15,7 +15,7 @@ class ErrorBoundary extends Component { this.setState({ hasError: true }); - onError(error); + onError && onError(error); } render() { @@ -26,11 +26,6 @@ class ErrorBoundary extends Component { } } -ErrorBoundary.defaultProps = { - children: undefined, - onError: undefined -}; - ErrorBoundary.propTypes = { children: PropTypes.any, onError: PropTypes.func diff --git a/packages/api/src/providers/Ponyfill/PonyfillComposer.tsx b/packages/api/src/providers/Ponyfill/PonyfillComposer.tsx index c5a4aace4e..0af0710314 100644 --- a/packages/api/src/providers/Ponyfill/PonyfillComposer.tsx +++ b/packages/api/src/providers/Ponyfill/PonyfillComposer.tsx @@ -9,7 +9,7 @@ type Props = PropsWithChildren<{ ponyfill?: Partial; }>; -const PonyfillComposer = ({ children, ponyfill: partialPonyfill }: Props) => { +const PonyfillComposer = ({ children, ponyfill: partialPonyfill = undefined }: Props) => { // Note: `useRef(value)` always return the initial value that was called with. if (useRef(partialPonyfill).current !== partialPonyfill) { // We does not support changing ponyfill. @@ -85,10 +85,6 @@ const PonyfillComposer = ({ children, ponyfill: partialPonyfill }: Props) => { return {children}; }; -PonyfillComposer.defaultProps = { - ponyfill: undefined -}; - PonyfillComposer.propTypes = { ponyfill: PropTypes.any }; diff --git a/packages/bundle/src/AddFullBundle.tsx b/packages/bundle/src/AddFullBundle.tsx index 5fdc9b5144..40db083933 100644 --- a/packages/bundle/src/AddFullBundle.tsx +++ b/packages/bundle/src/AddFullBundle.tsx @@ -36,11 +36,11 @@ const adaptiveCardHostConfigDeprecation = warnOnce( const AddFullBundle = ({ adaptiveCardHostConfig, - adaptiveCardsHostConfig, - adaptiveCardsPackage, + adaptiveCardsHostConfig = undefined, + adaptiveCardsPackage = undefined, attachmentForScreenReaderMiddleware, attachmentMiddleware, - children, + children = undefined, renderMarkdown, styleOptions, styleSet diff --git a/packages/bundle/src/FullComposer.tsx b/packages/bundle/src/FullComposer.tsx index 2d0f440a37..4a0aa94028 100644 --- a/packages/bundle/src/FullComposer.tsx +++ b/packages/bundle/src/FullComposer.tsx @@ -20,13 +20,6 @@ const FullComposer = (props: FullComposerProps) => ( ); -FullComposer.defaultProps = { - ...Composer.defaultProps, - adaptiveCardsHostConfig: undefined, - adaptiveCardsPackage: undefined, - children: undefined -}; - FullComposer.propTypes = { ...Composer.propTypes, adaptiveCardsHostConfig: PropTypes.any, diff --git a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardAttachment.tsx b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardAttachment.tsx index 1a4abb422a..b1777e6ea8 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardAttachment.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardAttachment.tsx @@ -9,16 +9,12 @@ type AdaptiveCardAttachmentProps = { disabled?: boolean; }; -const AdaptiveCardAttachment: FC = ({ attachment: { content }, disabled }) => ( +const AdaptiveCardAttachment: FC = ({ attachment: { content }, disabled = undefined }) => ( ); export default AdaptiveCardAttachment; -AdaptiveCardAttachment.defaultProps = { - disabled: undefined -}; - AdaptiveCardAttachment.propTypes = { // PropTypes cannot fully capture TypeScript types. // @ts-ignore diff --git a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardContent.tsx b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardContent.tsx index 8441149ce0..26e6690e4d 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardContent.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardContent.tsx @@ -23,7 +23,7 @@ type AdaptiveCardContentProps = { disabled?: boolean; }; -const AdaptiveCardContent: FC = ({ actionPerformedClassName, content, disabled }) => { +const AdaptiveCardContent: FC = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const parseAdaptiveCardJSON = useParseAdaptiveCardJSON(); const card = useMemo( @@ -49,11 +49,6 @@ const AdaptiveCardContent: FC = ({ actionPerformedClas ); }; -AdaptiveCardContent.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - AdaptiveCardContent.propTypes = { actionPerformedClassName: PropTypes.string, content: PropTypes.any.isRequired, diff --git a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx index 65d5b3f217..4ab640ee60 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx @@ -40,10 +40,10 @@ type AdaptiveCardRendererProps = { }; const AdaptiveCardRenderer: VFC = ({ - actionPerformedClassName, + actionPerformedClassName = '', adaptiveCard, - disabled: disabledFromProps, - tapAction + disabled: disabledFromProps = undefined, + tapAction = undefined }) => { const [{ adaptiveCardRenderer: adaptiveCardRendererStyleSet }] = useStyleSet(); const [{ GlobalSettings, HostConfig }] = useAdaptiveCardsPackage(); @@ -249,12 +249,6 @@ const AdaptiveCardRenderer: VFC = ({ ); }; -AdaptiveCardRenderer.defaultProps = { - actionPerformedClassName: '', - disabled: undefined, - tapAction: undefined -}; - AdaptiveCardRenderer.propTypes = { actionPerformedClassName: PropTypes.string, adaptiveCard: PropTypes.any.isRequired, diff --git a/packages/bundle/src/adaptiveCards/Attachment/AnimationCardAttachment.js b/packages/bundle/src/adaptiveCards/Attachment/AnimationCardAttachment.js index 8de9f38d5e..f8a163ce01 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/AnimationCardAttachment.js +++ b/packages/bundle/src/adaptiveCards/Attachment/AnimationCardAttachment.js @@ -3,14 +3,10 @@ import React from 'react'; import AnimationCardContent from './AnimationCardContent'; -const AnimationCardAttachment = ({ attachment: { content }, disabled }) => ( +const AnimationCardAttachment = ({ attachment: { content }, disabled = undefined }) => ( ); -AnimationCardAttachment.defaultProps = { - disabled: undefined -}; - AnimationCardAttachment.propTypes = { attachment: PropTypes.shape({ content: PropTypes.shape({ diff --git a/packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.tsx b/packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.tsx index 943d9300ce..f298978e1b 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.tsx @@ -16,7 +16,7 @@ type AnimationCardContentProps = { disabled?: boolean; }; -const AnimationCardContent: FC = ({ actionPerformedClassName, content, disabled }) => { +const AnimationCardContent: FC = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const { media = [] } = content; const [{ animationCardAttachment: animationCardAttachmentStyleSet }] = useStyleSet(); @@ -34,11 +34,6 @@ const AnimationCardContent: FC = ({ actionPerformedCl ); }; -AnimationCardContent.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - AnimationCardContent.propTypes = { actionPerformedClassName: PropTypes.string, // PropTypes cannot fully capture TypeScript types. diff --git a/packages/bundle/src/adaptiveCards/Attachment/AudioCardAttachment.js b/packages/bundle/src/adaptiveCards/Attachment/AudioCardAttachment.js index b0e3d967e7..e98f30ac18 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/AudioCardAttachment.js +++ b/packages/bundle/src/adaptiveCards/Attachment/AudioCardAttachment.js @@ -5,14 +5,10 @@ import React from 'react'; import AudioCardContent from './AudioCardContent'; -const AudioCardAttachment = ({ attachment: { content }, disabled }) => ( +const AudioCardAttachment = ({ attachment: { content }, disabled = undefined }) => ( ); -AudioCardAttachment.defaultProps = { - disabled: undefined -}; - AudioCardAttachment.propTypes = { attachment: PropTypes.shape({ content: PropTypes.shape({ diff --git a/packages/bundle/src/adaptiveCards/Attachment/AudioCardContent.tsx b/packages/bundle/src/adaptiveCards/Attachment/AudioCardContent.tsx index a280290e4b..db802f84b1 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/AudioCardContent.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/AudioCardContent.tsx @@ -16,7 +16,7 @@ type AudioCardContentProps = { disabled?: boolean; }; -const AudioCardContent: FC = ({ actionPerformedClassName, content, disabled }) => { +const AudioCardContent: FC = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const [{ audioCardAttachment: audioCardAttachmentStyleSet }] = useStyleSet(); const { autostart = false, autoloop = false, image: { url: imageURL = '' } = {}, media = [] } = content; @@ -34,11 +34,6 @@ const AudioCardContent: FC = ({ actionPerformedClassName, ); }; -AudioCardContent.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - AudioCardContent.propTypes = { actionPerformedClassName: PropTypes.string, // PropTypes cannot fully capture TypeScript types. diff --git a/packages/bundle/src/adaptiveCards/Attachment/CommonCard.js b/packages/bundle/src/adaptiveCards/Attachment/CommonCard.js index b4c960ef23..2f9fbbfb33 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/CommonCard.js +++ b/packages/bundle/src/adaptiveCards/Attachment/CommonCard.js @@ -10,7 +10,7 @@ import useStyleOptions from '../../hooks/useStyleOptions'; const { useDirection } = hooks; -const CommonCard = ({ actionPerformedClassName, content, disabled }) => { +const CommonCard = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const [adaptiveCardsPackage] = useAdaptiveCardsPackage(); const [direction] = useDirection(); const [styleOptions] = useStyleOptions(); @@ -35,11 +35,6 @@ const CommonCard = ({ actionPerformedClassName, content, disabled }) => { ); }; -CommonCard.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - CommonCard.propTypes = { actionPerformedClassName: PropTypes.string, content: PropTypes.shape({ diff --git a/packages/bundle/src/adaptiveCards/Attachment/HeroCardAttachment.js b/packages/bundle/src/adaptiveCards/Attachment/HeroCardAttachment.js index 4ba7b71feb..238b579350 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/HeroCardAttachment.js +++ b/packages/bundle/src/adaptiveCards/Attachment/HeroCardAttachment.js @@ -3,13 +3,9 @@ import React from 'react'; import HeroCardContent from './HeroCardContent'; -const HeroCardAttachment = ({ attachment: { content } = {}, disabled }) => +const HeroCardAttachment = ({ attachment: { content } = {}, disabled = undefined }) => !!content && ; -HeroCardAttachment.defaultProps = { - disabled: undefined -}; - HeroCardAttachment.propTypes = { attachment: PropTypes.shape({ content: PropTypes.shape({ diff --git a/packages/bundle/src/adaptiveCards/Attachment/HeroCardContent.tsx b/packages/bundle/src/adaptiveCards/Attachment/HeroCardContent.tsx index 7cbfa47aca..3bb54e0340 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/HeroCardContent.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/HeroCardContent.tsx @@ -16,7 +16,7 @@ type HeroCardContentProps = { disabled?: boolean; }; -const HeroCardContent: FC = ({ actionPerformedClassName, content, disabled }) => { +const HeroCardContent: FC = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const [adaptiveCardsPackage] = useAdaptiveCardsPackage(); const [styleOptions] = useStyleOptions(); const [direction] = useDirection(); @@ -43,11 +43,6 @@ const HeroCardContent: FC = ({ actionPerformedClassName, c ); }; -HeroCardContent.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - HeroCardContent.propTypes = { actionPerformedClassName: PropTypes.string, // PropTypes cannot fully capture TypeScript types. diff --git a/packages/bundle/src/adaptiveCards/Attachment/OAuthCardAttachment.js b/packages/bundle/src/adaptiveCards/Attachment/OAuthCardAttachment.js index 189f04bdae..2cf938e7b1 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/OAuthCardAttachment.js +++ b/packages/bundle/src/adaptiveCards/Attachment/OAuthCardAttachment.js @@ -3,14 +3,10 @@ import React from 'react'; import OAuthCardContent from './OAuthCardContent'; -const OAuthCardAttachment = ({ attachment: { content } = {}, disabled }) => ( +const OAuthCardAttachment = ({ attachment: { content } = {}, disabled = undefined }) => ( ); -OAuthCardAttachment.defaultProps = { - disabled: undefined -}; - OAuthCardAttachment.propTypes = { attachment: PropTypes.shape({ content: PropTypes.shape({ diff --git a/packages/bundle/src/adaptiveCards/Attachment/OAuthCardContent.tsx b/packages/bundle/src/adaptiveCards/Attachment/OAuthCardContent.tsx index 24b6b8fb18..f950127024 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/OAuthCardContent.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/OAuthCardContent.tsx @@ -16,7 +16,7 @@ type OAuthCardContentProps = { disabled?: boolean; }; -const OAuthCardContent: FC = ({ actionPerformedClassName, content, disabled }) => { +const OAuthCardContent: FC = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const [adaptiveCardsPackage] = useAdaptiveCardsPackage(); const [direction] = useDirection(); const [styleOptions] = useStyleOptions(); @@ -41,11 +41,6 @@ const OAuthCardContent: FC = ({ actionPerformedClassName, ); }; -OAuthCardContent.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - OAuthCardContent.propTypes = { actionPerformedClassName: PropTypes.string, // PropTypes cannot fully capture TypeScript types. diff --git a/packages/bundle/src/adaptiveCards/Attachment/ReceiptCardAttachment.js b/packages/bundle/src/adaptiveCards/Attachment/ReceiptCardAttachment.js index 5f75b9bbaf..2367b8b4f2 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/ReceiptCardAttachment.js +++ b/packages/bundle/src/adaptiveCards/Attachment/ReceiptCardAttachment.js @@ -3,14 +3,10 @@ import React from 'react'; import ReceiptCardContent from './ReceiptCardContent'; -const ReceiptCardAttachment = ({ attachment: { content }, disabled }) => ( +const ReceiptCardAttachment = ({ attachment: { content }, disabled = undefined }) => ( ); -ReceiptCardAttachment.defaultProps = { - disabled: undefined -}; - ReceiptCardAttachment.propTypes = { attachment: PropTypes.shape({ content: PropTypes.shape({ diff --git a/packages/bundle/src/adaptiveCards/Attachment/ReceiptCardContent.tsx b/packages/bundle/src/adaptiveCards/Attachment/ReceiptCardContent.tsx index efc3a3266d..baa78bb49f 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/ReceiptCardContent.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/ReceiptCardContent.tsx @@ -22,7 +22,7 @@ type ReceiptCardContentProps = { disabled?: boolean; }; -const ReceiptCardContent: FC = ({ actionPerformedClassName, content, disabled }) => { +const ReceiptCardContent: FC = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const [adaptiveCardsPackage] = useAdaptiveCardsPackage(); const [direction] = useDirection(); const [styleOptions] = useStyleOptions(); @@ -123,11 +123,6 @@ const ReceiptCardContent: FC = ({ actionPerformedClassN ); }; -ReceiptCardContent.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - ReceiptCardContent.propTypes = { actionPerformedClassName: PropTypes.string, // PropTypes cannot fully capture TypeScript types. diff --git a/packages/bundle/src/adaptiveCards/Attachment/SignInCardAttachment.js b/packages/bundle/src/adaptiveCards/Attachment/SignInCardAttachment.js index 295d5f644e..8e83310e5d 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/SignInCardAttachment.js +++ b/packages/bundle/src/adaptiveCards/Attachment/SignInCardAttachment.js @@ -3,14 +3,10 @@ import React from 'react'; import SignInCardContent from './SignInCardContent'; -const SignInCardAttachment = ({ attachment: { content }, disabled }) => ( +const SignInCardAttachment = ({ attachment: { content }, disabled = undefined }) => ( ); -SignInCardAttachment.defaultProps = { - disabled: undefined -}; - SignInCardAttachment.propTypes = { attachment: PropTypes.shape({ content: PropTypes.any.isRequired diff --git a/packages/bundle/src/adaptiveCards/Attachment/SignInCardContent.tsx b/packages/bundle/src/adaptiveCards/Attachment/SignInCardContent.tsx index 637fd73981..9ea9f2fa01 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/SignInCardContent.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/SignInCardContent.tsx @@ -11,7 +11,7 @@ type SignInCardContentProps = { disabled?: boolean; }; -const SignInCardContent: FC = ({ actionPerformedClassName, content, disabled }) => { +const SignInCardContent: FC = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const [{ animationCardAttachment: animationCardAttachmentStyleSet }] = useStyleSet(); return ( @@ -21,11 +21,6 @@ const SignInCardContent: FC = ({ actionPerformedClassNam ); }; -SignInCardContent.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - SignInCardContent.propTypes = { actionPerformedClassName: PropTypes.string, content: PropTypes.any.isRequired, diff --git a/packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardAttachment.js b/packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardAttachment.js index e73a3dcfe9..d833b29c3a 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardAttachment.js +++ b/packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardAttachment.js @@ -3,14 +3,10 @@ import React from 'react'; import ThumbnailCardContent from './ThumbnailCardContent'; -const ThumbnailCardAttachment = ({ attachment: { content }, disabled }) => ( +const ThumbnailCardAttachment = ({ attachment: { content }, disabled = undefined }) => ( ); -ThumbnailCardAttachment.defaultProps = { - disabled: undefined -}; - ThumbnailCardAttachment.propTypes = { attachment: PropTypes.shape({ content: PropTypes.shape({ diff --git a/packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardContent.tsx b/packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardContent.tsx index 085de2d2b2..045535ef41 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardContent.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardContent.tsx @@ -18,7 +18,7 @@ type ThumbnailCardContentProps = { disabled?: boolean; }; -const ThumbnailCardContent: FC = ({ actionPerformedClassName, content, disabled }) => { +const ThumbnailCardContent: FC = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const [adaptiveCardsPackage] = useAdaptiveCardsPackage(); const [direction] = useDirection(); const [styleOptions] = useStyleOptions(); @@ -61,11 +61,6 @@ const ThumbnailCardContent: FC = ({ actionPerformedCl ); }; -ThumbnailCardContent.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - ThumbnailCardContent.propTypes = { actionPerformedClassName: PropTypes.string, // PropTypes cannot fully capture TypeScript types. diff --git a/packages/bundle/src/adaptiveCards/Attachment/VideoCardAttachment.js b/packages/bundle/src/adaptiveCards/Attachment/VideoCardAttachment.js index a65e775e2f..fd6b783ea4 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/VideoCardAttachment.js +++ b/packages/bundle/src/adaptiveCards/Attachment/VideoCardAttachment.js @@ -5,14 +5,10 @@ import React from 'react'; import VideoCardContent from './VideoCardContent'; -const VideoCardAttachment = ({ attachment: { content }, disabled }) => ( +const VideoCardAttachment = ({ attachment: { content }, disabled = undefined }) => ( ); -VideoCardAttachment.defaultProps = { - disabled: undefined -}; - VideoCardAttachment.propTypes = { attachment: PropTypes.shape({ content: PropTypes.shape({ diff --git a/packages/bundle/src/adaptiveCards/Attachment/VideoCardContent.tsx b/packages/bundle/src/adaptiveCards/Attachment/VideoCardContent.tsx index d2e24cfbe6..70a333a015 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/VideoCardContent.tsx +++ b/packages/bundle/src/adaptiveCards/Attachment/VideoCardContent.tsx @@ -21,7 +21,7 @@ type VideoCardContentProps = { disabled?: boolean; }; -const VideoCardContent: FC = ({ actionPerformedClassName, content, disabled }) => { +const VideoCardContent: FC = ({ actionPerformedClassName = '', content, disabled = undefined }) => { const { autoloop, autostart, image: { url: imageURL } = { url: undefined }, media } = content; const [{ audioCardAttachment: audioCardAttachmentStyleSet }] = useStyleSet(); @@ -39,11 +39,6 @@ const VideoCardContent: FC = ({ actionPerformedClassName, ); }; -VideoCardContent.defaultProps = { - actionPerformedClassName: '', - disabled: undefined -}; - VideoCardContent.propTypes = { actionPerformedClassName: PropTypes.string, // PropTypes cannot fully capture TypeScript types. diff --git a/packages/component/src/Activity/Avatar.tsx b/packages/component/src/Activity/Avatar.tsx index e58673f589..e8be08257d 100644 --- a/packages/component/src/Activity/Avatar.tsx +++ b/packages/component/src/Activity/Avatar.tsx @@ -10,7 +10,7 @@ type AvatarProps = { }; /** @deprecated Please use `useRenderAvatar` hook instead. */ -const Avatar: VFC = ({ 'aria-hidden': ariaHidden, className, fromUser }) => { +const Avatar: VFC = ({ 'aria-hidden': ariaHidden = false, className = '', fromUser = false }) => { console.warn( 'botframework-webchat: component is deprecated and will be removed on or after 2022-02-25. Please use `useRenderAvatar` hook instead.' ); @@ -18,12 +18,6 @@ const Avatar: VFC = ({ 'aria-hidden': ariaHidden, className, fromUs return ; }; -Avatar.defaultProps = { - 'aria-hidden': false, - className: '', - fromUser: false -}; - Avatar.propTypes = { 'aria-hidden': PropTypes.bool, className: PropTypes.string, diff --git a/packages/component/src/Activity/Bubble.tsx b/packages/component/src/Activity/Bubble.tsx index 192daa9bf2..9ead4d270e 100644 --- a/packages/component/src/Activity/Bubble.tsx +++ b/packages/component/src/Activity/Bubble.tsx @@ -70,7 +70,7 @@ type BubbleProps = { nub?: boolean | 'hidden'; }; -const Bubble: FC = ({ 'aria-hidden': ariaHidden, children, className, fromUser, nub }) => { +const Bubble: FC = ({ 'aria-hidden': ariaHidden = undefined, children = undefined, className = '', fromUser = false, nub = false }) => { const [{ bubble: bubbleStyleSet }] = useStyleSet(); const [direction] = useDirection(); const [ @@ -87,17 +87,17 @@ const Bubble: FC = ({ 'aria-hidden': ariaHidden, children, classNam const { borderWidth, nubOffset, nubSize, side } = fromUser ? { - borderWidth: bubbleFromUserBorderWidth, - nubOffset: bubbleFromUserNubOffset, - nubSize: bubbleFromUserNubSize, - side: 'user' - } + borderWidth: bubbleFromUserBorderWidth, + nubOffset: bubbleFromUserNubOffset, + nubSize: bubbleFromUserNubSize, + side: 'user' + } : { - borderWidth: bubbleBorderWidth, - nubOffset: bubbleNubOffset, - nubSize: bubbleNubSize, - side: 'bot' - }; + borderWidth: bubbleBorderWidth, + nubOffset: bubbleNubOffset, + nubSize: bubbleNubSize, + side: 'bot' + }; return (
= ({ 'aria-hidden': ariaHidden, children, classNam ); }; -Bubble.defaultProps = { - 'aria-hidden': undefined, - children: undefined, - className: '', - fromUser: false, - nub: false -}; - Bubble.propTypes = { 'aria-hidden': PropTypes.bool, children: PropTypes.any, diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js index ba442accf2..f0e0259deb 100644 --- a/packages/component/src/Activity/CarouselFilmStrip.js +++ b/packages/component/src/Activity/CarouselFilmStrip.js @@ -97,12 +97,12 @@ const ROOT_STYLE = { const CarouselFilmStrip = ({ activity, - className, - hideTimestamp, - renderActivityStatus, + className = '', + hideTimestamp = false, + renderActivityStatus = false, renderAttachment, - renderAvatar, - showCallout + renderAvatar = false, + showCallout = false }) => { const [{ bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize }] = useStyleOptions(); const [{ carouselFilmStrip: carouselFilmStripStyleSet }] = useStyleSet(); @@ -233,14 +233,6 @@ const CarouselFilmStrip = ({ ); }; -CarouselFilmStrip.defaultProps = { - className: '', - hideTimestamp: false, - renderActivityStatus: false, - renderAvatar: false, - showCallout: false -}; - CarouselFilmStrip.propTypes = { activity: PropTypes.shape({ attachments: PropTypes.array, diff --git a/packages/component/src/Activity/CarouselFilmStripAttachment.js b/packages/component/src/Activity/CarouselFilmStripAttachment.js index 853ba916f6..73600d1233 100644 --- a/packages/component/src/Activity/CarouselFilmStripAttachment.js +++ b/packages/component/src/Activity/CarouselFilmStripAttachment.js @@ -12,7 +12,7 @@ const { useDirection, useLocalizer } = hooks; const CarouselFilmStripAttachment = ({ activity, attachment, - className, + className = '', fromUser, hasAvatar, hideNub, @@ -55,10 +55,6 @@ const CarouselFilmStripAttachment = ({ ); }; -CarouselFilmStripAttachment.defaultProps = { - className: '' -}; - CarouselFilmStripAttachment.propTypes = { activity: PropTypes.shape({ attachments: PropTypes.array, diff --git a/packages/component/src/Activity/CarouselLayout.js b/packages/component/src/Activity/CarouselLayout.js index 508caa3840..49a94d2f74 100644 --- a/packages/component/src/Activity/CarouselLayout.js +++ b/packages/component/src/Activity/CarouselLayout.js @@ -28,11 +28,11 @@ const ROOT_STYLE = { const CarouselLayoutCore = ({ activity, - hideTimestamp, - renderActivityStatus, + hideTimestamp = false, + renderActivityStatus = false, renderAttachment, - renderAvatar, - showCallout + renderAvatar = false, + showCallout = true }) => { const [{ carouselFlipper: carouselFlipperStyleSet }] = useStyleSet(); const [{ root: filmRootClassName }] = useReactFilmStyleSetClassNames(); @@ -78,13 +78,6 @@ const CarouselLayoutCore = ({ ); }; -CarouselLayoutCore.defaultProps = { - hideTimestamp: false, - renderActivityStatus: false, - renderAvatar: false, - showCallout: true -}; - CarouselLayoutCore.propTypes = { activity: PropTypes.shape({ attachments: PropTypes.array @@ -109,10 +102,6 @@ const CarouselLayout = props => { ); }; -CarouselLayout.defaultProps = { - ...CarouselLayoutCore.defaultProps -}; - CarouselLayout.propTypes = { ...CarouselLayoutCore.propTypes }; diff --git a/packages/component/src/Activity/SayAlt.js b/packages/component/src/Activity/SayAlt.js index 9eabc7e8ad..3077daf617 100644 --- a/packages/component/src/Activity/SayAlt.js +++ b/packages/component/src/Activity/SayAlt.js @@ -9,16 +9,12 @@ const ROOT_STYLE = { margin: 0 }; -const SayAlt = ({ speak }) => { +const SayAlt = ({ speak = '' }) => { const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + ''; return !!speak && 
{speak}
; }; -SayAlt.defaultProps = { - speak: '' -}; - SayAlt.propTypes = { speak: PropTypes.string }; diff --git a/packages/component/src/ActivityStatus/AbsoluteTime.js b/packages/component/src/ActivityStatus/AbsoluteTime.js index d979dc706c..54b1bf4f14 100644 --- a/packages/component/src/ActivityStatus/AbsoluteTime.js +++ b/packages/component/src/ActivityStatus/AbsoluteTime.js @@ -6,7 +6,7 @@ import ScreenReaderText from '../ScreenReaderText'; const { useDateFormatter, useLocalizer } = hooks; -const AbsoluteTime = ({ hide, value }) => { +const AbsoluteTime = ({ hide = false, value }) => { const localize = useLocalizer(); const formatDate = useDateFormatter(); @@ -20,10 +20,6 @@ const AbsoluteTime = ({ hide, value }) => { ); }; -AbsoluteTime.defaultProps = { - hide: false -}; - AbsoluteTime.propTypes = { hide: PropTypes.bool, value: PropTypes.string.isRequired diff --git a/packages/component/src/Attachment/Assets/DownloadIcon.js b/packages/component/src/Attachment/Assets/DownloadIcon.js index ec369dd5af..8ae5a58237 100644 --- a/packages/component/src/Attachment/Assets/DownloadIcon.js +++ b/packages/component/src/Attachment/Assets/DownloadIcon.js @@ -3,7 +3,7 @@ import React from 'react'; const ICON_SIZE_FACTOR = 22; -const DownloadIcon = ({ className, size }) => ( +const DownloadIcon = ({ className = '', size = 1 }) => ( ( ); -DownloadIcon.defaultProps = { - className: '', - size: 1 -}; - DownloadIcon.propTypes = { className: PropTypes.string, size: PropTypes.number diff --git a/packages/component/src/Attachment/AudioContent.tsx b/packages/component/src/Attachment/AudioContent.tsx index 05c92a6450..f1645a3707 100644 --- a/packages/component/src/Attachment/AudioContent.tsx +++ b/packages/component/src/Attachment/AudioContent.tsx @@ -11,7 +11,7 @@ type AudioContentProps = { src: string; }; -const AudioContent: FC = ({ alt, autoPlay, loop, src }) => { +const AudioContent: FC = ({ alt = '', autoPlay = false, loop = false, src }) => { const [{ audioContent: audioContentStyleSet }] = useStyleSet(); return ( @@ -26,13 +26,6 @@ const AudioContent: FC = ({ alt, autoPlay, loop, src }) => { ); }; -AudioContent.defaultProps = { - alt: '', - autoPlay: false, - loop: false, - poster: '' -}; - AudioContent.propTypes = { alt: PropTypes.string, autoPlay: PropTypes.bool, diff --git a/packages/component/src/Attachment/FileContent.tsx b/packages/component/src/Attachment/FileContent.tsx index 20d7335098..0c57a3e5ea 100644 --- a/packages/component/src/Attachment/FileContent.tsx +++ b/packages/component/src/Attachment/FileContent.tsx @@ -34,7 +34,7 @@ function isAllowedProtocol(url) { } } -const FileContentBadge = ({ downloadIcon, fileName, size }) => { +const FileContentBadge = ({ downloadIcon = false, fileName, size = undefined }) => { const [direction] = useDirection(); const formatByte = useByteFormatter(); @@ -59,11 +59,6 @@ const FileContentBadge = ({ downloadIcon, fileName, size }) => { ); }; -FileContentBadge.defaultProps = { - downloadIcon: false, - size: undefined -}; - FileContentBadge.propTypes = { downloadIcon: PropTypes.bool, fileName: PropTypes.string.isRequired, @@ -77,7 +72,7 @@ type FileContentProps = { size?: number; }; -const FileContent: FC = ({ className, href, fileName, size }) => { +const FileContent: FC = ({ className = '', href = undefined, fileName, size = undefined }) => { const [{ fileContent: fileContentStyleSet }] = useStyleSet(); const localize = useLocalizer(); const localizeBytes = useByteFormatter(); @@ -121,12 +116,6 @@ const FileContent: FC = ({ className, href, fileName, size }) ); }; -FileContent.defaultProps = { - className: '', - href: undefined, - size: undefined -}; - FileContent.propTypes = { className: PropTypes.string, fileName: PropTypes.string.isRequired, diff --git a/packages/component/src/Attachment/HTMLVideoContent.tsx b/packages/component/src/Attachment/HTMLVideoContent.tsx index dcd7e8aabc..7382f5539d 100644 --- a/packages/component/src/Attachment/HTMLVideoContent.tsx +++ b/packages/component/src/Attachment/HTMLVideoContent.tsx @@ -11,7 +11,7 @@ type HTMLVideoContentProps = { src: string; }; -const HTMLVideoContent: FC = ({ alt, autoPlay, loop, poster, src }) => { +const HTMLVideoContent: FC = ({ alt = '', autoPlay = false, loop = false, poster = '', src }) => { const [{ videoContent: videoContentStyleSet }] = useStyleSet(); return ( @@ -27,13 +27,6 @@ const HTMLVideoContent: FC = ({ alt, autoPlay, loop, post ); }; -HTMLVideoContent.defaultProps = { - alt: '', - autoPlay: false, - loop: false, - poster: '' -}; - HTMLVideoContent.propTypes = { alt: PropTypes.string, autoPlay: PropTypes.bool, diff --git a/packages/component/src/Attachment/Text/TextContent.tsx b/packages/component/src/Attachment/Text/TextContent.tsx index 183987f921..fdfe2799be 100644 --- a/packages/component/src/Attachment/Text/TextContent.tsx +++ b/packages/component/src/Attachment/Text/TextContent.tsx @@ -24,7 +24,6 @@ const TextContent: FC = memo(({ activity, contentType = 'text/plain', tex ) : null; }); -TextContent.defaultProps = { contentType: 'text/plain' }; TextContent.displayName = 'TextContent'; export default TextContent; diff --git a/packages/component/src/Attachment/VideoContent.tsx b/packages/component/src/Attachment/VideoContent.tsx index 8872d91229..a7519a7aae 100644 --- a/packages/component/src/Attachment/VideoContent.tsx +++ b/packages/component/src/Attachment/VideoContent.tsx @@ -38,7 +38,7 @@ type VideoContentProps = { src: string; }; -const VideoContent: FC = ({ alt, autoPlay, loop, poster, src }) => { +const VideoContent: FC = ({ alt = '', autoPlay = false, loop = false, poster = '', src }) => { const { hostname, pathname, search } = parseURL(src); const lastSegment = pathname.split('/').pop(); const searchParams = new URLSearchParams(search); @@ -61,13 +61,6 @@ const VideoContent: FC = ({ alt, autoPlay, loop, poster, src } }; -VideoContent.defaultProps = { - alt: '', - autoPlay: false, - loop: false, - poster: '' -}; - VideoContent.propTypes = { alt: PropTypes.string, autoPlay: PropTypes.bool, diff --git a/packages/component/src/Attachment/VimeoContent.tsx b/packages/component/src/Attachment/VimeoContent.tsx index 1a1dd474d2..2d3ccedca7 100644 --- a/packages/component/src/Attachment/VimeoContent.tsx +++ b/packages/component/src/Attachment/VimeoContent.tsx @@ -13,7 +13,7 @@ type VimeoContentProps = { loop?: boolean; }; -const VimeoContent: FC = ({ alt, autoPlay, embedID, loop }) => { +const VimeoContent: FC = ({ alt = '', autoPlay = false, embedID, loop = false }) => { const [{ vimeoContent: vimeoContentStyleSet }] = useStyleSet(); const localize = useLocalizer(); @@ -39,12 +39,6 @@ const VimeoContent: FC = ({ alt, autoPlay, embedID, loop }) = ); }; -VimeoContent.defaultProps = { - alt: '', - autoPlay: false, - loop: false -}; - VimeoContent.propTypes = { alt: PropTypes.string, autoPlay: PropTypes.bool, diff --git a/packages/component/src/Attachment/YouTubeContent.tsx b/packages/component/src/Attachment/YouTubeContent.tsx index e07c6a5f72..3d8d38ab80 100644 --- a/packages/component/src/Attachment/YouTubeContent.tsx +++ b/packages/component/src/Attachment/YouTubeContent.tsx @@ -13,7 +13,7 @@ type YouTubeContentProps = { loop?: boolean; }; -const YouTubeContent: FC = ({ alt, autoPlay, embedID, loop }) => { +const YouTubeContent: FC = ({ alt = '', autoPlay = false, embedID, loop = false }) => { const [{ youTubeContent: youTubeContentStyleSet }] = useStyleSet(); const localize = useLocalizer(); @@ -37,12 +37,6 @@ const YouTubeContent: FC = ({ alt, autoPlay, embedID, loop ); }; -YouTubeContent.defaultProps = { - alt: '', - autoPlay: false, - loop: false -}; - YouTubeContent.propTypes = { alt: PropTypes.string, autoPlay: PropTypes.bool, diff --git a/packages/component/src/Avatar/InitialsAvatar.js b/packages/component/src/Avatar/InitialsAvatar.js index ff0d5d925f..4d393afc84 100644 --- a/packages/component/src/Avatar/InitialsAvatar.js +++ b/packages/component/src/Avatar/InitialsAvatar.js @@ -17,7 +17,7 @@ const ROOT_STYLE = { } }; -const InitialsAvatar = ({ fromUser }) => { +const InitialsAvatar = ({ fromUser = false }) => { const [{ initials: avatarInitialsForBot }] = useAvatarForBot(); const [{ initials: avatarInitialsForUser }] = useAvatarForUser(); const [{ initialsAvatar: initialsAvatarStyleSet }] = useStyleSet(); @@ -39,10 +39,6 @@ const InitialsAvatar = ({ fromUser }) => { ); }; -InitialsAvatar.defaultProps = { - fromUser: false -}; - InitialsAvatar.propTypes = { fromUser: PropTypes.bool }; diff --git a/packages/component/src/BasicTranscript.tsx b/packages/component/src/BasicTranscript.tsx index c16ec3aa21..bf92d10146 100644 --- a/packages/component/src/BasicTranscript.tsx +++ b/packages/component/src/BasicTranscript.tsx @@ -103,7 +103,7 @@ type InternalTranscriptProps = { // TODO: [P1] #4133 Add telemetry for computing how many re-render done so far. const InternalTranscript = forwardRef( - ({ activityElementMapRef, className }, ref) => { + ({ activityElementMapRef, className = '' }, ref) => { const [{ basicTranscript: basicTranscriptStyleSet }] = useStyleSet(); const [{ bubbleFromUserNubOffset, bubbleNubOffset, groupTimestamp, showAvatarInGroup }] = useStyleOptions(); const [activeDescendantId] = useActiveDescendantId(); @@ -342,16 +342,16 @@ const InternalTranscript = forwardRef( const activityKeyJustAboveScrollBottom: string | undefined = ( scrollableElement.scrollTop ? activityElements - .reverse() - // Add subpixel tolerance - .find(([, element]) => { - // "getClientRects()" is not returning an array, thus, it is not destructurable. - // eslint-disable-next-line prefer-destructuring - const elementClientRect = element.getClientRects()[0]; - - // If the activity is not attached to DOM tree, we should not count it as "bottommost visible activity", as it is not visible. - return elementClientRect && elementClientRect.bottom < scrollableClientBottom + 1; - }) + .reverse() + // Add subpixel tolerance + .find(([, element]) => { + // "getClientRects()" is not returning an array, thus, it is not destructurable. + // eslint-disable-next-line prefer-destructuring + const elementClientRect = element.getClientRects()[0]; + + // If the activity is not attached to DOM tree, we should not count it as "bottommost visible activity", as it is not visible. + return elementClientRect && elementClientRect.bottom < scrollableClientBottom + 1; + }) : activityElements[0] )?.[0]; @@ -552,10 +552,6 @@ const InternalTranscript = forwardRef( } ); -InternalTranscript.defaultProps = { - className: '' -}; - InternalTranscript.displayName = 'InternalTranscript'; InternalTranscript.propTypes = { @@ -800,10 +796,10 @@ const useScroller = (activityElementMapRef: MutableRefObject values.push( nthUnacknowledgedActivityOffsetTop + - nthUnacknowledgedActivityBoundingBoxElement.offsetHeight - - offsetHeight - - scrollTop + - patchedAutoScrollSnapOnActivityOffset + nthUnacknowledgedActivityBoundingBoxElement.offsetHeight - + offsetHeight - + scrollTop + + patchedAutoScrollSnapOnActivityOffset ); } } @@ -818,9 +814,9 @@ const useScroller = (activityElementMapRef: MutableRefObject values.push( firstUnacknowledgedActivityOffsetTop - - scrollTop - - offsetHeight * (1 - patchedAutoScrollSnapOnPage) + - patchedAutoScrollSnapOnPageOffset + scrollTop - + offsetHeight * (1 - patchedAutoScrollSnapOnPage) + + patchedAutoScrollSnapOnPageOffset ); } } @@ -839,7 +835,7 @@ type BasicTranscriptProps = { className?: string; }; -const BasicTranscript: FC = ({ className }) => { +const BasicTranscript: FC = ({ className = '' }) => { const activityElementMapRef = useRef(new Map()); const containerRef = useRef(); @@ -854,10 +850,6 @@ const BasicTranscript: FC = ({ className }) => { ); }; -BasicTranscript.defaultProps = { - className: '' -}; - BasicTranscript.propTypes = { className: PropTypes.string }; diff --git a/packages/component/src/BasicWebChat.tsx b/packages/component/src/BasicWebChat.tsx index 482a060085..e0c1598b34 100644 --- a/packages/component/src/BasicWebChat.tsx +++ b/packages/component/src/BasicWebChat.tsx @@ -44,7 +44,7 @@ type BasicWebChatProps = { role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region'; }; -const BasicWebChat: FC = ({ className, role }) => { +const BasicWebChat: FC = ({ className = '', role = 'complementary' }) => { const [{ root: rootStyleSet }] = useStyleSet(); const [options] = useStyleOptions(); const styleToEmotionObject = useStyleToEmotionObject(); @@ -73,11 +73,6 @@ const BasicWebChat: FC = ({ className, role }) => { ); }; -BasicWebChat.defaultProps = { - className: '', - role: 'complementary' -}; - BasicWebChat.propTypes = { className: PropTypes.string, // Ignoring deficiencies with TypeScript/PropTypes inference. diff --git a/packages/component/src/Composer.tsx b/packages/component/src/Composer.tsx index 65cfd6eca2..e3052d854d 100644 --- a/packages/component/src/Composer.tsx +++ b/packages/component/src/Composer.tsx @@ -129,12 +129,12 @@ type ComposerCoreProps = Readonly<{ const ComposerCore = ({ children, - extraStyleSet, - nonce, - renderMarkdown, - styleSet, - suggestedActionsAccessKey, - webSpeechPonyfillFactory + extraStyleSet = undefined, + nonce = undefined, + renderMarkdown = undefined, + styleSet = undefined, + suggestedActionsAccessKey = 'A a Å å', + webSpeechPonyfillFactory = undefined }: ComposerCoreProps) => { const [dictateAbortable, setDictateAbortable] = useState(); const [referenceGrammarID] = useReferenceGrammarID(); @@ -291,15 +291,6 @@ const ComposerCore = ({ ); }; -ComposerCore.defaultProps = { - extraStyleSet: undefined, - nonce: undefined, - renderMarkdown: undefined, - styleSet: undefined, - suggestedActionsAccessKey: 'A a Å å', - webSpeechPonyfillFactory: undefined -}; - ComposerCore.propTypes = { extraStyleSet: PropTypes.any, nonce: PropTypes.string, @@ -318,7 +309,7 @@ const Composer = ({ attachmentMiddleware, avatarMiddleware, cardActionMiddleware, - children, + children = undefined, extraStyleSet, renderMarkdown, scrollToEndButtonMiddleware, @@ -468,12 +459,6 @@ const Composer = ({ ); }; -Composer.defaultProps = { - ...APIComposer.defaultProps, - ...ComposerCore.defaultProps, - children: undefined -}; - Composer.propTypes = { ...APIComposer.propTypes, ...ComposerCore.propTypes, diff --git a/packages/component/src/ConnectivityStatus/Assets/ErrorNotificationIcon.js b/packages/component/src/ConnectivityStatus/Assets/ErrorNotificationIcon.js index 51652a0320..1f3df421bd 100644 --- a/packages/component/src/ConnectivityStatus/Assets/ErrorNotificationIcon.js +++ b/packages/component/src/ConnectivityStatus/Assets/ErrorNotificationIcon.js @@ -7,7 +7,7 @@ const { useDirection } = hooks; const ICON_SIZE_FACTOR = 16; -const ErrorNotificationIcon = ({ className, size }) => { +const ErrorNotificationIcon = ({ className = '', size = 1 }) => { const [direction] = useDirection(); return ( @@ -26,11 +26,6 @@ const ErrorNotificationIcon = ({ className, size }) => { ); }; -ErrorNotificationIcon.defaultProps = { - className: '', - size: 1 -}; - ErrorNotificationIcon.propTypes = { className: PropTypes.string, size: PropTypes.number diff --git a/packages/component/src/ConnectivityStatus/Assets/WarningNotificationIcon.js b/packages/component/src/ConnectivityStatus/Assets/WarningNotificationIcon.js index ec0597fdac..fea58b8ecf 100644 --- a/packages/component/src/ConnectivityStatus/Assets/WarningNotificationIcon.js +++ b/packages/component/src/ConnectivityStatus/Assets/WarningNotificationIcon.js @@ -7,7 +7,7 @@ const { useDirection } = hooks; const ICON_SIZE_FACTOR = 16; -const WarningNotificationIcon = ({ className, size }) => { +const WarningNotificationIcon = ({ className = '', size = 1 }) => { const [direction] = useDirection(); return ( @@ -23,11 +23,6 @@ const WarningNotificationIcon = ({ className, size }) => { ); }; -WarningNotificationIcon.defaultProps = { - className: '', - size: 1 -}; - WarningNotificationIcon.propTypes = { className: PropTypes.string, size: PropTypes.number diff --git a/packages/component/src/ConnectivityStatus/Connecting.js b/packages/component/src/ConnectivityStatus/Connecting.js index 156b383a88..a974ec5a94 100644 --- a/packages/component/src/ConnectivityStatus/Connecting.js +++ b/packages/component/src/ConnectivityStatus/Connecting.js @@ -12,7 +12,7 @@ import WarningNotificationIcon from './Assets/WarningNotificationIcon'; const { useDirection, useLocalizer, usePonyfill, useStyleOptions } = hooks; -const ConnectivityStatusConnecting = ({ reconnect }) => { +const ConnectivityStatusConnecting = ({ reconnect = false }) => { const [{ Date }] = usePonyfill(); const [{ slowConnectionAfter }] = useStyleOptions(); const [ @@ -61,10 +61,6 @@ const ConnectivityStatusConnecting = ({ reconnect }) => { ); }; -ConnectivityStatusConnecting.defaultProps = { - reconnect: false -}; - ConnectivityStatusConnecting.propTypes = { reconnect: PropTypes.bool }; diff --git a/packages/component/src/Dictation.js b/packages/component/src/Dictation.js index bccfbcbc61..e3183d25a8 100644 --- a/packages/component/src/Dictation.js +++ b/packages/component/src/Dictation.js @@ -28,7 +28,7 @@ const { DictateState: { DICTATING, IDLE, STARTING } } = Constants; -const Dictation = ({ onError }) => { +const Dictation = ({ onError = undefined }) => { const [, setDictateAbortable] = useSettableDictateAbortable(); const [, setDictateInterims] = useDictateInterims(); const [, setSendBox] = useSendBoxValue(); @@ -118,10 +118,6 @@ const Dictation = ({ onError }) => { ); }; -Dictation.defaultProps = { - onError: undefined -}; - Dictation.propTypes = { onError: PropTypes.func }; diff --git a/packages/component/src/ErrorBox.tsx b/packages/component/src/ErrorBox.tsx index 0c462d06c1..e276b0d718 100644 --- a/packages/component/src/ErrorBox.tsx +++ b/packages/component/src/ErrorBox.tsx @@ -14,7 +14,7 @@ type ErrorBoxProps = { type?: string; }; -const ErrorBox: FC = ({ error, type }) => { +const ErrorBox: FC = ({ error, type = '' }) => { const [{ errorBox: errorBoxStyleSet }] = useStyleSet(); const localize = useLocalizer(); @@ -33,10 +33,6 @@ const ErrorBox: FC = ({ error, type }) => { ); }; -ErrorBox.defaultProps = { - type: '' -}; - ErrorBox.propTypes = { error: PropTypes.instanceOf(Error).isRequired, type: PropTypes.string diff --git a/packages/component/src/Middleware/Avatar/createCoreMiddleware.tsx b/packages/component/src/Middleware/Avatar/createCoreMiddleware.tsx index 6572bee837..b59c4e35f3 100644 --- a/packages/component/src/Middleware/Avatar/createCoreMiddleware.tsx +++ b/packages/component/src/Middleware/Avatar/createCoreMiddleware.tsx @@ -25,7 +25,7 @@ type DefaultAvatarProps = { fromUser: boolean; }; -const DefaultAvatar: FC = ({ 'aria-hidden': ariaHidden, className, fromUser }) => { +const DefaultAvatar: FC = ({ 'aria-hidden': ariaHidden = true, className = '', fromUser }) => { const [{ avatar: avatarStyleSet }] = useStyleSet(); const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + ''; @@ -46,11 +46,6 @@ const DefaultAvatar: FC = ({ 'aria-hidden': ariaHidden, clas ); }; -DefaultAvatar.defaultProps = { - 'aria-hidden': true, - className: '' -}; - DefaultAvatar.propTypes = { 'aria-hidden': PropTypes.bool, className: PropTypes.string, @@ -61,15 +56,15 @@ export default function createCoreAvatarMiddleware(): AvatarMiddleware[] { return [ () => () => - ({ fromUser, styleOptions }) => { - const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions; + ({ fromUser, styleOptions }) => { + const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions; - if (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials) { - return () => ; - } + if (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials) { + return () => ; + } - return false; - } + return false; + } ]; } diff --git a/packages/component/src/ReactWebChat.tsx b/packages/component/src/ReactWebChat.tsx index 2103379247..25a495e96e 100644 --- a/packages/component/src/ReactWebChat.tsx +++ b/packages/component/src/ReactWebChat.tsx @@ -22,18 +22,12 @@ type ReactWebChatProps = Readonly< } >; -const ReactWebChat = ({ className, role, ...composerProps }: ReactWebChatProps) => ( +const ReactWebChat = ({ className = undefined, role = undefined, ...composerProps }: ReactWebChatProps) => ( ); -ReactWebChat.defaultProps = { - className: undefined, - role: undefined, - ...Composer.defaultProps -}; - const { // Excluding "children" from ComposerProps. children: _, diff --git a/packages/component/src/ScreenReaderText.tsx b/packages/component/src/ScreenReaderText.tsx index 98666724ea..fcbb8ee6b3 100644 --- a/packages/component/src/ScreenReaderText.tsx +++ b/packages/component/src/ScreenReaderText.tsx @@ -30,7 +30,7 @@ type ScreenReaderTextProps = { }; const ScreenReaderText: VFC = forwardRef( - ({ 'aria-hidden': ariaHidden, id, text }, ref) => { + ({ 'aria-hidden': ariaHidden = undefined, id = undefined, text }, ref) => { const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + ''; if (ariaHidden && !id) { @@ -47,11 +47,6 @@ const ScreenReaderText: VFC = forwardRef = ({ className }) => { +const DictationInterims: FC = ({ className = '' }) => { const [dictateInterims] = useDictateInterims(); const [dictateState] = useDictateState(); const [{ dictationInterims: dictationInterimsStyleSet }] = useStyleSet(); @@ -37,27 +37,23 @@ const DictationInterims: FC = ({ className }) => {

) : ( dictateState === DICTATING && - (dictateInterims.length ? ( -

- {dictateInterims.map((interim, index) => ( - - {interim} -   - - ))} -

- ) : ( -

- {localize('SPEECH_INPUT_LISTENING')} -

- )) + (dictateInterims.length ? ( +

+ {dictateInterims.map((interim, index) => ( + + {interim} +   + + ))} +

+ ) : ( +

+ {localize('SPEECH_INPUT_LISTENING')} +

+ )) ); }; -DictationInterims.defaultProps = { - className: '' -}; - DictationInterims.propTypes = { className: PropTypes.string }; diff --git a/packages/component/src/SendBox/IconButton.tsx b/packages/component/src/SendBox/IconButton.tsx index 4c1ee33960..4f621cc3f8 100644 --- a/packages/component/src/SendBox/IconButton.tsx +++ b/packages/component/src/SendBox/IconButton.tsx @@ -17,7 +17,7 @@ type IconButtonProps = { onClick?: MouseEventHandler; }; -const IconButton: FC = ({ alt, children, className, disabled, onClick }) => { +const IconButton: FC = ({ alt = '', children = undefined, className = '', disabled = false, onClick = undefined }) => { const [{ sendBoxButton: sendBoxButtonStyleSet }] = useStyleSet(); const [{ sendBoxButtonAlignment }] = useStyleOptions(); const buttonRef = useRef(); @@ -48,14 +48,6 @@ const IconButton: FC = ({ alt, children, className, disabled, o ); }; -IconButton.defaultProps = { - alt: '', - children: undefined, - className: '', - disabled: false, - onClick: undefined -}; - IconButton.propTypes = { alt: PropTypes.string, children: PropTypes.any, diff --git a/packages/component/src/SendBox/SendButton.tsx b/packages/component/src/SendBox/SendButton.tsx index 112509130c..2940601212 100644 --- a/packages/component/src/SendBox/SendButton.tsx +++ b/packages/component/src/SendBox/SendButton.tsx @@ -15,7 +15,7 @@ type SendButtonProps = { className?: string; }; -const SendButton: FC = ({ className }) => { +const SendButton: FC = ({ className = undefined }) => { const [disabled] = useDisabled(); const localize = useLocalizer(); const submit = useSubmit(); @@ -34,10 +34,6 @@ const SendButton: FC = ({ className }) => { ); }; -SendButton.defaultProps = { - className: undefined -}; - SendButton.propTypes = { className: PropTypes.string }; diff --git a/packages/component/src/SendBox/SuggestedAction.tsx b/packages/component/src/SendBox/SuggestedAction.tsx index e06c806d52..e49c22e458 100644 --- a/packages/component/src/SendBox/SuggestedAction.tsx +++ b/packages/component/src/SendBox/SuggestedAction.tsx @@ -34,30 +34,30 @@ type SuggestedActionProps = { text?: string; textClassName?: string; type?: - | 'call' - | 'downloadFile' - | 'imBack' - | 'messageBack' - | 'openUrl' - | 'playAudio' - | 'playVideo' - | 'postBack' - | 'showImage' - | 'signin'; + | 'call' + | 'downloadFile' + | 'imBack' + | 'messageBack' + | 'openUrl' + | 'playAudio' + | 'playVideo' + | 'postBack' + | 'showImage' + | 'signin'; value?: any; }; const SuggestedAction: VFC = ({ buttonText, - className, - displayText, - image, - imageAlt, + className = '', + displayText = '', + image = '', + imageAlt = undefined, itemIndex, - text, - textClassName, - type, - value + text = '', + textClassName = '', + type = undefined, + value = undefined }) => { const [_, setSuggestedActions] = useSuggestedActions(); const [{ suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions(); @@ -132,17 +132,6 @@ const SuggestedAction: VFC = ({ ); }; -SuggestedAction.defaultProps = { - className: '', - displayText: '', - image: '', - imageAlt: undefined, - text: '', - textClassName: '', - type: undefined, - value: undefined -}; - SuggestedAction.propTypes = { buttonText: PropTypes.string.isRequired, className: PropTypes.string, diff --git a/packages/component/src/SendBox/SuggestedActions.tsx b/packages/component/src/SendBox/SuggestedActions.tsx index ca9e0293fe..e844f55a4a 100644 --- a/packages/component/src/SendBox/SuggestedActions.tsx +++ b/packages/component/src/SendBox/SuggestedActions.tsx @@ -32,7 +32,7 @@ const ROOT_STYLE = { } }; -const SuggestedActionCarouselContainer = ({ children, className, label }) => { +const SuggestedActionCarouselContainer = ({ children = undefined, className = undefined, label }) => { const [ { suggestedActionsCarouselFlipperBoxWidth, @@ -109,18 +109,13 @@ const SuggestedActionCarouselContainer = ({ children, className, label }) => { ); }; -SuggestedActionCarouselContainer.defaultProps = { - children: undefined, - className: undefined -}; - SuggestedActionCarouselContainer.propTypes = { children: PropTypes.any, className: PropTypes.string, label: PropTypes.string.isRequired }; -const SuggestedActionFlowContainer = ({ children, className, label }) => { +const SuggestedActionFlowContainer = ({ children = undefined, className = undefined, label }) => { const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet(); const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + ''; @@ -149,18 +144,13 @@ const SuggestedActionFlowContainer = ({ children, className, label }) => { ); }; -SuggestedActionFlowContainer.defaultProps = { - children: undefined, - className: undefined -}; - SuggestedActionFlowContainer.propTypes = { children: PropTypes.any, className: PropTypes.string, label: PropTypes.string.isRequired }; -const SuggestedActionStackedContainer = ({ children, className, label }) => { +const SuggestedActionStackedContainer = ({ children = undefined, className = undefined, label }) => { const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet(); const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + ''; @@ -185,11 +175,6 @@ const SuggestedActionStackedContainer = ({ children, className, label }) => { ); }; -SuggestedActionStackedContainer.defaultProps = { - children: undefined, - className: undefined -}; - SuggestedActionStackedContainer.propTypes = { children: PropTypes.any, className: PropTypes.string, @@ -219,16 +204,16 @@ const SuggestedActions = ({ className }: SuggestedActionsProps) => { imageAltText?: string; text?: string; type: - | 'call' - | 'downloadFile' - | 'imBack' - | 'messageBack' - | 'openUrl' - | 'playAudio' - | 'playVideo' - | 'postBack' - | 'showImage' - | 'signin'; + | 'call' + | 'downloadFile' + | 'imBack' + | 'messageBack' + | 'openUrl' + | 'playAudio' + | 'playVideo' + | 'postBack' + | 'showImage' + | 'signin'; value?: { [key: string]: any } | string; }; diff --git a/packages/component/src/SendBoxToolbar/UploadButton.tsx b/packages/component/src/SendBoxToolbar/UploadButton.tsx index 6526d8f30d..de1bec37fc 100644 --- a/packages/component/src/SendBoxToolbar/UploadButton.tsx +++ b/packages/component/src/SendBoxToolbar/UploadButton.tsx @@ -37,7 +37,7 @@ type UploadButtonProps = { className?: string; }; -const UploadButton: FC = ({ className }) => { +const UploadButton: FC = ({ className = undefined }) => { const [{ sendAttachmentOn, uploadAccept, uploadMultiple }] = useStyleOptions(); const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet(); const [disabled] = useDisabled(); @@ -99,10 +99,6 @@ const UploadButton: FC = ({ className }) => { ); }; -UploadButton.defaultProps = { - className: undefined -}; - UploadButton.propTypes = { className: PropTypes.string }; diff --git a/packages/component/src/Toast/CheckMarkIcon.js b/packages/component/src/Toast/CheckMarkIcon.js index 79549f5a45..3f593ce8c8 100644 --- a/packages/component/src/Toast/CheckMarkIcon.js +++ b/packages/component/src/Toast/CheckMarkIcon.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -const CheckMarkIcon = ({ 'aria-label': ariaLabel, className }) => ( +const CheckMarkIcon = ({ 'aria-label': ariaLabel = undefined, className = undefined }) => ( ( ); -CheckMarkIcon.defaultProps = { - 'aria-label': undefined, - className: undefined -}; - CheckMarkIcon.propTypes = { 'aria-label': PropTypes.string, className: PropTypes.string diff --git a/packages/component/src/Toast/CollapseIcon.js b/packages/component/src/Toast/CollapseIcon.js index 45d8b13dd0..db4156832c 100644 --- a/packages/component/src/Toast/CollapseIcon.js +++ b/packages/component/src/Toast/CollapseIcon.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -const CollapseIcon = ({ className }) => ( +const CollapseIcon = ({ className = undefined }) => ( ( ); -CollapseIcon.defaultProps = { - className: undefined -}; - CollapseIcon.propTypes = { className: PropTypes.string }; diff --git a/packages/component/src/Toast/DismissIcon.js b/packages/component/src/Toast/DismissIcon.js index 4278c01448..3665a7e0a0 100644 --- a/packages/component/src/Toast/DismissIcon.js +++ b/packages/component/src/Toast/DismissIcon.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -const DismissIcon = ({ className }) => ( +const DismissIcon = ({ className = undefined }) => ( ( ); -DismissIcon.defaultProps = { - className: undefined -}; - DismissIcon.propTypes = { className: PropTypes.string }; diff --git a/packages/component/src/Toast/ExclamationMarkIcon.js b/packages/component/src/Toast/ExclamationMarkIcon.js index be4f246f37..835112bf1d 100644 --- a/packages/component/src/Toast/ExclamationMarkIcon.js +++ b/packages/component/src/Toast/ExclamationMarkIcon.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -const ExclamationMarkIcon = ({ 'aria-label': ariaLabel, className }) => ( +const ExclamationMarkIcon = ({ 'aria-label': ariaLabel = undefined, className = undefined }) => ( ( ); -ExclamationMarkIcon.defaultProps = { - 'aria-label': undefined, - className: undefined -}; - ExclamationMarkIcon.propTypes = { 'aria-label': PropTypes.string, className: PropTypes.string diff --git a/packages/component/src/Toast/ExpandIcon.js b/packages/component/src/Toast/ExpandIcon.js index 4a48632271..7fb9232384 100644 --- a/packages/component/src/Toast/ExpandIcon.js +++ b/packages/component/src/Toast/ExpandIcon.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -const ExpandIcon = ({ className }) => ( +const ExpandIcon = ({ className = undefined }) => ( ( ); -ExpandIcon.defaultProps = { - className: undefined -}; - ExpandIcon.propTypes = { className: PropTypes.string }; diff --git a/packages/component/src/Toast/NotificationIcon.js b/packages/component/src/Toast/NotificationIcon.js index 5b50c0c2de..fc09407ede 100644 --- a/packages/component/src/Toast/NotificationIcon.js +++ b/packages/component/src/Toast/NotificationIcon.js @@ -8,7 +8,7 @@ import ExclamationMarkIcon from './ExclamationMarkIcon'; const { useLocalizer } = hooks; -const NotificationIcon = ({ className, level }) => { +const NotificationIcon = ({ className = undefined, level }) => { const localize = useLocalizer(); const prefixes = { @@ -33,10 +33,6 @@ const NotificationIcon = ({ className, level }) => { ); }; -NotificationIcon.defaultProps = { - className: undefined -}; - NotificationIcon.propTypes = { className: PropTypes.string, level: PropTypes.oneOf(['error', 'info', 'success', 'warn']).isRequired diff --git a/packages/component/src/Transcript/ActivityRow.tsx b/packages/component/src/Transcript/ActivityRow.tsx index da25c9b1f8..3fff3c1c54 100644 --- a/packages/component/src/Transcript/ActivityRow.tsx +++ b/packages/component/src/Transcript/ActivityRow.tsx @@ -20,7 +20,7 @@ const { useActivityKeysByRead, useGetHasAcknowledgedByActivityKey, useGetKeyByAc type ActivityRowProps = PropsWithChildren<{ activity: WebChatActivity }>; -const ActivityRow = forwardRef(({ activity, children }, ref) => { +const ActivityRow = forwardRef(({ activity = undefined, children }, ref) => { const [activeDescendantId] = useActiveDescendantId(); const [readActivityKeys] = useActivityKeysByRead(); const bodyRef = useRef(); @@ -114,10 +114,6 @@ const ActivityRow = forwardRef(({ activity, chi ); }); -ActivityRow.defaultProps = { - children: undefined -}; - ActivityRow.displayName = 'ActivityRow'; ActivityRow.propTypes = { diff --git a/packages/component/src/Utils/AccessKeySink/Surface.js b/packages/component/src/Utils/AccessKeySink/Surface.js index aa445e9bed..9f973bd592 100644 --- a/packages/component/src/Utils/AccessKeySink/Surface.js +++ b/packages/component/src/Utils/AccessKeySink/Surface.js @@ -5,7 +5,7 @@ import { orSelf as firstTabbableDescendantOrSelf } from '../firstTabbableDescend import AccessKeySinkContext from './internal/Context'; import useNavigatorPlatform from '../../hooks/internal/useNavigatorPlatform'; -const Surface = ({ children, ...otherProps }) => { +const Surface = ({ children = undefined, ...otherProps }) => { const [{ apple }] = useNavigatorPlatform(); const contextRef = useRef({ focii: [] }); @@ -45,10 +45,6 @@ const Surface = ({ children, ...otherProps }) => { ); }; -Surface.defaultProps = { - children: undefined -}; - Surface.propTypes = { children: PropTypes.any }; diff --git a/packages/component/src/Utils/AccessibleButton.tsx b/packages/component/src/Utils/AccessibleButton.tsx index 24f3280ad9..48c5a3305c 100644 --- a/packages/component/src/Utils/AccessibleButton.tsx +++ b/packages/component/src/Utils/AccessibleButton.tsx @@ -33,7 +33,7 @@ type AccessibleButtonProps = { // - If the widget is contained by a
, the developer need to filter out some `onSubmit` event caused by this widget const AccessibleButton = forwardRef( - ({ 'aria-hidden': ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => { + ({ 'aria-hidden': ariaHidden = undefined, children = undefined, disabled = undefined, onClick = undefined, tabIndex = undefined, ...props }, forwardedRef) => { const targetRef = useRef(); const ref = forwardedRef || targetRef; @@ -54,14 +54,6 @@ const AccessibleButton = forwardRef( } ); -AccessibleButton.defaultProps = { - 'aria-hidden': undefined, - children: undefined, - disabled: undefined, - onClick: undefined, - tabIndex: undefined -}; - AccessibleButton.displayName = 'AccessibleButton'; AccessibleButton.propTypes = { diff --git a/packages/component/src/Utils/AccessibleTextArea.tsx b/packages/component/src/Utils/AccessibleTextArea.tsx index d239678264..13e8e0480a 100644 --- a/packages/component/src/Utils/AccessibleTextArea.tsx +++ b/packages/component/src/Utils/AccessibleTextArea.tsx @@ -48,19 +48,19 @@ type AccessibleTextAreaProps = { const AccessibleTextArea = forwardRef( ( { - className, - disabled, - inputMode, - onChange, - onFocus, - onKeyDown, - onKeyDownCapture, - onKeyPress, - onSelect, - placeholder, - readOnly, - rows, - tabIndex, + className = undefined, + disabled = undefined, + inputMode = undefined, + onChange = undefined, + onFocus = undefined, + onKeyDown = undefined, + onKeyDownCapture = undefined, + onKeyPress = undefined, + onSelect = undefined, + placeholder = undefined, + readOnly = undefined, + rows = undefined, + tabIndex = undefined, ...props }, forwardedRef @@ -91,23 +91,6 @@ const AccessibleTextArea = forwardRef; }; -const FocusRedirector: FC = ({ className, onFocus, redirectRef }) => { +const FocusRedirector: FC = ({ className = undefined, onFocus = undefined, redirectRef = undefined }) => { const handleFocus = useCallback(() => { redirectRef?.current?.focus(); onFocus && onFocus(); @@ -34,12 +34,6 @@ const FocusRedirector: FC = ({ className, onFocus, redirec return
; }; -FocusRedirector.defaultProps = { - className: undefined, - onFocus: undefined, - redirectRef: undefined -}; - FocusRedirector.propTypes = { className: PropTypes.string, onFocus: PropTypes.func, diff --git a/packages/component/src/Utils/InlineMarkdown.js b/packages/component/src/Utils/InlineMarkdown.js index 59f43e0c84..ba763e4b04 100644 --- a/packages/component/src/Utils/InlineMarkdown.js +++ b/packages/component/src/Utils/InlineMarkdown.js @@ -43,7 +43,7 @@ function replaceAnchorWithButton(markdownTokens) { }); } -const InlineMarkdown = ({ children, onReference, references }) => { +const InlineMarkdown = ({ children = '', onReference = undefined, references = [] }) => { if (typeof children !== 'string') { console.warn('botframework-webchat: "children" prop passed to must be of type string.'); children = ''; @@ -134,12 +134,6 @@ const InlineMarkdown = ({ children, onReference, references }) => { return ; }; -InlineMarkdown.defaultProps = { - children: '', - onReference: undefined, - references: [] -}; - InlineMarkdown.propTypes = { children: PropTypes.string, onReference: PropTypes.func, diff --git a/packages/component/src/Utils/TypeFocusSink/FocusBox.js b/packages/component/src/Utils/TypeFocusSink/FocusBox.js index bcf5ba54b7..01671257e4 100644 --- a/packages/component/src/Utils/TypeFocusSink/FocusBox.js +++ b/packages/component/src/Utils/TypeFocusSink/FocusBox.js @@ -1,6 +1,3 @@ -// This is for defaultProps: { children: undefined } -/* eslint no-undefined: "off" */ - import PropTypes from 'prop-types'; import React, { forwardRef, useCallback, useMemo, useRef } from 'react'; @@ -10,7 +7,7 @@ import inputtableKey from './inputtableKey'; const DEFAULT_STYLE = { outline: 0 }; -const BaseFocusBox = ({ children, disabled, onKeyDownCapture, sendFocusRef: sendFocusRefProp, ...otherProps }, ref) => { +const BaseFocusBox = ({ children = undefined, disabled = false, onKeyDownCapture = undefined, sendFocusRef: sendFocusRefProp, ...otherProps }, ref) => { const sendFocusRefPersist = useRef(null); const patchedSendFocusRef = useMemo( () => sendFocusRefProp || sendFocusRefPersist, @@ -70,12 +67,6 @@ const BaseFocusBox = ({ children, disabled, onKeyDownCapture, sendFocusRef: send const FocusBox = forwardRef(BaseFocusBox); -FocusBox.defaultProps = BaseFocusBox.defaultProps = { - children: undefined, - disabled: false, - onKeyDownCapture: undefined -}; - FocusBox.propTypes = BaseFocusBox.propTypes = { children: PropTypes.any, disabled: PropTypes.bool, diff --git a/packages/component/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx b/packages/component/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx index 0f571c79a2..f4a99d699b 100644 --- a/packages/component/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx +++ b/packages/component/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx @@ -17,12 +17,12 @@ type LiveRegionTwinContainerProps = { // This container is marked as private because we assume there is only one instance under the . const LiveRegionTwinContainer: VFC = ({ - 'aria-label': ariaLabel, + 'aria-label': ariaLabel = undefined, 'aria-live': ariaLive, - 'aria-roledescription': ariaRoleDescription, - className, - role, - textElementClassName + 'aria-roledescription': ariaRoleDescription = undefined, + className = undefined, + role = undefined, + textElementClassName = undefined }) => { const [staticElementEntries] = useStaticElementEntries(); @@ -54,14 +54,6 @@ const LiveRegionTwinContainer: VFC = ({ ); }; -LiveRegionTwinContainer.defaultProps = { - 'aria-label': undefined, - 'aria-roledescription': undefined, - className: undefined, - role: undefined, - textElementClassName: undefined -}; - LiveRegionTwinContainer.propTypes = { 'aria-label': PropTypes.string, // PropTypes.oneOf() returns type of `string`, but not `'assertive' | 'polite'`. diff --git a/packages/component/src/providers/RovingTabIndex/RovingTabIndexComposer.tsx b/packages/component/src/providers/RovingTabIndex/RovingTabIndexComposer.tsx index 28c06db473..1dcaef4351 100644 --- a/packages/component/src/providers/RovingTabIndex/RovingTabIndexComposer.tsx +++ b/packages/component/src/providers/RovingTabIndex/RovingTabIndexComposer.tsx @@ -15,7 +15,7 @@ type RovingTabIndexContextProps = PropsWithChildren<{ orientation?: 'horizontal' | 'vertical'; }>; -const RovingTabIndexComposer: FC = ({ children, onEscapeKey, orientation }) => { +const RovingTabIndexComposer: FC = ({ children, onEscapeKey = undefined, orientation = 'horizontal' }) => { const activeItemIndexRef = useRef(0); const itemRefsRef = useRef([]); @@ -181,11 +181,6 @@ const RovingTabIndexComposer: FC = ({ children, onEs return {children}; }; -RovingTabIndexComposer.defaultProps = { - onEscapeKey: undefined, - orientation: 'horizontal' -}; - RovingTabIndexComposer.propTypes = { onEscapeKey: PropTypes.func, orientation: PropTypes.oneOf(['horizontal', 'vertical']) diff --git a/packages/test/page-object/src/globals/testHelpers/activityGrouping/ActivityGroupingSurface.js b/packages/test/page-object/src/globals/testHelpers/activityGrouping/ActivityGroupingSurface.js index 97e0782380..50344c9a46 100644 --- a/packages/test/page-object/src/globals/testHelpers/activityGrouping/ActivityGroupingSurface.js +++ b/packages/test/page-object/src/globals/testHelpers/activityGrouping/ActivityGroupingSurface.js @@ -26,17 +26,17 @@ const URL_QUERY_MAPPING = { function createCustomActivityMiddleware(attachmentLayout) { return () => next => - (arg0, ...args) => - next( - { - ...arg0, - activity: { - ...arg0.activity, - ...(attachmentLayout && arg0.activity.from.role === 'bot' ? { attachmentLayout } : {}) - } - }, - ...args - ); + (arg0, ...args) => + next( + { + ...arg0, + activity: { + ...arg0.activity, + ...(attachmentLayout && arg0.activity.from.role === 'bot' ? { attachmentLayout } : {}) + } + }, + ...args + ); } function generateURL(state) { @@ -106,7 +106,7 @@ function getInitialState(defaultValues = {}) { return initialState; } -const ActivityGroupingSurface = ({ children }) => { +const ActivityGroupingSurface = ({ children = undefined }) => { const [transcriptNames, setTranscriptNames] = useState([]); const initialState = useMemo(() => getInitialState(DEFAULT_STATE), []); @@ -266,10 +266,6 @@ const ActivityGroupingSurface = ({ children }) => { return {children}; }; -ActivityGroupingSurface.defaultProps = { - children: undefined -}; - ActivityGroupingSurface.propTypes = { children: PropTypes.any }; diff --git a/packages/test/page-object/src/globals/testHelpers/activityGrouping/Toggle.js b/packages/test/page-object/src/globals/testHelpers/activityGrouping/Toggle.js index 744f4577fa..5e1337024b 100644 --- a/packages/test/page-object/src/globals/testHelpers/activityGrouping/Toggle.js +++ b/packages/test/page-object/src/globals/testHelpers/activityGrouping/Toggle.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; // Use React from window (UMD) instead of import. const { React: { useCallback, useMemo } = {} } = window; -const Toggle = ({ checked, children, disabled, onChange, type }) => { +const Toggle = ({ checked = false, children = undefined, disabled = false, onChange, type = "checkbox" }) => { const handleChange = useCallback(({ target: { checked } }) => onChange(checked), [onChange]); const style = useMemo(() => ({ userSelect: 'none' }), []); @@ -15,13 +15,6 @@ const Toggle = ({ checked, children, disabled, onChange, type }) => { ); }; -Toggle.defaultProps = { - checked: false, - children: undefined, - disabled: false, - type: 'checkbox' -}; - Toggle.propTypes = { checked: PropTypes.bool, children: PropTypes.any, diff --git a/packages/test/page-object/src/globals/testHelpers/createRenderWebChatWithHook.js b/packages/test/page-object/src/globals/testHelpers/createRenderWebChatWithHook.js index 6bfbe4ce41..6037fb7694 100644 --- a/packages/test/page-object/src/globals/testHelpers/createRenderWebChatWithHook.js +++ b/packages/test/page-object/src/globals/testHelpers/createRenderWebChatWithHook.js @@ -1,14 +1,12 @@ import createDeferred from 'p-defer'; import PropTypes from 'prop-types'; -const RunHook = ({ fn, resolve }) => { +const RunHook = ({ fn = undefined, resolve }) => { resolve(fn?.()); return false; }; -RunHook.defaultProps = { fn: undefined }; - RunHook.propTypes = { fn: PropTypes.func, resolve: PropTypes.func.isRequired diff --git a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/gitHubProfile/Composer.js b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/gitHubProfile/Composer.js index ec2c113166..735b02e0a1 100644 --- a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/gitHubProfile/Composer.js +++ b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/gitHubProfile/Composer.js @@ -9,7 +9,7 @@ import GitHubProfileContext from './Context'; import OAuthComposer from '../oauth/Composer'; // Composer is a React component with a React context -const GitHubProfileComposer = ({ accessToken, children, onSignIn, onSignOut }) => { +const GitHubProfileComposer = ({ accessToken = '', children = undefined, onSignIn = undefined, onSignOut = undefined }) => { const [avatarURL, setAvatarURL] = useState(''); const [name, setName] = useState(''); @@ -35,13 +35,6 @@ const GitHubProfileComposer = ({ accessToken, children, onSignIn, onSignOut }) = return {children}; }; -GitHubProfileComposer.defaultProps = { - accessToken: '', - children: undefined, - onSignIn: undefined, - onSignOut: undefined -}; - GitHubProfileComposer.propTypes = { accessToken: PropTypes.string, children: PropTypes.any, diff --git a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/microsoftGraphProfile/Composer.js b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/microsoftGraphProfile/Composer.js index e2071e65b4..2facf52fbb 100644 --- a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/microsoftGraphProfile/Composer.js +++ b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/microsoftGraphProfile/Composer.js @@ -10,7 +10,7 @@ import MicrosoftGraphProfileContext from './Context'; import OAuthComposer from '../oauth/Composer'; // Composer is a React component with a React context -const MicrosoftGraphProfileComposer = ({ accessToken, children, onSignIn, onSignOut }) => { +const MicrosoftGraphProfileComposer = ({ accessToken = '', children = undefined, onSignIn = undefined, onSignOut = undefined }) => { const [avatarURL, setAvatarURL] = useState(''); const [name, setName] = useState(''); @@ -39,13 +39,6 @@ const MicrosoftGraphProfileComposer = ({ accessToken, children, onSignIn, onSign return {children}; }; -MicrosoftGraphProfileComposer.defaultProps = { - accessToken: '', - children: undefined, - onSignIn: undefined, - onSignOut: undefined -}; - MicrosoftGraphProfileComposer.propTypes = { accessToken: PropTypes.string, children: PropTypes.any, diff --git a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/oauth/Composer.js b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/oauth/Composer.js index 28f895c717..760112f3ed 100644 --- a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/oauth/Composer.js +++ b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/oauth/Composer.js @@ -6,48 +6,48 @@ import openCenter from '../utils/openCenter'; // Composer will prepare a React context object to use by consumer. // The composer and context used here is very generic and will be extended by GitHub and Microsoft Graph-specific composer and context. -const Composer = ({ accessToken, children, oauthAuthorizeURL, onAccessTokenChange = () => {}, onError = () => {} }) => { +const Composer = ({ accessToken = '', children = undefined, oauthAuthorizeURL, onAccessTokenChange = () => { }, onError = () => { } }) => { const context = useMemo( () => ({ onSignIn: accessToken ? undefined : () => { - // When context.onSignIn is called, we will: - // 1. Open a new popup and navigate to the URL stored in "oauthAuthorizeURL" prop. - // 2. OAuth provider will call our OAuth callback page. - // 3. The callback page uses "postMessage" to inform the parent window (this window) about the access token through the "message" event. - const handleMessage = ({ data, origin }) => { - const oauthAuthorizeLocation = new URL(oauthAuthorizeURL, window.location.href); + // When context.onSignIn is called, we will: + // 1. Open a new popup and navigate to the URL stored in "oauthAuthorizeURL" prop. + // 2. OAuth provider will call our OAuth callback page. + // 3. The callback page uses "postMessage" to inform the parent window (this window) about the access token through the "message" event. + const handleMessage = ({ data, origin }) => { + const oauthAuthorizeLocation = new URL(oauthAuthorizeURL, window.location.href); - if (origin !== oauthAuthorizeLocation.origin) { - return; - } - - try { - // The counterpart of URLSearchParams used here can be found in /rest-api/src/routes/{aad|github}/oauth/callback.js. - const params = new URLSearchParams(data); + if (origin !== oauthAuthorizeLocation.origin) { + return; + } - if (params.has('error')) { - const error = params.get('error'); + try { + // The counterpart of URLSearchParams used here can be found in /rest-api/src/routes/{aad|github}/oauth/callback.js. + const params = new URLSearchParams(data); - console.error(error); + if (params.has('error')) { + const error = params.get('error'); - onError(new Error(error)); - } else { - onAccessTokenChange(params.get('access_token')); - } - } catch (err) { - console.warn(err); + console.error(error); - onError(err); - } finally { - window.removeEventListener('message', handleMessage); + onError(new Error(error)); + } else { + onAccessTokenChange(params.get('access_token')); } - }; + } catch (err) { + console.warn(err); + + onError(err); + } finally { + window.removeEventListener('message', handleMessage); + } + }; - window.addEventListener('message', handleMessage); - openCenter(oauthAuthorizeURL, 'oauth', 360, 640); - }, + window.addEventListener('message', handleMessage); + openCenter(oauthAuthorizeURL, 'oauth', 360, 640); + }, // For sign out, we simply remove the token. // Some OAuth providers support an optional logout URL. @@ -60,13 +60,6 @@ const Composer = ({ accessToken, children, oauthAuthorizeURL, onAccessTokenChang return {children}; }; -Composer.defaultProps = { - accessToken: '', - children: undefined, - onAccessTokenChange: undefined, - onError: undefined -}; - Composer.propTypes = { accessToken: PropTypes.string, children: PropTypes.any, diff --git a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/ui/GitHubProfileMenu.js b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/ui/GitHubProfileMenu.js index b83f35ee45..0dd4528f9f 100644 --- a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/ui/GitHubProfileMenu.js +++ b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/ui/GitHubProfileMenu.js @@ -30,11 +30,11 @@ async function fetchSettings() { // The props are passed by GitHubProfileContext and its related composer. const GitHubProfileMenu = ({ - avatarURL, - name, - oauthReviewAccessURL, - onSignIn, // This will become falsy if sign in is not available, e.g. already signed in or misconfiguration - onSignOut // This will become falsy if sign out is not available, e.g. not signed in + avatarURL = '', + name = '', + oauthReviewAccessURL = '', + onSignIn = undefined, // This will become falsy if sign in is not available, e.g. already signed in or misconfiguration + onSignOut = undefined // This will become falsy if sign out is not available, e.g. not signed in }) => { const [expanded, setExpanded] = useState(false); const signedIn = !!onSignOut; @@ -117,16 +117,6 @@ const GitHubProfileMenu = ({ ); }; -GitHubProfileMenu.defaultProps = { - accessToken: '', - avatarURL: '', - name: '', - oauthReviewAccessURL: '', - onSignIn: undefined, - onSignOut: undefined, - setAccessToken: undefined -}; - GitHubProfileMenu.propTypes = { accessToken: PropTypes.string, avatarURL: PropTypes.string, @@ -170,10 +160,6 @@ const ConnectedGitHubProfileMenu = ({ accessToken, onAccessTokenChange }) => { ); }; -ConnectedGitHubProfileMenu.defaultProps = { - onSignedInChange: undefined -}; - ConnectedGitHubProfileMenu.propTypes = { accessToken: PropTypes.string.isRequired, onAccessTokenChange: PropTypes.func.isRequired, diff --git a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/ui/MicrosoftGraphProfileMenu.js b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/ui/MicrosoftGraphProfileMenu.js index f0c0a812f8..497acb93cc 100644 --- a/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/ui/MicrosoftGraphProfileMenu.js +++ b/samples/07.advanced-web-chat-apps/b.sso-for-enterprise/app/src/ui/MicrosoftGraphProfileMenu.js @@ -27,10 +27,10 @@ async function fetchSettings() { // The props are passed by MicrosoftGraphProfileContext and its related composer. const MicrosoftGraphProfileMenu = ({ - avatarURL, - name, - onSignIn, // This will become falsy if sign in is not available, e.g. already signed in or misconfiguration - onSignOut // This will become falsy if sign out is not available, e.g. not signed in + avatarURL = '', + name = '', + onSignIn = undefined, // This will become falsy if sign in is not available, e.g. already signed in or misconfiguration + onSignOut = undefined // This will become falsy if sign out is not available, e.g. not signed in }) => { const [expanded, setExpanded] = useState(false); const signedIn = !!onSignOut; @@ -113,16 +113,6 @@ const MicrosoftGraphProfileMenu = ({ ); }; -MicrosoftGraphProfileMenu.defaultProps = { - accessToken: '', - avatarURL: '', - name: '', - oauthReviewAccessURL: '', - onSignIn: undefined, - onSignOut: undefined, - setAccessToken: undefined -}; - MicrosoftGraphProfileMenu.propTypes = { accessToken: PropTypes.string, avatarURL: PropTypes.string, @@ -162,10 +152,6 @@ const ConnectedMicrosoftGraphProfileMenu = ({ accessToken, onAccessTokenChange } ); }; -ConnectedMicrosoftGraphProfileMenu.defaultProps = { - onSignedInChange: undefined -}; - ConnectedMicrosoftGraphProfileMenu.propTypes = { accessToken: PropTypes.string.isRequired, onAccessTokenChange: PropTypes.func.isRequired, diff --git a/samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/app/src/oauth/Composer.js b/samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/app/src/oauth/Composer.js index 61eb087900..00723bca74 100644 --- a/samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/app/src/oauth/Composer.js +++ b/samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/app/src/oauth/Composer.js @@ -26,7 +26,7 @@ const GRAPH_REQUESTS = { // Composer will prepare a React context object to use by consumer. const Composer = ({ - children, + children = undefined, onError = error => { console.error(error); } @@ -55,21 +55,21 @@ const Composer = ({ const onSignIn = useMemo(() => { return !accessToken && msal ? async () => { - try { - if (!authenticating) { - setAuthenticating(true); - const loginResponse = await msal.loginPopup(GRAPH_REQUESTS.LOGIN); - if (loginResponse) { - const { accessToken } = await acquireToken(); - setAccessToken(accessToken); - } - setAuthenticating(false); + try { + if (!authenticating) { + setAuthenticating(true); + const loginResponse = await msal.loginPopup(GRAPH_REQUESTS.LOGIN); + if (loginResponse) { + const { accessToken } = await acquireToken(); + setAccessToken(accessToken); } - } catch (error) { - onError(error); setAuthenticating(false); } + } catch (error) { + onError(error); + setAuthenticating(false); } + } : undefined; }, [accessToken, acquireToken, authenticating, msal, onError, setAccessToken, setAuthenticating]); @@ -81,9 +81,9 @@ const Composer = ({ return accessToken ? () => { - msal.logout(); - setAccessToken(''); - } + msal.logout(); + setAccessToken(''); + } : undefined; }, [accessToken, setAccessToken, msal]); @@ -146,11 +146,6 @@ const Composer = ({ return {children}; }; -Composer.defaultProps = { - children: undefined, - onError: undefined -}; - Composer.propTypes = { children: PropTypes.any, onError: PropTypes.func