From f63f22e2216da622e0e63aff02fbfbda9211ffeb Mon Sep 17 00:00:00 2001 From: Nicolas Frandeboeuf Date: Sat, 11 Feb 2017 14:35:52 +0100 Subject: [PATCH 1/2] Use col-size-offset instead of empty DOM elements --- client/components/ui/loading.js | 3 +-- client/main.js | 4 +--- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/client/components/ui/loading.js b/client/components/ui/loading.js index 7f7992528..363e2ccc0 100644 --- a/client/components/ui/loading.js +++ b/client/components/ui/loading.js @@ -6,8 +6,7 @@ const LoadingMessage = props => { let message = props.message || $t('client.spinner.generic'); return (
-
-
+

diff --git a/client/main.js b/client/main.js index d36076e2c..c9edd670f 100644 --- a/client/main.js +++ b/client/main.js @@ -192,9 +192,7 @@ class BaseApp extends React.Component {

-
- -
+
{ mainComponent }
-- GitLab From 67670583c3693652c0ba188ac1b06113e1bb56d5 Mon Sep 17 00:00:00 2001 From: Nicolas Frandeboeuf Date: Sat, 11 Feb 2017 15:02:30 +0100 Subject: [PATCH 2/2] Use modal callbacks instead of listening to events --- .../duplicates/default-params-modal.js | 2 +- .../bank-accesses/edit-access-modal.js | 29 +++++++++++++------ client/components/ui/modal.js | 22 +++++++------- 3 files changed, 32 insertions(+), 21 deletions(-) diff --git a/client/components/duplicates/default-params-modal.js b/client/components/duplicates/default-params-modal.js index 7ab2b34bd..fcd20d6d3 100644 --- a/client/components/duplicates/default-params-modal.js +++ b/client/components/duplicates/default-params-modal.js @@ -91,7 +91,7 @@ class DefaultParamsModal extends React.Component { modalBody={ modalBody } modalTitle={ $t('client.general.default_parameters') } modalFooter={ modalFooter } - onOpen={ this.handleOpen } + onBeforeOpen={ this.handleOpen } /> ); } diff --git a/client/components/settings/bank-accesses/edit-access-modal.js b/client/components/settings/bank-accesses/edit-access-modal.js index 34206f4aa..c433273dd 100644 --- a/client/components/settings/bank-accesses/edit-access-modal.js +++ b/client/components/settings/bank-accesses/edit-access-modal.js @@ -1,14 +1,13 @@ import React from 'react'; -import { assertHas, translate as $t } from '../../../helpers'; +import { translate as $t } from '../../../helpers'; import CustomBankField from './custom-bank-field'; import Modal from '../../ui/modal'; -export default class EditAccessModal extends React.Component { +class EditAccessModal extends React.Component { constructor(props) { - assertHas(props, 'modalId'); super(props); this.handleSubmit = this.handleSubmit.bind(this); this.extractCustomFieldValue = this.extractCustomFieldValue.bind(this); @@ -43,12 +42,6 @@ export default class EditAccessModal extends React.Component { $(`#${this.props.modalId}`).modal('hide'); } - componentDidMount() { - $(`#${this.props.modalId}`).on('shown.bs.modal', () => { - this.refs.password.focus(); - }); - } - render() { let customFields; @@ -118,13 +111,31 @@ export default class EditAccessModal extends React.Component {
); + let focusPasswordField = () => { + this.refs.password.focus(); + }; + return ( ); } } + +EditAccessModal.propTypes = { + // Unique identifier of the modal + modalId: React.PropTypes.string.isRequired, + + // The function called to save the edited access + onSave: React.PropTypes.func.isRequired, + + // The access' custom fields + customFields: React.PropTypes.array +}; + +export default EditAccessModal; diff --git a/client/components/ui/modal.js b/client/components/ui/modal.js index 12aaac734..56cf19b61 100644 --- a/client/components/ui/modal.js +++ b/client/components/ui/modal.js @@ -5,23 +5,23 @@ class Modal extends React.Component { componentDidMount() { let modalElement = $(`#${this.props.modalId}`); - if (this.props.onOpen) { - modalElement.on('show.bs.modal', this.props.onOpen); + if (this.props.onBeforeOpen) { + modalElement.on('show.bs.modal', this.props.onBeforeOpen); } - if (this.props.onClose) { - modalElement.on('hide.bs.modal', this.props.onClose); + if (this.props.onAfterOpen) { + modalElement.on('shown.bs.modal', this.props.onAfterOpen); } } componentWillUnmount() { let modalElement = $(`#${this.props.modalId}`); - if (this.props.onOpen) { + if (this.props.onBeforeOpen) { modalElement.off('show.bs.modal'); } - if (this.props.onClose) { - modalElement.off('hide.bs.modal'); + if (this.props.onAfterOpen) { + modalElement.off('shown.bs.modal'); } } @@ -79,11 +79,11 @@ Modal.propTypes = { // React component displayed at the bottom of the modal. modalFooter: React.PropTypes.element.isRequired, - // A callback called on opening - onOpen: React.PropTypes.func, + // A callback called on opening before the modal is visible + onBeforeOpen: React.PropTypes.func, - // A callback called on closing - onClose: React.PropTypes.func + // A callback called once the modal is opened and visible + onAfterOpen: React.PropTypes.func }; export default Modal; -- GitLab