From 2af9dc88e6a94296056f704c77dfd88740935e0c Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Mon, 24 Apr 2023 14:09:50 +0300 Subject: [PATCH] ref|(TS) Convert some native components to TS (#13239) --- package-lock.json | 34 ++++++++++++ package.json | 2 + ...dleware.native.js => middleware.native.ts} | 0 .../components/native/ConfirmDialog.tsx | 4 +- react/features/base/dialog/constants.ts | 2 +- react/features/base/icons/components/Icon.tsx | 2 +- ...gView.js => JitsiKeyboardAvoidingView.tsx} | 28 +++++----- .../{JitsiScreen.js => JitsiScreen.tsx} | 33 ++++++------ ...unctions.native.js => functions.native.ts} | 7 ++- .../modal/components/{styles.js => styles.ts} | 0 ...w.native.js => ParticipantView.native.tsx} | 54 ++++++++++--------- .../components/{styles.js => styles.ts} | 2 - .../react/components/AbstractContainer.ts | 2 +- .../{BaseIndicator.js => BaseIndicator.tsx} | 24 ++++----- .../components/native/{Image.js => Image.tsx} | 12 ++--- .../components/native/{Link.js => Link.tsx} | 24 ++++----- .../native/{Linkify.js => Linkify.tsx} | 20 +++---- .../components/native/{Modal.js => Modal.tsx} | 0 .../native/{TintedView.js => TintedView.tsx} | 18 +++---- .../{headerstyles.js => headerstyles.ts} | 7 ++- ...{indicatorstyles.js => indicatorStyles.ts} | 2 - react/features/base/styles/functions.any.ts | 2 +- .../testing/components/AbstractTestHint.ts | 4 +- .../testing/components/TestConnectionInfo.js | 2 - ...stHint.android.js => TestHint.android.tsx} | 5 +- .../{TestHint.ios.js => TestHint.ios.tsx} | 5 +- ...ative.js => JitsiThemeProvider.native.tsx} | 10 ++-- ...ative.js => AddMeetingUrlButton.native.ts} | 4 +- ...nButton.native.js => JoinButton.native.ts} | 4 +- .../MicrosoftSignInButton.native.ts} | 0 ...s => UpdateCalendarEventDialog.native.tsx} | 20 ++++--- .../ChromeExtensionBanner.native.ts} | 0 .../DeepLinkingDesktopPage.native.ts} | 0 ...ive.js => DeepLinkingMobilePage.native.ts} | 0 ...lePage.native.js => NoMobileApp.native.ts} | 0 .../components/DeviceSelector.native.ts} | 0 .../components/native/DisplayNameLabel.tsx | 9 ++-- ...layNamePrompt.js => DisplayNamePrompt.tsx} | 6 +-- .../native/{styles.js => styles.ts} | 2 - ...tive.js => SharedDocumentButton.native.ts} | 10 ++-- .../{SharedDocument.js => SharedDocument.tsx} | 29 +++++----- .../native/{styles.js => styles.ts} | 3 -- .../feedback/{actions.ts => actions.web.ts} | 4 +- .../components/FeedbackButton.native.ts} | 0 .../components/FeedbackDialog.native.js | 0 ...ton.native.js => FeedbackDialog.native.ts} | 0 .../components/FeedbackDialog.web.tsx | 2 +- .../{functions.ts => functions.web.ts} | 0 ...OldElectronAPPNotificationDescription.tsx} | 16 +----- .../components/native/SettingsView.tsx | 1 + .../components/native/AbstractVideoManager.ts | 38 +++++++------ .../{SharedVideo.js => SharedVideo.tsx} | 35 ++++++------ .../{VideoManager.js => VideoManager.tsx} | 31 +++++++---- ...ideoManager.js => YoutubeVideoManager.tsx} | 22 +++++--- .../native/{styles.js => styles.ts} | 0 ...er.js => JaasUnsupportedDesktopBrowser.ts} | 0 .../{PageSelector.js => PageSelector.tsx} | 0 .../{browserLinks.js => browserLinks.ts} | 2 - tsconfig.native.json | 1 - 59 files changed, 270 insertions(+), 274 deletions(-) rename react/features/base/conference/{middleware.native.js => middleware.native.ts} (100%) rename react/features/base/modal/components/{JitsiKeyboardAvoidingView.js => JitsiKeyboardAvoidingView.tsx} (82%) rename react/features/base/modal/components/{JitsiScreen.js => JitsiScreen.tsx} (79%) rename react/features/base/modal/components/{functions.native.js => functions.native.ts} (82%) rename react/features/base/modal/components/{styles.js => styles.ts} (100%) rename react/features/base/participants/components/{ParticipantView.native.js => ParticipantView.native.tsx} (87%) rename react/features/base/participants/components/{styles.js => styles.ts} (99%) rename react/features/base/react/components/native/{BaseIndicator.js => BaseIndicator.tsx} (70%) rename react/features/base/react/components/native/{Image.js => Image.tsx} (84%) rename react/features/base/react/components/native/{Link.js => Link.tsx} (84%) rename react/features/base/react/components/native/{Linkify.js => Linkify.tsx} (84%) rename react/features/base/react/components/native/{Modal.js => Modal.tsx} (100%) rename react/features/base/react/components/native/{TintedView.js => TintedView.tsx} (81%) rename react/features/base/react/components/native/{headerstyles.js => headerstyles.ts} (89%) rename react/features/base/react/components/native/{indicatorstyles.js => indicatorStyles.ts} (97%) rename react/features/base/testing/components/{TestHint.android.js => TestHint.android.tsx} (92%) rename react/features/base/testing/components/{TestHint.ios.js => TestHint.ios.tsx} (87%) rename react/features/base/ui/components/{JitsiThemeProvider.native.js => JitsiThemeProvider.native.tsx} (75%) rename react/features/calendar-sync/components/{AddMeetingUrlButton.native.js => AddMeetingUrlButton.native.ts} (85%) rename react/features/calendar-sync/components/{JoinButton.native.js => JoinButton.native.ts} (86%) rename react/features/{base/toolbox/components/OverflowMenuItem.native.js => calendar-sync/components/MicrosoftSignInButton.native.ts} (100%) rename react/features/calendar-sync/components/{UpdateCalendarEventDialog.native.js => UpdateCalendarEventDialog.native.tsx} (81%) rename react/features/{calendar-sync/components/MicrosoftSignInButton.native.js => chrome-extension-banner/components/ChromeExtensionBanner.native.ts} (100%) rename react/features/{chrome-extension-banner/components/ChromeExtensionBanner.native.js => deep-linking/components/DeepLinkingDesktopPage.native.ts} (100%) rename react/features/deep-linking/components/{DeepLinkingDesktopPage.native.js => DeepLinkingMobilePage.native.ts} (100%) rename react/features/deep-linking/components/{DeepLinkingMobilePage.native.js => NoMobileApp.native.ts} (100%) rename react/features/{deep-linking/components/NoMobileApp.native.js => device-selection/components/DeviceSelector.native.ts} (100%) rename react/features/display-name/components/native/{DisplayNamePrompt.js => DisplayNamePrompt.tsx} (85%) rename react/features/display-name/components/native/{styles.js => styles.ts} (98%) rename react/features/etherpad/components/{SharedDocumentButton.native.js => SharedDocumentButton.native.ts} (90%) rename react/features/etherpad/components/native/{SharedDocument.js => SharedDocument.tsx} (79%) rename react/features/etherpad/components/native/{styles.js => styles.ts} (98%) rename react/features/feedback/{actions.ts => actions.web.ts} (97%) rename react/features/{device-selection/components/DeviceSelector.native.js => feedback/components/FeedbackButton.native.ts} (100%) delete mode 100644 react/features/feedback/components/FeedbackDialog.native.js rename react/features/feedback/components/{FeedbackButton.native.js => FeedbackDialog.native.ts} (100%) rename react/features/feedback/{functions.ts => functions.web.ts} (100%) rename react/features/old-client-notification/components/{OldElectronAPPNotificationDescription.js => OldElectronAPPNotificationDescription.tsx} (81%) rename react/features/shared-video/components/native/{SharedVideo.js => SharedVideo.tsx} (85%) rename react/features/shared-video/components/native/{VideoManager.js => VideoManager.tsx} (86%) rename react/features/shared-video/components/native/{YoutubeVideoManager.js => YoutubeVideoManager.tsx} (91%) rename react/features/shared-video/components/native/{styles.js => styles.ts} (100%) rename react/features/unsupported-browser/components/{JaasUnsupportedDesktopBrowser.js => JaasUnsupportedDesktopBrowser.ts} (100%) rename react/features/unsupported-browser/components/{PageSelector.js => PageSelector.tsx} (100%) rename react/features/unsupported-browser/components/{browserLinks.js => browserLinks.ts} (98%) diff --git a/package-lock.json b/package-lock.json index fc35377729..311bce4dfa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -130,10 +130,12 @@ "@types/audioworklet": "0.0.29", "@types/js-md5": "0.4.3", "@types/lodash": "4.14.182", + "@types/punycode": "2.1.0", "@types/react": "17.0.14", "@types/react-dom": "17.0.14", "@types/react-linkify": "1.0.1", "@types/react-native": "0.68.9", + "@types/react-native-video": "5.0.14", "@types/react-redux": "7.1.24", "@types/react-window": "1.8.5", "@types/resemblejs": "^4.1.0", @@ -5761,6 +5763,12 @@ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, + "node_modules/@types/punycode": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@types/punycode/-/punycode-2.1.0.tgz", + "integrity": "sha512-PG5aLpW6PJOeV2fHRslP4IOMWn+G+Uq8CfnyJ+PDS8ndCbU+soO+fB3NKCKo0p/Jh2Y4aPaiQZsrOXFdzpcA6g==", + "dev": true + }, "node_modules/@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", @@ -5818,6 +5826,16 @@ "@types/react": "^17" } }, + "node_modules/@types/react-native-video": { + "version": "5.0.14", + "resolved": "https://registry.npmjs.org/@types/react-native-video/-/react-native-video-5.0.14.tgz", + "integrity": "sha512-KdcyY4HY/Q1l6f5qQA337BNVN+GsdZy836j9CXbWHZ008VVNzSlnJypJQPsnUgI0EPBw/uG/lyJk6cg9Jj1syg==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/react-native": "*" + } + }, "node_modules/@types/react-redux": { "version": "7.1.24", "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz", @@ -23792,6 +23810,12 @@ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, + "@types/punycode": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@types/punycode/-/punycode-2.1.0.tgz", + "integrity": "sha512-PG5aLpW6PJOeV2fHRslP4IOMWn+G+Uq8CfnyJ+PDS8ndCbU+soO+fB3NKCKo0p/Jh2Y4aPaiQZsrOXFdzpcA6g==", + "dev": true + }, "@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", @@ -23849,6 +23873,16 @@ "@types/react": "^17" } }, + "@types/react-native-video": { + "version": "5.0.14", + "resolved": "https://registry.npmjs.org/@types/react-native-video/-/react-native-video-5.0.14.tgz", + "integrity": "sha512-KdcyY4HY/Q1l6f5qQA337BNVN+GsdZy836j9CXbWHZ008VVNzSlnJypJQPsnUgI0EPBw/uG/lyJk6cg9Jj1syg==", + "dev": true, + "requires": { + "@types/react": "*", + "@types/react-native": "*" + } + }, "@types/react-redux": { "version": "7.1.24", "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz", diff --git a/package.json b/package.json index 21c3d2675b..df49951aeb 100644 --- a/package.json +++ b/package.json @@ -135,10 +135,12 @@ "@types/audioworklet": "0.0.29", "@types/js-md5": "0.4.3", "@types/lodash": "4.14.182", + "@types/punycode": "2.1.0", "@types/react": "17.0.14", "@types/react-dom": "17.0.14", "@types/react-linkify": "1.0.1", "@types/react-native": "0.68.9", + "@types/react-native-video": "5.0.14", "@types/react-redux": "7.1.24", "@types/react-window": "1.8.5", "@types/resemblejs": "^4.1.0", diff --git a/react/features/base/conference/middleware.native.js b/react/features/base/conference/middleware.native.ts similarity index 100% rename from react/features/base/conference/middleware.native.js rename to react/features/base/conference/middleware.native.ts diff --git a/react/features/base/dialog/components/native/ConfirmDialog.tsx b/react/features/base/dialog/components/native/ConfirmDialog.tsx index f77791a110..523f8afb9c 100644 --- a/react/features/base/dialog/components/native/ConfirmDialog.tsx +++ b/react/features/base/dialog/components/native/ConfirmDialog.tsx @@ -19,7 +19,7 @@ interface IProps extends AbstractProps, WithTranslation { /** * The i18n key of the text label for the cancel button. */ - cancelLabel: string; + cancelLabel?: string; /** * The React {@code Component} children. @@ -29,7 +29,7 @@ interface IProps extends AbstractProps, WithTranslation { /** * The i18n key of the text label for the confirm button. */ - confirmLabel: string; + confirmLabel?: string; /** * Dialog description key for translations. diff --git a/react/features/base/dialog/constants.ts b/react/features/base/dialog/constants.ts index a592e6540d..6ae1ef77ec 100644 --- a/react/features/base/dialog/constants.ts +++ b/react/features/base/dialog/constants.ts @@ -30,7 +30,7 @@ export type DialogProps = { /** * The handler for onCancel event. */ - onCancel: Function; + onCancel?: Function; /** * The handler for the event when submitting the dialog. diff --git a/react/features/base/icons/components/Icon.tsx b/react/features/base/icons/components/Icon.tsx index fc696d1f00..60ad4f3afc 100644 --- a/react/features/base/icons/components/Icon.tsx +++ b/react/features/base/icons/components/Icon.tsx @@ -90,7 +90,7 @@ interface IProps extends IIconProps { /** * Style object to be applied. */ - style?: StyleType; + style?: StyleType | StyleType[]; /** * TabIndex for the Icon. diff --git a/react/features/base/modal/components/JitsiKeyboardAvoidingView.js b/react/features/base/modal/components/JitsiKeyboardAvoidingView.tsx similarity index 82% rename from react/features/base/modal/components/JitsiKeyboardAvoidingView.js rename to react/features/base/modal/components/JitsiKeyboardAvoidingView.tsx index 44d8fd4707..5f78ff9f7d 100644 --- a/react/features/base/modal/components/JitsiKeyboardAvoidingView.js +++ b/react/features/base/modal/components/JitsiKeyboardAvoidingView.tsx @@ -1,5 +1,5 @@ import { useHeaderHeight } from '@react-navigation/elements'; -import React, { ReactElement, useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { Keyboard, KeyboardAvoidingView, @@ -8,44 +8,44 @@ import { } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { StyleType } from '../../styles'; +import { StyleType } from '../../styles/functions.any'; -type Props = { +interface IProps { /** * Adds bottom padding. */ - addBottomPadding?: boolean, + addBottomPadding?: boolean; /** * The children component(s) of the Modal, to be rendered. */ - children: ReactElement, + children: React.ReactNode; /** * Additional style to be appended to the KeyboardAvoidingView content container. */ - contentContainerStyle?: StyleType, + contentContainerStyle?: StyleType; /** * Disable forced keyboard dismiss? */ - disableForcedKeyboardDismiss?: boolean, + disableForcedKeyboardDismiss?: boolean; /** * Is a text input rendered at the bottom of the screen? */ - hasBottomTextInput: boolean, + hasBottomTextInput: boolean; /** * Is the screen rendering a tab navigator? */ - hasTabNavigator: boolean, + hasTabNavigator: boolean; /** * Additional style to be appended to the KeyboardAvoidingView. */ - style?: StyleType + style?: StyleType; } const JitsiKeyboardAvoidingView = ( @@ -57,7 +57,7 @@ const JitsiKeyboardAvoidingView = ( hasTabNavigator, hasBottomTextInput, style - }: Props) => { + }: IProps) => { const headerHeight = useHeaderHeight(); const insets = useSafeAreaInsets(); const [ bottomPadding, setBottomPadding ] = useState(insets.bottom); @@ -77,11 +77,11 @@ const JitsiKeyboardAvoidingView = ( const iosVerticalOffset = headerHeight + noNotchDevicePadding + tabNavigatorPadding; const androidVerticalOffset = hasBottomTextInput - ? headerHeight + StatusBar.currentHeight : headerHeight; + ? headerHeight + Number(StatusBar.currentHeight) : headerHeight; // Tells the view what to do with taps - const shouldSetResponse = useCallback(() => !disableForcedKeyboardDismiss); - const onRelease = useCallback(() => Keyboard.dismiss()); + const shouldSetResponse = useCallback(() => !disableForcedKeyboardDismiss, []); + const onRelease = useCallback(() => Keyboard.dismiss(), []); return ( { +}: IProps) => { const renderContent = () => ( { children } - { footerComponent && footerComponent() } + { footerComponent?.() } ); diff --git a/react/features/base/modal/components/functions.native.js b/react/features/base/modal/components/functions.native.ts similarity index 82% rename from react/features/base/modal/components/functions.native.js rename to react/features/base/modal/components/functions.native.ts index 6f8fc3ec8f..92730f7384 100644 --- a/react/features/base/modal/components/functions.native.js +++ b/react/features/base/modal/components/functions.native.ts @@ -1,5 +1,4 @@ -// @flow - +import { IStateful } from '../../app/types'; import { toState } from '../../redux/functions'; /** @@ -11,7 +10,7 @@ import { toState } from '../../redux/functions'; * features/base/config. * @returns {number}. */ -export function getClientWidth(stateful: Object) { +export function getClientWidth(stateful: IStateful) { const state = toState(stateful)['features/base/responsive-ui']; return state.clientWidth; @@ -26,7 +25,7 @@ export function getClientWidth(stateful: Object) { * features/base/config. * @returns {number}. */ -export function getClientHeight(stateful: Object) { +export function getClientHeight(stateful: IStateful) { const state = toState(stateful)['features/base/responsive-ui']; return state.clientHeight; diff --git a/react/features/base/modal/components/styles.js b/react/features/base/modal/components/styles.ts similarity index 100% rename from react/features/base/modal/components/styles.js rename to react/features/base/modal/components/styles.ts diff --git a/react/features/base/participants/components/ParticipantView.native.js b/react/features/base/participants/components/ParticipantView.native.tsx similarity index 87% rename from react/features/base/participants/components/ParticipantView.native.js rename to react/features/base/participants/components/ParticipantView.native.tsx index b9d5e472b9..e8bd9cf666 100644 --- a/react/features/base/participants/components/ParticipantView.native.js +++ b/react/features/base/participants/components/ParticipantView.native.tsx @@ -1,20 +1,24 @@ import React, { Component } from 'react'; -import { Text, View } from 'react-native'; +import { GestureResponderEvent, Text, TextStyle, View, ViewStyle } from 'react-native'; import { connect } from 'react-redux'; +import { IReduxState } from '../../../app/types'; import { isTrackStreamingStatusActive, isTrackStreamingStatusInactive } from '../../../connection-indicator/functions'; import SharedVideo from '../../../shared-video/components/native/SharedVideo'; +import { IStateful } from '../../app/types'; import Avatar from '../../avatar/components/Avatar'; import { translate } from '../../i18n/functions'; import VideoTrack from '../../media/components/native/VideoTrack'; import { shouldRenderVideoTrack } from '../../media/functions'; import Container from '../../react/components/native/Container'; import { toState } from '../../redux/functions'; +import { StyleType } from '../../styles/functions.any'; import TestHint from '../../testing/components/TestHint'; import { getVideoTrackByParticipant } from '../../tracks/functions'; +import { ITrack } from '../../tracks/types'; import { getParticipantById, getParticipantDisplayName, isSharedVideoParticipant } from '../functions'; import styles from './styles'; @@ -22,69 +26,69 @@ import styles from './styles'; /** * The type of the React {@link Component} props of {@link ParticipantView}. */ -type Props = { +interface IProps { /** * Whether the connection is inactive or not. * * @private */ - _isConnectionInactive: boolean, + _isConnectionInactive: boolean; /** * Whether the participant is a shared video participant. */ - _isSharedVideoParticipant: boolean, + _isSharedVideoParticipant: boolean; /** * The name of the participant which this component represents. * * @private */ - _participantName: string, + _participantName: string; /** * True if the video should be rendered, false otherwise. */ - _renderVideo: boolean, + _renderVideo: boolean; /** * The video Track of the participant with {@link #participantId}. */ - _videoTrack: Object, + _videoTrack?: ITrack; /** * The avatar size. */ - avatarSize: number, + avatarSize: number; /** * Whether video should be disabled for his view. */ - disableVideo: ?boolean, + disableVideo?: boolean; /** * Callback to invoke when the {@code ParticipantView} is clicked/pressed. */ - onPress: Function, + onPress: (e?: GestureResponderEvent) => void; /** * The ID of the participant (to be) depicted by {@link ParticipantView}. * * @public */ - participantId: string, + participantId: string; /** * The style, if any, to apply to {@link ParticipantView} in addition to its * default style. */ - style: Object, + style: StyleType; /** * The function to translate human-readable text. */ - t: Function, + t: Function; /** * The test hint id which can be used to locate the {@code ParticipantView} @@ -92,26 +96,26 @@ type Props = { * {@code participantId} with the following format will be used: * {@code `org.jitsi.meet.Participant#${participantId}`}. */ - testHintId: ?string, + testHintId?: string; /** * Indicates if the connectivity info label should be shown, if appropriate. * It will be shown in case the connection is interrupted. */ - useConnectivityInfoLabel: boolean, + useConnectivityInfoLabel: boolean; /** * The z-order of the {@link Video} of {@link ParticipantView} in the * stacking space of all {@code Video}s. For more details, refer to the * {@code zOrder} property of the {@code Video} class for React Native. */ - zOrder: number, + zOrder: number; /** * Indicates whether zooming (pinch to zoom and/or drag) is enabled. */ - zoomEnabled: boolean -}; + zoomEnabled: boolean; +} /** * Implements a React Component which depicts a specific participant's avatar @@ -119,7 +123,7 @@ type Props = { * * @augments Component */ -class ParticipantView extends Component { +class ParticipantView extends Component { /** * Renders the inactive connection status label. @@ -144,8 +148,8 @@ class ParticipantView extends Component { return ( - + style = { containerStyle as ViewStyle }> + { t('connection.LOW_BANDWIDTH', { displayName }) } @@ -200,7 +204,7 @@ class ParticipantView extends Component { zoomEnabled = { this.props.zoomEnabled } /> } { !renderSharedVideo && !renderVideo - && + && @@ -221,9 +225,9 @@ class ParticipantView extends Component { * @param {Object} ownProps - The React {@code Component} props passed to the * associated (instance of) {@code ParticipantView}. * @private - * @returns {Props} + * @returns {IProps} */ -function _mapStateToProps(state, ownProps) { +function _mapStateToProps(state: IReduxState, ownProps: any) { const { disableVideo, participantId } = ownProps; const participant = getParticipantById(state, participantId); const videoTrack = getVideoTrackByParticipant(state, participant); @@ -245,7 +249,7 @@ function _mapStateToProps(state, ownProps) { * @param {string} id - The ID of the participant. * @returns {boolean} */ -function shouldRenderParticipantVideo(stateful, id) { +function shouldRenderParticipantVideo(stateful: IStateful, id: string) { const state = toState(stateful); const participant = getParticipantById(state, id); diff --git a/react/features/base/participants/components/styles.js b/react/features/base/participants/components/styles.ts similarity index 99% rename from react/features/base/participants/components/styles.js rename to react/features/base/participants/components/styles.ts index 6336a45e06..2d90145c21 100644 --- a/react/features/base/participants/components/styles.js +++ b/react/features/base/participants/components/styles.ts @@ -1,5 +1,3 @@ -// @flow - import { BoxModel } from '../../styles/components/styles/BoxModel'; import { ColorPalette } from '../../styles/components/styles/ColorPalette'; diff --git a/react/features/base/react/components/AbstractContainer.ts b/react/features/base/react/components/AbstractContainer.ts index 815cf80074..e1cf351a0d 100644 --- a/react/features/base/react/components/AbstractContainer.ts +++ b/react/features/base/react/components/AbstractContainer.ts @@ -58,7 +58,7 @@ export interface IProps { * undefined and {@link onClick} is defined, {@code touchFeedback} is * considered defined as {@code true}. */ - touchFeedback?: Function; + touchFeedback?: boolean; /** * Color to display when clicked. diff --git a/react/features/base/react/components/native/BaseIndicator.js b/react/features/base/react/components/native/BaseIndicator.tsx similarity index 70% rename from react/features/base/react/components/native/BaseIndicator.js rename to react/features/base/react/components/native/BaseIndicator.tsx index d0887cb5c4..d498647722 100644 --- a/react/features/base/react/components/native/BaseIndicator.js +++ b/react/features/base/react/components/native/BaseIndicator.tsx @@ -1,15 +1,13 @@ -// @flow - import React, { Component } from 'react'; -import { View } from 'react-native'; +import { View, ViewStyle } from 'react-native'; import Icon from '../../../icons/components/Icon'; -import { type StyleType } from '../../../styles'; +import { StyleType } from '../../../styles/functions.any'; -import styles from './indicatorstyles'; +import styles from './indicatorStyles'; import { BASE_INDICATOR } from './styles'; -type Props = { +interface IProps { /** * Overwritten background color when indicator is highlighted. @@ -19,24 +17,24 @@ type Props = { /** * True if a highlighted background has to be applied. */ - highlight: boolean, + highlight?: boolean; /** * The name of the icon to be used as the indicator. */ - icon: string, + icon: Function; /** * Additional style to be applied to the icon element. */ - iconStyle: StyleType -}; + iconStyle?: StyleType; +} /** * Implements a base indicator to be reused across all native indicators on * the filmstrip. */ -export default class BaseIndicator extends Component { +export default class BaseIndicator extends Component { /** * Implements React's {@link Component#render()}. * @@ -47,12 +45,12 @@ export default class BaseIndicator extends Component { return ( + style = { BASE_INDICATOR as ViewStyle }> ); diff --git a/react/features/base/react/components/native/Image.js b/react/features/base/react/components/native/Image.tsx similarity index 84% rename from react/features/base/react/components/native/Image.js rename to react/features/base/react/components/native/Image.tsx index 410f529e6f..b976a4d614 100644 --- a/react/features/base/react/components/native/Image.js +++ b/react/features/base/react/components/native/Image.tsx @@ -1,30 +1,28 @@ -// @flow - import React, { Component } from 'react'; import { Image } from 'react-native'; /** * The type of the React {@code Component} props of {@link Image}. */ -type Props = { +interface IProps { /** * The ImageSource to be rendered as image. */ - src: Object, + src: Object; /** * The component's external style. */ - style: Object -}; + style: Object; +} /** * A component rendering aN IMAGE. * * @augments Component */ -export default class ImageImpl extends Component { +export default class ImageImpl extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/base/react/components/native/Link.js b/react/features/base/react/components/native/Link.tsx similarity index 84% rename from react/features/base/react/components/native/Link.js rename to react/features/base/react/components/native/Link.tsx index 252b5694b9..12360cc656 100644 --- a/react/features/base/react/components/native/Link.js +++ b/react/features/base/react/components/native/Link.tsx @@ -1,5 +1,3 @@ -/* @flow */ - import React, { Component } from 'react'; import { Linking } from 'react-native'; @@ -8,40 +6,40 @@ import Text from './Text'; /** * The type of the React {@code Component} props of {@link Link}. */ -type Props = { +interface IProps { /** * The children to be displayed within this Link. */ - children: React$Node, + children: React.ReactNode; /** * Notifies that this Link failed to open the URL associated with it. */ - onLinkingOpenURLRejected?: Function, + onLinkingOpenURLRejected?: Function; /** * The CSS style to be applied to this Link for the purposes of display. */ - style?: Object, + style?: Object; /** * The URL to be opened when this Link is clicked/pressed. */ - url: string -}; + url: string; +} /** * Implements a (hyper)link to a URL in the fashion of the HTML anchor element * and its href attribute. */ -export default class Link extends Component { +export default class Link extends Component { /** * Initializes a new Link instance. * * @param {Object} props - Component properties. */ - constructor(props: Props) { + constructor(props: IProps) { super(props); // Bind event handlers so they are only bound once for every instance. @@ -71,14 +69,12 @@ export default class Link extends Component { * @private * @returns {void} */ - _onLinkingOpenURLRejected(reason) { + _onLinkingOpenURLRejected(reason: Error) { const onRejected = this.props.onLinkingOpenURLRejected; - onRejected && onRejected(reason); + onRejected?.(reason); } - _onPress: () => void; - /** * Handles press on this Link. Opens the URL associated with this Link. * diff --git a/react/features/base/react/components/native/Linkify.js b/react/features/base/react/components/native/Linkify.tsx similarity index 84% rename from react/features/base/react/components/native/Linkify.js rename to react/features/base/react/components/native/Linkify.tsx index 95ac3c7f75..1aaa919afb 100644 --- a/react/features/base/react/components/native/Linkify.js +++ b/react/features/base/react/components/native/Linkify.tsx @@ -1,42 +1,40 @@ -// @flow - import punycode from 'punycode'; import React, { Component } from 'react'; import ReactLinkify from 'react-linkify'; import { Text } from 'react-native'; -import { type StyleType } from '../../../styles'; +import { StyleType } from '../../../styles/functions.any'; import Link from './Link'; -type Props = { +interface IProps { /** * The children of the component. */ - children: React$Node, + children: React.ReactNode; /** * The extra styles to be applied to links. */ - linkStyle: StyleType, + linkStyle: StyleType; /** * The extra styles to be applied to text. */ - style?: StyleType -}; + style?: StyleType; +} /** * Implements a react native wrapper for the react-linkify component. */ -export default class Linkify extends Component { +export default class Linkify extends Component { /** * Initiates a new {@code Component}. * * @inheritdoc */ - constructor(props: Props) { + constructor(props: IProps) { super(props); this._componentDecorator = this._componentDecorator.bind(this); @@ -60,8 +58,6 @@ export default class Linkify extends Component { ); } - _componentDecorator: (string, string, number) => React$Node; - /** * Implements a component decorator for react-linkify. * diff --git a/react/features/base/react/components/native/Modal.js b/react/features/base/react/components/native/Modal.tsx similarity index 100% rename from react/features/base/react/components/native/Modal.js rename to react/features/base/react/components/native/Modal.tsx diff --git a/react/features/base/react/components/native/TintedView.js b/react/features/base/react/components/native/TintedView.tsx similarity index 81% rename from react/features/base/react/components/native/TintedView.js rename to react/features/base/react/components/native/TintedView.tsx index 1b837ed8d6..3cfed6997d 100644 --- a/react/features/base/react/components/native/TintedView.js +++ b/react/features/base/react/components/native/TintedView.tsx @@ -1,7 +1,5 @@ -// @flow - import React, { Component } from 'react'; -import { StyleSheet, View } from 'react-native'; +import { StyleSheet, View, ViewStyle } from 'react-native'; import { TINTED_VIEW_DEFAULT } from './styles'; @@ -17,24 +15,24 @@ const BASE_STYLE = { /** * {@code TintedView}'s React {@code Component} prop types. */ -type Props = { +interface IProps { /** * The children components of this component. */ - children?: React$Node, + children?: React.ReactNode; /** * Style to override the base style. */ - style: Object -}; + style?: Object; +} /** * Implements a component aimed at covering another view and tinting it with * the given color and opacity. */ -export default class TintedView extends Component { +export default class TintedView extends Component { /** * Implements React's {@link Component#render()}. * @@ -48,7 +46,7 @@ export default class TintedView extends Component { return ( + style = { BASE_STYLE as ViewStyle }> { ] } /> + style = { BASE_STYLE as ViewStyle }> { children } diff --git a/react/features/base/react/components/native/headerstyles.js b/react/features/base/react/components/native/headerstyles.ts similarity index 89% rename from react/features/base/react/components/native/headerstyles.js rename to react/features/base/react/components/native/headerstyles.ts index 0cf4d8a830..2af73152bd 100644 --- a/react/features/base/react/components/native/headerstyles.js +++ b/react/features/base/react/components/native/headerstyles.ts @@ -1,9 +1,8 @@ -// @flex - import { StyleSheet } from 'react-native'; -import { ColorSchemeRegistry, schemeColor } from '../../../color-scheme'; -import { BoxModel } from '../../../styles'; +import ColorSchemeRegistry from '../../../color-scheme/ColorSchemeRegistry'; +import { schemeColor } from '../../../color-scheme/functions'; +import { BoxModel } from '../../../styles/components/styles/BoxModel'; const HEADER_FONT_SIZE = 18; const HEADER_HEIGHT = 48; diff --git a/react/features/base/react/components/native/indicatorstyles.js b/react/features/base/react/components/native/indicatorStyles.ts similarity index 97% rename from react/features/base/react/components/native/indicatorstyles.js rename to react/features/base/react/components/native/indicatorStyles.ts index 409b64e085..032478a6da 100644 --- a/react/features/base/react/components/native/indicatorstyles.js +++ b/react/features/base/react/components/native/indicatorStyles.ts @@ -1,5 +1,3 @@ -// @flow - import { ColorPalette } from '../../../styles/components/styles/ColorPalette'; export default { diff --git a/react/features/base/styles/functions.any.ts b/react/features/base/styles/functions.any.ts index 05910aab35..06207ab505 100644 --- a/react/features/base/styles/functions.any.ts +++ b/react/features/base/styles/functions.any.ts @@ -46,7 +46,7 @@ const _WELL_KNOWN_NUMBER_PROPERTIES = [ 'height', 'width' ]; * @param {Styletype} st - The complex style type. * @returns {Object} */ -export function styleTypeToObject(st: StyleType) { +export function styleTypeToObject(st: StyleType | StyleType[]) { if (!st) { return {}; } diff --git a/react/features/base/testing/components/AbstractTestHint.ts b/react/features/base/testing/components/AbstractTestHint.ts index 6fffe2096b..4989607e3f 100644 --- a/react/features/base/testing/components/AbstractTestHint.ts +++ b/react/features/base/testing/components/AbstractTestHint.ts @@ -1,3 +1,5 @@ +import { GestureResponderEvent } from 'react-native'; + import { IReduxState } from '../../../app/types'; import { isTestModeEnabled } from '../functions'; @@ -28,7 +30,7 @@ export type TestHintProps = { * The optional "on press" handler which can be used to bind a click handler * to a {@link TestHint}. */ - onPress?: Function; + onPress?: (e?: GestureResponderEvent) => void; /** * The test hint's (text) value which is to be consumed by the tests. diff --git a/react/features/base/testing/components/TestConnectionInfo.js b/react/features/base/testing/components/TestConnectionInfo.js index 6ed438a49c..c2c5af990b 100644 --- a/react/features/base/testing/components/TestConnectionInfo.js +++ b/react/features/base/testing/components/TestConnectionInfo.js @@ -1,5 +1,3 @@ -// @flow - import React, { Component, Fragment } from 'react'; import { connect } from 'react-redux'; diff --git a/react/features/base/testing/components/TestHint.android.js b/react/features/base/testing/components/TestHint.android.tsx similarity index 92% rename from react/features/base/testing/components/TestHint.android.js rename to react/features/base/testing/components/TestHint.android.tsx index 9d2ff8954e..a24f3c7daf 100644 --- a/react/features/base/testing/components/TestHint.android.js +++ b/react/features/base/testing/components/TestHint.android.tsx @@ -1,11 +1,8 @@ -/* @flow */ - import React, { Component } from 'react'; import { Text } from 'react-native'; import { connect } from 'react-redux'; -import type { TestHintProps } from './AbstractTestHint'; -import { _mapStateToProps } from './AbstractTestHint'; +import { TestHintProps, _mapStateToProps } from './AbstractTestHint'; /** * The Android version of TestHint. It will put the identifier, diff --git a/react/features/base/testing/components/TestHint.ios.js b/react/features/base/testing/components/TestHint.ios.tsx similarity index 87% rename from react/features/base/testing/components/TestHint.ios.js rename to react/features/base/testing/components/TestHint.ios.tsx index 2f4301adde..baf9f667bd 100644 --- a/react/features/base/testing/components/TestHint.ios.js +++ b/react/features/base/testing/components/TestHint.ios.tsx @@ -1,11 +1,8 @@ -/* @flow */ - import React, { Component } from 'react'; import { Text } from 'react-native'; import { connect } from 'react-redux'; -import type { TestHintProps } from './AbstractTestHint'; -import { _mapStateToProps } from './AbstractTestHint'; +import { TestHintProps, _mapStateToProps } from './AbstractTestHint'; /** * This is the iOS version of the TestHint. diff --git a/react/features/base/ui/components/JitsiThemeProvider.native.js b/react/features/base/ui/components/JitsiThemeProvider.native.tsx similarity index 75% rename from react/features/base/ui/components/JitsiThemeProvider.native.js rename to react/features/base/ui/components/JitsiThemeProvider.native.tsx index e22550d223..67a3147d42 100644 --- a/react/features/base/ui/components/JitsiThemeProvider.native.js +++ b/react/features/base/ui/components/JitsiThemeProvider.native.tsx @@ -1,16 +1,14 @@ -// @flow - import * as React from 'react'; import { Provider as PaperProvider } from 'react-native-paper'; import BaseTheme from './BaseTheme.native'; -type Props = { +interface IProps { - /** + /** * The children of the component. */ - children: React.ChildrenArray + children: React.ReactNode; } /** @@ -19,6 +17,6 @@ type Props = { * @param {Object} props - The props of the component. * @returns {React.ReactNode} */ -export default function JitsiThemePaperProvider(props: Props) { +export default function JitsiThemePaperProvider(props: IProps) { return { props.children }; } diff --git a/react/features/calendar-sync/components/AddMeetingUrlButton.native.js b/react/features/calendar-sync/components/AddMeetingUrlButton.native.ts similarity index 85% rename from react/features/calendar-sync/components/AddMeetingUrlButton.native.js rename to react/features/calendar-sync/components/AddMeetingUrlButton.native.ts index 51bae070bd..0395fceaa0 100644 --- a/react/features/calendar-sync/components/AddMeetingUrlButton.native.js +++ b/react/features/calendar-sync/components/AddMeetingUrlButton.native.ts @@ -1,5 +1,3 @@ -// @flow - import { Component } from 'react'; /** @@ -7,7 +5,7 @@ import { Component } from 'react'; * * @augments Component */ -class AddMeetingUrlButton extends Component<*> { +class AddMeetingUrlButton extends Component { /** * Implements React's {@link Component#render}. * diff --git a/react/features/calendar-sync/components/JoinButton.native.js b/react/features/calendar-sync/components/JoinButton.native.ts similarity index 86% rename from react/features/calendar-sync/components/JoinButton.native.js rename to react/features/calendar-sync/components/JoinButton.native.ts index 3f8be7e654..05c1d58881 100644 --- a/react/features/calendar-sync/components/JoinButton.native.js +++ b/react/features/calendar-sync/components/JoinButton.native.ts @@ -1,5 +1,3 @@ -// @flow - import { Component } from 'react'; /** @@ -7,7 +5,7 @@ import { Component } from 'react'; * * @augments Component */ -class JoinButton extends Component<*> { +class JoinButton extends Component { /** * Implements React's {@link Component#render}. * diff --git a/react/features/base/toolbox/components/OverflowMenuItem.native.js b/react/features/calendar-sync/components/MicrosoftSignInButton.native.ts similarity index 100% rename from react/features/base/toolbox/components/OverflowMenuItem.native.js rename to react/features/calendar-sync/components/MicrosoftSignInButton.native.ts diff --git a/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js b/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.tsx similarity index 81% rename from react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js rename to react/features/calendar-sync/components/UpdateCalendarEventDialog.native.tsx index a7be5ba176..af66dc3a1e 100644 --- a/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js +++ b/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.tsx @@ -1,35 +1,35 @@ -// @flow - import React, { Component } from 'react'; +import { WithTranslation } from 'react-i18next'; import { connect } from 'react-redux'; +import { IStore } from '../../app/types'; import ConfirmDialog from '../../base/dialog/components/native/ConfirmDialog'; import { translate } from '../../base/i18n/functions'; import { updateCalendarEvent } from '../actions'; -type Props = { +interface IProps extends WithTranslation { /** * The Redux dispatch function. */ - dispatch: Function, + dispatch: IStore['dispatch']; /** * The ID of the event to be updated. */ - eventId: string -}; + eventId: string; +} /** * Component for the add Jitsi link confirm dialog. */ -class UpdateCalendarEventDialog extends Component { +class UpdateCalendarEventDialog extends Component { /** * Initializes a new {@code UpdateCalendarEventDialog} instance. * * @inheritdoc */ - constructor(props: Props) { + constructor(props: IProps) { super(props); this._onSubmit = this._onSubmit.bind(this); @@ -49,8 +49,6 @@ class UpdateCalendarEventDialog extends Component { ); } - _onSubmit: () => boolean; - /** * Callback for the confirm button. * @@ -58,7 +56,7 @@ class UpdateCalendarEventDialog extends Component { * @returns {boolean} - True (to note that the modal should be closed). */ _onSubmit() { - this.props.dispatch(updateCalendarEvent(this.props.eventId, '')); + this.props.dispatch(updateCalendarEvent(this.props.eventId)); return true; } diff --git a/react/features/calendar-sync/components/MicrosoftSignInButton.native.js b/react/features/chrome-extension-banner/components/ChromeExtensionBanner.native.ts similarity index 100% rename from react/features/calendar-sync/components/MicrosoftSignInButton.native.js rename to react/features/chrome-extension-banner/components/ChromeExtensionBanner.native.ts diff --git a/react/features/chrome-extension-banner/components/ChromeExtensionBanner.native.js b/react/features/deep-linking/components/DeepLinkingDesktopPage.native.ts similarity index 100% rename from react/features/chrome-extension-banner/components/ChromeExtensionBanner.native.js rename to react/features/deep-linking/components/DeepLinkingDesktopPage.native.ts diff --git a/react/features/deep-linking/components/DeepLinkingDesktopPage.native.js b/react/features/deep-linking/components/DeepLinkingMobilePage.native.ts similarity index 100% rename from react/features/deep-linking/components/DeepLinkingDesktopPage.native.js rename to react/features/deep-linking/components/DeepLinkingMobilePage.native.ts diff --git a/react/features/deep-linking/components/DeepLinkingMobilePage.native.js b/react/features/deep-linking/components/NoMobileApp.native.ts similarity index 100% rename from react/features/deep-linking/components/DeepLinkingMobilePage.native.js rename to react/features/deep-linking/components/NoMobileApp.native.ts diff --git a/react/features/deep-linking/components/NoMobileApp.native.js b/react/features/device-selection/components/DeviceSelector.native.ts similarity index 100% rename from react/features/deep-linking/components/NoMobileApp.native.js rename to react/features/device-selection/components/DeviceSelector.native.ts diff --git a/react/features/display-name/components/native/DisplayNameLabel.tsx b/react/features/display-name/components/native/DisplayNameLabel.tsx index d0f4648a11..e596278018 100644 --- a/react/features/display-name/components/native/DisplayNameLabel.tsx +++ b/react/features/display-name/components/native/DisplayNameLabel.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Text, View } from 'react-native'; +import { Text, TextStyle, View, ViewStyle } from 'react-native'; import { connect } from 'react-redux'; import { IReduxState } from '../../../app/types'; @@ -9,7 +9,6 @@ import { isScreenShareParticipant } from '../../../base/participants/functions'; -// @ts-ignore import styles from './styles'; interface IProps { @@ -50,10 +49,12 @@ class DisplayNameLabel extends React.Component { } return ( - + + style = { styles.displayNameText as TextStyle }> { this.props._participantName } diff --git a/react/features/display-name/components/native/DisplayNamePrompt.js b/react/features/display-name/components/native/DisplayNamePrompt.tsx similarity index 85% rename from react/features/display-name/components/native/DisplayNamePrompt.js rename to react/features/display-name/components/native/DisplayNamePrompt.tsx index 1b11b1532c..2a1b557866 100644 --- a/react/features/display-name/components/native/DisplayNamePrompt.js +++ b/react/features/display-name/components/native/DisplayNamePrompt.tsx @@ -1,5 +1,3 @@ -// @flow - import React from 'react'; import { connect } from 'react-redux'; @@ -9,7 +7,7 @@ import AbstractDisplayNamePrompt from '../AbstractDisplayNamePrompt'; /** * Implements a component to render a display name prompt. */ -class DisplayNamePrompt extends AbstractDisplayNamePrompt<*> { +class DisplayNamePrompt extends AbstractDisplayNamePrompt { /** * Implements React's {@link Component#render()}. * @@ -23,8 +21,6 @@ class DisplayNamePrompt extends AbstractDisplayNamePrompt<*> { titleKey = 'dialog.displayNameRequired' /> ); } - - _onSetDisplayName: string => boolean; } export default connect()(DisplayNamePrompt); diff --git a/react/features/display-name/components/native/styles.js b/react/features/display-name/components/native/styles.ts similarity index 98% rename from react/features/display-name/components/native/styles.js rename to react/features/display-name/components/native/styles.ts index c467854565..c520095403 100644 --- a/react/features/display-name/components/native/styles.js +++ b/react/features/display-name/components/native/styles.ts @@ -1,5 +1,3 @@ -// @flow - import BaseTheme from '../../../base/ui/components/BaseTheme.native'; export default { diff --git a/react/features/etherpad/components/SharedDocumentButton.native.js b/react/features/etherpad/components/SharedDocumentButton.native.ts similarity index 90% rename from react/features/etherpad/components/SharedDocumentButton.native.js rename to react/features/etherpad/components/SharedDocumentButton.native.ts index c6121bb2dd..2595c26c92 100644 --- a/react/features/etherpad/components/SharedDocumentButton.native.js +++ b/react/features/etherpad/components/SharedDocumentButton.native.ts @@ -1,22 +1,18 @@ -// @flow - import { connect } from 'react-redux'; import { createToolbarEvent } from '../../analytics/AnalyticsEvents'; import { sendAnalytics } from '../../analytics/functions'; +import { IReduxState } from '../../app/types'; import { translate } from '../../base/i18n/functions'; import { IconShareDoc } from '../../base/icons/svg'; import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton'; import { navigate } from '../../mobile/navigation/components/conference/ConferenceNavigationContainerRef'; import { screen } from '../../mobile/navigation/routes'; - -type Props = AbstractButtonProps; - /** * Implements an {@link AbstractButton} to open the chat screen on mobile. */ -class SharedDocumentButton extends AbstractButton { +class SharedDocumentButton extends AbstractButton { accessibilityLabel = 'toolbar.accessibilityLabel.document'; icon = IconShareDoc; label = 'toolbar.documentOpen'; @@ -55,7 +51,7 @@ class SharedDocumentButton extends AbstractButton { * instance. * @returns {Object} */ -function _mapStateToProps(state: Object, ownProps: Object) { +function _mapStateToProps(state: IReduxState, ownProps: any) { const { documentUrl } = state['features/etherpad']; const { visible = Boolean(documentUrl) } = ownProps; diff --git a/react/features/etherpad/components/native/SharedDocument.js b/react/features/etherpad/components/native/SharedDocument.tsx similarity index 79% rename from react/features/etherpad/components/native/SharedDocument.js rename to react/features/etherpad/components/native/SharedDocument.tsx index 601a2cc08d..2e6de89a84 100644 --- a/react/features/etherpad/components/native/SharedDocument.js +++ b/react/features/etherpad/components/native/SharedDocument.tsx @@ -1,8 +1,10 @@ import React, { PureComponent } from 'react'; -import { View } from 'react-native'; +import { WithTranslation } from 'react-i18next'; +import { View, ViewStyle } from 'react-native'; import { WebView } from 'react-native-webview'; import { connect } from 'react-redux'; +import { IReduxState } from '../../../app/types'; import { translate } from '../../../base/i18n/functions'; import JitsiScreen from '../../../base/modal/components/JitsiScreen'; import LoadingIndicator from '../../../base/react/components/native/LoadingIndicator'; @@ -13,34 +15,29 @@ import styles, { INDICATOR_COLOR } from './styles'; /** * The type of the React {@code Component} props of {@code ShareDocument}. */ -type Props = { +interface IProps extends WithTranslation { /** * URL for the shared document. */ - _documentUrl: string, + _documentUrl?: string; /** * Default prop for navigation between screen components(React Navigation). */ - navigation: Object, - - /** - * Function to be used to translate i18n labels. - */ - t: Function -}; + navigation: Object; +} /** * Implements a React native component that renders the shared document window. */ -class SharedDocument extends PureComponent { +class SharedDocument extends PureComponent { /** * Instantiates a new instance. * * @inheritdoc */ - constructor(props: Props) { + constructor(props: IProps) { super(props); this._renderLoading = this._renderLoading.bind(this); @@ -56,12 +53,11 @@ class SharedDocument extends PureComponent { return ( @@ -75,7 +71,7 @@ class SharedDocument extends PureComponent { */ _renderLoading() { return ( - + @@ -88,10 +84,11 @@ class SharedDocument extends PureComponent { * Maps (parts of) the redux state to {@link SharedDocument} React {@code Component} props. * * @param {Object} state - The redux store/state. + * @param {any} _ownProps - Component's props. * @private * @returns {Object} */ -export function _mapStateToProps(state: Object) { +export function _mapStateToProps(state: IReduxState, _ownProps: any) { const documentUrl = getSharedDocumentUrl(state); return { diff --git a/react/features/etherpad/components/native/styles.js b/react/features/etherpad/components/native/styles.ts similarity index 98% rename from react/features/etherpad/components/native/styles.js rename to react/features/etherpad/components/native/styles.ts index ef6f230760..26a602525c 100644 --- a/react/features/etherpad/components/native/styles.js +++ b/react/features/etherpad/components/native/styles.ts @@ -1,8 +1,5 @@ -// @flow - import BaseTheme from '../../../base/ui/components/BaseTheme.native'; - export const INDICATOR_COLOR = BaseTheme.palette.ui07; export default { diff --git a/react/features/feedback/actions.ts b/react/features/feedback/actions.web.ts similarity index 97% rename from react/features/feedback/actions.ts rename to react/features/feedback/actions.web.ts index aa3c0e0bc1..a30bad7338 100644 --- a/react/features/feedback/actions.ts +++ b/react/features/feedback/actions.web.ts @@ -11,8 +11,8 @@ import { SUBMIT_FEEDBACK_ERROR, SUBMIT_FEEDBACK_SUCCESS } from './actionTypes'; -import FeedbackDialog from './components/FeedbackDialog'; -import { sendFeedbackToJaaSRequest } from './functions'; +import FeedbackDialog from './components/FeedbackDialog.web'; +import { sendFeedbackToJaaSRequest } from './functions.web'; /** * Caches the passed in feedback in the redux store. diff --git a/react/features/device-selection/components/DeviceSelector.native.js b/react/features/feedback/components/FeedbackButton.native.ts similarity index 100% rename from react/features/device-selection/components/DeviceSelector.native.js rename to react/features/feedback/components/FeedbackButton.native.ts diff --git a/react/features/feedback/components/FeedbackDialog.native.js b/react/features/feedback/components/FeedbackDialog.native.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/react/features/feedback/components/FeedbackButton.native.js b/react/features/feedback/components/FeedbackDialog.native.ts similarity index 100% rename from react/features/feedback/components/FeedbackButton.native.js rename to react/features/feedback/components/FeedbackDialog.native.ts diff --git a/react/features/feedback/components/FeedbackDialog.web.tsx b/react/features/feedback/components/FeedbackDialog.web.tsx index b2b26f000e..c8c07c6737 100644 --- a/react/features/feedback/components/FeedbackDialog.web.tsx +++ b/react/features/feedback/components/FeedbackDialog.web.tsx @@ -15,7 +15,7 @@ import { IconFavorite, IconFavoriteSolid } from '../../base/icons/svg'; import { withPixelLineHeight } from '../../base/styles/functions.web'; import Dialog from '../../base/ui/components/web/Dialog'; import Input from '../../base/ui/components/web/Input'; -import { cancelFeedback, submitFeedback } from '../actions'; +import { cancelFeedback, submitFeedback } from '../actions.web'; const styles = (theme: Theme) => { return { diff --git a/react/features/feedback/functions.ts b/react/features/feedback/functions.web.ts similarity index 100% rename from react/features/feedback/functions.ts rename to react/features/feedback/functions.web.ts diff --git a/react/features/old-client-notification/components/OldElectronAPPNotificationDescription.js b/react/features/old-client-notification/components/OldElectronAPPNotificationDescription.tsx similarity index 81% rename from react/features/old-client-notification/components/OldElectronAPPNotificationDescription.js rename to react/features/old-client-notification/components/OldElectronAPPNotificationDescription.tsx index e5be06da99..9103d769ea 100644 --- a/react/features/old-client-notification/components/OldElectronAPPNotificationDescription.js +++ b/react/features/old-client-notification/components/OldElectronAPPNotificationDescription.tsx @@ -1,26 +1,14 @@ -// @flow - import React, { Component } from 'react'; +import { WithTranslation } from 'react-i18next'; import { translate } from '../../base/i18n/functions'; -/** - * The type of the React {@code Component} props of {@link OldElectronAPPNotificationDescription}. - */ -type Props = { - - /** - * Invoked to obtain translated strings. - */ - t: Function -}; - /** * A component that renders the description of the notification for old Jitsi Meet Electron clients. * * @augments AbstractApp */ -export class OldElectronAPPNotificationDescription extends Component { +export class OldElectronAPPNotificationDescription extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/settings/components/native/SettingsView.tsx b/react/features/settings/components/native/SettingsView.tsx index e5d764acf7..79b32f7a4c 100644 --- a/react/features/settings/components/native/SettingsView.tsx +++ b/react/features/settings/components/native/SettingsView.tsx @@ -286,6 +286,7 @@ class SettingsView extends Component { return ( diff --git a/react/features/shared-video/components/native/AbstractVideoManager.ts b/react/features/shared-video/components/native/AbstractVideoManager.ts index 19f12cee46..6bc0804779 100644 --- a/react/features/shared-video/components/native/AbstractVideoManager.ts +++ b/react/features/shared-video/components/native/AbstractVideoManager.ts @@ -1,7 +1,7 @@ import throttle from 'lodash/throttle'; import { PureComponent } from 'react'; -import { IReduxState } from '../../../app/types'; +import { IReduxState, IStore } from '../../../app/types'; import { getCurrentConference } from '../../../base/conference/functions'; import { IJitsiConference } from '../../../base/conference/reducer'; import { getLocalParticipant } from '../../../base/participants/functions'; @@ -28,7 +28,7 @@ export interface IProps { /** * The current conference. */ - _conference: IJitsiConference; + _conference?: IJitsiConference; /** * Is the video shared by the local user. @@ -40,12 +40,12 @@ export interface IProps { /** * The shared video owner id. */ - _ownerId: string; + _ownerId?: string; /** * The shared video status. */ - _status: string; + _status?: string; /** * Seek time in seconds. @@ -56,12 +56,12 @@ export interface IProps { /** * The video url. */ - _videoUrl: string; + _videoUrl?: string; /** * The Redux dispatch function. */ - dispatch: Function; + dispatch: IStore['dispatch']; /** * The player's height. @@ -82,7 +82,7 @@ export interface IProps { /** * Manager of shared video. */ -class AbstractVideoManager extends PureComponent { +abstract class AbstractVideoManager extends PureComponent { throttledFireUpdateSharedVideoEvent: Function; /** @@ -198,7 +198,7 @@ class AbstractVideoManager extends PureComponent { } = this.props; dispatch(setSharedVideoStatus({ - videoUrl: _videoUrl, + videoUrl: _videoUrl ?? '', status, time, ownerId: _ownerId @@ -207,35 +207,39 @@ class AbstractVideoManager extends PureComponent { /** * Seeks video to provided time. - * - * @param {number} time */ - seek: (time: number) => void; + abstract seek(time: number): void; /** * Indicates the playback state of the video. */ - getPlaybackStatus: () => string; + abstract getPlaybackStatus(): string; /** * Plays video. */ - play: () => void; + abstract play(): void; /** * Pauses video. + * + * @returns {void} */ - pause: () => void; + abstract pause(): void; /** * Retrieves current time. */ - getTime: () => number; + abstract getTime(): number; /** * Disposes current video player. + * + * @returns {void} */ - dispose: () => void; + dispose() { + // optional abstract method to be implemented by sub-class + } } @@ -256,7 +260,7 @@ export function _mapStateToProps(state: IReduxState) { _isOwner: ownerId === localParticipant?.id, _ownerId: ownerId, _status: status, - _time: time, + _time: Number(time), _videoUrl: videoUrl }; } diff --git a/react/features/shared-video/components/native/SharedVideo.js b/react/features/shared-video/components/native/SharedVideo.tsx similarity index 85% rename from react/features/shared-video/components/native/SharedVideo.js rename to react/features/shared-video/components/native/SharedVideo.tsx index 4c3faa63de..6b3191cc2c 100644 --- a/react/features/shared-video/components/native/SharedVideo.js +++ b/react/features/shared-video/components/native/SharedVideo.tsx @@ -1,9 +1,8 @@ -// @flow - import React, { Component } from 'react'; -import { View } from 'react-native'; +import { View, ViewStyle } from 'react-native'; import { connect } from 'react-redux'; +import { IReduxState, IStore } from '../../../app/types'; import { getLocalParticipant } from '../../../base/participants/functions'; import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui/constants'; import { setToolboxVisible } from '../../../toolbox/actions'; @@ -12,41 +11,41 @@ import VideoManager from './VideoManager'; import YoutubeVideoManager from './YoutubeVideoManager'; import styles from './styles'; -type Props = { +interface IProps { /** * The Redux dispatch function. */ - dispatch: Function, + dispatch: IStore['dispatch']; /** * Is the video shared by the local user. * * @private */ - isOwner: boolean, + isOwner: boolean; /** * True if in landscape mode. * * @private */ - isWideScreen: boolean, + isWideScreen: boolean; /** * The available player width. */ - playerHeight: number, + playerHeight: number; /** * The available player width. */ - playerWidth: number, + playerWidth: number; /** * The shared video url. */ - videoUrl: string, + videoUrl?: string; } /** . @@ -55,13 +54,13 @@ type Props = { * * @augments Component */ -class SharedVideo extends Component { +class SharedVideo extends Component { /** * Initializes a new {@code SharedVideo} instance. * * @param {Object} props - The properties. */ - constructor(props: Props) { + constructor(props: IProps) { super(props); this.setWideScreenMode(props.isWideScreen); @@ -73,7 +72,7 @@ class SharedVideo extends Component { * @inheritdoc * @returns {void} */ - componentDidUpdate(prevProps: Props) { + componentDidUpdate(prevProps: IProps) { const { isWideScreen } = this.props; if (isWideScreen !== prevProps.isWideScreen) { @@ -88,7 +87,7 @@ class SharedVideo extends Component { * @private * @returns {void} */ - setWideScreenMode(isWideScreen) { + setWideScreenMode(isWideScreen: boolean) { this.props.dispatch(setToolboxVisible(!isWideScreen)); } @@ -113,7 +112,7 @@ class SharedVideo extends Component { return ( + style = { styles.videoContainer as ViewStyle } > {videoUrl.match(/http/) ? ( { * * @param {Object} state - The Redux state. * @private - * @returns {Props} + * @returns {IProps} */ -function _mapStateToProps(state) { +function _mapStateToProps(state: IReduxState) { const { ownerId, videoUrl } = state['features/shared-video']; const { aspectRatio, clientHeight, clientWidth } = state['features/base/responsive-ui']; @@ -157,7 +156,7 @@ function _mapStateToProps(state) { } return { - isOwner: ownerId === localParticipant.id, + isOwner: ownerId === localParticipant?.id, isWideScreen, playerHeight, playerWidth, diff --git a/react/features/shared-video/components/native/VideoManager.js b/react/features/shared-video/components/native/VideoManager.tsx similarity index 86% rename from react/features/shared-video/components/native/VideoManager.js rename to react/features/shared-video/components/native/VideoManager.tsx index 9dd67daf70..691872b8fc 100644 --- a/react/features/shared-video/components/native/VideoManager.js +++ b/react/features/shared-video/components/native/VideoManager.tsx @@ -1,21 +1,30 @@ +// @ts-expect-error import Logger from '@jitsi/logger'; -import React from 'react'; +import React, { RefObject } from 'react'; import Video from 'react-native-video'; import { connect } from 'react-redux'; import { PLAYBACK_STATUSES } from '../../constants'; import AbstractVideoManager, { - Props, + IProps, _mapStateToProps } from './AbstractVideoManager'; +// @ts-ignore const logger = Logger.getLogger(__filename); +interface IState { + currentTime: number; + paused: boolean; +} + /** * Manager of shared video. */ -class VideoManager extends AbstractVideoManager { +class VideoManager extends AbstractVideoManager { + playerRef: RefObject