From 5a740808395550ad34a89fbcb84cc7ccdf140b75 Mon Sep 17 00:00:00 2001 From: Lyubo Marinov Date: Wed, 7 Jun 2017 11:45:04 -0500 Subject: [PATCH] Comply w/ coding style --- .../base/dialog/components/AbstractDialog.js | 4 +- .../base/dialog/components/Dialog.native.js | 2 +- .../dialog/components/StatelessDialog.web.js | 78 +++++++++---------- react/features/base/dialog/constants.js | 2 +- .../dial-out/components/CountryIcon.js | 11 +-- .../dial-out/components/DialOutDialog.web.js | 12 +-- .../components/DialOutNumbersForm.web.js | 46 +++++------ 7 files changed, 76 insertions(+), 79 deletions(-) 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} */ _formatCountryCodes(countryCodes) { - return countryCodes.map(country => { const countryIcon = ; - const countryElement = {countryIcon} { country.name }; return { content: `${country.dialCode}`, - elemBefore: countryElement, - country + country, + elemBefore: countryElement }; }); } @@ -342,5 +344,5 @@ function _mapStateToProps(state) { }; } -export default translate(connect(_mapStateToProps, - { updateDialOutCodes })(DialOutNumbersForm)); +export default translate( + connect(_mapStateToProps, { updateDialOutCodes })(DialOutNumbersForm));