diff --git a/react/features/base/dialog/components/AbstractDialog.js b/react/features/base/dialog/components/AbstractDialog.js
index f1cc3045c..1549e17ec 100644
--- a/react/features/base/dialog/components/AbstractDialog.js
+++ b/react/features/base/dialog/components/AbstractDialog.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { hideDialog } from '../actions';
-import { dialogPropTypes } from '../constants';
+import { DIALOG_PROP_TYPES } from '../constants';
/**
* Abstract dialog to display dialogs.
@@ -14,7 +14,7 @@ export default class AbstractDialog extends Component {
* @static
*/
static propTypes = {
- ...dialogPropTypes,
+ ...DIALOG_PROP_TYPES,
/**
* Used to show/hide the dialog on cancel.
diff --git a/react/features/base/dialog/components/Dialog.native.js b/react/features/base/dialog/components/Dialog.native.js
index 4fc7207f9..e2637fc96 100644
--- a/react/features/base/dialog/components/Dialog.native.js
+++ b/react/features/base/dialog/components/Dialog.native.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { connect } from 'react-redux';
import Prompt from 'react-native-prompt';
+import { connect } from 'react-redux';
import { translate } from '../../i18n';
diff --git a/react/features/base/dialog/components/StatelessDialog.web.js b/react/features/base/dialog/components/StatelessDialog.web.js
index 6640e1cc6..ff39b0845 100644
--- a/react/features/base/dialog/components/StatelessDialog.web.js
+++ b/react/features/base/dialog/components/StatelessDialog.web.js
@@ -5,20 +5,19 @@ import React, { Component } from 'react';
import { translate } from '../../i18n';
-import { dialogPropTypes } from '../constants';
+import { DIALOG_PROP_TYPES } from '../constants';
/**
* Web dialog that uses atlaskit modal-dialog to display dialogs.
*/
class StatelessDialog extends Component {
-
/**
- * Web dialog component's property types.
+ * {@code StatelessDialog} component's property types.
*
* @static
*/
static propTypes = {
- ...dialogPropTypes,
+ ...DIALOG_PROP_TYPES,
/**
* This is the body of the dialog, the component children.
@@ -45,16 +44,15 @@ class StatelessDialog extends Component {
/**
* Width of the dialog, can be:
* - 'small' (400px), 'medium' (600px), 'large' (800px),
- * 'x-large' (968px)
+ * 'x-large' (968px)
* - integer value for pixel width
* - string value for percentage
*/
width: React.PropTypes.string
-
};
/**
- * Initializes a new Dialog instance.
+ * Initializes a new {@code StatelessDialog} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
@@ -62,6 +60,7 @@ class StatelessDialog extends Component {
constructor(props) {
super(props);
+ // Bind event handlers so they are only bound once for every instance.
this._onCancel = this._onCancel.bind(this);
this._onDialogDismissed = this._onDialogDismissed.bind(this);
this._onSubmit = this._onSubmit.bind(this);
@@ -89,7 +88,19 @@ class StatelessDialog extends Component {
{ this.props.children }
- );
+
+ );
+ }
+
+ /**
+ * Dispatches action to hide the dialog.
+ *
+ * @returns {void}
+ */
+ _onCancel() {
+ if (!this.props.isModal) {
+ this.props.onCancel();
+ }
}
/**
@@ -104,10 +115,21 @@ class StatelessDialog extends Component {
}
/**
- * Render cancel button.
+ * Dispatches the action when submitting the dialog.
*
- * @returns {*} The cancel button if enabled and dialog is not modal.
* @private
+ * @param {string} value - The submitted value if any.
+ * @returns {void}
+ */
+ _onSubmit(value) {
+ this.props.onSubmit(value);
+ }
+
+ /**
+ * Renders Cancel button.
+ *
+ * @private
+ * @returns {*} The Cancel button if enabled and dialog is not modal.
*/
_renderCancelButton() {
if (this.props.cancelDisabled || this.props.isModal) {
@@ -125,10 +147,10 @@ class StatelessDialog extends Component {
}
/**
- * Render component in dialog footer.
+ * Renders component in dialog footer.
*
- * @returns {ReactElement}
* @private
+ * @returns {ReactElement}
*/
_renderFooter() {
return (
@@ -142,10 +164,10 @@ class StatelessDialog extends Component {
}
/**
- * Render component in dialog header.
+ * Renders component in dialog header.
*
- * @returns {ReactElement}
* @private
+ * @returns {ReactElement}
*/
_renderHeader() {
const { t } = this.props;
@@ -160,10 +182,10 @@ class StatelessDialog extends Component {
}
/**
- * Render ok button.
+ * Renders OK button.
*
- * @returns {*} The ok button if enabled.
* @private
+ * @returns {*} The OK button if enabled.
*/
_renderOKButton() {
if (this.props.submitDisabled) {
@@ -181,30 +203,6 @@ class StatelessDialog extends Component {
);
}
-
- /**
- * Dispatches action to hide the dialog.
- *
- * @returns {void}
- */
- _onCancel() {
- if (this.props.isModal) {
- return;
- }
-
- this.props.onCancel();
- }
-
- /**
- * Dispatches the action when submitting the dialog.
- *
- * @private
- * @param {string} value - The submitted value if any.
- * @returns {void}
- */
- _onSubmit(value) {
- this.props.onSubmit(value);
- }
}
export default translate(StatelessDialog);
diff --git a/react/features/base/dialog/constants.js b/react/features/base/dialog/constants.js
index 0a74eef6a..ec112b730 100644
--- a/react/features/base/dialog/constants.js
+++ b/react/features/base/dialog/constants.js
@@ -1,6 +1,6 @@
import React from 'react';
-export const dialogPropTypes = {
+export const DIALOG_PROP_TYPES = {
/**
* Whether cancel button is disabled. Enabled by default.
*/
diff --git a/react/features/dial-out/components/CountryIcon.js b/react/features/dial-out/components/CountryIcon.js
index 678229c27..53a7efcbe 100644
--- a/react/features/dial-out/components/CountryIcon.js
+++ b/react/features/dial-out/components/CountryIcon.js
@@ -1,9 +1,9 @@
import React, { Component } from 'react';
/**
- * Implements a React Component to render a country flag icon.
+ * Implements a React {@link Component} to render a country flag icon.
*/
-class CountryIcon extends Component {
+export default class CountryIcon extends Component {
/**
* {@code CountryIcon}'s property types.
*
@@ -29,12 +29,9 @@ class CountryIcon extends Component {
*/
render() {
const iconClassName
- = `flag-icon flag-icon-${this.props.countryCode}
- flag-icon-squared ${this.props.className}`;
+ = `flag-icon flag-icon-${this.props.countryCode
+ } flag-icon-squared ${this.props.className}`;
return ;
-
}
}
-
-export default CountryIcon;
diff --git a/react/features/dial-out/components/DialOutDialog.web.js b/react/features/dial-out/components/DialOutDialog.web.js
index 6f9962245..95e7b2563 100644
--- a/react/features/dial-out/components/DialOutDialog.web.js
+++ b/react/features/dial-out/components/DialOutDialog.web.js
@@ -8,11 +8,10 @@ import { cancel, checkDialNumber, dial } from '../actions';
import DialOutNumbersForm from './DialOutNumbersForm';
/**
- * Implements a React Component which allows the user to dial out from the
- * conference.
+ * Implements a React {@link Component} which allows the user to dial out from
+ * the conference.
*/
class DialOutDialog extends Component {
-
/**
* {@code DialOutDialog} component's property types.
*
@@ -91,7 +90,8 @@ class DialOutDialog extends Component {
titleKey = 'dialOut.dialOut'
width = 'small'>
{ this._renderContent() }
- );
+
+ );
}
/**
@@ -221,6 +221,6 @@ function _mapStateToProps(state) {
export default translate(
connect(_mapStateToProps, {
cancel,
- dial,
- checkDialNumber
+ checkDialNumber,
+ dial
})(DialOutDialog));
diff --git a/react/features/dial-out/components/DialOutNumbersForm.web.js b/react/features/dial-out/components/DialOutNumbersForm.web.js
index 023a1ea7f..7e1e6fe4c 100644
--- a/react/features/dial-out/components/DialOutNumbersForm.web.js
+++ b/react/features/dial-out/components/DialOutNumbersForm.web.js
@@ -1,30 +1,35 @@
+import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
+import ExpandIcon from '@atlaskit/icon/glyph/expand';
import React, { Component } from 'react';
import { connect } from 'react-redux';
-import ExpandIcon from '@atlaskit/icon/glyph/expand';
-import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
import { translate } from '../../base/i18n';
-import CountryIcon from './CountryIcon';
-import { updateDialOutCodes } from '../actions';
-/**
- * The expand icon of the dropdown menu.
- *
- * @type {XML}
- */
-const EXPAND_ICON = ;
+import { updateDialOutCodes } from '../actions';
+import CountryIcon from './CountryIcon';
/**
* The default value of the country if the fetch service is unavailable.
*
- * @type {{name: string, dialCode: string, code: string}}
+ * @type {{
+ * code: string,
+ * dialCode: string,
+ * name: string
+ * }}
*/
const DEFAULT_COUNTRY = {
- name: 'United States',
+ code: 'US',
dialCode: '+1',
- code: 'US'
+ name: 'United States'
};
+/**
+ * The expand icon of the dropdown menu.
+ *
+ * @type {ReactElement}
+ */
+const EXPAND_ICON = ;
+
/**
* React {@code Component} responsible for fetching and displaying dial-out
* country codes, as well as dialing a phone number.
@@ -108,7 +113,7 @@ class DialOutNumbersForm extends Component {
* display in the dropdown trigger.
*
* @inheritdoc
- * returns {void}
+ * @returns {void}
*/
componentDidMount() {
const dialOutCodes = this.props._dialOutCodes;
@@ -125,7 +130,7 @@ class DialOutNumbersForm extends Component {
* the dropdown trigger if not already set.
*
* @inheritdoc
- * returns {void}
+ * @returns {void}
*/
componentWillReceiveProps(nextProps) {
if (!this.state.selectedCountry && nextProps._dialOutCodes) {
@@ -141,7 +146,6 @@ class DialOutNumbersForm extends Component {
*/
render() {
const { t, _dialOutCodes } = this.props;
-
const items
= _dialOutCodes ? this._formatCountryCodes(_dialOutCodes) : [];
@@ -219,18 +223,16 @@ class DialOutNumbersForm extends Component {
* @returns {Array