Commit d773ed8b authored by ZeHiro's avatar ZeHiro
Browse files

Migrate bank creation form to the foldable-panel component

parent 76ceaed9
......@@ -6,6 +6,7 @@ import { get, actions } from '../../../store';
import { assert, translate as $t } from '../../../helpers';
import PasswordInput from '../../ui/password-input';
import FoldablePanel from '../../ui/foldable-panel';
import CustomBankField from './custom-bank-field';
......@@ -15,12 +16,10 @@ class NewBankForm extends React.Component {
this.state = {
selectedBankIndex: 0,
expanded: this.props.expanded
};
this.handleChangeBank = this.handleChangeBank.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleToggleExpand = this.handleToggleExpand.bind(this);
this.handleReset = this.handleReset.bind(this);
this.bankSelector = null;
......@@ -40,13 +39,6 @@ class NewBankForm extends React.Component {
event.target.reset();
}
handleToggleExpand() {
this.setState({
selectedBankIndex: 0,
expanded: !this.state.expanded
});
}
handleChangeBank(event) {
let uuid = event.target.value;
let selectedBankIndex = this.props.banks.findIndex(bank => bank.uuid === uuid);
......@@ -81,38 +73,7 @@ class NewBankForm extends React.Component {
this.props.createAccess(uuid, login, password, customFields);
}
renderHeader(body) {
let expanded = this.state.expanded;
return (
<div className="top-panel panel panel-default">
<div
className="panel-heading clickable"
onClick={ this.handleToggleExpand }>
<h3 className="title panel-title">
{ $t('client.settings.new_bank_form_title') }
</h3>
<div className="panel-options">
<span
className={ `option-legend fa fa-${expanded ?
'minus' : 'plus'}-square` }
aria-label="add"
title={ $t('client.settings.add_bank_button') }
/>
</div>
</div>
{ body }
</div>
);
}
render() {
let expanded = this.state.expanded;
if (!expanded) {
return this.renderHeader(<div className="transition-expand" />);
}
let options = this.props.banks.map(bank => (
<option
......@@ -153,8 +114,12 @@ class NewBankForm extends React.Component {
this.passwordInput = element;
};
let form = (
<div className="panel-body transition-expand">
return (
<FoldablePanel
initiallyExpanded={ this.props.expanded }
title={ $t('client.settings.new_bank_form_title') }
iconTitle={ $t('client.settings.add_bank_button') }
top={ true }>
<form
onReset={ this.handleReset }
onSubmit={ this.handleSubmit }>
......@@ -214,10 +179,8 @@ class NewBankForm extends React.Component {
/>
</div>
</form>
</div>
</FoldablePanel>
);
return this.renderHeader(form);
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment