From 486e8e35d9048c5679a274a456cde0d8fc6f73d5 Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Mon, 29 Oct 2018 22:02:23 -0700 Subject: [PATCH] ref: move all prop type declaration to flow For the most part the changes are taking the "static propTypes" declaration off of components and declaring them as Flow types. Sometimes to support flow some method signatures had to be added. There are some exceptions in which more had to be done to tame the beast: - AbstractVideoTrack: put in additional truthy checks for videoTrack. - Video: add truthy checks for the _videoElement ref. - shouldRenderVideoTrack function: Some component could pass null for the videoTrack argument and Flow wanted that called out explicitly. - DisplayName: Add a truthy check for the input ref before acting on it. - NumbersList: Move array checks inline for Flow to comprehend array methods could be called. Add type checks in the Object.entries loop as the value is assumed to be a mixed type by Flow. - AbstractToolbarButton: add additional truthy check for passed in type. --- .../components/AudioLevelIndicator.js | 32 ++- .../components/LoginDialog.native.js | 123 ++++++---- .../base/dialog/components/DialogContainer.js | 48 ++-- .../media/components/AbstractVideoTrack.js | 100 +++++--- .../base/media/components/native/Video.js | 97 ++++---- .../media/components/native/VideoTrack.js | 12 +- .../base/media/components/web/Video.js | 76 +++--- .../base/media/components/web/VideoTrack.js | 48 ++-- react/features/base/media/functions.js | 2 +- .../base/popover/components/Popover.web.js | 116 +++++----- .../react/components/AbstractContainer.js | 1 - .../base/react/components/native/Link.js | 62 ++--- .../base/react/components/web/Container.js | 7 - .../components/web/InlineDialogFailure.js | 36 ++- .../components/web/MultiSelectAutocomplete.js | 184 ++++++++------- .../base/react/components/web/Watermarks.js | 72 ++++-- .../components/AspectRatioAware.js | 23 +- .../components/ConnectionIndicator.js | 208 +++++++++-------- .../components/ConnectionStatsTable.js | 217 +++++++++--------- .../components/DeepLinkingMobilePage.web.js | 56 +++-- .../components/DesktopPicker.js | 89 ++++--- .../components/DesktopPickerPane.js | 69 +++--- .../components/DesktopSourcePreview.js | 83 +++---- .../components/AudioInputPreview.js | 45 ++-- .../components/AudioOutputPreview.js | 46 ++-- .../components/DeviceSelector.web.js | 100 ++++---- .../components/VideoInputPreview.js | 40 ++-- .../components/DisplayName.web.js | 134 ++++++----- .../components/DisplayNamePrompt.web.js | 74 +++--- .../feedback/components/FeedbackDialog.web.js | 132 +++++++---- .../components/web/AudioMutedIndicator.js | 28 +-- .../filmstrip/components/web/BaseIndicator.js | 92 ++++---- .../web/DominantSpeakerIndicator.js | 41 ++-- .../components/web/ModeratorIndicator.js | 28 +-- .../components/web/RaisedHandIndicator.js | 40 ++-- .../components/web/VideoMutedIndicator.js | 28 +-- .../invite/components/AddPeopleDialog.web.js | 158 +++++++------ .../dial-in-info-page/NoRoomError.web.js | 38 +-- .../dial-in-summary/ConferenceID.web.js | 40 ++-- .../dial-in-summary/DialInSummary.web.js | 112 +++++---- .../dial-in-summary/NumbersList.web.js | 87 +++---- .../info-dialog/DialInNumber.web.js | 52 ++--- .../components/info-dialog/InfoDialog.web.js | 199 +++++++++------- .../info-dialog/PasswordForm.web.js | 98 ++++---- react/features/invite/functions.js | 2 +- .../components/KeyboardShortcutsDialog.web.js | 39 ++-- .../components/NetworkActivityIndicator.js | 31 ++- .../components/AbstractPageReloadOverlay.js | 140 +++++------ .../components/AbstractSuspendedOverlay.js | 34 ++- .../AbstractUserMediaPermissionsOverlay.js | 52 ++--- .../components/FilmstripOnlyOverlayFrame.js | 73 +++--- .../overlay/components/OverlayFrame.web.js | 58 +++-- .../overlay/components/ReloadButton.js | 53 ++--- .../components/PresenceLabel.js | 82 +++---- .../LiveStream/StreamKeyPicker.web.js | 85 ++++--- .../RemoteControlAuthorizationDialog.js | 67 +++--- .../components/KickButton.js | 62 ++--- .../components/MuteButton.js | 74 +++--- .../MuteRemoteParticipantDialog.web.js | 57 ++--- .../components/RemoteControlButton.js | 64 +++--- .../components/RemoteVideoMenu.js | 40 ++-- .../components/RemoteVideoMenuButton.js | 72 +++--- .../components/VolumeSlider.js | 64 +++--- .../PasswordRequiredPrompt.native.js | 33 ++- .../components/PasswordRequiredPrompt.web.js | 56 +++-- .../components/RoomLockPrompt.native.js | 34 +-- .../speaker-stats/components/SpeakerStats.js | 58 +++-- .../components/SpeakerStatsItem.js | 58 ++--- .../components/SpeakerStatsLabels.js | 28 +-- .../speaker-stats/components/TimeElapsed.js | 38 +-- .../components/AbstractToolbarButton.js | 98 ++++---- .../components/web/OverflowMenuButton.js | 64 +++--- .../components/web/OverflowMenuProfileItem.js | 57 ++--- .../toolbox/components/web/ToolbarButton.js | 44 ++-- .../components/UnsupportedDesktopBrowser.js | 30 ++- .../components/VideoQualitySlider.web.js | 92 ++++---- .../LocalVideoTrackUnderlay.native.js | 59 +++-- 77 files changed, 2815 insertions(+), 2456 deletions(-) diff --git a/react/features/audio-level-indicator/components/AudioLevelIndicator.js b/react/features/audio-level-indicator/components/AudioLevelIndicator.js index 12ccc7ed4..c26e3a4d5 100644 --- a/react/features/audio-level-indicator/components/AudioLevelIndicator.js +++ b/react/features/audio-level-indicator/components/AudioLevelIndicator.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; /** @@ -13,27 +14,24 @@ const AUDIO_LEVEL_DOTS = 5; */ const CENTER_DOT_INDEX = Math.floor(AUDIO_LEVEL_DOTS / 2); +/** + * The type of the React {@code Component} props of {@link AudioLevelIndicator}. + */ +type Props = { + + /** + * The current audio level to display. The value should be a number between + * 0 and 1. + */ + audioLevel: number +}; + /** * Creates a ReactElement responsible for drawing audio levels. * * @extends {Component} */ -class AudioLevelIndicator extends Component { - /** - * {@code AudioLevelIndicator}'s property types. - * - * @static - */ - static propTypes = { - /** - * The current audio level to display. The value should be a number - * between 0 and 1. - * - * @type {number} - */ - audioLevel: PropTypes.number - }; - +class AudioLevelIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/authentication/components/LoginDialog.native.js b/react/features/authentication/components/LoginDialog.native.js index cf14f815f..1520e070c 100644 --- a/react/features/authentication/components/LoginDialog.native.js +++ b/react/features/authentication/components/LoginDialog.native.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { Text, TextInput, View } from 'react-native'; import { connect as reduxConnect } from 'react-redux'; @@ -11,6 +12,65 @@ import { JitsiConnectionErrors } from '../../base/lib-jitsi-meet'; import { authenticateAndUpgradeRole, cancelLogin } from '../actions'; import styles from './styles'; +/** + * The type of the React {@link Component} props of {@link LoginDialog}. + */ +type Props = { + + /** + * {@link JitsiConference} that needs authentication - will hold a valid + * value in XMPP login + guest access mode. + */ + _conference: Object, + + /** + * The server hosts specified in the global config. + */ + _configHosts: Object, + + /** + * Indicates if the dialog should display "connecting" status message. + */ + _connecting: boolean, + + /** + * The error which occurred during login/authentication. + */ + _error: Object, + + /** + * The progress in the floating range between 0 and 1 of the authenticating + * and upgrading the role of the local participant/user. + */ + _progress: number, + + /** + * Redux store dispatch method. + */ + dispatch: Dispatch<*>, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@link Component} state of {@link LoginDialog}. + */ +type State = { + + /** + * The user entered password for the conference. + */ + password: string, + + /** + * The user entered local participant name. + */ + username: string +}; + /** * Dialog asks user for username and password. * @@ -38,58 +98,14 @@ import styles from './styles'; * See {@link https://github.com/jitsi/jicofo#secure-domain} for a description * of the configuration parameters. */ -class LoginDialog extends Component { - /** - * LoginDialog component's property types. - * - * @static - */ - static propTypes = { - /** - * {@link JitsiConference} that needs authentication - will hold a valid - * value in XMPP login + guest access mode. - */ - _conference: PropTypes.object, - - /** - * - */ - _configHosts: PropTypes.object, - - /** - * Indicates if the dialog should display "connecting" status message. - */ - _connecting: PropTypes.bool, - - /** - * The error which occurred during login/authentication. - */ - _error: PropTypes.object, - - /** - * The progress in the floating range between 0 and 1 of the - * authenticating and upgrading the role of the local participant/user. - */ - _progress: PropTypes.number, - - /** - * Redux store dispatch method. - */ - dispatch: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class LoginDialog extends Component { /** * Initializes a new LoginDialog instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -119,7 +135,7 @@ class LoginDialog extends Component { } = this.props; let messageKey; - let messageOptions; + const messageOptions = {}; if (progress && progress < 1) { messageKey = 'connection.FETCH_SESSION_ID'; @@ -142,7 +158,6 @@ class LoginDialog extends Component { } } else if (name) { messageKey = 'dialog.connectErrorWithMsg'; - messageOptions || (messageOptions = {}); messageOptions.msg = `${name} ${error.message}`; } } @@ -170,7 +185,7 @@ class LoginDialog extends Component { { messageKey - ? t(messageKey, messageOptions || {}) + ? t(messageKey, messageOptions) : connecting ? t('connection.CONNECTING') : '' @@ -181,6 +196,8 @@ class LoginDialog extends Component { ); } + _onUsernameChange: (string) => void; + /** * Called when user edits the username. * @@ -194,6 +211,8 @@ class LoginDialog extends Component { }); } + _onPasswordChange: (string) => void; + /** * Called when user edits the password. * @@ -207,6 +226,8 @@ class LoginDialog extends Component { }); } + _onCancel: () => void; + /** * Notifies this LoginDialog that it has been dismissed by cancel. * @@ -217,6 +238,8 @@ class LoginDialog extends Component { this.props.dispatch(cancelLogin()); } + _onLogin: () => void; + /** * Notifies this LoginDialog that the login button (OK) has been pressed by * the user. diff --git a/react/features/base/dialog/components/DialogContainer.js b/react/features/base/dialog/components/DialogContainer.js index 7648c3a6a..0aecf96b6 100644 --- a/react/features/base/dialog/components/DialogContainer.js +++ b/react/features/base/dialog/components/DialogContainer.js @@ -1,35 +1,35 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; +/** + * The type of the React {@code Component} props of {@link DialogContainer}. + */ +type Props = { + + /** + * The component to render. + */ + _component: Function, + + /** + * The props to pass to the component that will be rendered. + */ + _componentProps: Object, + + /** + * True if the UI is in a compact state where we don't show dialogs. + */ + _reducedUI: boolean +}; + /** * Implements a DialogContainer responsible for showing all dialogs. We will * need a separate container so we can handle multiple dialogs by showing them * simultaneously or queuing them. */ -export class DialogContainer extends Component { - /** - * DialogContainer component's property types. - * - * @static - */ - static propTypes = { - /** - * The component to render. - */ - _component: PropTypes.func, - - /** - * The props to pass to the component that will be rendered. - */ - _componentProps: PropTypes.object, - - /** - * True if the UI is in a compact state where we don't show dialogs. - */ - _reducedUI: PropTypes.bool - }; - +export class DialogContainer extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/base/media/components/AbstractVideoTrack.js b/react/features/base/media/components/AbstractVideoTrack.js index 5a2321965..4b5fda9cd 100644 --- a/react/features/base/media/components/AbstractVideoTrack.js +++ b/react/features/base/media/components/AbstractVideoTrack.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { trackVideoStarted } from '../../tracks'; @@ -6,51 +7,71 @@ import { trackVideoStarted } from '../../tracks'; import { shouldRenderVideoTrack } from '../functions'; import { Video } from './_'; +/** + * The type of the React {@code Component} props of {@link AbstractVideoTrack}. + */ +export type Props = { + + /** + * The Redux dispatch function. + */ + dispatch: Dispatch<*>, + + /** + * Callback to invoke when the {@link Video} of {@code AbstractVideoTrack} + * is clicked/pressed. + */ + onPress?: Function, + + /** + * The Redux representation of the participant's video track. + */ + videoTrack?: Object, + + /** + * Whether or not video should be rendered after knowing video playback has + * started. + */ + waitForVideoStarted?: boolean, + + /** + * The z-order of the Video of AbstractVideoTrack in the stacking space of + * all Videos. For more details, refer to the zOrder property of the Video + * class for React Native. + */ + zOrder?: number, + + /** + * Indicates whether zooming (pinch to zoom and/or drag) is enabled. + */ + zoomEnabled?: boolean +}; + +/** + * The type of the React {@code Component} state of {@link AbstractVideoTrack}. + */ +type State = { + + /** + * The Redux representation of the participant's video track. + */ + videoTrack: Object | null +}; + /** * Implements a React {@link Component} that renders video element for a * specific video track. * * @abstract */ -export default class AbstractVideoTrack extends Component { - /** - * AbstractVideoTrack component's property types. - * - * @static - */ - static propTypes = { - dispatch: PropTypes.func, - - /** - * Callback to invoke when the {@link Video} of - * {@code AbstractVideoTrack} is clicked/pressed. - */ - onPress: PropTypes.func, - - videoTrack: PropTypes.object, - - waitForVideoStarted: PropTypes.bool, - - /** - * The z-order of the Video of AbstractVideoTrack in the stacking space - * of all Videos. For more details, refer to the zOrder property of the - * Video class for React Native. - */ - zOrder: PropTypes.number, - - /** - * Indicates whether zooming (pinch to zoom and/or drag) is enabled. - */ - zoomEnabled: PropTypes.bool - }; - +export default class AbstractVideoTrack extends Component { /** * Initializes a new AbstractVideoTrack instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: P) { super(props); this.state = { @@ -69,7 +90,7 @@ export default class AbstractVideoTrack extends Component { * receive. * @returns {void} */ - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: P) { const oldValue = this.state.videoTrack; const newValue = _falsy2null(nextProps.videoTrack); @@ -88,7 +109,7 @@ export default class AbstractVideoTrack extends Component { const { videoTrack } = this.state; let render; - if (this.props.waitForVideoStarted) { + if (this.props.waitForVideoStarted && videoTrack) { // That's the complex case: we have to wait for onPlaying before we // render videoTrack. The complexity comes from the fact that // onPlaying will come after we render videoTrack. @@ -110,14 +131,15 @@ export default class AbstractVideoTrack extends Component { render = shouldRenderVideoTrack(videoTrack, false); } - const stream - = render ? videoTrack.jitsiTrack.getOriginalStream() : null; + const stream = render && videoTrack + ? videoTrack.jitsiTrack.getOriginalStream() : null; // Actual zoom is currently only enabled if the stream is a desktop // stream. const zoomEnabled = this.props.zoomEnabled && stream + && videoTrack && videoTrack.videoType === 'desktop'; return ( @@ -131,6 +153,8 @@ export default class AbstractVideoTrack extends Component { ); } + _onVideoPlaying: () => void; + /** * Handler for case when video starts to play. * diff --git a/react/features/base/media/components/native/Video.js b/react/features/base/media/components/native/Video.js index 42dc4e83d..dd4967c83 100644 --- a/react/features/base/media/components/native/Video.js +++ b/react/features/base/media/components/native/Video.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { RTCView } from 'react-native-webrtc'; @@ -9,60 +8,58 @@ import { Pressable } from '../../../react'; import styles from './styles'; import VideoTransform from './VideoTransform'; +/** + * The type of the React {@code Component} props of {@link Video}. + */ +type Props = { + mirror: boolean, + + onPlaying: Function, + + /** + * Callback to invoke when the {@code Video} is clicked/pressed. + */ + onPress: Function, + + stream: Object, + + /** + * Similarly to the CSS property z-index, specifies the z-order of this + * Video in the stacking space of all Videos. When Videos overlap, + * zOrder determines which one covers the other. A Video with a larger + * zOrder generally covers a Video with a lower one. + * + * Non-overlapping Videos may safely share a z-order (because one does + * not have to cover the other). + * + * The support for zOrder is platform-dependent and/or + * implementation-specific. Thus, specifying a value for zOrder is to be + * thought of as giving a hint rather than as imposing a requirement. + * For example, video renderers such as Video are commonly implemented + * using OpenGL and OpenGL views may have different numbers of layers in + * their stacking space. Android has three: a layer bellow the window + * (aka default), a layer bellow the window again but above the previous + * layer (aka media overlay), and above the window. Consequently, it is + * advisable to limit the number of utilized layers in the stacking + * space to the minimum sufficient for the desired display. For example, + * a video call application usually needs a maximum of two zOrder + * values: 0 for the remote video(s) which appear in the background, and + * 1 for the local video(s) which appear above the remote video(s). + */ + zOrder: number, + + /** + * Indicates whether zooming (pinch to zoom and/or drag) is enabled. + */ + zoomEnabled: boolean +}; + /** * The React Native {@link Component} which is similar to Web's * {@code HTMLVideoElement} and wraps around react-native-webrtc's * {@link RTCView}. */ -export default class Video extends Component<*> { - /** - * {@code Video} component's property types. - * - * @static - */ - static propTypes = { - mirror: PropTypes.bool, - - onPlaying: PropTypes.func, - - /** - * Callback to invoke when the {@code Video} is clicked/pressed. - */ - onPress: PropTypes.func, - - stream: PropTypes.object, - - /** - * Similarly to the CSS property z-index, specifies the z-order of this - * Video in the stacking space of all Videos. When Videos overlap, - * zOrder determines which one covers the other. A Video with a larger - * zOrder generally covers a Video with a lower one. - * - * Non-overlapping Videos may safely share a z-order (because one does - * not have to cover the other). - * - * The support for zOrder is platform-dependent and/or - * implementation-specific. Thus, specifying a value for zOrder is to be - * thought of as giving a hint rather than as imposing a requirement. - * For example, video renderers such as Video are commonly implemented - * using OpenGL and OpenGL views may have different numbers of layers in - * their stacking space. Android has three: a layer bellow the window - * (aka default), a layer bellow the window again but above the previous - * layer (aka media overlay), and above the window. Consequently, it is - * advisable to limit the number of utilized layers in the stacking - * space to the minimum sufficient for the desired display. For example, - * a video call application usually needs a maximum of two zOrder - * values: 0 for the remote video(s) which appear in the background, and - * 1 for the local video(s) which appear above the remote video(s). - */ - zOrder: PropTypes.number, - - /** - * Indicates whether zooming (pinch to zoom and/or drag) is enabled. - */ - zoomEnabled: PropTypes.bool - }; - +export default class Video extends Component { /** * React Component method that executes once component is mounted. * diff --git a/react/features/base/media/components/native/VideoTrack.js b/react/features/base/media/components/native/VideoTrack.js index ea84c349e..3fc2ee443 100644 --- a/react/features/base/media/components/native/VideoTrack.js +++ b/react/features/base/media/components/native/VideoTrack.js @@ -1,8 +1,11 @@ +/* @flow */ + import React from 'react'; import { View } from 'react-native'; import { connect } from 'react-redux'; import AbstractVideoTrack from '../AbstractVideoTrack'; +import type { Props } from '../AbstractVideoTrack'; import styles from './styles'; /** @@ -10,14 +13,7 @@ import styles from './styles'; * * @extends AbstractVideoTrack */ -class VideoTrack extends AbstractVideoTrack { - /** - * VideoTrack component's property types. - * - * @static - */ - static propTypes = AbstractVideoTrack.propTypes - +class VideoTrack extends AbstractVideoTrack { /** * Renders the video element for the associated video track. * diff --git a/react/features/base/media/components/web/Video.js b/react/features/base/media/components/web/Video.js index e00d3d723..d107023c5 100644 --- a/react/features/base/media/components/web/Video.js +++ b/react/features/base/media/components/web/Video.js @@ -1,12 +1,42 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of {@link Video}. + */ +type Props = { + + /** + * CSS classes to add to the video element. + */ + className: string, + + /** + * The value of the id attribute of the video. Used by the torture tests to + * locate video elements. + */ + id: string, + + /** + * Optional callback to invoke once the video starts playing. + */ + onVideoPlaying: Function, + + /** + * The JitsiLocalTrack to display. + */ + videoTrack: ?Object +}; + /** * Component that renders a video element for a passed in video track. * * @extends Component */ -class Video extends Component { +class Video extends Component { + _videoElement: ?Object; + /** * Default values for {@code Video} component's properties. * @@ -18,41 +48,13 @@ class Video extends Component { id: '' }; - /** - * {@code Video} component's property types. - * - * @static - */ - static propTypes = { - /** - * CSS classes to add to the video element. - */ - className: PropTypes.string, - - /** - * The value of the id attribute of the video. Used by the torture tests - * to locate video elements. - */ - id: PropTypes.string, - - /** - * Optional callback to invoke once the video starts playing. - */ - onVideoPlaying: PropTypes.func, - - /** - * The JitsiLocalTrack to display. - */ - videoTrack: PropTypes.object - }; - /** * Initializes a new {@code Video} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); /** @@ -78,8 +80,10 @@ class Video extends Component { * @returns {void} */ componentDidMount() { - this._videoElement.volume = 0; - this._videoElement.onplaying = this._onVideoPlaying; + if (this._videoElement) { + this._videoElement.volume = 0; + this._videoElement.onplaying = this._onVideoPlaying; + } this._attachTrack(this.props.videoTrack); } @@ -104,7 +108,7 @@ class Video extends Component { * @returns {boolean} - False is always returned to blackbox this component. * from React. */ - shouldComponentUpdate(nextProps) { + shouldComponentUpdate(nextProps: Props) { const currentJitsiTrack = this.props.videoTrack && this.props.videoTrack.jitsiTrack; const nextJitsiTrack = nextProps.videoTrack @@ -167,6 +171,8 @@ class Video extends Component { } } + _onVideoPlaying: () => void; + /** * Invokes the onvideoplaying callback if defined. * @@ -179,6 +185,8 @@ class Video extends Component { } } + _setVideoElement: () => void; + /** * Sets an instance variable for the component's video element so it can be * referenced later for attaching and detaching a JitsiLocalTrack. diff --git a/react/features/base/media/components/web/VideoTrack.js b/react/features/base/media/components/web/VideoTrack.js index e2fd5fd80..e157ae378 100644 --- a/react/features/base/media/components/web/VideoTrack.js +++ b/react/features/base/media/components/web/VideoTrack.js @@ -1,51 +1,49 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React from 'react'; import { connect } from 'react-redux'; import AbstractVideoTrack from '../AbstractVideoTrack'; +import type { Props as AbstractVideoTrackProps } from '../AbstractVideoTrack'; import Video from './Video'; +/** + * The type of the React {@code Component} props of {@link VideoTrack}. + */ +type Props = { + ...AbstractVideoTrackProps, + + /** + * CSS classes to add to the video element. + */ + className: string, + + /** + * The value of the id attribute of the video. Used by the torture tests + * to locate video elements. + */ + id: string +}; + /** * Component that renders a video element for a passed in video track and * notifies the store when the video has started playing. * * @extends AbstractVideoTrack */ -class VideoTrack extends AbstractVideoTrack { +class VideoTrack extends AbstractVideoTrack { /** * Default values for {@code VideoTrack} component's properties. * * @static */ static defaultProps = { - ...AbstractVideoTrack.defaultProps, - className: '', id: '' }; - /** - * {@code VideoTrack} component's property types. - * - * @static - */ - static propTypes = { - ...AbstractVideoTrack.propTypes, - - /** - * CSS classes to add to the video element. - */ - className: PropTypes.string, - - /** - * The value of the id attribute of the video. Used by the torture tests - * to locate video elements. - */ - id: PropTypes.string - }; - /** * Renders the video element. * @@ -62,6 +60,8 @@ class VideoTrack extends AbstractVideoTrack { videoTrack = { this.props.videoTrack } /> ); } + + _onVideoPlaying: () => void; } export default connect()(VideoTrack); diff --git a/react/features/base/media/functions.js b/react/features/base/media/functions.js index 97da25338..e1e684768 100644 --- a/react/features/base/media/functions.js +++ b/react/features/base/media/functions.js @@ -58,7 +58,7 @@ export function isVideoMutedByUser(stateful: Function | Object) { * otherwise, false. */ export function shouldRenderVideoTrack( - videoTrack: { muted: boolean, videoStarted: boolean }, + videoTrack: ?{ muted: boolean, videoStarted: boolean }, waitForVideoStarted: boolean) { return ( videoTrack diff --git a/react/features/base/popover/components/Popover.web.js b/react/features/base/popover/components/Popover.web.js index 0d9458ae4..92f075c3f 100644 --- a/react/features/base/popover/components/Popover.web.js +++ b/react/features/base/popover/components/Popover.web.js @@ -1,5 +1,6 @@ +/* @flow */ + import InlineDialog from '@atlaskit/inline-dialog'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; /** @@ -28,13 +29,68 @@ function _mapPositionToPaddingClass(position = 'left') { return DIALOG_TO_PADDING_POSITION[position.split(' ')[0]]; } +/** + * The type of the React {@code Component} props of {@link Popover}. + */ +type Props = { + + /** + * A child React Element to use as the trigger for showing the dialog. + */ + children: React$Node, + + /** + * Additional CSS classnames to apply to the root of the {@code Popover} + * component. + */ + className: string, + + /** + * The ReactElement to display within the dialog. + */ + content: Object, + + /** + * Whether displaying of the popover should be prevented. + */ + disablePopover: boolean, + + /** + * An id attribute to apply to the root of the {@code Popover} + * component. + */ + id: string, + + /** + * Callback to invoke when the popover has opened. + */ + onPopoverOpen: Function, + + /** + * From which side of the dialog trigger the dialog should display. The + * value will be passed to {@code InlineDialog}. + */ + position: string +}; + +/** + * The type of the React {@code Component} state of {@link Popover}. + */ +type State = { + + /** + * Whether or not the {@code InlineDialog} should be displayed. + */ + showDialog: boolean +}; + /** * Implements a React {@code Component} for showing an {@code InlineDialog} on * mouseenter of the trigger and contents, and hiding the dialog on mouseleave. * * @extends Component */ -class Popover extends Component { +class Popover extends Component { /** * Default values for {@code Popover} component's properties. * @@ -45,66 +101,16 @@ class Popover extends Component { id: '' }; - /** - * {@code Popover} component's property types. - * - * @static - */ - static propTypes = { - /** - * A child React Element to use as the trigger for showing the dialog. - */ - children: PropTypes.object, - - /** - * Additional CSS classnames to apply to the root of the {@code Popover} - * component. - */ - className: PropTypes.string, - - /** - * The ReactElement to display within the dialog. - */ - content: PropTypes.object, - - /** - * Whether displaying of the popover should be prevented. - */ - disablePopover: PropTypes.bool, - - /** - * An id attribute to apply to the root of the {@code Popover} - * component. - */ - id: PropTypes.string, - - /** - * Callback to invoke when the popover has opened. - */ - onPopoverOpen: PropTypes.func, - - /** - * From which side of the dialog trigger the dialog should display. The - * value will be passed to {@code InlineDialog}. - */ - position: PropTypes.string - }; - /** * Initializes a new {@code Popover} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * Whether or not the {@code InlineDialog} should be displayed. - * - * @type {boolean} - */ showDialog: false }; @@ -136,6 +142,8 @@ class Popover extends Component { ); } + _onHideDialog: () => void; + /** * Stops displaying the {@code InlineDialog}. * @@ -146,6 +154,8 @@ class Popover extends Component { this.setState({ showDialog: false }); } + _onShowDialog: () => void; + /** * Displays the {@code InlineDialog} and calls any registered onPopoverOpen * callbacks. diff --git a/react/features/base/react/components/AbstractContainer.js b/react/features/base/react/components/AbstractContainer.js index 7d0bdade7..726a29a02 100644 --- a/react/features/base/react/components/AbstractContainer.js +++ b/react/features/base/react/components/AbstractContainer.js @@ -58,7 +58,6 @@ export type Props = { visible?: ?boolean }; - /** * Abstract (base) class for container of React {@link Component} children with * a style. diff --git a/react/features/base/react/components/native/Link.js b/react/features/base/react/components/native/Link.js index a53fceb3f..2297f8a2b 100644 --- a/react/features/base/react/components/native/Link.js +++ b/react/features/base/react/components/native/Link.js @@ -1,47 +1,47 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { Linking } from 'react-native'; import Text from './Text'; +/** + * The type of the React {@code Component} props of {@link Link}. + */ +type Props = { + + /** + * The children to be displayed within this Link. + */ + children: React$Node, + + /** + * Notifies that this Link failed to open the URL associated with it. + */ + onLinkingOpenURLRejected: Function, + + /** + * The CSS style to be applied to this Link for the purposes of display. + */ + style: Object, + + /** + * The URL to be opened when this Link is clicked/pressed. + */ + 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 { - /** - * {@code Link} component's property types. - * - * @static - */ - static propTypes = { - /** - * The children to be displayed within this Link. - */ - children: PropTypes.node, - - /** - * Notifies that this Link failed to open the URL associated with it. - */ - onLinkingOpenURLRejected: PropTypes.func, - - /** - * The CSS style to be applied to this Link for the purposes of display. - */ - style: PropTypes.object, - - /** - * The URL to be opened when this Link is clicked/pressed. - */ - url: PropTypes.string - }; - +export default class Link extends Component { /** * Initializes a new Link instance. * * @param {Object} props - Component properties. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once for every instance. @@ -77,6 +77,8 @@ export default class Link extends Component { onRejected && onRejected(reason); } + _onPress: () => void; + /** * Handles press on this Link. Opens the URL associated with this Link. * diff --git a/react/features/base/react/components/web/Container.js b/react/features/base/react/components/web/Container.js index 7aa5b14ad..0576736f4 100644 --- a/react/features/base/react/components/web/Container.js +++ b/react/features/base/react/components/web/Container.js @@ -9,13 +9,6 @@ import type { Props } from '../AbstractContainer'; * @extends AbstractContainer */ export default class Container extends AbstractContainer

{ - /** - * {@code Container} component's property types. - * - * @static - */ - static propTypes = AbstractContainer.propTypes; - /** * Implements React's {@link Component#render()}. * diff --git a/react/features/base/react/components/web/InlineDialogFailure.js b/react/features/base/react/components/web/InlineDialogFailure.js index ef8844698..b16cccece 100644 --- a/react/features/base/react/components/web/InlineDialogFailure.js +++ b/react/features/base/react/components/web/InlineDialogFailure.js @@ -1,34 +1,32 @@ /* @flow */ import Button from '@atlaskit/button'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../../i18n'; declare var interfaceConfig: Object; +/** + * The type of the React {@code Component} props of {@link InlineDialogFailure}. + */ +type Props = { + + /** + * Allows to retry the call that previously didn't succeed. + */ + onRetry: Function, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Inline dialog that represents a failure and allows a retry. */ -class InlineDialogFailure extends Component<*> { - /** - * {@code InlineDialogFailure}'s property types. - * - * @static - */ - static propTypes = { - /** - * Allows to retry the call that previously didn't succeed. - */ - onRetry: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class InlineDialogFailure extends Component { /** * Renders the content of this component. * diff --git a/react/features/base/react/components/web/MultiSelectAutocomplete.js b/react/features/base/react/components/web/MultiSelectAutocomplete.js index 254f7b8fc..5556a28b0 100644 --- a/react/features/base/react/components/web/MultiSelectAutocomplete.js +++ b/react/features/base/react/components/web/MultiSelectAutocomplete.js @@ -1,7 +1,8 @@ +// @flow + import { MultiSelectStateless } from '@atlaskit/multi-select'; import AKInlineDialog from '@atlaskit/inline-dialog'; import _debounce from 'lodash/debounce'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import InlineDialogFailure from './InlineDialogFailure'; @@ -9,118 +10,127 @@ import InlineDialogFailure from './InlineDialogFailure'; const logger = require('jitsi-meet-logger').getLogger(__filename); /** - * A MultiSelect that is also auto-completing. + * The type of the React {@code Component} props of + * {@link MultiSelectAutocomplete}. */ -class MultiSelectAutocomplete extends Component { +type Props = { /** - * {@code MultiSelectAutocomplete} component's property types. - * - * @static + * The default value of the selected item. */ - static propTypes = { - /** - * The default value of the selected item. - */ - defaultValue: PropTypes.array, + defaultValue: Array, - /** - * Optional footer to show as a last element in the results. - * Should be of type {content: } - */ - footer: PropTypes.object, + /** + * Optional footer to show as a last element in the results. + * Should be of type {content: } + */ + footer: Object, - /** - * Indicates if the component is disabled. - */ - isDisabled: PropTypes.bool, + /** + * Indicates if the component is disabled. + */ + isDisabled: boolean, - /** - * Text to display while a query is executing. - */ - loadingMessage: PropTypes.string, + /** + * Text to display while a query is executing. + */ + loadingMessage: string, - /** - * The text to show when no matches are found. - */ - noMatchesFound: PropTypes.string, + /** + * The text to show when no matches are found. + */ + noMatchesFound: string, - /** - * The function called immediately before a selection has been actually - * selected. Provides an opportunity to do any formatting. - */ - onItemSelected: PropTypes.func, + /** + * The function called immediately before a selection has been actually + * selected. Provides an opportunity to do any formatting. + */ + onItemSelected: Function, - /** - * The function called when the selection changes. - */ - onSelectionChange: PropTypes.func, + /** + * The function called when the selection changes. + */ + onSelectionChange: Function, - /** - * The placeholder text of the input component. - */ - placeholder: PropTypes.string, + /** + * The placeholder text of the input component. + */ + placeholder: string, - /** - * The service providing the search. - */ - resourceClient: PropTypes.shape({ - makeQuery: PropTypes.func, - parseResults: PropTypes.func - }).isRequired, + /** + * The service providing the search. + */ + resourceClient: { makeQuery: Function, parseResults: Function }, - /** - * Indicates if the component should fit the container. - */ - shouldFitContainer: PropTypes.bool, + /** + * Indicates if the component should fit the container. + */ + shouldFitContainer: boolean, - /** - * Indicates if we should focus. - */ - shouldFocus: PropTypes.bool - }; + /** + * Indicates if we should focus. + */ + shouldFocus: boolean +}; +/** + * The type of the React {@code Component} state of + * {@link MultiSelectAutocomplete}. + */ +type State = { + + /** + * Indicates if the dropdown is open. + */ + isOpen: boolean, + + /** + * The text that filters the query result of the search. + */ + filterValue: string, + + /** + * Indicates if the component is currently loading results. + */ + loading: boolean, + + /** + * Indicates if there was an error. + */ + error: boolean, + + /** + * The list of result items. + */ + items: Array, + + /** + * The list of selected items. + */ + selectedItems: Array +}; + +/** + * A MultiSelect that is also auto-completing. + */ +class MultiSelectAutocomplete extends Component { /** * Initializes a new {@code MultiSelectAutocomplete} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); const defaultValue = this.props.defaultValue || []; this.state = { - /** - * Indicates if the dropdown is open. - */ isOpen: false, - - /** - * The text that filters the query result of the search. - */ filterValue: '', - - /** - * Indicates if the component is currently loading results. - */ loading: false, - - - /** - * Indicates if there was an error. - */ error: false, - - /** - * The list of result items. - */ items: [], - - /** - * The list of selected items. - */ selectedItems: [ ...defaultValue ] }; @@ -137,7 +147,7 @@ class MultiSelectAutocomplete extends Component { * having been selected. * @returns {void} */ - setSelectedItems(selectedItems = []) { + setSelectedItems(selectedItems: Array = []) { this.setState({ selectedItems }); } @@ -177,6 +187,8 @@ class MultiSelectAutocomplete extends Component { ); } + _onFilterChange: (string) => void; + /** * Sets the state and sends a query on filter change. * @@ -198,6 +210,8 @@ class MultiSelectAutocomplete extends Component { } } + _onRetry: () => void; + /** * Retries the query on retry. * @@ -208,6 +222,8 @@ class MultiSelectAutocomplete extends Component { this._sendQuery(this.state.filterValue); } + _onSelectionChange: (Object) => void; + /** * Updates the selected items when a selection event occurs. * @@ -258,6 +274,8 @@ class MultiSelectAutocomplete extends Component { ); } + _sendQuery: (string) => void; + /** * Sends a query to the resourceClient. * diff --git a/react/features/base/react/components/web/Watermarks.js b/react/features/base/react/components/web/Watermarks.js index b2254e187..47e70f131 100644 --- a/react/features/base/react/components/web/Watermarks.js +++ b/react/features/base/react/components/web/Watermarks.js @@ -1,6 +1,5 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -17,32 +16,71 @@ const _RIGHT_WATERMARK_STYLE = { backgroundImage: 'url(images/rightwatermark.png)' }; +/** + * The type of the React {@code Component} props of {@link Watermarks}. + */ +type Props = { + + /** + * Whether or not the current user is logged in through a JWT. + */ + _isGuest: boolean, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link Watermarks}. + */ +type State = { + + /** + * The url to open when clicking the brand watermark. + */ + brandWatermarkLink: string, + + /** + * The url to open when clicking the Jitsi watermark. + */ + jitsiWatermarkLink: string, + + /** + * Whether or not the brand watermark should be displayed. + */ + showBrandWatermark: boolean, + + /** + * Whether or not the Jitsi watermark should be displayed. + */ + showJitsiWatermark: boolean, + + /** + * Whether or not the Jitsi watermark should be displayed for users not + * logged in through a JWT. + */ + showJitsiWatermarkForGuests: boolean, + + /** + * Whether or not the show the "powered by Jitsi.org" link. + */ + showPoweredBy: boolean +}; + /** * A Web Component which renders watermarks such as Jits, brand, powered by, * etc. */ -class Watermarks extends Component<*, *> { - static propTypes = { - _isGuest: PropTypes.bool, - t: PropTypes.func - }; - - state = { - brandWatermarkLink: String, - jitsiWatermarkLink: String, - showBrandWatermark: Boolean, - showJitsiWatermark: Boolean, - showJitsiWatermarkForGuests: Boolean, - showPoweredBy: Boolean - }; - +class Watermarks extends Component { /** * Initializes a new Watermarks instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props: Object) { + constructor(props: Props) { super(props); let showBrandWatermark; diff --git a/react/features/base/responsive-ui/components/AspectRatioAware.js b/react/features/base/responsive-ui/components/AspectRatioAware.js index c9db74e1d..eb6d9a3cd 100644 --- a/react/features/base/responsive-ui/components/AspectRatioAware.js +++ b/react/features/base/responsive-ui/components/AspectRatioAware.js @@ -1,11 +1,17 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from '../constants'; +/** + * The type of the React {@code Component} props of {@link AspectRatioAware}. + */ +type Props = { + aspectRatio: ASPECT_RATIO_NARROW | ASPECT_RATIO_WIDE +}; + /** * Determines whether a specific React {@code Component} decorated into an * {@link AspectRatioAware} has {@link ASPECT_RATIO_NARROW} as the value of its @@ -34,20 +40,7 @@ export function makeAspectRatioAware( /** * Renders {@code WrappedComponent} with the React prop {@code aspectRatio}. */ - class AspectRatioAware extends Component<*> { - /** - * Properties of the aspect ratio aware wrapper. - */ - static propTypes = { - /** - * Either {@link ASPECT_RATIO_NARROW} or {@link ASPECT_RATIO_WIDE}. - */ - aspectRatio: PropTypes.oneOf([ - ASPECT_RATIO_NARROW, - ASPECT_RATIO_WIDE - ]) - } - + class AspectRatioAware extends Component { /** * Implement's React render method to wrap the nested component. * diff --git a/react/features/connection-indicator/components/ConnectionIndicator.js b/react/features/connection-indicator/components/ConnectionIndicator.js index 8f4e02de3..52c6ba91f 100644 --- a/react/features/connection-indicator/components/ConnectionIndicator.js +++ b/react/features/connection-indicator/components/ConnectionIndicator.js @@ -1,6 +1,5 @@ -/* global interfaceConfig */ +/* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../base/i18n'; @@ -10,6 +9,8 @@ import { ConnectionStatsTable } from '../../connection-stats'; import statsEmitter from '../statsEmitter'; +declare var interfaceConfig: Object; + /** * The connection quality percentage that must be reached to be considered of * good quality and can result in the connection indicator being hidden. @@ -25,7 +26,7 @@ const INDICATOR_DISPLAY_THRESHOLD = 30; * * @type {Object[]} */ -const QUALITY_TO_WIDTH = [ +const QUALITY_TO_WIDTH: Array = [ // Full (3 bars) { @@ -54,108 +55,107 @@ const QUALITY_TO_WIDTH = [ // Note: we never show 0 bars as long as there is a connection. ]; +/** + * The type of the React {@code Component} props of {@link ConnectionIndicator}. + */ +type Props = { + + /** + * Whether or not the component should ignore setting a visibility class for + * hiding the component when the connection quality is not strong. + */ + alwaysVisible: boolean, + + /** + * The current condition of the user's connection, matching one of the + * enumerated values in the library. + */ + connectionStatus: string, + + /** + * Whether or not clicking the indicator should display a popover for more + * details. + */ + enableStatsDisplay: boolean, + + /** + * The font-size for the icon. + */ + iconSize: number, + + /** + * Whether or not the displays stats are for local video. + */ + isLocalVideo: boolean, + + /** + * Relative to the icon from where the popover for more connection details + * should display. + */ + statsPopoverPosition: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function, + + /** + * The user ID associated with the displayed connection indication and + * stats. + */ + userID: string +}; + +/** + * The type of the React {@code Component} state of {@link ConnectionIndicator}. + */ +type State = { + + /** + * The timeout for automatically hiding the indicator. + */ + autoHideTimeout: TimeoutID | null, + + /** + * Whether or not a CSS class should be applied to the root for hiding the + * connection indicator. By default the indicator should start out hidden + * because the current connection status is not known at mount. + */ + showIndicator: boolean, + + /** + * Whether or not the popover content should display additional statistics. + */ + showMoreStats: boolean, + + /** + * Cache of the stats received from subscribing to stats emitting. The keys + * should be the name of the stat. With each stat update, updates stats are + * mixed in with cached stats and a new stats object is set in state. + */ + stats: Object +}; + /** * Implements a React {@link Component} which displays the current connection * quality percentage and has a popover to show more detailed connection stats. * * @extends {Component} */ -class ConnectionIndicator extends Component { - /** - * {@code ConnectionIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not the component should ignore setting a visibility class - * for hiding the component when the connection quality is not strong. - */ - alwaysVisible: PropTypes.bool, - - /** - * The current condition of the user's connection, matching one of the - * enumerated values in the library. - * - * @type {JitsiParticipantConnectionStatus} - */ - connectionStatus: PropTypes.string, - - /** - * Whether or not clicking the indicator should display a popover for - * more details. - */ - enableStatsDisplay: PropTypes.bool, - - /** - * The font-size for the icon. - */ - iconSize: PropTypes.number, - - /** - * Whether or not the displays stats are for local video. - */ - isLocalVideo: PropTypes.bool, - - /** - * Relative to the icon from where the popover for more connection - * details should display. - */ - statsPopoverPosition: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func, - - /** - * The user ID associated with the displayed connection indication and - * stats. - */ - userID: PropTypes.string - }; - +class ConnectionIndicator extends Component { /** * Initializes a new {@code ConnectionIndicator} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * The timeout for automatically hiding the indicator. - * - * @type {timeoutID} - */ autoHideTimeout: null, - - /** - * Whether or not a CSS class should be applied to the root for - * hiding the connection indicator. By default the indicator should - * start out hidden because the current connection status is not - * known at mount. - * - * @type {boolean} - */ showIndicator: false, - - /** - * Whether or not the popover content should display additional - * statistics. - * - * @type {boolean} - */ showMoreStats: false, - - /** - * Cache of the stats received from subscribing to stats emitting. - * The keys should be the name of the stat. With each stat update, - * updates stats are mixed in with cached stats and a new stats - * object is set in state. - */ stats: {} }; @@ -201,7 +201,9 @@ class ConnectionIndicator extends Component { statsEmitter.unsubscribeToClientStats( this.props.userID, this._onStatsUpdated); - clearTimeout(this.state.autoHideTimeout); + if (this.state.autoHideTimeout) { + clearTimeout(this.state.autoHideTimeout); + } } /** @@ -257,7 +259,7 @@ class ConnectionIndicator extends Component { return 'status-high'; } - return QUALITY_TO_WIDTH.find(x => percent >= x.percent).colorClass; + return this._getDisplayConfiguration(percent).colorClass; } /** @@ -287,7 +289,7 @@ class ConnectionIndicator extends Component { // established so far. Assume a strong connection to start. tipKey = 'connectionindicator.quality.good'; } else { - const config = QUALITY_TO_WIDTH.find(x => percent >= x.percent); + const config = this._getDisplayConfiguration(percent); tipKey = config.tip; } @@ -297,6 +299,21 @@ class ConnectionIndicator extends Component { return this.props.t(tipKey); } + /** + * Get the icon configuration from QUALITY_TO_WIDTH which has a percentage + * that matches or exceeds the passed in percentage. The implementation + * assumes QUALITY_TO_WIDTH is already sorted by highest to lowest + * percentage. + * + * @param {number} percent - The connection percentage, out of 100, to find + * the closest matching configuration for. + * @private + * @returns {Object} + */ + _getDisplayConfiguration(percent: number): Object { + return QUALITY_TO_WIDTH.find(x => percent >= x.percent) || {}; + } + /** * Returns additional class names to add to the root of the component. The * class names are intended to be used for hiding or showing the indicator. @@ -314,6 +331,8 @@ class ConnectionIndicator extends Component { ? 'show-connection-indicator' : 'hide-connection-indicator'; } + _onStatsUpdated: (Object) => void; + /** * Callback invoked when new connection stats associated with the passed in * user ID are available. Will update the component's display of current @@ -341,6 +360,8 @@ class ConnectionIndicator extends Component { this._updateIndicatorAutoHide(newStats.percent); } + _onToggleShowMore: () => void; + /** * Callback to invoke when the show more link in the popover content is * clicked. Sets the state which will determine if the popover should show @@ -383,7 +404,7 @@ class ConnectionIndicator extends Component { } else { const { percent } = this.state.stats; - iconWidth = QUALITY_TO_WIDTH.find(x => percent >= x.percent).width; + iconWidth = this._getDisplayConfiguration(percent).width; } return [ @@ -449,7 +470,10 @@ class ConnectionIndicator extends Component { */ _updateIndicatorAutoHide(percent) { if (percent < INDICATOR_DISPLAY_THRESHOLD) { - clearTimeout(this.state.autoHideTimeout); + if (this.state.autoHideTimeout) { + clearTimeout(this.state.autoHideTimeout); + } + this.setState({ autoHideTimeout: null, showIndicator: true diff --git a/react/features/connection-stats/components/ConnectionStatsTable.js b/react/features/connection-stats/components/ConnectionStatsTable.js index bcc628614..bd135b76d 100644 --- a/react/features/connection-stats/components/ConnectionStatsTable.js +++ b/react/features/connection-stats/components/ConnectionStatsTable.js @@ -1,119 +1,120 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of + * {@link ConnectionStatsTable}. + */ +type Props = { + + /** + * Statistics related to bandwidth. + * {{ + * download: Number, + * upload: Number + * }} + */ + bandwidth: Object, + + /** + * Statistics related to bitrate. + * {{ + * download: Number, + * upload: Number + * }} + */ + bitrate: Object, + + /** + * The number of bridges (aka media servers) currently used in the + * conference. + */ + bridgeCount: number, + + /** + * A message describing the connection quality. + */ + connectionSummary: string, + + /** + * The end-to-end round-trip-time. + */ + e2eRtt: number, + + /** + * Statistics related to frame rates for each ssrc. + * {{ + * [ ssrc ]: Number + * }} + */ + framerate: Object, + + /** + * Whether or not the statistics are for local video. + */ + isLocalVideo: boolean, + + /** + * Callback to invoke when the show additional stats link is clicked. + */ + onShowMore: Function, + + /** + * Statistics related to packet loss. + * {{ + * download: Number, + * upload: Number + * }} + */ + packetLoss: Object, + + /** + * The region that we think the client is in. + */ + region: string, + + /** + * Statistics related to display resolutions for each ssrc. + * {{ + * [ ssrc ]: { + * height: Number, + * width: Number + * } + * }} + */ + resolution: Object, + + /** + * The region of the media server that we are connected to. + */ + serverRegion: string, + + /** + * Whether or not additional stats about bandwidth and transport should be + * displayed. Will not display even if true for remote participants. + */ + shouldShowMore: boolean, + + /** + * Invoked to obtain translated strings. + */ + t: Function, + + /** + * Statistics related to transports. + */ + transport: Array +}; + /** * React {@code Component} for displaying connection statistics. * * @extends Component */ -class ConnectionStatsTable extends Component { - /** - * {@code ConnectionStatsTable} component's property types. - * - * @static - */ - static propTypes = { - /** - * Statistics related to bandwidth. - * {{ - * download: Number, - * upload: Number - * }} - */ - bandwidth: PropTypes.object, - - /** - * Statistics related to bitrate. - * {{ - * download: Number, - * upload: Number - * }} - */ - bitrate: PropTypes.object, - - /** - * The number of bridges (aka media servers) currently used in the - * conference. - */ - bridgeCount: PropTypes.number, - - /** - * A message describing the connection quality. - */ - connectionSummary: PropTypes.string, - - /** - * The end-to-end round-trip-time. - */ - e2eRtt: PropTypes.number, - - /** - * Statistics related to frame rates for each ssrc. - * {{ - * [ ssrc ]: Number - * }} - */ - framerate: PropTypes.object, - - /** - * Whether or not the statistics are for local video. - */ - isLocalVideo: PropTypes.bool, - - /** - * Callback to invoke when the show additional stats link is clicked. - */ - onShowMore: PropTypes.func, - - /** - * Statistics related to packet loss. - * {{ - * download: Number, - * upload: Number - * }} - */ - packetLoss: PropTypes.object, - - /** - * The region that we think the client is in. - */ - region: PropTypes.string, - - /** - * Statistics related to display resolutions for each ssrc. - * {{ - * [ ssrc ]: { - * height: Number, - * width: Number - * } - * }} - */ - resolution: PropTypes.object, - - /** - * The region of the media server that we are connected to. - */ - serverRegion: PropTypes.string, - - /** - * Whether or not additional stats about bandwidth and transport should - * be displayed. Will not display even if true for remote participants. - */ - shouldShowMore: PropTypes.bool, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func, - - /** - * Statistics related to transports. - */ - transport: PropTypes.array - }; - +class ConnectionStatsTable extends Component { /** * Implements React's {@link Component#render()}. * @@ -574,7 +575,7 @@ class ConnectionStatsTable extends Component { * @private * @returns {ReactElement} */ - _renderTransportTableRow(config) { + _renderTransportTableRow(config: Object) { const { additionalData, data, key, label } = config; return ( diff --git a/react/features/deep-linking/components/DeepLinkingMobilePage.web.js b/react/features/deep-linking/components/DeepLinkingMobilePage.web.js index 00f4e6977..230c0484a 100644 --- a/react/features/deep-linking/components/DeepLinkingMobilePage.web.js +++ b/react/features/deep-linking/components/DeepLinkingMobilePage.web.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -34,32 +33,43 @@ const _URLS = { ios: interfaceConfig.MOBILE_DOWNLOAD_LINK_IOS }; +/** + * The type of the React {@code Component} props of + * {@link DeepLinkingMobilePage}. + */ +type Props = { + + /** + * The name of the conference attempting to being joined. + */ + _room: string, + + /** + * The function to translate human-readable text. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of + * {@link DeepLinkingMobilePage}. + */ +type State = { + + /** + * The URL to link to on the button for opening the mobile app. + */ + joinURL: string +}; + /** * React component representing mobile browser page. * * @class DeepLinkingMobilePage */ -class DeepLinkingMobilePage extends Component<*, *> { - state: Object; - - /** - * DeepLinkingMobilePage component's property types. - * - * @static - */ - static propTypes = { - /** - * The name of the conference attempting to being joined. - */ - _room: PropTypes.string, - - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func +class DeepLinkingMobilePage extends Component { + state = { + joinURL: '' }; /** @@ -68,7 +78,7 @@ class DeepLinkingMobilePage extends Component<*, *> { * @param {Object} props - The read-only React {@code Component} props with * which the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. diff --git a/react/features/desktop-picker/components/DesktopPicker.js b/react/features/desktop-picker/components/DesktopPicker.js index 994ea59f0..bbb6e2225 100644 --- a/react/features/desktop-picker/components/DesktopPicker.js +++ b/react/features/desktop-picker/components/DesktopPicker.js @@ -1,7 +1,6 @@ // @flow import Tabs from '@atlaskit/tabs'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -42,41 +41,65 @@ const TAB_LABELS = { const VALID_TYPES = Object.keys(TAB_LABELS); +/** + * The type of the React {@code Component} props of {@link DesktopPicker}. + */ +type Props = { + + /** + * An array with desktop sharing sources to be displayed. + */ + desktopSharingSources: Array, + + /** + * Used to request DesktopCapturerSources. + */ + dispatch: Dispatch<*>, + + /** + * The callback to be invoked when the component is closed or when a + * DesktopCapturerSource has been chosen. + */ + onSourceChoose: Function, + + /** + * Used to obtain translations. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link DesktopPicker}. + */ +type State = { + + /** + * The currently higlighted DesktopCapturerSource. + */ + selectedSource: Object, + + /** + * The desktop source type currently being displayed. + */ + selectedTab: number, + + /** + * An object containing all the DesktopCapturerSources. + */ + sources: Object, + + /** + * The desktop source types to fetch previews for. + */ + types: Array +}; + /** * React component for DesktopPicker. * * @extends Component */ -class DesktopPicker extends Component<*, *> { - /** - * DesktopPicker component's property types. - * - * @static - */ - static propTypes = { - - /** - * An array with desktop sharing sources to be displayed. - */ - desktopSharingSources: PropTypes.arrayOf(PropTypes.string), - - /** - * Used to request DesktopCapturerSources. - */ - dispatch: PropTypes.func, - - /** - * The callback to be invoked when the component is closed or when - * a DesktopCapturerSource has been chosen. - */ - onSourceChoose: PropTypes.func, - - /** - * Used to obtain translations. - */ - t: PropTypes.func - }; - +class DesktopPicker extends Component { _poller = null; state = { @@ -99,7 +122,7 @@ class DesktopPicker extends Component<*, *> { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -132,7 +155,7 @@ class DesktopPicker extends Component<*, *> { * instance will receive. * @returns {void} */ - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: Props) { const { desktopSharingSources } = nextProps; /** diff --git a/react/features/desktop-picker/components/DesktopPickerPane.js b/react/features/desktop-picker/components/DesktopPickerPane.js index 89d3a7829..1efd50257 100644 --- a/react/features/desktop-picker/components/DesktopPickerPane.js +++ b/react/features/desktop-picker/components/DesktopPickerPane.js @@ -1,48 +1,47 @@ +/* @flow */ + import Spinner from '@atlaskit/spinner'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import DesktopSourcePreview from './DesktopSourcePreview'; +/** + * The type of the React {@code Component} props of {@link DesktopPickerPane}. + */ +type Props = { + + /** + * The handler to be invoked when a DesktopSourcePreview is clicked. + */ + onClick: Function, + + /** + * The handler to be invoked when a DesktopSourcePreview is double clicked. + */ + onDoubleClick: Function, + + /** + * The id of the DesktopCapturerSource that is currently selected. + */ + selectedSourceId: string, + + /** + * An array of DesktopCapturerSources. + */ + sources: Array, + + /** + * The source type of the DesktopCapturerSources to display. + */ + type: string +}; + /** * React component for showing a grid of DesktopSourcePreviews. * * @extends Component */ -class DesktopPickerPane extends Component { - /** - * DesktopPickerPane component's property types. - * - * @static - */ - static propTypes = { - /** - * The handler to be invoked when a DesktopSourcePreview is clicked. - */ - onClick: PropTypes.func, - - /** - * The handler to be invoked when a DesktopSourcePreview is double - * clicked. - */ - onDoubleClick: PropTypes.func, - - /** - * The id of the DesktopCapturerSource that is currently selected. - */ - selectedSourceId: PropTypes.string, - - /** - * An array of DesktopCapturerSources. - */ - sources: PropTypes.array, - - /** - * The source type of the DesktopCapturerSources to display. - */ - type: PropTypes.string - }; - +class DesktopPickerPane extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/desktop-picker/components/DesktopSourcePreview.js b/react/features/desktop-picker/components/DesktopSourcePreview.js index 63449390e..cfc3890f8 100644 --- a/react/features/desktop-picker/components/DesktopSourcePreview.js +++ b/react/features/desktop-picker/components/DesktopSourcePreview.js @@ -1,55 +1,56 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link DesktopSourcePreview}. + */ +type Props = { + + /** + * The callback to invoke when the component is clicked. The id of the + * clicked on DesktopCapturerSource will be passed in. + */ + onClick: Function, + + /** + * The callback to invoke when the component is double clicked. The id of + * the DesktopCapturerSource will be passed in. + */ + onDoubleClick: Function, + + /** + * The indicator which determines whether this DesktopSourcePreview is + * selected. If true, the 'is-selected' CSS class will be added to the root + * of Component. + */ + selected: boolean, + + /** + * The DesktopCapturerSource to display. + */ + source: Object, + + /** + * The source type of the DesktopCapturerSources to display. + */ + type: string +}; + /** * React component for displaying a preview of a DesktopCapturerSource. * * @extends Component */ -class DesktopSourcePreview extends Component { - /** - * DesktopSourcePreview component's property types. - * - * @static - */ - static propTypes = { - /** - * The callback to invoke when the component is clicked. The id of - * the DesktopCapturerSource will be passed in. - */ - onClick: PropTypes.func, - - /** - * The callback to invoke when the component is double clicked. The id - * of the DesktopCapturerSource will be passed in. - */ - onDoubleClick: PropTypes.func, - - /** - * The indicator which determines whether this DesktopSourcePreview is - * selected. If true, the 'is-selected' CSS class will be added to the - * Component. - */ - selected: PropTypes.bool, - - /** - * The DesktopCapturerSource to display. - */ - source: PropTypes.object, - - /** - * The source type of the DesktopCapturerSources to display. - */ - type: PropTypes.string - }; - +class DesktopSourcePreview extends Component { /** * Initializes a new DesktopSourcePreview instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this._onClick = this._onClick.bind(this); @@ -83,6 +84,8 @@ class DesktopSourcePreview extends Component { ); } + _onClick: () => void; + /** * Invokes the passed in onClick callback. * @@ -94,6 +97,8 @@ class DesktopSourcePreview extends Component { this.props.onClick(source.id, type); } + _onDoubleClick: () => void; + /** * Invokes the passed in onDoubleClick callback. * diff --git a/react/features/device-selection/components/AudioInputPreview.js b/react/features/device-selection/components/AudioInputPreview.js index 132225c0e..987d38995 100644 --- a/react/features/device-selection/components/AudioInputPreview.js +++ b/react/features/device-selection/components/AudioInputPreview.js @@ -1,31 +1,42 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { JitsiTrackEvents } from '../../base/lib-jitsi-meet'; +/** + * The type of the React {@code Component} props of {@link AudioInputPreview}. + */ +type Props = { + + /** + * The JitsiLocalTrack to show an audio level meter for. + */ + track: Object +}; + +/** + * The type of the React {@code Component} props of {@link AudioInputPreview}. + */ +type State = { + + /** + * The current audio input level being received, from 0 to 1. + */ + audioLevel: number +}; + /** * React component for displaying a audio level meter for a JitsiLocalTrack. */ -class AudioInputPreview extends Component { - /** - * AudioInputPreview component's property types. - * - * @static - */ - static propTypes = { - /* - * The JitsiLocalTrack to show an audio level meter for. - */ - track: PropTypes.object - }; - +class AudioInputPreview extends Component { /** * Initializes a new AudioInputPreview instance. * * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -52,7 +63,7 @@ class AudioInputPreview extends Component { * @inheritdoc * @returns {void} */ - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: Props) { if (nextProps.track !== this.props.track) { this._listenForAudioUpdates(nextProps.track); this._updateAudioLevel(0); @@ -117,6 +128,8 @@ class AudioInputPreview extends Component { this._updateAudioLevel); } + _updateAudioLevel: (number) => void; + /** * Updates the internal state of the last know audio level. The level should * be between 0 and 1, as the level will be used as a percentage out of 1. diff --git a/react/features/device-selection/components/AudioOutputPreview.js b/react/features/device-selection/components/AudioOutputPreview.js index 469d2dc27..b744477c2 100644 --- a/react/features/device-selection/components/AudioOutputPreview.js +++ b/react/features/device-selection/components/AudioOutputPreview.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../base/i18n'; @@ -6,28 +7,29 @@ import { Audio } from '../../base/media'; const TEST_SOUND_PATH = 'sounds/ring.wav'; +/** + * The type of the React {@code Component} props of {@link AudioOutputPreview}. + */ +type Props = { + + /** + * The device id of the audio output device to use. + */ + deviceId: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * React component for playing a test sound through a specified audio device. * * @extends Component */ -class AudioOutputPreview extends Component { - /** - * AudioOutputPreview component's property types. - * - * @static - */ - static propTypes = { - /** - * The device id of the audio output device to use. - */ - deviceId: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; +class AudioOutputPreview extends Component { + _audioElement: ?Object; /** * Initializes a new AudioOutputPreview instance. @@ -35,7 +37,7 @@ class AudioOutputPreview extends Component { * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this._audioElement = null; @@ -85,6 +87,8 @@ class AudioOutputPreview extends Component { ); } + _onClick: () => void; + /** * Plays a test sound. * @@ -96,6 +100,8 @@ class AudioOutputPreview extends Component { && this._audioElement.play(); } + _setAudioElement: (Object) => void; + /** * Sets the instance variable for the component's audio element so it can be * accessed directly. @@ -104,7 +110,7 @@ class AudioOutputPreview extends Component { * @private * @returns {void} */ - _setAudioElement(element) { + _setAudioElement(element: Object) { this._audioElement = element; } diff --git a/react/features/device-selection/components/DeviceSelector.web.js b/react/features/device-selection/components/DeviceSelector.web.js index 613f6952b..68db750a3 100644 --- a/react/features/device-selection/components/DeviceSelector.web.js +++ b/react/features/device-selection/components/DeviceSelector.web.js @@ -1,64 +1,64 @@ +/* @flow */ + import AKDropdownMenu from '@atlaskit/dropdown-menu'; import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link DeviceSelector}. + */ +type Props = { + + /** + * MediaDeviceInfos used for display in the select element. + */ + devices: Array, + + /** + * If false, will return a selector with no selection options. + */ + hasPermission: boolean, + + /** + * CSS class for the icon to the left of the dropdown trigger. + */ + icon: string, + + /** + * If true, will render the selector disabled with a default selection. + */ + isDisabled: boolean, + + /** + * The translation key to display as a menu label. + */ + label: string, + + /** + * The callback to invoke when a selection is made. + */ + onSelect: Function, + + /** + * The default device to display as selected. + */ + selectedDeviceId: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * React component for selecting a device from a select element. Wraps * AKDropdownMenu with device selection specific logic. * * @extends Component */ -class DeviceSelector extends Component { - /** - * DeviceSelector component's property types. - * - * @static - */ - static propTypes = { - /** - * MediaDeviceInfos used for display in the select element. - */ - devices: PropTypes.array, - - /** - * If false, will return a selector with no selection options. - */ - hasPermission: PropTypes.bool, - - /** - * CSS class for the icon to the left of the dropdown trigger. - */ - icon: PropTypes.string, - - /** - * If true, will render the selector disabled with a default selection. - */ - isDisabled: PropTypes.bool, - - /** - * The translation key to display as a menu label. - */ - label: PropTypes.string, - - /** - * The callback to invoke when a selection is made. - */ - onSelect: PropTypes.func, - - /** - * The default device to display as selected. - */ - selectedDeviceId: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class DeviceSelector extends Component { /** * Initializes a new DeviceSelector instance. * @@ -178,6 +178,8 @@ class DeviceSelector extends Component { ); } + _onSelect: (Object) => void; + /** * Invokes the passed in callback to notify of selection changes. * diff --git a/react/features/device-selection/components/VideoInputPreview.js b/react/features/device-selection/components/VideoInputPreview.js index 4a0bc43d4..984758af1 100644 --- a/react/features/device-selection/components/VideoInputPreview.js +++ b/react/features/device-selection/components/VideoInputPreview.js @@ -1,35 +1,35 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { Video } from '../../base/media'; const VIDEO_ERROR_CLASS = 'video-preview-has-error'; +/** + * The type of the React {@code Component} props of {@link VideoInputPreview}. + */ +type Props = { + + /** + * An error message to display instead of a preview. Displaying an error + * will take priority over displaying a video preview. + */ + error: string, + + /** + * The JitsiLocalTrack to display. + */ + track: Object +}; + /** * React component for displaying video. This component defers to lib-jitsi-meet * logic for rendering the video. * * @extends Component */ -class VideoInputPreview extends Component { - /** - * VideoInputPreview component's property types. - * - * @static - */ - static propTypes = { - /** - * An error message to display instead of a preview. Displaying an error - * will take priority over displaying a video preview. - */ - error: PropTypes.string, - - /** - * The JitsiLocalTrack to display. - */ - track: PropTypes.object - }; - +class VideoInputPreview extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/display-name/components/DisplayName.web.js b/react/features/display-name/components/DisplayName.web.js index 81b0a820d..1afb2bfd0 100644 --- a/react/features/display-name/components/DisplayName.web.js +++ b/react/features/display-name/components/DisplayName.web.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -7,54 +8,71 @@ import { appendSuffix } from '../functions'; import { translate } from '../../base/i18n'; import { participantDisplayNameChanged } from '../../base/participants'; +/** + * The type of the React {@code Component} props of {@link DisplayName}. + */ +type Props = { + + /** + * Whether or not the display name should be editable on click. + */ + allowEditing: boolean, + + /** + * Invoked to update the participant's display name. + */ + dispatch: Dispatch<*>, + + /** + * The participant's current display name. + */ + displayName: string, + + /** + * A string to append to the displayName, if provided. + */ + displayNameSuffix: string, + + /** + * The ID attribute to add to the component. Useful for global querying for + * the component by legacy components and torture tests. + */ + elementID: string, + + /** + * The ID of the participant whose name is being displayed. + */ + participantID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link DisplayName}. + */ +type State = { + + /** + * The current value of the display name in the edit field. + */ + editDisplayNameValue: string, + + /** + * Whether or not the component should be displaying an editable input. + */ + isEditing: boolean +}; + /** * React {@code Component} for displaying and editing a participant's name. * * @extends Component */ -class DisplayName extends Component { - /** - * {@code DisplayName}'s property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not the display name should be editable on click. - */ - allowEditing: PropTypes.bool, - - /** - * Invoked to update the participant's display name. - */ - dispatch: PropTypes.func, - - /** - * The participant's current display name. - */ - displayName: PropTypes.string, - - /** - * A string to append to the displayName, if provided. - */ - displayNameSuffix: PropTypes.string, - - /** - * The ID attribute to add to the component. Useful for global querying - * for the component by legacy components and torture tests. - */ - elementID: PropTypes.string, - - /** - * The ID of the participant whose name is being displayed. - */ - participantID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; +class DisplayName extends Component { + _nameInput: ?HTMLInputElement; /** * Initializes a new {@code DisplayName} instance. @@ -62,23 +80,11 @@ class DisplayName extends Component { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * The current value of the display name in the edit field. - * - * @type {string} - */ editDisplayNameValue: '', - - /** - * Whether or not the component should be displaying an editable - * input. - * - * @type {boolean} - */ isEditing: false }; @@ -109,7 +115,9 @@ class DisplayName extends Component { * @returns {void} */ componentDidUpdate(previousProps, previousState) { - if (!previousState.isEditing && this.state.isEditing) { + if (!previousState.isEditing + && this.state.isEditing + && this._nameInput) { this._nameInput.select(); } } @@ -156,6 +164,8 @@ class DisplayName extends Component { ); } + _onChange: () => void; + /** * Updates the internal state of the display name entered into the edit * field. @@ -170,6 +180,8 @@ class DisplayName extends Component { }); } + _onKeyDown: () => void; + /** * Submits the editted display name update if the enter key is pressed. * @@ -183,6 +195,8 @@ class DisplayName extends Component { } } + _onStartEditing: () => void; + /** * Updates the component to display an editable input field and sets the * initial value to the current display name. @@ -199,6 +213,8 @@ class DisplayName extends Component { } } + _onSubmit: () => void; + /** * Dispatches an action to update the display name if any change has * occurred after editing. Clears any temporary state used to keep track @@ -223,6 +239,8 @@ class DisplayName extends Component { this._nameInput = null; } + _setNameInputRef: (HTMLInputElement | null) => void; + /** * Sets the internal reference to the HTML element backing the React * {@code Component} input with id {@code editDisplayName}. diff --git a/react/features/display-name/components/DisplayNamePrompt.web.js b/react/features/display-name/components/DisplayNamePrompt.web.js index ea51b7c9d..b0b11cfa8 100644 --- a/react/features/display-name/components/DisplayNamePrompt.web.js +++ b/react/features/display-name/components/DisplayNamePrompt.web.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; import { FieldTextStateless as TextField } from '@atlaskit/field-text'; @@ -10,51 +11,56 @@ import { participantDisplayNameChanged } from '../../base/participants'; +/** + * The type of the React {@code Component} props of {@link DisplayNamePrompt}. + */ +type Props = { + + /** + * The current ID for the local participant. Used for setting the display + * name on the associated participant. + */ + _localParticipantID: string, + + /** + * Invoked to update the local participant's display name. + */ + dispatch: Dispatch<*>, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} props of {@link DisplayNamePrompt}. + */ +type State = { + + /** + * The name to show in the display name text field. + */ + displayName: string +}; + /** * Implements a React {@code Component} for displaying a dialog with an field * for setting the local participant's display name. * * @extends Component */ -class DisplayNamePrompt extends Component { - /** - * {@code DisplayNamePrompt} component's property types. - * - * @static - */ - static propTypes = { - /** - * The current ID for the local participant. Used for setting the - * display name on the associated participant. - */ - _localParticipantID: PropTypes.string, - - /** - * Invoked to update the local participant's display name. - */ - dispatch: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class DisplayNamePrompt extends Component { /** * Initializes a new {@code DisplayNamePrompt} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * The name to show in the display name text field. - * - * @type {string} - */ displayName: '' }; @@ -88,6 +94,8 @@ class DisplayNamePrompt extends Component { ); } + _onDisplayNameChange: (Object) => void; + /** * Updates the entered display name. * @@ -102,12 +110,14 @@ class DisplayNamePrompt extends Component { }); } + _onSubmit: () => boolean; + /** * Dispatches an action to update the local participant's display name. A * name must be entered for the action to dispatch. * * @private - * @returns {void} + * @returns {boolean} */ _onSubmit() { const { displayName } = this.state; diff --git a/react/features/feedback/components/FeedbackDialog.web.js b/react/features/feedback/components/FeedbackDialog.web.js index e8d413301..6cca2ff52 100644 --- a/react/features/feedback/components/FeedbackDialog.web.js +++ b/react/features/feedback/components/FeedbackDialog.web.js @@ -1,9 +1,8 @@ -/* global interfaceConfig */ +/* @flow */ import { FieldTextAreaStateless } from '@atlaskit/field-text-area'; import StarIcon from '@atlaskit/icon/glyph/star'; import StarFilledIcon from '@atlaskit/icon/glyph/star-filled'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -16,6 +15,8 @@ import { translate } from '../../base/i18n'; import { cancelFeedback, submitFeedback } from '../actions'; +declare var interfaceConfig: Object; + const scoreAnimationClass = interfaceConfig.ENABLE_FEEDBACK_ANIMATION ? 'shake-rotate' : ''; @@ -33,6 +34,70 @@ const SCORES = [ 'feedback.veryGood' ]; +/** + * The type of the React {@code Component} props of {@link FeedbackDialog}. + */ +type Props = { + + /** + * The cached feedback message, if any, that was set when closing a previous + * instance of {@code FeedbackDialog}. + */ + _message: string, + + /** + * The cached feedback score, if any, that was set when closing a previous + * instance of {@code FeedbackDialog}. + */ + _score: number, + + /** + * The JitsiConference that is being rated. The conference is passed in + * because feedback can occur after a conference has been left, so + * references to it may no longer exist in redux. + */ + conference: Object, + + /** + * Invoked to signal feedback submission or canceling. + */ + dispatch: Dispatch<*>, + + /** + * Callback invoked when {@code FeedbackDialog} is unmounted. + */ + onClose: Function, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link FeedbackDialog}. + */ +type State = { + + /** + * The currently entered feedback message. + */ + message: string, + + /** + * The score selection index which is currently being hovered. The value -1 + * is used as a sentinel value to match store behavior of using -1 for no + * score having been selected. + */ + mousedOverScore: number, + + /** + * The currently selected score selection index. The score will not be 0 + * indexed so subtract one to map with SCORES. + */ + score: number +}; + /** * A React {@code Component} for displaying a dialog to rate the current * conference quality, write a message describing the experience, and submit @@ -40,49 +105,13 @@ const SCORES = [ * * @extends Component */ -class FeedbackDialog extends Component { +class FeedbackDialog extends Component { /** - * {@code FeedbackDialog} component's property types. - * - * @static + * An array of objects with click handlers for each of the scores listed in + * the constant SCORES. This pattern is used for binding event handlers only + * once for each score selection icon. */ - static propTypes = { - /** - * The cached feedback message, if any, that was set when closing a - * previous instance of {@code FeedbackDialog}. - */ - _message: PropTypes.string, - - /** - * The cached feedback score, if any, that was set when closing a - * previous instance of {@code FeedbackDialog}. - */ - _score: PropTypes.number, - - /** - * The JitsiConference that is being rated. The conference is passed in - * because feedback can occur after a conference has been left, so - * references to it may no longer exist in redux. - * - * @type {JitsiConference} - */ - conference: PropTypes.object, - - /** - * Invoked to signal feedback submission or canceling. - */ - dispatch: PropTypes.func, - - /** - * Callback invoked when {@code FeedbackDialog} is unmounted. - */ - onClose: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; + _scoreClickConfigurations: Array; /** * Initializes a new {@code FeedbackDialog} instance. @@ -90,7 +119,7 @@ class FeedbackDialog extends Component { * @param {Object} props - The read-only React {@code Component} props with * which the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); const { _message, _score } = this.props; @@ -121,13 +150,6 @@ class FeedbackDialog extends Component { score: _score > -1 ? _score - 1 : _score }; - /** - * An array of objects with click handlers for each of the scores listed - * in SCORES. This pattern is used for binding event handlers only once - * for each score selection icon. - * - * @type {Object[]} - */ this._scoreClickConfigurations = SCORES.map((textKey, index) => { return { _onClick: () => this._onScoreSelect(index), @@ -234,6 +256,8 @@ class FeedbackDialog extends Component { ); } + _onCancel: () => boolean; + /** * Dispatches an action notifying feedback was not submitted. The submitted * score will have one added as the rest of the app does not expect 0 @@ -251,6 +275,8 @@ class FeedbackDialog extends Component { return true; } + _onMessageChange: (Object) => void; + /** * Updates the known entered feedback message. * @@ -274,6 +300,8 @@ class FeedbackDialog extends Component { this.setState({ score }); } + _onScoreContainerMouseLeave: () => void; + /** * Sets the currently hovered score to null to indicate no hover is * occurring. @@ -297,6 +325,8 @@ class FeedbackDialog extends Component { this.setState({ mousedOverScore }); } + _onSubmit: () => void; + /** * Dispatches the entered feedback for submission. The submitted score will * have one added as the rest of the app does not expect 0 indexing. diff --git a/react/features/filmstrip/components/web/AudioMutedIndicator.js b/react/features/filmstrip/components/web/AudioMutedIndicator.js index e5c009970..1b635fa60 100644 --- a/react/features/filmstrip/components/web/AudioMutedIndicator.js +++ b/react/features/filmstrip/components/web/AudioMutedIndicator.js @@ -1,26 +1,26 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of {@link AudioMutedIndicator}. + */ +type Props = { + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * React {@code Component} for showing an audio muted icon with a tooltip. * * @extends Component */ -class AudioMutedIndicator extends Component { - /** - * {@code AudioMutedIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class AudioMutedIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/BaseIndicator.js b/react/features/filmstrip/components/web/BaseIndicator.js index 30707b34d..fd9220b40 100644 --- a/react/features/filmstrip/components/web/BaseIndicator.js +++ b/react/features/filmstrip/components/web/BaseIndicator.js @@ -1,15 +1,59 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import Tooltip from '@atlaskit/tooltip'; import { translate } from '../../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link BaseIndicator}. + */ +type Props = { + + /** + * Additional CSS class names to set on the icon container. + */ + className: string, + + /** + * The CSS classnames to set on the icon element of the component. + */ + iconClassName: string, + + /** + * The font size for the icon. + */ + iconSize: string, + + /** + * The ID attribue to set on the root element of the component. + */ + id: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function, + + /** + * The translation key to use for displaying a tooltip when hovering over + * the component. + */ + tooltipKey: string, + + /** + * From which side of the indicator the tooltip should appear from, + * defaulting to "top". + */ + tooltipPosition: string +}; + /** * React {@code Component} for showing an icon with a tooltip. * * @extends Component */ -class BaseIndicator extends Component { +class BaseIndicator extends Component { /** * Default values for {@code BaseIndicator} component's properties. * @@ -23,50 +67,6 @@ class BaseIndicator extends Component { tooltipPosition: 'top' }; - /** - * {@code BaseIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * Additional CSS class names to set on the icon container. - */ - className: PropTypes.string, - - /** - * The CSS classnames to set on the icon element of the component. - */ - iconClassName: PropTypes.string, - - /** - * The font size for the icon. - */ - iconSize: PropTypes.string, - - /** - * The ID attribue to set on the root element of the component. - */ - id: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func, - - /** - * The translation key to use for displaying a tooltip when hovering - * over the component. - */ - tooltipKey: PropTypes.string, - - /** - * From which side of the indicator the tooltip should appear from. - * Defaults to "top". - */ - tooltipPosition: PropTypes.string - }; - /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/DominantSpeakerIndicator.js b/react/features/filmstrip/components/web/DominantSpeakerIndicator.js index fa89e7b74..7aed2c5a7 100644 --- a/react/features/filmstrip/components/web/DominantSpeakerIndicator.js +++ b/react/features/filmstrip/components/web/DominantSpeakerIndicator.js @@ -1,34 +1,33 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of + * {@link DominantSpeakerIndicator}. + */ +type Props = { + + /** + * The font-size for the icon. + */ + iconSize: number, + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * Thumbnail badge showing that the participant is the dominant speaker in * the conference. * * @extends Component */ -class DominantSpeakerIndicator extends Component { - /** - * {@code DominantSpeakerIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * The font-size for the icon. - * - * @type {number} - */ - iconSize: PropTypes.number, - - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class DominantSpeakerIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/ModeratorIndicator.js b/react/features/filmstrip/components/web/ModeratorIndicator.js index 19cc66f5d..5e3fcf85b 100644 --- a/react/features/filmstrip/components/web/ModeratorIndicator.js +++ b/react/features/filmstrip/components/web/ModeratorIndicator.js @@ -1,26 +1,26 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of {@link ModeratorIndicator}. + */ +type Props = { + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * React {@code Component} for showing a moderator icon with a tooltip. * * @extends Component */ -class ModeratorIndicator extends Component { - /** - * {@code ModeratorIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class ModeratorIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/RaisedHandIndicator.js b/react/features/filmstrip/components/web/RaisedHandIndicator.js index e7a86e905..4e2bd5fac 100644 --- a/react/features/filmstrip/components/web/RaisedHandIndicator.js +++ b/react/features/filmstrip/components/web/RaisedHandIndicator.js @@ -1,33 +1,31 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of {@link RaisedHandIndicator}. + */ +type Props = { + + /** + * The font-size for the icon. + */ + iconSize: number, + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * Thumbnail badge showing that the participant would like to speak. * * @extends Component */ -class RaisedHandIndicator extends Component { - /** - * {@code RaisedHandIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * The font-size for the icon. - * - * @type {number} - */ - iconSize: PropTypes.number, - - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class RaisedHandIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/VideoMutedIndicator.js b/react/features/filmstrip/components/web/VideoMutedIndicator.js index 975b0edbf..f61b6db8f 100644 --- a/react/features/filmstrip/components/web/VideoMutedIndicator.js +++ b/react/features/filmstrip/components/web/VideoMutedIndicator.js @@ -1,26 +1,26 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of {@link VideoMutedIndicator}. + */ +type Props = { + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * React {@code Component} for showing a video muted icon with a tooltip. * * @extends Component */ -class VideoMutedIndicator extends Component { - /** - * {@code VideoMutedIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class VideoMutedIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/invite/components/AddPeopleDialog.web.js b/react/features/invite/components/AddPeopleDialog.web.js index 697cfde28..b6e506121 100644 --- a/react/features/invite/components/AddPeopleDialog.web.js +++ b/react/features/invite/components/AddPeopleDialog.web.js @@ -2,7 +2,6 @@ import Avatar from '@atlaskit/avatar'; import InlineMessage from '@atlaskit/inline-message'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -19,88 +18,96 @@ const logger = require('jitsi-meet-logger').getLogger(__filename); declare var interfaceConfig: Object; +/** + * The type of the React {@code Component} props of {@link AddPeopleDialog}. + */ +type Props = { + + /** + * The {@link JitsiMeetConference} which will be used to invite "room" + * participants through the SIP Jibri (Video SIP gateway). + */ + _conference: Object, + + /** + * The URL for validating if a phone number can be called. + */ + _dialOutAuthUrl: string, + + /** + * Whether to show a footer text after the search results as a last element. + */ + _footerTextEnabled: boolean, + + /** + * The JWT token. + */ + _jwt: string, + + /** + * The query types used when searching people. + */ + _peopleSearchQueryTypes: Array, + + /** + * The URL pointing to the service allowing for people search. + */ + _peopleSearchUrl: string, + + /** + * Whether or not to show Add People functionality. + */ + addPeopleEnabled: boolean, + + /** + * Whether or not to show Dial Out functionality. + */ + dialOutEnabled: boolean, + + /** + * The redux {@code dispatch} function. + */ + dispatch: Dispatch<*>, + + /** + * Invoked to obtain translated strings. + */ + t: Function, +}; + +/** + * The type of the React {@code Component} state of {@link AddPeopleDialog}. + */ +type State = { + + /** + * Indicating that an error occurred when adding people to the call. + */ + addToCallError: boolean, + + /** + * Indicating that we're currently adding the new people to the + * call. + */ + addToCallInProgress: boolean, + + /** + * The list of invite items. + */ + inviteItems: Array +}; + /** * The dialog that allows to invite people to the call. */ -class AddPeopleDialog extends Component<*, *> { - /** - * {@code AddPeopleDialog}'s property types. - * - * @static - */ - static propTypes = { - /** - * The {@link JitsiMeetConference} which will be used to invite "room" - * participants through the SIP Jibri (Video SIP gateway). - */ - _conference: PropTypes.object, - - /** - * The URL for validating if a phone number can be called. - */ - _dialOutAuthUrl: PropTypes.string, - - /** - * Whether to show a footer text after the search results - * as a last element. - */ - _footerTextEnabled: PropTypes.bool, - - /** - * The JWT token. - */ - _jwt: PropTypes.string, - - /** - * The query types used when searching people. - */ - _peopleSearchQueryTypes: PropTypes.arrayOf(PropTypes.string), - - /** - * The URL pointing to the service allowing for people search. - */ - _peopleSearchUrl: PropTypes.string, - - /** - * Whether or not to show Add People functionality. - */ - addPeopleEnabled: PropTypes.bool, - - /** - * Whether or not to show Dial Out functionality. - */ - dialOutEnabled: PropTypes.bool, - - /** - * The redux {@code dispatch} function. - */ - dispatch: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class AddPeopleDialog extends Component { _multiselect = null; _resourceClient: Object; state = { - /** - * Indicating that an error occurred when adding people to the call. - */ addToCallError: false, - - /** - * Indicating that we're currently adding the new people to the - * call. - */ addToCallInProgress: false, - - /** - * The list of invite items. - */ inviteItems: [] }; @@ -110,7 +117,7 @@ class AddPeopleDialog extends Component<*, *> { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -142,10 +149,11 @@ class AddPeopleDialog extends Component<*, *> { /** * React Component method that executes once component is updated. * + * @param {Object} prevProps - The state object before the update. * @param {Object} prevState - The state object before the update. * @returns {void} */ - componentDidUpdate(prevState) { + componentDidUpdate(prevProps, prevState) { /** * Clears selected items from the multi select component on successful * invite. diff --git a/react/features/invite/components/dial-in-info-page/NoRoomError.web.js b/react/features/invite/components/dial-in-info-page/NoRoomError.web.js index 10fb9429a..e468c4567 100644 --- a/react/features/invite/components/dial-in-info-page/NoRoomError.web.js +++ b/react/features/invite/components/dial-in-info-page/NoRoomError.web.js @@ -1,32 +1,32 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link NoRoomError}. + */ +type Props = { + + /** + * Additional CSS classnames to append to the root of the component. + */ + className: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Displays an error message stating no room name was specified to fetch dial-in * numbers for. * * @extends Component */ -class NoRoomError extends Component { - /** - * {@code NoRoomError} component's property types. - * - * @static - */ - static propTypes = { - /** - * Additional CSS classnames to append to the root of the component. - */ - className: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class NoRoomError extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/invite/components/dial-in-summary/ConferenceID.web.js b/react/features/invite/components/dial-in-summary/ConferenceID.web.js index b92170144..980e6cb7c 100644 --- a/react/features/invite/components/dial-in-summary/ConferenceID.web.js +++ b/react/features/invite/components/dial-in-summary/ConferenceID.web.js @@ -1,31 +1,31 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; /** - * Displays a conference ID used as a pin for dialing into a conferene. + * The type of the React {@code Component} props of {@link ConferenceID}. + */ +type Props = { + + /** + * The conference ID for dialing in. + */ + conferenceID: number, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * Displays a conference ID used as a pin for dialing into a conference. * * @extends Component */ -class ConferenceID extends Component { - /** - * {@code ConferenceID} component's property types. - * - * @static - */ - static propTypes = { - /** - * The conference ID for dialing in. - */ - conferenceID: PropTypes.number, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class ConferenceID extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/invite/components/dial-in-summary/DialInSummary.web.js b/react/features/invite/components/dial-in-summary/DialInSummary.web.js index 4cb565496..0903488ae 100644 --- a/react/features/invite/components/dial-in-summary/DialInSummary.web.js +++ b/react/features/invite/components/dial-in-summary/DialInSummary.web.js @@ -1,6 +1,5 @@ -/* global config */ +/* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; @@ -8,53 +7,72 @@ import { translate } from '../../../base/i18n'; import ConferenceID from './ConferenceID'; import NumbersList from './NumbersList'; +declare var config: Object; + +/** + * The type of the React {@code Component} props of {@link DialInSummary}. + */ +type Props = { + + /** + * Additional CSS classnames to append to the root of the component. + */ + className: string, + + /** + * Whether or not numbers should include links with the telephone protocol. + */ + clickableNumbers: boolean, + + /** + * The name of the conference to show a conferenceID for. + */ + room: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link DialInSummary}. + */ +type State = { + + /** + * The numeric ID of the conference, used as a pin when dialing in. + */ + conferenceID: ?string, + + /** + * An error message to display. + */ + error: string, + + /** + * Whether or not the app is fetching data. + */ + loading: boolean, + + /** + * The dial-in numbers. entered by the local participant. + */ + numbers: ?Array, + + /** + * Whether or not dial-in is allowed. + */ + numbersEnabled: ?boolean +} + /** * Displays a page listing numbers for dialing into a conference and pin to * the a specific conference. * * @extends Component */ -class DialInSummary extends Component { - /** - * {@code DialInSummary} component's property types. - * - * @static - */ - static propTypes = { - /** - * Additional CSS classnames to append to the root of the component. - */ - className: PropTypes.string, - - /** - * Whether or not numbers should include links with the telephone - * protocol. - */ - clickableNumbers: PropTypes.bool, - - /** - * The name of the conference to show a conferenceID for. - */ - room: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - - /** - * {@code DialInSummary} component's local state. - * - * @type {Object} - * @property {number} conferenceID - The numeric ID of the conference, used - * as a pin when dialing in. - * @property {string} error - An error message to display. - * @property {boolean} loading - Whether or not the app is fetching data. - * @property {Array|Object} numbers - The dial-in numbers. - * entered by the local participant. - * @property {boolean} numbersEnabled - Whether or not dial-in is allowed. - */ +class DialInSummary extends Component { state = { conferenceID: null, error: '', @@ -69,7 +87,7 @@ class DialInSummary extends Component { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once for every instance. @@ -183,6 +201,8 @@ class DialInSummary extends Component { .catch(() => Promise.reject(this.props.t('info.genericError'))); } + _onGetConferenceIDSuccess: (Object) => void; + /** * Callback invoked when fetching the conference ID succeeds. * @@ -200,6 +220,8 @@ class DialInSummary extends Component { this.setState({ conferenceID: id }); } + _onGetNumbersSuccess: (Object) => void; + /** * Callback invoked when fetching dial-in numbers succeeds. Sets the * internal to show the numbers. @@ -218,6 +240,8 @@ class DialInSummary extends Component { }); } + _setErrorMessage: (string) => void; + /** * Sets an error message to display on the page instead of content. * diff --git a/react/features/invite/components/dial-in-summary/NumbersList.web.js b/react/features/invite/components/dial-in-summary/NumbersList.web.js index f8556c316..50d94d787 100644 --- a/react/features/invite/components/dial-in-summary/NumbersList.web.js +++ b/react/features/invite/components/dial-in-summary/NumbersList.web.js @@ -1,47 +1,39 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; +type Props = { + + /** + * Whether or not numbers should include links with the telephone protocol. + */ + clickableNumbers: boolean, + + /** + * The conference ID for dialing in. + */ + conferenceID: number, + + /** + * The phone numbers to display. Can be an array of numbers or an object + * with countries as keys and an array of numbers as values. + */ + numbers: { [string]: Array } | Array, + + /** + * Invoked to obtain translated strings. + */ + t: Function +} + /** * Displays a table with phone numbers to dial in to a conference. * * @extends Component */ -class NumbersList extends Component { - /** - * {@code NumbersList} component's property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not numbers should include links with the telephone - * protocol. - */ - clickableNumbers: PropTypes.bool, - - /** - * The conference ID for dialing in. - */ - conferenceID: PropTypes.number, - - /** - * The phone numbers to display. Can be an array of numbers - * or an object with countries as keys and an array of numbers - * as values. - */ - numbers: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.object - ]), - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class NumbersList extends Component { /** * Implements React's {@link Component#render()}. * @@ -50,22 +42,21 @@ class NumbersList extends Component { */ render() { const { numbers, t } = this.props; - const showWithoutCountries = Array.isArray(numbers); return ( - { showWithoutCountries + { Array.isArray(numbers) ? null : } - { showWithoutCountries + { Array.isArray(numbers) ? numbers.map(this._renderNumberRow) - : this._renderWithCountries() } + : this._renderWithCountries(numbers) }
{ t('info.country') }{ t('info.numbers') }
); } @@ -73,15 +64,25 @@ class NumbersList extends Component { /** * Renders rows of countries and associated phone numbers. * + * @param {Object} numbersMapping - Things yeah. * @private * @returns {ReactElement[]} */ - _renderWithCountries() { + _renderWithCountries(numbersMapping: Object) { const rows = []; - for (const [ country, numbers ] of Object.entries(this.props.numbers)) { - const formattedNumbers = numbers.map( - number => this._renderNumberDiv(number)); + for (const [ country, numbers ] of Object.entries(numbersMapping)) { + if (!Array.isArray(numbers)) { + return; + } + + const formattedNumbers = numbers.map(number => { + if (typeof number === 'string') { + return this._renderNumberDiv(number); + } + + return null; + }); rows.push( diff --git a/react/features/invite/components/info-dialog/DialInNumber.web.js b/react/features/invite/components/info-dialog/DialInNumber.web.js index 253bdaca4..8a2da804e 100644 --- a/react/features/invite/components/info-dialog/DialInNumber.web.js +++ b/react/features/invite/components/info-dialog/DialInNumber.web.js @@ -1,39 +1,39 @@ +/* @flow */ + import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { translate } from '../../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link DialInNumber}. + */ +type Props = { + + /** + * The numberic identifier for the current conference, used after dialing a + * the number to join the conference. + */ + conferenceID: number, + + /** + * The phone number to dial to begin the process of dialing into a + * conference. + */ + phoneNumber: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * React {@code Component} responsible for displaying a telephone number and * conference ID for dialing into a conference. * * @extends Component */ -class DialInNumber extends Component { - /** - * {@code DialInNumber} component's property types. - * - * @static - */ - static propTypes = { - /** - * The numberic identifier for the current conference, used after - * dialing a the number to join the conference. - */ - conferenceID: PropTypes.number, - - /** - * The phone number to dial to begin the process of dialing into a - * conference. - */ - phoneNumber: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class DialInNumber extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/invite/components/info-dialog/InfoDialog.web.js b/react/features/invite/components/info-dialog/InfoDialog.web.js index 4a7aec781..9ae652c46 100644 --- a/react/features/invite/components/info-dialog/InfoDialog.web.js +++ b/react/features/invite/components/info-dialog/InfoDialog.web.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -13,88 +14,103 @@ import PasswordForm from './PasswordForm'; const logger = require('jitsi-meet-logger').getLogger(__filename); +/** + * The type of the React {@code Component} props of {@link InfoDialog}. + */ +type Props = { + + /** + * Whether or not the current user can modify the current password. + */ + _canEditPassword: boolean, + + /** + * The JitsiConference for which to display a lock state and change the + * password. + */ + _conference: Object, + + /** + * The name of the current conference. Used as part of inviting users. + */ + _conferenceName: string, + + /** + * The current url of the conference to be copied onto the clipboard. + */ + _inviteURL: string, + + /** + * The current location url of the conference. + */ + _locationURL: Object, + + /** + * The value for how the conference is locked (or undefined if not locked) + * as defined by room-lock constants. + */ + _locked: string, + + /** + * The current known password for the JitsiConference. + */ + _password: string, + + /** + * The object representing the dialIn feature. + */ + dialIn: Object, + + /** + * Invoked to open a dialog for adding participants to the conference. + */ + dispatch: Dispatch<*>, + + /** + * The current known URL for a live stream in progress. + */ + liveStreamViewURL: string, + + /** + * Callback invoked when the dialog should be closed. + */ + onClose: Function, + + /** + * Callback invoked when a mouse-related event has been detected. + */ + onMouseOver: Function, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link InfoDialog}. + */ +type State = { + + /** + * Whether or not to show the password in editing mode. + */ + passwordEditEnabled: boolean, + + /** + * The conference dial-in number to display. + */ + phoneNumber: ?string +}; + /** * A React Component with the contents for a dialog that shows information about * the current conference. * * @extends Component */ -class InfoDialog extends Component { - /** - * {@code InfoDialog} component's property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not the current user can modify the current password. - */ - _canEditPassword: PropTypes.bool, - - /** - * The JitsiConference for which to display a lock state and change the - * password. - * - * @type {JitsiConference} - */ - _conference: PropTypes.object, - - /** - * The name of the current conference. Used as part of inviting users. - */ - _conferenceName: PropTypes.string, - - /** - * The current url of the conference to be copied onto the clipboard. - */ - _inviteURL: PropTypes.string, - - /** - * The current location url of the conference. - */ - _locationURL: PropTypes.object, - - /** - * The value for how the conference is locked (or undefined if not - * locked) as defined by room-lock constants. - */ - _locked: PropTypes.string, - - /** - * The current known password for the JitsiConference. - */ - _password: PropTypes.string, - - /** - * The object representing the dialIn feature. - */ - dialIn: PropTypes.object, - - /** - * Invoked to open a dialog for adding participants to the conference. - */ - dispatch: PropTypes.func, - - /** - * The current known URL for a live stream in progress. - */ - liveStreamViewURL: PropTypes.string, - - /** - * Callback invoked when the dialog should be closed. - */ - onClose: PropTypes.func, - - /** - * Callback invoked when a mouse-related event has been detected. - */ - onMouseOver: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; +class InfoDialog extends Component { + _copyElement: ?Object; /** * {@code InfoDialog} component's local state. @@ -107,7 +123,7 @@ class InfoDialog extends Component { */ state = { passwordEditEnabled: false, - phoneNumber: '' + phoneNumber: undefined }; /** @@ -116,7 +132,7 @@ class InfoDialog extends Component { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); const { defaultCountry, numbers } = props.dialIn; @@ -162,7 +178,8 @@ class InfoDialog extends Component { const { defaultCountry, numbers } = nextProps.dialIn; this.setState({ - phoneNumber: _getDefaultPhoneNumber(numbers, defaultCountry) + phoneNumber: + _getDefaultPhoneNumber(numbers, defaultCountry) }); } } @@ -293,6 +310,8 @@ class InfoDialog extends Component { return this.props._inviteURL.replace(/^https?:\/\//i, ''); } + _onClickURLText: (Object) => void; + /** * Callback invoked when a displayed URL link is clicked to prevent actual * navigation from happening. The URL links have an href to display the @@ -307,6 +326,8 @@ class InfoDialog extends Component { event.preventDefault(); } + _onCopyInviteURL: () => void; + /** * Callback invoked to copy the contents of {@code this._copyElement} to the * clipboard. @@ -316,14 +337,20 @@ class InfoDialog extends Component { */ _onCopyInviteURL() { try { - this._copyElement.select(); + if (!this._copyElement) { + throw new Error('No element to copy from.'); + } + + this._copyElement && this._copyElement.select(); document.execCommand('copy'); - this._copyElement.blur(); + this._copyElement && this._copyElement.blur(); } catch (err) { logger.error('error when copying the text', err); } } + _onPasswordRemove: () => void; + /** * Callback invoked to unlock the current JitsiConference. * @@ -334,6 +361,8 @@ class InfoDialog extends Component { this._onPasswordSubmit(''); } + _onPasswordSubmit: (string) => void; + /** * Callback invoked to set a password on the current JitsiConference. * @@ -352,6 +381,8 @@ class InfoDialog extends Component { )); } + _onTogglePasswordEditState: () => void; + /** * Toggles whether or not the password should currently be shown as being * edited locally. @@ -476,6 +507,8 @@ class InfoDialog extends Component { && phoneNumber); } + _setCopyElement: () => void; + /** * Sets the internal reference to the DOM/HTML element backing the React * {@code Component} input. @@ -485,7 +518,7 @@ class InfoDialog extends Component { * @private * @returns {void} */ - _setCopyElement(element) { + _setCopyElement(element: Object) { this._copyElement = element; } } diff --git a/react/features/invite/components/info-dialog/PasswordForm.web.js b/react/features/invite/components/info-dialog/PasswordForm.web.js index 6a9f3ef12..e5115271d 100644 --- a/react/features/invite/components/info-dialog/PasswordForm.web.js +++ b/react/features/invite/components/info-dialog/PasswordForm.web.js @@ -1,56 +1,60 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; import { LOCKED_LOCALLY } from '../../../room-lock'; +/** + * The type of the React {@code Component} props of {@link PasswordForm}. + */ +type Props = { + + /** + * Whether or not to show the password editing field. + */ + editEnabled: boolean, + + /** + * The value for how the conference is locked (or undefined if not locked) + * as defined by room-lock constants. + */ + locked: string, + + /** + * Callback to invoke when the local participant is submitting a password + * set request. + */ + onSubmit: Function, + + /** + * The current known password for the JitsiConference. + */ + password: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link PasswordForm}. + */ +type State = { + + /** + * The value of the password being entered by the local participant. + */ + enteredPassword: string +}; + /** * React {@code Component} for displaying and editing the conference password. * * @extends Component */ -class PasswordForm extends Component { - /** - * {@code PasswordForm} component's property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not to show the password editing field. - */ - editEnabled: PropTypes.bool, - - /** - * The value for how the conference is locked (or undefined if not - * locked) as defined by room-lock constants. - */ - locked: PropTypes.string, - - /** - * Callback to invoke when the local participant is submitting a - * password set request. - */ - onSubmit: PropTypes.func, - - /** - * The current known password for the JitsiConference. - */ - password: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - - /** - * {@code PasswordForm} component's local state. - * - * @type {Object} - * @property {string} enteredPassword - The value of the password being - * entered by the local participant. - */ +class PasswordForm extends Component { state = { enteredPassword: '' }; @@ -61,7 +65,7 @@ class PasswordForm extends Component { * @param {Props} props - The React {@code Component} props to initialize * the new {@code PasswordForm} instance with. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -77,7 +81,7 @@ class PasswordForm extends Component { * @inheritdoc * @param {Props} nextProps - New props component will receive. */ - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: Props) { if (this.props.editEnabled && !nextProps.editEnabled) { this.setState({ enteredPassword: '' }); } @@ -148,6 +152,8 @@ class PasswordForm extends Component { ); } + _onEnteredPasswordChange: (Object) => void; + /** * Updates the internal state of entered password. * @@ -159,6 +165,8 @@ class PasswordForm extends Component { this.setState({ enteredPassword: event.target.value }); } + _onPasswordSubmit: (Object) => void; + /** * Invokes the passed in onSubmit callback to notify the parent that a * password submission has been attempted. diff --git a/react/features/invite/functions.js b/react/features/invite/functions.js index 730282172..7df5946d9 100644 --- a/react/features/invite/functions.js +++ b/react/features/invite/functions.js @@ -532,7 +532,7 @@ export function getDialInfoPageURL( */ export function _getDefaultPhoneNumber( dialInNumbers: Object, - defaultCountry: string = 'US') { + defaultCountry: string = 'US'): ?string { if (Array.isArray(dialInNumbers)) { // Dumbly return the first number if an array. return dialInNumbers[0]; diff --git a/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js b/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js index dfd6414fd..25ab96ae4 100644 --- a/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js +++ b/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js @@ -1,34 +1,35 @@ +/* @flow */ + import Lozenge from '@atlaskit/lozenge'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { Dialog } from '../../base/dialog'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of + * {@link KeyboardShortcutsDialog}. + */ +type Props = { + + /** + * A Map with keyboard keys as keys and translation keys as values. + */ + shortcutDescriptions: Object, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a React {@link Component} which displays a dialog describing * registered keyboard shortcuts. * * @extends Component */ -class KeyboardShortcutsDialog extends Component { - /** - * {@code KeyboardShortcutsDialog} component's property types. - * - * @static - */ - static propTypes = { - /** - * A Map with keyboard keys as keys and translation keys as values. - */ - shortcutDescriptions: PropTypes.object, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class KeyboardShortcutsDialog extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/mobile/network-activity/components/NetworkActivityIndicator.js b/react/features/mobile/network-activity/components/NetworkActivityIndicator.js index 5358eabaa..ca51b9ffa 100644 --- a/react/features/mobile/network-activity/components/NetworkActivityIndicator.js +++ b/react/features/mobile/network-activity/components/NetworkActivityIndicator.js @@ -1,31 +1,28 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { LoadingIndicator } from '../../../base/react'; +/** + * The type of the React {@code Component} props of + * {@link NetworkActivityIndicator}. + */ +type Props = { + + /** + * Indicates whether there is network activity i.e. ongoing network + * requests. + */ + _networkActivity: boolean +}; + /** * The React {@code Component} which renders a progress indicator when there * are ongoing network requests. */ -class NetworkActivityIndicator extends Component<*> { - /** - * {@code NetworkActivityIndicator} React {@code Component}'s prop types. - * - * @static - */ - static propTypes = { - /** - * Indicates whether there is network activity i.e. ongoing network - * requests. - * - * @private - */ - _networkActivity: PropTypes.bool - }; - +class NetworkActivityIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/overlay/components/AbstractPageReloadOverlay.js b/react/features/overlay/components/AbstractPageReloadOverlay.js index d9bbfa94c..f267f1416 100644 --- a/react/features/overlay/components/AbstractPageReloadOverlay.js +++ b/react/features/overlay/components/AbstractPageReloadOverlay.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { @@ -20,54 +19,71 @@ declare var APP: Object; const logger = require('jitsi-meet-logger').getLogger(__filename); +/** + * The type of the React {@code Component} props of + * {@link AbstractPageReloadOverlay}. + */ +type Props = { + + /** + * The details is an object containing more information about the connection + * failed (shard changes, was the computer suspended, etc.) + */ + details: Object, + + dispatch: Dispatch<*>, + + /** + * The indicator which determines whether the reload was caused by network + * failure. + */ + isNetworkFailure: boolean, + + /** + * The reason for the error that will cause the reload. + * NOTE: Used by PageReloadOverlay only. + */ + reason: string, + + /** + * The function to translate human-readable text. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of + * {@link AbstractPageReloadOverlay}. + */ +type State = { + + /** + * The translation key for the title of the overlay. + */ + message: string, + + /** + * Current value(time) of the timer. + */ + timeLeft: number, + + /** + * How long the overlay dialog will be displayed before the conference will + * be reloaded. + */ + timeoutSeconds: number, + + /** + * The translation key for the title of the overlay. + */ + title: string +}; + /** * Implements an abstract React {@link Component} for the page reload overlays. */ -export default class AbstractPageReloadOverlay extends Component<*, *> { - /** - * {@code AbstractPageReloadOverlay} component's property types. - * - * @static - */ - static propTypes = { - /** - * The details is an object containing more information about the - * connection failed (shard changes, was the computer suspended, etc.) - * - * @public - * @type {object} - */ - details: PropTypes.object, - - dispatch: PropTypes.func, - - /** - * The indicator which determines whether the reload was caused by - * network failure. - * - * @public - * @type {boolean} - */ - isNetworkFailure: PropTypes.bool, - - /** - * The reason for the error that will cause the reload. - * NOTE: Used by PageReloadOverlay only. - * - * @public - * @type {string} - */ - reason: PropTypes.string, - - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func - }; - +export default class AbstractPageReloadOverlay + extends Component { /** * Determines whether this overlay needs to be rendered (according to a * specific redux state). Called by {@link OverlayContainer}. @@ -109,38 +125,6 @@ export default class AbstractPageReloadOverlay extends Component<*, *> { _interval: ?IntervalID; - state: { - - /** - * The translation key for the title of the overlay. - * - * @type {string} - */ - message: string, - - /** - * Current value(time) of the timer. - * - * @type {number} - */ - timeLeft: number, - - /** - * How long the overlay dialog will be displayed before the - * conference will be reloaded. - * - * @type {number} - */ - timeoutSeconds: number, - - /** - * The translation key for the title of the overlay. - * - * @type {string} - */ - title: string - }; - /** * Initializes a new AbstractPageReloadOverlay instance. * diff --git a/react/features/overlay/components/AbstractSuspendedOverlay.js b/react/features/overlay/components/AbstractSuspendedOverlay.js index 14f13afac..4b8911902 100644 --- a/react/features/overlay/components/AbstractSuspendedOverlay.js +++ b/react/features/overlay/components/AbstractSuspendedOverlay.js @@ -1,26 +1,24 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link AbstractSuspendedOverlay}. + */ +type Props = { + + /** + * The function to translate human-readable text. + */ + t: Function +}; + /** * Implements a React {@link Component} for suspended overlay. Shown when a * suspend is detected. */ -export default class AbstractSuspendedOverlay extends Component { - /** - * {@code AbstractSuspendedOverlay} component's property types. - * - * @static - */ - static propTypes = { - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func - }; - +export default class AbstractSuspendedOverlay extends Component { /** * Determines whether this overlay needs to be rendered (according to a * specific redux state). Called by {@link OverlayContainer}. @@ -29,7 +27,7 @@ export default class AbstractSuspendedOverlay extends Component { * @returns {boolean} - If this overlay needs to be rendered, {@code true}; * {@code false}, otherwise. */ - static needsRender(state) { + static needsRender(state: Object) { return state['features/overlay'].suspendDetected; } } diff --git a/react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js b/react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js index 2de53e2d0..95242bf8f 100644 --- a/react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js +++ b/react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js @@ -1,35 +1,31 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link AbstractUserMediaPermissionsOverlay}. + */ +type Props = { + + /** + * The browser which is used currently. The text is different for every + * browser. + */ + browser: string, + + /** + * The function to translate human-readable text. + */ + t: Function +}; + /** * Implements a React {@link Component} for overlay with guidance how to proceed * with gUM prompt. */ -export default class AbstractUserMediaPermissionsOverlay extends Component { - /** - * {@code AbstractUserMediaPermissionsOverlay} component's property types. - * - * @static - */ - static propTypes = { - /** - * The browser which is used currently. The text is different for every - * browser. - * - * @public - * @type {string} - */ - browser: PropTypes.string, - - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func - }; - +export default class AbstractUserMediaPermissionsOverlay + extends Component { /** * Determines whether this overlay needs to be rendered (according to a * specific redux state). Called by {@link OverlayContainer}. @@ -38,7 +34,7 @@ export default class AbstractUserMediaPermissionsOverlay extends Component { * @returns {boolean} - If this overlay needs to be rendered, {@code true}; * {@code false}, otherwise. */ - static needsRender(state) { + static needsRender(state: Object) { return state['features/overlay'].isMediaPermissionPromptVisible; } } @@ -52,7 +48,7 @@ export default class AbstractUserMediaPermissionsOverlay extends Component { * browser: string * }} */ -export function abstractMapStateToProps(state) { +export function abstractMapStateToProps(state: Object) { const { browser } = state['features/overlay']; return { diff --git a/react/features/overlay/components/FilmstripOnlyOverlayFrame.js b/react/features/overlay/components/FilmstripOnlyOverlayFrame.js index 9e3fbeadc..935acbc1a 100644 --- a/react/features/overlay/components/FilmstripOnlyOverlayFrame.js +++ b/react/features/overlay/components/FilmstripOnlyOverlayFrame.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -10,50 +11,40 @@ import { import OverlayFrame from './OverlayFrame'; +/** + * The type of the React {@code Component} props of + * {@link FilmstripOnlyOverlayFrame}. + */ +type Props = { + + /** + * The source (e.g. URI, URL) of the avatar image of the local participant. + */ + _avatar: string, + + /** + * The children components to be displayed into the overlay frame for + * filmstrip only mode. + */ + children: React$Node, + + /** + * The css class name for the icon that will be displayed over the avatar. + */ + icon: string, + + /** + * Indicates the css style of the overlay. If true, then lighter; darker, + * otherwise. + */ + isLightOverlay: boolean +}; + /** * Implements a React Component for the frame of the overlays in filmstrip only * mode. */ -class FilmstripOnlyOverlayFrame extends Component { - /** - * FilmstripOnlyOverlayFrame component's property types. - * - * @static - */ - static propTypes = { - /** - * The source (e.g. URI, URL) of the avatar image of the local - * participant. - * - * @private - */ - _avatar: PropTypes.string, - - /** - * The children components to be displayed into the overlay frame for - * filmstrip only mode. - * - * @type {ReactElement} - */ - children: PropTypes.node.isRequired, - - /** - * The css class name for the icon that will be displayed over the - * avatar. - * - * @type {string} - */ - icon: PropTypes.string, - - /** - * Indicates the css style of the overlay. If true, then lighter; - * darker, otherwise. - * - * @type {boolean} - */ - isLightOverlay: PropTypes.bool - }; - +class FilmstripOnlyOverlayFrame extends Component { /** * Renders content related to the icon. * diff --git a/react/features/overlay/components/OverlayFrame.web.js b/react/features/overlay/components/OverlayFrame.web.js index 5d6d428fb..f0874cb9b 100644 --- a/react/features/overlay/components/OverlayFrame.web.js +++ b/react/features/overlay/components/OverlayFrame.web.js @@ -1,32 +1,42 @@ -/* global interfaceConfig */ +/* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; +declare var interfaceConfig: Object; + +/** + * The type of the React {@code Component} props of {@link OverlayFrame}. + */ +type Props = { + + /** + * The children components to be displayed into the overlay frame. + */ + children: React$Node, + + /** + * Indicates the css style of the overlay. If true, then lighter; darker, + * otherwise. + */ + isLightOverlay: boolean +}; + +/** + * The type of the React {@code Component} state of {@link OverlayFrame}. + */ +type State = { + + /** + * Whether or not the application is currently displaying in filmstrip only + * mode. + */ + filmstripOnly: boolean +}; + /** * Implements a React {@link Component} for the frame of the overlays. */ -export default class OverlayFrame extends Component { - /** - * OverlayFrame component's property types. - * - * @static - */ - static propTypes = { - /** - * The children components to be displayed into the overlay frame. - */ - children: PropTypes.node.isRequired, - - /** - * Indicates the css style of the overlay. If true, then lighter; - * darker, otherwise. - * - * @type {boolean} - */ - isLightOverlay: PropTypes.bool - }; - +export default class OverlayFrame extends Component { /** * Initializes a new AbstractOverlay instance. * @@ -34,7 +44,7 @@ export default class OverlayFrame extends Component { * instance is to be initialized. * @public */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { diff --git a/react/features/overlay/components/ReloadButton.js b/react/features/overlay/components/ReloadButton.js index e7c64fc29..7fe1998c5 100644 --- a/react/features/overlay/components/ReloadButton.js +++ b/react/features/overlay/components/ReloadButton.js @@ -1,46 +1,37 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { reloadNow } from '../../app'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link ReloadButton}. + */ +type Props = { + + /** + * Reloads the page. + */ + _reloadNow: Function, + + /** + * The function to translate human-readable text. + */ + t: Function, + + /** + * The translation key for the text in the button. + */ + textKey: string +}; + /** * Implements a React Component for button for the overlays that will reload * the page. */ -class ReloadButton extends Component<*> { - /** - * PageReloadOverlay component's property types. - * - * @static - */ - static propTypes = { - /** - * Reloads the page. - * - * @type {Function} - */ - _reloadNow: PropTypes.func, - - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func, - - /** - * The translation key for the text in the button. - * - * @type {string} - */ - textKey: PropTypes.string.isRequired - }; - +class ReloadButton extends Component { /** * Renders the button for relaod the page if necessary. * diff --git a/react/features/presence-status/components/PresenceLabel.js b/react/features/presence-status/components/PresenceLabel.js index 2b52cc203..0dc7a8b6e 100644 --- a/react/features/presence-status/components/PresenceLabel.js +++ b/react/features/presence-status/components/PresenceLabel.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -8,13 +9,51 @@ import { Text } from '../../base/react'; import { STATUS_TO_I18N_KEY } from '../constants'; +/** + * The type of the React {@code Component} props of {@link PresenceLabel}. + */ +type Props = { + + /** + * The current present status associated with the passed in participantID + * prop. + */ + _presence: string, + + /** + * Class name for the presence label. + */ + className: string, + + /** + * Default presence status that will be displayed if user's presence status + * is not available. + */ + defaultPresence: string, + + /** + * The ID of the participant whose presence status should display. + */ + participantID: string, + + /** + * Styles for the presence label. + */ + style: Object, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * React {@code Component} for displaying the current presence status of a * participant. * * @extends Component */ -class PresenceLabel extends Component { +class PresenceLabel extends Component { /** * The default values for {@code PresenceLabel} component's property types. * @@ -24,45 +63,6 @@ class PresenceLabel extends Component { _presence: '' }; - /** - * {@code PresenceLabel} component's property types. - * - * @static - */ - static propTypes = { - /** - * The current present status associated with the passed in - * participantID prop. - */ - _presence: PropTypes.string, - - /** - * Class name for the presence label. - */ - className: PropTypes.string, - - /** - * Default presence status that will be displayed if user's presence - * status is not available. - */ - defaultPresence: PropTypes.string, - - /** - * The ID of the participant whose presence status shoul display. - */ - participantID: PropTypes.string, - - /** - * Styles for the presence label. - */ - style: PropTypes.object, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - /** * Implements React's {@link Component#render()}. * diff --git a/react/features/recording/components/LiveStream/StreamKeyPicker.web.js b/react/features/recording/components/LiveStream/StreamKeyPicker.web.js index e38e395d3..9b0be54cd 100644 --- a/react/features/recording/components/LiveStream/StreamKeyPicker.web.js +++ b/react/features/recording/components/LiveStream/StreamKeyPicker.web.js @@ -1,19 +1,61 @@ +/* @flow */ + import { DropdownItem, DropdownItemGroup, DropdownMenuStateless } from '@atlaskit/dropdown-menu'; import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; import { translate } from '../../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link StreamKeyPicker}. + */ +type Props = { + + /** + * Broadcasts available for selection. Each broadcast item should be an + * object with a title for display in the dropdown and a boundStreamID to + * return in the {@link onBroadcastSelected} callback. + */ + broadcasts: Array, + + /** + * Callback invoked when an item in the dropdown is selected. The selected + * broadcast's boundStreamID will be passed back. + */ + onBroadcastSelected: Function, + + /** + * The boundStreamID of the broadcast that should display as selected in the + * dropdown. + */ + selectedBoundStreamID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link StreamKeyPicker}. + */ +type State = { + + /** + * Whether or not to display the dropdown menu to pick a YouTube broadcast. + */ + isDropdownOpen: boolean +}; + /** * A dropdown to select a YouTube broadcast. * * @extends Component */ -class StreamKeyPicker extends PureComponent { +class StreamKeyPicker extends PureComponent { /** * Default values for {@code StreamKeyForm} component's properties. * @@ -23,41 +65,8 @@ class StreamKeyPicker extends PureComponent { broadcasts: [] }; - /** - * {@code StreamKeyPicker} component's property types. - */ - static propTypes = { - /** - * Broadcasts available for selection. Each broadcast item should be an - * object with a title for display in the dropdown and a boundStreamID - * to return in the {@link onBroadcastSelected} callback. - */ - broadcasts: PropTypes.array, - - /** - * Callback invoked when an item in the dropdown is selected. The - * selected broadcast's boundStreamID will be passed back. - */ - onBroadcastSelected: PropTypes.func, - - /** - * The boundStreamID of the broadcast that should display as selected in - * the dropdown. - */ - selectedBoundStreamID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - /** * The initial state of a {@code StreamKeyForm} instance. - * - * @type {{ - * isDropdownOpen: boolean - * }} */ state = { isDropdownOpen: false @@ -69,7 +78,7 @@ class StreamKeyPicker extends PureComponent { * @param {Props} props - The React {@code Component} props to initialize * the new {@code StreamKeyPicker} instance with. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -139,6 +148,8 @@ class StreamKeyPicker extends PureComponent { }); } + _onDropdownOpenChange: (Object) => void; + /** * Sets the dropdown to be displayed or not based on the passed in event. * @@ -154,6 +165,8 @@ class StreamKeyPicker extends PureComponent { }); } + _onSelect: (string) => void; + /** * Callback invoked when an item has been clicked in the dropdown menu. * diff --git a/react/features/remote-control/components/RemoteControlAuthorizationDialog.js b/react/features/remote-control/components/RemoteControlAuthorizationDialog.js index 77e5b39b7..494b4a38f 100644 --- a/react/features/remote-control/components/RemoteControlAuthorizationDialog.js +++ b/react/features/remote-control/components/RemoteControlAuthorizationDialog.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -10,50 +9,46 @@ import { getParticipantById } from '../../base/participants'; declare var APP: Object; +/** + * The type of the React {@code Component} props of + * {@link RemoteControlAuthorizationDialog}. + */ +type Props = { + + /** + * The display name of the participant who is requesting authorization for + * remote desktop control session. + */ + _displayName: string, + + /** + * Used to show/hide the dialog on cancel. + */ + dispatch: Function, + + /** + * The ID of the participant who is requesting authorization for remote + * desktop control session. + */ + participantId: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a dialog for remote control authorization. */ -class RemoteControlAuthorizationDialog extends Component<*> { - /** - * RemoteControlAuthorizationDialog component's property types. - * - * @static - */ - static propTypes = { - /** - * The display name of the participant who is requesting authorization - * for remote desktop control session. - * - * @private - */ - _displayName: PropTypes.string, - - /** - * Used to show/hide the dialog on cancel. - */ - dispatch: PropTypes.func, - - /** - * The ID of the participant who is requesting authorization for remote - * desktop control session. - * - * @public - */ - participantId: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class RemoteControlAuthorizationDialog extends Component { /** * Initializes a new RemoteControlAuthorizationDialog instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this._onCancel = this._onCancel.bind(this); diff --git a/react/features/remote-video-menu/components/KickButton.js b/react/features/remote-video-menu/components/KickButton.js index f9477ff81..a661cd2f4 100644 --- a/react/features/remote-video-menu/components/KickButton.js +++ b/react/features/remote-video-menu/components/KickButton.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -11,41 +12,40 @@ import { kickParticipant } from '../../base/participants'; import RemoteVideoMenuButton from './RemoteVideoMenuButton'; +/** + * The type of the React {@code Component} state of {@link KickButton}. + */ +type Props = { + + /** + * Invoked to signal the participant with the passed in participantID + * should be removed from the conference. + */ + dispatch: Dispatch<*>, + + /** + * Callback to invoke when {@code KickButton} is clicked. + */ + onClick: Function, + + /** + * The ID of the participant linked to the onClick callback. + */ + participantID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function, +}; + /** * Implements a React {@link Component} which displays a button for kicking out * a participant from the conference. * * @extends Component */ -class KickButton extends Component { - /** - * {@code KickButton} component's property types. - * - * @static - */ - static propTypes = { - /** - * Invoked to signal the participant with the passed in participantID - * should be removed from the conference. - */ - dispatch: PropTypes.func, - - /** - * Callback to invoke when {@code KickButton} is clicked. - */ - onClick: PropTypes.func, - - /** - * The ID of the participant linked to the onClick callback. - */ - participantID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class KickButton extends Component { /** * Initializes a new {@code KickButton} instance. * @@ -77,6 +77,8 @@ class KickButton extends Component { ); } + _onClick: () => void; + /** * Remove the participant with associated participantID from the conference. * diff --git a/react/features/remote-video-menu/components/MuteButton.js b/react/features/remote-video-menu/components/MuteButton.js index 431ada860..e574b1bf5 100644 --- a/react/features/remote-video-menu/components/MuteButton.js +++ b/react/features/remote-video-menu/components/MuteButton.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -12,53 +13,52 @@ import { openDialog } from '../../base/dialog'; import RemoteVideoMenuButton from './RemoteVideoMenuButton'; import MuteRemoteParticipantDialog from './MuteRemoteParticipantDialog'; +/** + * The type of the React {@code Component} props of {@link MuteButton}. + */ +type Props = { + + /** + * Invoked to send a request for muting the participant with the passed + * in participantID. + */ + dispatch: Dispatch<*>, + + /** + * Whether or not the participant is currently audio muted. + */ + isAudioMuted: Function, + + /** + * Callback to invoke when {@code MuteButton} is clicked. + */ + onClick: Function, + + /** + * The ID of the participant linked to the onClick callback. + */ + participantID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a React {@link Component} which displays a button for audio muting * a participant in the conference. * * @extends Component */ -class MuteButton extends Component { - /** - * {@code MuteButton} component's property types. - * - * @static - */ - static propTypes = { - /** - * Invoked to send a request for muting the participant with the passed - * in participantID. - */ - dispatch: PropTypes.func, - - /** - * Whether or not the participant is currently audio muted. - */ - isAudioMuted: PropTypes.bool, - - /** - * Callback to invoke when {@code MuteButton} is clicked. - */ - onClick: PropTypes.func, - - /** - * The ID of the participant linked to the onClick callback. - */ - participantID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class MuteButton extends Component { /** * Initializes a new {@code MuteButton} instance. * * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once for every instance. @@ -91,6 +91,8 @@ class MuteButton extends Component { ); } + _onClick: () => void; + /** * Dispatches a request to mute the participant with the passed in * participantID. diff --git a/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js b/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js index a000bdcb3..4441634c1 100644 --- a/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js +++ b/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -11,43 +12,43 @@ import { } from '../../analytics'; import { muteRemoteParticipant } from '../../base/participants'; +/** + * The type of the React {@code Component} props of + * {@link MuteRemoteParticipantDialog}. + */ +type Props = { + + /** + * Invoked to send a request for muting the participant with the passed + * in participantID. + */ + dispatch: Dispatch<*>, + + /** + * The ID of the participant linked to the onClick callback. + */ + participantID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * A React Component with the contents for a dialog that asks for confirmation * from the user before muting a remote participant. * * @extends Component */ -class MuteRemoteParticipantDialog extends Component { - /** - * {@code MuteRemoteParticipantDialog} component's property types. - * - * @static - */ - static propTypes = { - /** - * Invoked to send a request for muting the participant with the passed - * in participantID. - */ - dispatch: PropTypes.func, - - /** - * The ID of the participant linked to the onClick callback. - */ - participantID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class MuteRemoteParticipantDialog extends Component { /** * Initializes a new {@code MuteRemoteParticipantDialog} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -73,6 +74,8 @@ class MuteRemoteParticipantDialog extends Component { ); } + _onSubmit: () => void; + /** * Handles the submit button action. * @@ -89,6 +92,8 @@ class MuteRemoteParticipantDialog extends Component { return true; } + _renderContent: () => React$Element<*>; + /** * Renders the content of the dialog. * diff --git a/react/features/remote-video-menu/components/RemoteControlButton.js b/react/features/remote-video-menu/components/RemoteControlButton.js index c4c834c8e..860bad001 100644 --- a/react/features/remote-video-menu/components/RemoteControlButton.js +++ b/react/features/remote-video-menu/components/RemoteControlButton.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { @@ -18,6 +19,33 @@ export const REMOTE_CONTROL_MENU_STATES = { STARTED: 3 }; +/** + * The type of the React {@code Component} props of {@link RemoteControlButton}. + */ +type Props = { + + /** + * The callback to invoke when the component is clicked. + */ + onClick: Function, + + /** + * The ID of the participant linked to the onClick callback. + */ + participantID: string, + + /** + * The current status of remote control. Should be a number listed in the + * enum REMOTE_CONTROL_MENU_STATES. + */ + remoteControlState: number, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a React {@link Component} which displays a button showing the * current state of remote control for a participant and can start or stop a @@ -25,42 +53,14 @@ export const REMOTE_CONTROL_MENU_STATES = { * * @extends Component */ -class RemoteControlButton extends Component { - /** - * {@code RemoteControlButton} component's property types. - * - * @static - */ - static propTypes = { - /** - * The callback to invoke when the component is clicked. - */ - onClick: PropTypes.func, - - /** - * The ID of the participant linked to the onClick callback. - */ - participantID: PropTypes.string, - - /** - * The current status of remote control. Should be a number listed in - * the enum REMOTE_CONTROL_MENU_STATES. - */ - remoteControlState: PropTypes.number, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class RemoteControlButton extends Component { /** * Initializes a new {@code RemoteControlButton} instance. * * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once for every instance. @@ -112,6 +112,8 @@ class RemoteControlButton extends Component { ); } + _onClick: () => void; + /** * Sends analytics event for pressing the button and executes the passed * onClick handler. diff --git a/react/features/remote-video-menu/components/RemoteVideoMenu.js b/react/features/remote-video-menu/components/RemoteVideoMenu.js index 236a50d8c..ff23183cc 100644 --- a/react/features/remote-video-menu/components/RemoteVideoMenu.js +++ b/react/features/remote-video-menu/components/RemoteVideoMenu.js @@ -1,31 +1,31 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of {@link RemoteVideoMenu}. + */ +type Props = { + + /** + * The components to place as the body of the {@code RemoteVideoMenu}. + */ + children: React$Node, + + /** + * The id attribute to be added to the component's DOM for retrieval when + * querying the DOM. Not used directly by the component. + */ + id: string +}; + /** * React {@code Component} responsible for displaying other components as a menu * for manipulating remote participant state. * * @extends {Component} */ -export default class RemoteVideoMenu extends Component { - /** - * {@code RemoteVideoMenu}'s property types. - * - * @static - */ - static propTypes = { - /** - * The components to place as the body of the {@code RemoteVideoMenu}. - */ - children: PropTypes.node, - - /** - * The id attribute to be added to the component's DOM for retrieval - * when querying the DOM. Not used directly by the component. - */ - id: PropTypes.string - }; - +export default class RemoteVideoMenu extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/remote-video-menu/components/RemoteVideoMenuButton.js b/react/features/remote-video-menu/components/RemoteVideoMenuButton.js index c0ac21e61..d1b89a537 100644 --- a/react/features/remote-video-menu/components/RemoteVideoMenuButton.js +++ b/react/features/remote-video-menu/components/RemoteVideoMenuButton.js @@ -1,46 +1,46 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link RemoteVideoMenuButton}. + */ +type Props = { + + /** + * Text to display within the component that describes the onClick action. + */ + buttonText: string, + + /** + * Additional CSS classes to add to the component. + */ + displayClass?: string, + + /** + * The CSS classes for the icon that will display within the component. + */ + iconClass: string, + + /** + * The id attribute to be added to the component's DOM for retrieval when + * querying the DOM. Not used directly by the component. + */ + id: string, + + /** + * Callback to invoke when the component is clicked. + */ + onClick: Function, +}; + /** * React {@code Component} for displaying an action in {@code RemoteVideoMenu}. * * @extends {Component} */ -export default class RemoteVideoMenuButton extends Component { - /** - * {@code RemoteVideoMenuButton}'s property types. - * - * @static - */ - static propTypes = { - /** - * Text to display within the component that describes the onClick - * action. - */ - buttonText: PropTypes.string, - - /** - * Additional CSS classes to add to the component. - */ - displayClass: PropTypes.string, - - /** - * The CSS classes for the icon that will display within the component. - */ - iconClass: PropTypes.string, - - /** - * The id attribute to be added to the component's DOM for retrieval - * when querying the DOM. Not used directly by the component. - */ - id: PropTypes.string, - - /** - * Callback to invoke when the component is clicked. - */ - onClick: PropTypes.func - }; - +export default class RemoteVideoMenuButton extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/remote-video-menu/components/VolumeSlider.js b/react/features/remote-video-menu/components/VolumeSlider.js index c03ce4cc1..75c562a83 100644 --- a/react/features/remote-video-menu/components/VolumeSlider.js +++ b/react/features/remote-video-menu/components/VolumeSlider.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; /** @@ -8,48 +9,53 @@ import React, { Component } from 'react'; */ const VOLUME_SLIDER_SCALE = 100; +/** + * The type of the React {@code Component} props of {@link VolumeSlider}. + */ +type Props = { + + /** + * The value of the audio slider should display at when the component first + * mounts. Changes will be stored in state. The value should be a number + * between 0 and 1. + */ + initialValue: number, + + /** + * The callback to invoke when the audio slider value changes. + */ + onChange: Function +}; + +/** + * The type of the React {@code Component} state of {@link VolumeSlider}. + */ +type State = { + + /** + * The volume of the participant's audio element. The value will + * be represented by a slider. + */ + volumeLevel: number +}; + /** * Implements a React {@link Component} which displays an input slider for * adjusting the local volume of a remote participant. * * @extends Component */ -class VolumeSlider extends Component { - /** - * {@code VolumeSlider} component's property types. - * - * @static - */ - static propTypes = { - /** - * The value of the audio slider should display at when the component - * first mounts. Changes will be stored in state. The value should be a - * number between 0 and 1. - */ - initialValue: PropTypes.number, - - /** - * The callback to invoke when the audio slider value changes. - */ - onChange: PropTypes.func - }; - +class VolumeSlider extends Component { /** * Initializes a new {@code VolumeSlider} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * The volume of the participant's audio element. The value will - * be represented by a slider. - * - * @type {Number} - */ volumeLevel: (props.initialValue || 0) * VOLUME_SLIDER_SCALE }; @@ -84,6 +90,8 @@ class VolumeSlider extends Component { ); } + _onVolumeChange: (Object) => void; + /** * Sets the internal state of the volume level for the volume slider. * Invokes the prop onVolumeChange to notify of volume changes. diff --git a/react/features/room-lock/components/PasswordRequiredPrompt.native.js b/react/features/room-lock/components/PasswordRequiredPrompt.native.js index ffe8df3fd..76f9d7334 100644 --- a/react/features/room-lock/components/PasswordRequiredPrompt.native.js +++ b/react/features/room-lock/components/PasswordRequiredPrompt.native.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -9,6 +8,15 @@ import { Dialog } from '../../base/dialog'; import { _cancelPasswordRequiredPrompt } from '../actions'; +/** + * The style of the {@link TextInput} rendered by + * {@code PasswordRequiredPrompt}. As it requests the entry of a password, the + * entry should better be secure. + */ +const _TEXT_INPUT_PROPS = { + secureTextEntry: true +}; + /** * {@code PasswordRequiredPrompt}'s React {@code Component} prop types. */ @@ -20,16 +28,11 @@ type Props = { * @type {JitsiConference} */ conference: { join: Function }, - dispatch: Dispatch<*> -}; -/** - * The style of the {@link TextInput} rendered by - * {@code PasswordRequiredPrompt}. As it requests the entry of a password, the - * entry should better be secure. - */ -const _TEXT_INPUT_PROPS = { - secureTextEntry: true + /** + * The redux dispatch function. + */ + dispatch: Dispatch<*> }; /** @@ -37,16 +40,6 @@ const _TEXT_INPUT_PROPS = { * is required to join a conference. */ class PasswordRequiredPrompt extends Component { - /** - * {@code PasswordRequiredPrompt}'s React {@code Component} prop types. - * - * @static - */ - static propTypes = { - conference: PropTypes.object, - dispatch: PropTypes.func - }; - /** * Initializes a new {@code PasswordRequiredPrompt} instance. * diff --git a/react/features/room-lock/components/PasswordRequiredPrompt.web.js b/react/features/room-lock/components/PasswordRequiredPrompt.web.js index 407b2a7cf..21aff4c1c 100644 --- a/react/features/room-lock/components/PasswordRequiredPrompt.web.js +++ b/react/features/room-lock/components/PasswordRequiredPrompt.web.js @@ -1,5 +1,5 @@ // @flow -import PropTypes from 'prop-types'; + import React, { Component } from 'react'; import { connect } from 'react-redux'; import { FieldTextStateless as TextField } from '@atlaskit/field-text'; @@ -8,27 +8,45 @@ import { setPassword } from '../../base/conference'; import { Dialog } from '../../base/dialog'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of + * {@link PasswordRequiredPrompt}. + */ +type Props = { + + /** + * The JitsiConference which requires a password. + */ + conference: Object, + + /** + * The redux store's {@code dispatch} function. + */ + dispatch: Dispatch<*>, + + /** + * The translate function. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of + * {@link PasswordRequiredPrompt}. + */ +type State = { + + /** + * The password entered by the local participant. + */ + password: string +} + /** * Implements a React Component which prompts the user when a password is * required to join a conference. */ -class PasswordRequiredPrompt extends Component<*, *> { - /** - * PasswordRequiredPrompt component's property types. - * - * @static - */ - static propTypes = { - /** - * The JitsiConference which requires a password. - * - * @type {JitsiConference} - */ - conference: PropTypes.object, - dispatch: PropTypes.func, - t: PropTypes.func - }; - +class PasswordRequiredPrompt extends Component { state = { password: '' }; @@ -39,7 +57,7 @@ class PasswordRequiredPrompt extends Component<*, *> { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. diff --git a/react/features/room-lock/components/RoomLockPrompt.native.js b/react/features/room-lock/components/RoomLockPrompt.native.js index 42bd7d051..7b54ffa50 100644 --- a/react/features/room-lock/components/RoomLockPrompt.native.js +++ b/react/features/room-lock/components/RoomLockPrompt.native.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -18,26 +17,27 @@ const _TEXT_INPUT_PROPS = { autoCorrect: false }; +/** + * The type of the React {@code Component} props of {@link RoomLockPrompt}. + */ +type Props = { + + /** + * The JitsiConference which requires a password. + */ + conference: Object, + + /** + * Redux store dispatch function. + */ + dispatch: Dispatch<*>, +}; + /** * Implements a React Component which prompts the user for a password to lock a * conference/room. */ -class RoomLockPrompt extends Component<*> { - /** - * RoomLockPrompt component's property types. - * - * @static - */ - static propTypes = { - /** - * The JitsiConference which requires a password. - * - * @type {JitsiConference} - */ - conference: PropTypes.object, - dispatch: PropTypes.func - }; - +class RoomLockPrompt extends Component { /** * Initializes a new RoomLockPrompt instance. * diff --git a/react/features/speaker-stats/components/SpeakerStats.js b/react/features/speaker-stats/components/SpeakerStats.js index e5a36d2a3..c191f56ce 100644 --- a/react/features/speaker-stats/components/SpeakerStats.js +++ b/react/features/speaker-stats/components/SpeakerStats.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -12,35 +11,44 @@ import SpeakerStatsLabels from './SpeakerStatsLabels'; declare var interfaceConfig: Object; +/** + * The type of the React {@code Component} props of {@link SpeakerStats} + */ +type Props = { + + /** + * The display name for the local participant obtained from the redux store. + */ + _localDisplayName: string, + + /** + * The JitsiConference from which stats will be pulled. + */ + conference: Object, + + /** + * The function to translate human-readable text. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link SpeakerStats} + */ +type State = { + + /** + * The stats summary provided by the JitsiConference. + */ + stats: Object +}; + /** * React component for displaying a list of speaker stats. * * @extends Component */ -class SpeakerStats extends Component<*, *> { - /** - * SpeakerStats component's property types. - * - * @static - */ - static propTypes = { - /** - * The display name for the local participant obtained from the redux - * store. - */ - _localDisplayName: PropTypes.string, - - /** - * The JitsiConference from which stats will be pulled. - */ - conference: PropTypes.object, - - /** - * The function to translate human-readable text. - */ - t: PropTypes.func - }; - +class SpeakerStats extends Component { state = { stats: {} }; diff --git a/react/features/speaker-stats/components/SpeakerStatsItem.js b/react/features/speaker-stats/components/SpeakerStatsItem.js index 5f94ab87f..c00ae615a 100644 --- a/react/features/speaker-stats/components/SpeakerStatsItem.js +++ b/react/features/speaker-stats/components/SpeakerStatsItem.js @@ -1,41 +1,41 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import TimeElapsed from './TimeElapsed'; +/** + * The type of the React {@code Component} props of {@link SpeakerStatsItem}. + */ +type Props = { + + /** + * The name of the participant. + */ + displayName: string, + + /** + * The total milliseconds the participant has been dominant speaker. + */ + dominantSpeakerTime: number, + + /** + * True if the participant is no longer in the meeting. + */ + hasLeft: boolean, + + /** + * True if the participant is currently the dominant speaker. + */ + isDominantSpeaker: boolean +}; + /** * React component for display an individual user's speaker stats. * * @extends Component */ -class SpeakerStatsItem extends Component { - /** - * SpeakerStatsItem component's property types. - * - * @static - */ - static propTypes = { - /** - * The name of the participant. - */ - displayName: PropTypes.string, - - /** - * The total milliseconds the participant has been dominant speaker. - */ - dominantSpeakerTime: PropTypes.number, - - /** - * True if the participant is no longer in the meeting. - */ - hasLeft: PropTypes.bool, - - /** - * True if the participant is currently the dominant speaker. - */ - isDominantSpeaker: PropTypes.bool - }; - +class SpeakerStatsItem extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/speaker-stats/components/SpeakerStatsLabels.js b/react/features/speaker-stats/components/SpeakerStatsLabels.js index b63b123c5..3e2e467b6 100644 --- a/react/features/speaker-stats/components/SpeakerStatsLabels.js +++ b/react/features/speaker-stats/components/SpeakerStatsLabels.js @@ -1,26 +1,26 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link SpeakerStatsLabels}. + */ +type Props = { + + /** + * The function to translate human-readable text. + */ + t: Function +}; + /** * React component for labeling speaker stats column items. * * @extends Component */ -class SpeakerStatsLabels extends Component { - /** - * SpeakerStatsLabels component's property types. - * - * @static - */ - static propTypes = { - /** - * The function to translate human-readable text. - */ - t: PropTypes.func - }; - +class SpeakerStatsLabels extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/speaker-stats/components/TimeElapsed.js b/react/features/speaker-stats/components/TimeElapsed.js index 674a868f7..44a439a10 100644 --- a/react/features/speaker-stats/components/TimeElapsed.js +++ b/react/features/speaker-stats/components/TimeElapsed.js @@ -1,8 +1,25 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link TimeElapsed}. + */ +type Props = { + + /** + * The function to translate human-readable text. + */ + t: Function, + + /** + * The milliseconds to be converted into a human-readable format. + */ + time: number +}; + /** * React component for displaying total time elapsed. Converts a total count of * milliseconds into a more humanized form: "# hours, # minutes, # seconds". @@ -10,24 +27,7 @@ import { translate } from '../../base/i18n'; * * @extends Component */ -class TimeElapsed extends Component { - /** - * TimeElapsed component's property types. - * - * @static - */ - static propTypes = { - /** - * The function to translate human-readable text. - */ - t: PropTypes.func, - - /** - * The milliseconds to be converted into a human-readable format. - */ - time: PropTypes.number - }; - +class TimeElapsed extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/toolbox/components/AbstractToolbarButton.js b/react/features/toolbox/components/AbstractToolbarButton.js index 32e0bc834..9bad27975 100644 --- a/react/features/toolbox/components/AbstractToolbarButton.js +++ b/react/features/toolbox/components/AbstractToolbarButton.js @@ -1,67 +1,66 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link AbstractToolbarButton}. + */ +export type Props = { + + /** + * A succinct description of what the button does. Used by accessibility + * tools and torture tests. + */ + accessibilityLabel: string, + + /** + * The name of the Icon of this {@code AbstractToolbarButton}. + */ + iconName: string, + + /** + * The style of the Icon of this {@code AbstractToolbarButton}. + */ + iconStyle?: Object, + + /** + * On click handler. + */ + onClick: Function, + + /** + * {@code AbstractToolbarButton} styles. + */ + style?: Array | Object, + + /** + * The color underlaying the button. + */ + underlayColor?: any +}; + /** * Abstract (base) class for a button in {@link Toolbar}. * * @abstract */ -export default class AbstractToolbarButton extends Component { - /** - * AbstractToolbarButton component's property types. - * - * @static - */ - static propTypes = { - /** - * A succinct description of what the button does. Used by accessibility - * tools and torture tests. - */ - accessibilityLabel: PropTypes.string, - - /** - * The name of the Icon of this {@code AbstractToolbarButton}. - */ - iconName: PropTypes.string, - - /** - * The style of the Icon of this {@code AbstractToolbarButton}. - */ - iconStyle: PropTypes.object, - - /** - * On click handler. - */ - onClick: PropTypes.func, - - /** - * {@code AbstractToolbarButton} styles. - */ - style: - PropTypes.oneOfType([ - PropTypes.array, - PropTypes.object - ]), - - /** - * The color underlaying the button. - */ - underlayColor: PropTypes.any - }; - +export default class AbstractToolbarButton extends Component

{ /** * Initializes a new {@code AbstractToolbarButton} instance. * * @param {Object} props - The React {@code Component} props to initialize * the new {@code AbstractToolbarButton} instance with. */ - constructor(props) { + constructor(props: P) { super(props); // Bind event handlers so they are only bound once per instance. this._onClick = this._onClick.bind(this); } + _onClick: (any) => any; + /** * Handles clicking/pressing this {@code AbstractToolbarButton} by * forwarding the event to the {@code onClick} prop of this instance if any. @@ -86,15 +85,22 @@ export default class AbstractToolbarButton extends Component { return this._renderButton(this._renderIcon()); } + _renderButton: (React$Element<*> | null) => React$Element<*>; + /** * Renders the icon of this {@code AbstractToolbarButton}. * * @param {string|ReactClass} type - The React Component type of the icon to * be rendered. * @protected - * @returns {ReactElement} The icon of this {@code AbstractToolbarButton}. + * @returns {ReactElement|null} The icon of this + * {@code AbstractToolbarButton}. */ _renderIcon(type) { + if (!type) { + return null; + } + const props = {}; 'iconName' in this.props && (props.name = this.props.iconName); diff --git a/react/features/toolbox/components/web/OverflowMenuButton.js b/react/features/toolbox/components/web/OverflowMenuButton.js index 37759be0b..98401da93 100644 --- a/react/features/toolbox/components/web/OverflowMenuButton.js +++ b/react/features/toolbox/components/web/OverflowMenuButton.js @@ -1,5 +1,6 @@ +/* @flow */ + import InlineDialog from '@atlaskit/inline-dialog'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { createToolbarEvent, sendAnalytics } from '../../../analytics'; @@ -7,46 +8,45 @@ import { translate } from '../../../base/i18n'; import ToolbarButton from './ToolbarButton'; +/** + * The type of the React {@code Component} props of {@link OverflowMenuButton}. + */ +type Props = { + + /** + * A child React Element to display within {@code InlineDialog}. + */ + children: React$Node, + + /** + * Whether or not the OverflowMenu popover should display. + */ + isOpen: boolean, + + /** + * Calback to change the visibility of the overflow menu. + */ + onVisibilityChange: Function, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * A React {@code Component} for opening or closing the {@code OverflowMenu}. * * @extends Component */ -class OverflowMenuButton extends Component { - /** - * {@code OverflowMenuButton} component's property types. - * - * @static - */ - static propTypes = { - /** - * A child React Element to display within {@code InlineDialog}. - */ - children: PropTypes.object, - - /** - * Whether or not the OverflowMenu popover should display. - */ - isOpen: PropTypes.bool, - - /** - * Calback to change the visiblility of the overflow menu. - */ - onVisibilityChange: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class OverflowMenuButton extends Component { /** * Initializes a new {@code OverflowMenuButton} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -83,6 +83,8 @@ class OverflowMenuButton extends Component { ); } + _onCloseDialog: () => void; + /** * Callback invoked when {@code InlineDialog} signals that it should be * close. @@ -94,6 +96,8 @@ class OverflowMenuButton extends Component { this.props.onVisibilityChange(false); } + _onToggleDialogVisibility: () => void; + /** * Callback invoked to signal that an event has occurred that should change * the visibility of the {@code InlineDialog} component. diff --git a/react/features/toolbox/components/web/OverflowMenuProfileItem.js b/react/features/toolbox/components/web/OverflowMenuProfileItem.js index 3d586108c..93e9b5f92 100644 --- a/react/features/toolbox/components/web/OverflowMenuProfileItem.js +++ b/react/features/toolbox/components/web/OverflowMenuProfileItem.js @@ -1,6 +1,5 @@ -/* globals interfaceConfig */ +/* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -10,43 +9,45 @@ import { getLocalParticipant } from '../../../base/participants'; +declare var interfaceConfig: Object; + +/** + * The type of the React {@code Component} props of + * {@link OverflowMenuProfileItem}. + */ +type Props = { + + /** + * The redux representation of the local participant. + */ + _localParticipant: Object, + + /** + * Whether the button support clicking or not. + */ + _unclickable: boolean, + + /** + * The callback to invoke when {@code OverflowMenuProfileItem} is + * clicked. + */ + onClick: Function +}; + /** * A React {@code Component} for displaying a link with a profile avatar as an * icon. * * @extends Component */ -class OverflowMenuProfileItem extends Component { - /** - * {@code OverflowMenuProfileItem}'s property types. - * - * @static - */ - static propTypes = { - /** - * The redux representation of the local participant. - */ - _localParticipant: PropTypes.object, - - /** - * Whether the button support clicking or not. - */ - _unclickable: PropTypes.bool, - - /** - * The callback to invoke when {@code OverflowMenuProfileItem} is - * clicked. - */ - onClick: PropTypes.func - }; - +class OverflowMenuProfileItem extends Component { /** * Initializes a new {@code OverflowMenuProfileItem} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handler so it is only bound once for every instance. @@ -87,6 +88,8 @@ class OverflowMenuProfileItem extends Component { ); } + _onClick: () => void; + /** * Invokes an on click callback if clicking is allowed. * diff --git a/react/features/toolbox/components/web/ToolbarButton.js b/react/features/toolbox/components/web/ToolbarButton.js index 9c4d8ee49..724cd5fd2 100644 --- a/react/features/toolbox/components/web/ToolbarButton.js +++ b/react/features/toolbox/components/web/ToolbarButton.js @@ -1,15 +1,35 @@ +/* @flow */ + import Tooltip from '@atlaskit/tooltip'; -import PropTypes from 'prop-types'; import React from 'react'; import AbstractToolbarButton from '../AbstractToolbarButton'; +import type { Props as AbstractToolbarButtonProps } + from '../AbstractToolbarButton'; + +/** + * The type of the React {@code Component} props of {@link ToolbarButton}. + */ +type Props = AbstractToolbarButtonProps & { + + /** + * The text to display in the tooltip. + */ + tooltip: string, + + /** + * From which direction the tooltip should appear, relative to the + * button. + */ + tooltipPosition: string +}; /** * Represents a button in the toolbar. * * @extends AbstractToolbarButton */ -class ToolbarButton extends AbstractToolbarButton { +class ToolbarButton extends AbstractToolbarButton { /** * Default values for {@code ToolbarButton} component's properties. * @@ -19,26 +39,6 @@ class ToolbarButton extends AbstractToolbarButton { tooltipPosition: 'top' }; - /** - * {@code ToolbarButton} component's property types. - * - * @static - */ - static propTypes = { - ...AbstractToolbarButton.propTypes, - - /** - * The text to display in the tooltip. - */ - tooltip: PropTypes.string, - - /** - * From which direction the tooltip should appear, relative to the - * button. - */ - tooltipPosition: PropTypes.string - } - /** * Renders the button of this {@code ToolbarButton}. * diff --git a/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js b/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js index c051c4ad4..af1e26022 100644 --- a/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js +++ b/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js @@ -1,6 +1,5 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../base/i18n'; @@ -16,27 +15,24 @@ import { CHROME, EDGE, FIREFOX, SAFARI } from './browserLinks'; */ const _SNS = 'unsupported-desktop-browser'; +/** + * The type of the React {@code Component} props of + * {@link UnsupportedDesktopBrowser}. + */ +type Props = { + + /** + * The function to translate human-readable text. + */ + t: Function +}; + /** * React component representing unsupported browser page. * * @class UnsupportedDesktopBrowser */ -class UnsupportedDesktopBrowser extends Component<*> { - /** - * UnsupportedDesktopBrowser component's property types. - * - * @static - */ - static propTypes = { - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func - }; - +class UnsupportedDesktopBrowser extends Component { /** * Renders the component. * diff --git a/react/features/video-quality/components/VideoQualitySlider.web.js b/react/features/video-quality/components/VideoQualitySlider.web.js index bec9cd84a..c3e180089 100644 --- a/react/features/video-quality/components/VideoQualitySlider.web.js +++ b/react/features/video-quality/components/VideoQualitySlider.web.js @@ -1,5 +1,6 @@ +/* @flow */ + import InlineMessage from '@atlaskit/inline-message'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -39,51 +40,52 @@ const createEvent = function(quality) { }); }; +/** + * The type of the React {@code Component} props of {@link VideoQualitySlider}. + */ +type Props = { + + /** + * Whether or not the conference is in audio only mode. + */ + _audioOnly: Boolean, + + /** + * Whether or not the conference is in peer to peer mode. + */ + _p2p: Boolean, + + /** + * The currently configured maximum quality resolution to be received + * from remote participants. + */ + _receiverVideoQuality: Number, + + /** + * Whether or not displaying video is supported in the current + * environment. If false, the slider will be disabled. + */ + _videoSupported: Boolean, + + /** + * Invoked to request toggling of audio only mode. + */ + dispatch: Dispatch<*>, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a React {@link Component} which displays a slider for selecting a * new receive video quality. * * @extends Component */ -class VideoQualitySlider extends Component { - /** - * {@code VideoQualitySlider}'s property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not the conference is in audio only mode. - */ - _audioOnly: PropTypes.bool, - - /** - * Whether or not the conference is in peer to peer mode. - */ - _p2p: PropTypes.bool, - - /** - * The currently configured maximum quality resolution to be received - * from remote participants. - */ - _receiverVideoQuality: PropTypes.number, - - /** - * Whether or not displaying video is supported in the current - * environment. If false, the slider will be disabled. - */ - _videoSupported: PropTypes.bool, - - /** - * Invoked to request toggling of audio only mode. - */ - dispatch: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; +class VideoQualitySlider extends Component { + _sliderOptions: Array; /** * Initializes a new {@code VideoQualitySlider} instance. @@ -261,6 +263,8 @@ class VideoQualitySlider extends Component { }); } + _enableAudioOnly: () => void; + /** * Dispatches an action to enable audio only mode. * @@ -273,6 +277,8 @@ class VideoQualitySlider extends Component { this.props.dispatch(setAudioOnly(true)); } + _enableHighDefinition: () => void; + /** * Handles the action of the high definition video being selected. * Dispatches an action to receive high quality video from remote @@ -287,6 +293,8 @@ class VideoQualitySlider extends Component { this._setPreferredVideoQuality(HIGH); } + _enableLowDefinition: () => void; + /** * Dispatches an action to receive low quality video from remote * participants. @@ -300,6 +308,8 @@ class VideoQualitySlider extends Component { this._setPreferredVideoQuality(LOW); } + _enableStandardDefinition: () => void; + /** * Dispatches an action to receive standard quality video from remote * participants. @@ -337,6 +347,8 @@ class VideoQualitySlider extends Component { return _sliderOptions.indexOf(matchingOption); } + _onSliderChange: () => void; + /** * Invokes a callback when the selected video quality changes. * diff --git a/react/features/welcome/components/LocalVideoTrackUnderlay.native.js b/react/features/welcome/components/LocalVideoTrackUnderlay.native.js index 84b54fe66..17471cd06 100644 --- a/react/features/welcome/components/LocalVideoTrackUnderlay.native.js +++ b/react/features/welcome/components/LocalVideoTrackUnderlay.native.js @@ -1,6 +1,5 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { View } from 'react-native'; import { connect } from 'react-redux'; @@ -11,31 +10,47 @@ import { getLocalVideoTrack } from '../../base/tracks'; import styles from './styles'; +/** + * The type of the React {@code Component} props of + * {@link LocalVideoTrackUnderlay}. + */ +type Props = { + + /** + * The redux representation of the local participant's video track. + */ + _localVideoTrack: Object, + + /** + * React Elements to display within the component. + */ + children: React$Node, + + /** + * The style, if any, to apply to {@link LocalVideoTrackUnderlay} in + * addition to its default style. + */ + style: Object +}; + +/** + * The type of the React {@code Component} state of + * {@link LocalVideoTrackUnderlay}. + */ +type State = { + + /** + * The style of {@code LocalVideoTrackUnderlay} which is a combination + * of its default style and the consumer-specified style. + */ + style: Object +}; + /** * Implements a React {@code Component} which underlays the local video track, * if any, underneath its children. */ -class LocalVideoTrackUnderlay extends Component<*, *> { - state: { - - /** - * The style of {@code LocalVideoTrackUnderlay} which is a combination - * of its default style and the consumer-specified style. - */ - style: Object - }; - - /** - * {@code LocalVideoTrackUnderlay}'s React {@code Component} prop types. - * - * @static - */ - static propTypes = { - _localVideoTrack: PropTypes.object, - children: PropTypes.node, - style: PropTypes.object - }; - +class LocalVideoTrackUnderlay extends Component { /** * Initializes a new {@code LocalVideoTrackUnderlay} instance. *