Comply w/ coding style
This commit is contained in:
parent
89862cbea9
commit
5a74080839
|
@ -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.
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
@ -50,11 +49,10 @@ class StatelessDialog extends Component {
|
|||
* - 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);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
export const dialogPropTypes = {
|
||||
export const DIALOG_PROP_TYPES = {
|
||||
/**
|
||||
* Whether cancel button is disabled. Enabled by default.
|
||||
*/
|
||||
|
|
|
@ -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 <span className = { iconClassName } />;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default CountryIcon;
|
||||
|
|
|
@ -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() }
|
||||
</Dialog>);
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -221,6 +221,6 @@ function _mapStateToProps(state) {
|
|||
export default translate(
|
||||
connect(_mapStateToProps, {
|
||||
cancel,
|
||||
dial,
|
||||
checkDialNumber
|
||||
checkDialNumber,
|
||||
dial
|
||||
})(DialOutDialog));
|
||||
|
|
|
@ -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 = <ExpandIcon label = 'expand' />;
|
||||
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 = <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,
|
||||
{ updateDialOutCodes })(DialOutNumbersForm));
|
||||
export default translate(
|
||||
connect(_mapStateToProps, { updateDialOutCodes })(DialOutNumbersForm));
|
||||
|
|
Loading…
Reference in New Issue