Comply w/ coding style

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.

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';
 

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 }
                     </form>
                 </div>
-            </ModalDialog>);
+            </ModalDialog>
+        );
+    }
+
+    /**
+     * 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 {
             </AKButton>
         );
     }
-
-    /**
-     * 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);

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.
      */

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 flag-icon-${this.props.countryCode
-             flag-icon-squared ${this.props.className}`;
+                } flag-icon-squared ${this.props.className}`;
 
         return <span className = { iconClassName } />;
-
     }
 }
-
-export default CountryIcon;

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
+ * Implements a React {@link Component} which allows the user to dial out from
- * conference.
+ * 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() }
-            </Dialog>);
+            </Dialog>
+        );
     }
 
     /**
@@ -221,6 +221,6 @@ function _mapStateToProps(state) {
 export default translate(
     connect(_mapStateToProps, {
         cancel,
-        dial,
+        checkDialNumber,
-        checkDialNumber
+        dial
     })(DialOutDialog));

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';
 
-/**
+import { updateDialOutCodes } from '../actions';
- * The expand icon of the dropdown menu.
+import CountryIcon from './CountryIcon';
- *
- * @type {XML}
- */
-const EXPAND_ICON = <ExpandIcon label = 'expand' />;
 
 /**
  * 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 = <ExpandIcon label = 'expand' />;
+
 /**
  * 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<Object>}
      */
     _formatCountryCodes(countryCodes) {
-
         return countryCodes.map(country => {
             const countryIcon
                 = <CountryIcon countryCode = { `${country.code}` } />;
-
             const countryElement
                 = <span>{countryIcon} { country.name }</span>;
 
             return {
                 content: `${country.dialCode}`,
-                elemBefore: countryElement,
+                country,
-                country
+                elemBefore: countryElement
             };
         });
     }
@@ -342,5 +344,5 @@ function _mapStateToProps(state) {
     };
 }
 
-export default translate(connect(_mapStateToProps,
+export default translate(
-    { updateDialOutCodes })(DialOutNumbersForm));
+    connect(_mapStateToProps, { updateDialOutCodes })(DialOutNumbersForm));