ref: define state and property types

react/features/always-on-top/AlwaysOnTop.js

@@ -53,13 +53,24 @@ const toolbarButtons = {
     }
 };
 
+/**
+ * Defines the state for <tt>AlwaysOnTop</tt> component.
+ */
+type AlwaysOnTopState = {
+    visible: boolean,
+    audioMuted: boolean,
+    videoMuted: boolean,
+    audioAvailable: boolean,
+    videoAvailable: boolean
+}
+
 /**
  * Represents the always on top page.
  *
  * @class AlwaysOnTop
  * @extends Component
  */
-export default class AlwaysOnTop extends Component<*> {
+export default class AlwaysOnTop extends Component<*, AlwaysOnTopState> {
     /**
      * Initializes new AlwaysOnTop instance.
      *

react/features/authentication/components/WaitForOwnerDialog.native.js

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Text } from 'react-native';
 import { connect } from 'react-redux';
@@ -11,35 +10,34 @@ import { translate } from '../../base/i18n';
 import { cancelWaitForOwner, _openLoginDialog } from '../actions';
 import styles from './styles';
 
+/**
+ * WaitForOwnerDialog component's property types.
+ */
+type WaitForOwnerDialogPropTypes = {
+
+    /**
+     * The name of the conference room (without the domain part).
+     */
+    _room: String,
+
+    /**
+     * Redux store dispatch function.
+     */
+    dispatch: Dispatch<*>,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
 /**
  * The dialog is display in XMPP password + guest access configuration, after
  * user connects from anonymous domain and the conference does not exist yet.
  *
  * See {@link LoginDialog} description for more details.
  */
-class WaitForOwnerDialog extends Component<*> {
-    /**
-     * WaitForOwnerDialog component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * The name of the conference room (without the domain part).
-         */
-        _room: PropTypes.string,
-
-        /**
-         * Redux store dispatch function.
-         */
-        dispatch: PropTypes.func,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
+class WaitForOwnerDialog extends Component<WaitForOwnerDialogPropTypes> {
     /**
      * Initializes a new WaitForWonderDialog instance.
      *

react/features/base/dialog/components/AbstractDialog.js

@@ -1,38 +1,44 @@
 // @flow
 
-import PropTypes from 'prop-types';
-import { Component } from 'react';
+import * as React from 'react';
 
 import { hideDialog } from '../actions';
-import { DIALOG_PROP_TYPES } from '../constants';
+import { DialogPropTypes } from '../constants';
 
 /**
- * An abstract implementation of a dialog on Web/React and mobile/react-native.
+ * Defines the property types for AbstractDialog.
  */
-export default class AbstractDialog extends Component<*, *> {
+export type AbstractDialogPropTypes = {
+    ...DialogPropTypes,
+
     /**
-     * {@code AbstractDialog} React {@code Component}'s prop types.
-     *
-     * @static
+     * The React {@code Component} children of {@code AbstractDialog}
+     * which represents the dialog's body.
      */
-    static propTypes = {
-        ...DIALOG_PROP_TYPES,
-
-        /**
-         * The React {@code Component} children of {@code AbstractDialog}
-         * which represents the dialog's body.
-         */
-        children: PropTypes.node,
-
-        /**
-         * Used to show/hide the dialog on cancel.
-         */
-        dispatch: PropTypes.func
-    };
+    children: React.Node,
+
+    /**
+     * Used to show/hide the dialog on cancel.
+     */
+    dispatch: Dispatch<*>
+}
 
+/**
+ * Defines the state for AbstractDialog.
+ */
+type AbstractDialogState = {
+    submitting: boolean
+}
+
+/**
+ * An abstract implementation of a dialog on Web/React and mobile/react-native.
+ */
+export default class AbstractDialog
+    extends React.Component<AbstractDialogPropTypes, AbstractDialogState> {
     _mounted: boolean;
 
     state = {
+        submitting: false
     };
 
     /**

react/features/base/dialog/components/Dialog.native.js

@@ -1,6 +1,3 @@
-// @flow
-
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Modal, StyleSheet, TextInput } from 'react-native';
 import Prompt from 'react-native-prompt';
@@ -10,7 +7,7 @@ import { translate } from '../../i18n';
 import { LoadingIndicator } from '../../react';
 import { set } from '../../redux';
 
-import AbstractDialog from './AbstractDialog';
+import AbstractDialog, { AbstractDialogPropTypes } from './AbstractDialog';
 import { dialog as styles } from './styles';
 
 /**
@@ -30,33 +27,38 @@ const _SUBMIT_TEXT_TAG_VALUE = '_SUBMIT_TEXT_TAG_VALUE';
 const _TAG_KEY = '_TAG_KEY';
 
 /**
- * Implements {@code AbstractDialog} on react-native using {@code Prompt}.
+ * {@code Dialog}'s React {@code Component} prop types.
  */
-class Dialog extends AbstractDialog {
+type DialogPropTypes = {
+    ...AbstractDialogPropTypes,
+
     /**
-     * {@code AbstractDialog}'s React {@code Component} prop types.
-     *
-     * @static
+     * I18n key to put as body title.
      */
-    static propTypes = {
-        ...AbstractDialog.propTypes,
+    bodyKey: String
+}
 
-        /**
-         * I18n key to put as body title.
-         */
-        bodyKey: PropTypes.string
-    };
+/**
+ * Defines {@code Dialog}'s state.
+ */
+type DialogState = {
+
+    /**
+     * The text of the {@link TextInput} rendered by {@link Prompt} in
+     * general and by this {@code Dialog} in particular if no
+     * {@code children} are specified to it. It mimics/reimplements the
+     * functionality of {@code Prompt} because this {@code Dialog} does not
+     * really render the (whole) {@code Prompt}.
+     */
+    text: String
+}
+
+/**
+ * Implements {@code AbstractDialog} on react-native using {@code Prompt}.
+ */
+class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
 
     state = {
-        /**
-         * The text of the {@link TextInput} rendered by {@link Prompt} in
-         * general and by this {@code Dialog} in particular if no
-         * {@code children} are specified to it. It mimics/reimplements the
-         * functionality of {@code Prompt} because this {@code Dialog} does not
-         * really render the (whole) {@code Prompt}.
-         *
-         * @type {string}
-         */
         text: ''
     };
 

react/features/base/dialog/components/Dialog.web.js

@@ -1,43 +1,40 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import AbstractDialog from './AbstractDialog';
+import AbstractDialog, { AbstractDialogPropTypes } from './AbstractDialog';
 import StatelessDialog from './StatelessDialog';
 
 /**
- * Web dialog that uses atlaskit modal-dialog to display dialogs.
+ * Web dialog component's property types.
  */
-class Dialog extends AbstractDialog {
+type DialogPropTypes = {
+    ...AbstractDialogPropTypes,
+
     /**
-     * Web dialog component's property types.
-     *
-     * @static
+     * Whether the dialog is modal. This means clicking on the blanket will
+     * leave the dialog open. No cancel button.
      */
-    static propTypes = {
-        ...AbstractDialog.propTypes,
+    isModal: boolean,
 
-        /**
-         * Whether the dialog is modal. This means clicking on the blanket will
-         * leave the dialog open. No cancel button.
-         */
-        isModal: PropTypes.bool,
-
-        /**
-         * Disables rendering of the submit button.
-         */
-        submitDisabled: PropTypes.bool,
+    /**
+     * Disables rendering of the submit button.
+     */
+    submitDisabled: boolean,
 
-        /**
-         * Width of the dialog, can be:
-         * - 'small' (400px), 'medium' (600px), 'large' (800px),
-         * 'x-large' (968px)
-         * - integer value for pixel width
-         * - string value for percentage
-         */
-        width: PropTypes.string
-    };
+    /**
+     * Width of the dialog, can be:
+     * - 'small' (400px), 'medium' (600px), 'large' (800px),
+     * 'x-large' (968px)
+     * - integer value for pixel width
+     * - string value for percentage
+     */
+    width: String
+}
 
+/**
+ * Web dialog that uses atlaskit modal-dialog to display dialogs.
+ */
+class Dialog extends AbstractDialog<DialogPropTypes> {
     /**
      * Initializes a new Dialog instance.
      *

react/features/base/dialog/constants.js

@@ -1,50 +1,50 @@
-import PropTypes from 'prop-types';
 
-export const DIALOG_PROP_TYPES = {
+export type DialogPropTypes = {
+
     /**
      * Whether cancel button is disabled. Enabled by default.
      */
-    cancelDisabled: PropTypes.bool,
+    cancelDisabled: boolean,
 
     /**
      * Optional i18n key to change the cancel button title.
      */
-    cancelTitleKey: PropTypes.string,
+    cancelTitleKey: String,
 
     /**
      * Is ok button enabled/disabled. Enabled by default.
      */
-    okDisabled: PropTypes.bool,
+    okDisabled: boolean,
 
     /**
      * Optional i18n key to change the ok button title.
      */
-    okTitleKey: PropTypes.string,
+    okTitleKey: String,
 
     /**
      * The handler for onCancel event.
      */
-    onCancel: PropTypes.func,
+    onCancel: Function,
 
     /**
      * The handler for the event when submitting the dialog.
      */
-    onSubmit: PropTypes.func,
+    onSubmit: Function,
 
     /**
      * Used to obtain translations in children classes.
      */
-    t: PropTypes.func,
+    t: Function,
 
     /**
      * Key to use for showing a title.
      */
-    titleKey: PropTypes.string,
+    titleKey: String,
 
     /**
      * The string to use as a title instead of {@code titleKey}. If a truthy
      * value is specified, it takes precedence over {@code titleKey} i.e.
      * the latter is unused.
      */
-    titleString: PropTypes.string
+    titleString: String
 };

react/features/conference/components/Conference.native.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 // eslint-disable-next-line react-native/split-platform-components
@@ -26,66 +25,67 @@ import styles from './styles';
 const _TOOLBOX_TIMEOUT_MS = 5000;
 
 /**
- * The conference page of the mobile (i.e. React Native) application.
+ * Conference component's property types.
+ *
+ * @static
  */
-class Conference extends Component {
+type ConferencePropTypes = {
+
     /**
-     * Conference component's property types.
+     * The indicator which determines that we are still connecting to the
+     * conference which includes establishing the XMPP connection and then
+     * joining the room. If truthy, then an activity/loading indicator will
+     * be rendered.
      *
-     * @static
+     * @private
      */
-    static propTypes = {
-        /**
-         * The indicator which determines that we are still connecting to the
-         * conference which includes establishing the XMPP connection and then
-         * joining the room. If truthy, then an activity/loading indicator will
-         * be rendered.
-         *
-         * @private
-         */
-        _connecting: PropTypes.bool,
+    _connecting: boolean,
 
-        /**
-         * The handler which dispatches the (redux) action connect.
-         *
-         * @private
-         */
-        _onConnect: PropTypes.func,
+    /**
+     * The handler which dispatches the (redux) action connect.
+     *
+     * @private
+     */
+    _onConnect: Function,
 
-        /**
-         * The handler which dispatches the (redux) action disconnect.
-         *
-         * @private
-         */
-        _onDisconnect: PropTypes.func,
+    /**
+     * The handler which dispatches the (redux) action disconnect.
+     *
+     * @private
+     */
+    _onDisconnect: Function,
 
-        /**
-         * Handles a hardware button press for back navigation. Leaves the
-         * associated {@code Conference}.
-         *
-         * @private
-         * @returns {boolean} As the associated conference is unconditionally
-         * left and exiting the app while it renders a {@code Conference} is
-         * undesired, {@code true} is always returned.
-         */
-        _onHardwareBackPress: PropTypes.func,
+    /**
+     * Handles a hardware button press for back navigation. Leaves the
+     * associated {@code Conference}.
+     *
+     * @private
+     * @returns {boolean} As the associated conference is unconditionally
+     * left and exiting the app while it renders a {@code Conference} is
+     * undesired, {@code true} is always returned.
+     */
+    _onHardwareBackPress: Function,
 
-        /**
-         * The handler which dispatches the (redux) action setToolboxVisible to
-         * show/hide the Toolbox.
-         *
-         * @private
-         */
-        _setToolboxVisible: PropTypes.func,
+    /**
+     * The handler which dispatches the (redux) action setToolboxVisible to
+     * show/hide the Toolbox.
+     *
+     * @private
+     */
+    _setToolboxVisible: Function,
 
-        /**
-         * The indicator which determines whether the Toolbox is visible.
-         *
-         * @private
-         */
-        _toolboxVisible: PropTypes.bool
-    };
+    /**
+     * The indicator which determines whether the Toolbox is visible.
+     *
+     * @private
+     */
+    _toolboxVisible: boolean
+};
 
+/**
+ * The conference page of the mobile (i.e. React Native) application.
+ */
+class Conference extends Component<ConferencePropTypes> {
     /**
      * Initializes a new Conference instance.
      *

react/features/feedback/components/FeedbackButton.web.js

@@ -1,7 +1,6 @@
 /* @flow */
 
 import Tooltip from '@atlaskit/tooltip';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -10,31 +9,39 @@ import { translate } from '../../base/i18n';
 import { openFeedbackDialog } from '../actions';
 
 /**
- * Implements a Web/React Component which renders a feedback button.
+ * Defines property types for the FeedbackButton component.
  */
-class FeedbackButton extends Component<*> {
-    _onClick: Function;
+type FeedbackButtonPropTypes = {
 
-    static propTypes = {
-        /**
-         * The JitsiConference for which the feedback will be about.
-         *
-         * @type {JitsiConference}
-         */
-        _conference: PropTypes.object,
+    /**
+     * The JitsiConference for which the feedback will be about.
+     *
+     * FIXME define JitsiConference type
+     * @type {JitsiConference}
+     */
+    _conference: Object,
 
-        dispatch: PropTypes.func,
+    /**
+     * Redux store dispatch function.
+     */
+    dispatch: Dispatch<*>,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func,
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
 
-        /**
-         * From which side of the button the tooltip should appear from.
-         */
-        tooltipPosition: PropTypes.string
-    };
+    /**
+     * From which side of the button the tooltip should appear from.
+     */
+    tooltipPosition: String
+}
+
+/**
+ * Implements a Web/React Component which renders a feedback button.
+ */
+class FeedbackButton extends Component<FeedbackButtonPropTypes> {
+    _onClick: Function;
 
     /**
      * Initializes a new FeedbackButton instance.