Skip to content

Commit

Permalink
[UI] Collapsable section (#12)
Browse files Browse the repository at this point in the history 
* clean up

* add collapse component

* apply collapsable across board
  • Loading branch information
@adibas03
adibas03 authored Mar 9, 2019
1 parent 7e84f3c commit 2f382e6
Show file tree
Hide file tree
Showing 7 changed files with 163 additions and 128 deletions.
161 changes: 81 additions & 80 deletions src/App/Components/Beneficiaries.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React, { Component } from 'react';
import PropTypes from "prop-types";
import Collapsable from "./Collapsable";
import ErrorBoundary from "./ErrorBoundary";
import NetworkComponent from "./NetworkComponent";
import DrizzleTxResolver from "./DrizzleTxResolver";

import { web3Scripts, CONTRACT_ARRAYs_LENGTH, BENEFICIARY_EVENT, NULL_ADDRESS } from '../../Scripts';
import { FormHelp } from '../../Config';
import { FormHelp, Timers } from '../../Config';

import Button from 'antd/lib/button';
import Col from 'antd/lib/col';
Expand Down Expand Up @@ -35,6 +36,8 @@ class Beneficiaries extends DrizzleTxResolver {
constructor (props) {
super(props);

this.props.closeCollapsable ? '' : this.state.defaultProps.opened = true;

this.addBeneficiary = this.addBeneficiary.bind(this);
this.removeBeneficiary = this.removeBeneficiary.bind(this);
this.calcValue = this.calcValue.bind(this);
Expand All @@ -46,6 +49,7 @@ class Beneficiaries extends DrizzleTxResolver {

state = {
beneficiaries: [''],
defaultProps: {},
contractBeneficiaries: [],
dispositions: [''],
loading: false,
Expand Down Expand Up @@ -339,85 +343,81 @@ class Beneficiaries extends DrizzleTxResolver {

render () {
return (
<Layout>
<Row gutter={0} style={{ margin: '48px 0 24px' }}>
<Col span={24}>
<h3>Benefeciaries</h3>
<Divider style={{ height: '1px', margin: '0' }} />
</Col>
</Row>
{ this.state.loading &&
<Layout>
<Spin size="large" />
</Layout>
}
{ !this.state.loading &&
<Form onSubmit={(e) => e.preventDefault()} >
<Row gutter={16}>
<Col span={15}>
<h5>
<span title={FormHelp['newBeneficiary']} style={{ cursor: 'help' }}>
Address
</span>
</h5>
</Col>
<Col span={3}>
<h5>
<span title={FormHelp['newBeneficiaryDisposition']} style={{ cursor: 'help' }}>
Ratio
</span>
</h5>
</Col>
<Col span={4}>
<h5>
<span title={FormHelp['newBeneficiaryDispositionValue']} style={{ cursor: 'help' }}>
Value (Eth)
</span>
</h5>
</Col>
<Col span={2}>
</Col>
<Col span={24}>
<Divider />
</Col>
</Row>
{
this.state.beneficiaries.map( (one, index) =>
<Row gutter={16} key={index}>
<Col span={15}>
<Item validateStatus={this.state.beneficiaries[index] && this.validateStatus('beneficiaries', index)} required>
<Input onChange={this.handleChange('beneficiaries', index)} value={one} />
</Item>
</Col>
<Col span={3}>
<Item validateStatus={this.state.dispositions[index] && this.validateStatus('dispositions', index)} required>
<Input onChange={this.handleChange('dispositions', index)} type='number' min={1} value={this.state.dispositions[index]} />
</Item>
</Col>
<Col span={4}>
<Item >
<Input disabled={true} value={ web3Scripts.parseEtherValue(this.calcValue(this.state.dispositions[index]), true) } />
</Item>
</Col>
<Col span={2}>
<Button style={{ marginTop: '4px' }} icon='minus-square' title={FormHelp.removeBeneficiary} onClick={this.removeBeneficiary(index)} />
</Col>
</Row>
)
}
<Row>
<Col span={2}>
<Button style={{ marginTop: '4px' }} icon='plus-square' disabled={this.props.disbursed} title={FormHelp.addNewBeneficiary} onClick={this.addBeneficiary} />
</Col>
<Col offset={18} span={4}>
<Button type='primary' style={{ marginTop: '4px' }} icon='upload' disabled={!this.canUpdate} title={FormHelp.updateContract} onClick={this.storeToNetwork} >
Save
</Button>
</Col>
</Row>
</Form>
}
</Layout>
<Collapsable title={'Benefeciaries'} style={{ margin: '48px 0 12px' }} {...this.state.defaultProps}>
<Layout >
{ this.state.loading &&
<Layout>
<Spin size="large" />
</Layout>
}
{ !this.state.loading &&
<Form onSubmit={(e) => e.preventDefault()} >
<Row gutter={16}>
<Col span={15}>
<h5>
<span title={FormHelp['newBeneficiary']} style={{ cursor: 'help' }}>
Address
</span>
</h5>
</Col>
<Col span={3}>
<h5>
<span title={FormHelp['newBeneficiaryDisposition']} style={{ cursor: 'help' }}>
Ratio
</span>
</h5>
</Col>
<Col span={4}>
<h5>
<span title={FormHelp['newBeneficiaryDispositionValue']} style={{ cursor: 'help' }}>
Value (Eth)
</span>
</h5>
</Col>
<Col span={2}>
</Col>
<Col span={24}>
<Divider />
</Col>
</Row>
{
this.state.beneficiaries.map( (one, index) =>
<Row gutter={16} key={index}>
<Col span={15}>
<Item validateStatus={this.state.beneficiaries[index] && this.validateStatus('beneficiaries', index)} required>
<Input onChange={this.handleChange('beneficiaries', index)} value={one} />
</Item>
</Col>
<Col span={3}>
<Item validateStatus={this.state.dispositions[index] && this.validateStatus('dispositions', index)} required>
<Input onChange={this.handleChange('dispositions', index)} type='number' min={1} value={this.state.dispositions[index]} />
</Item>
</Col>
<Col span={4}>
<Item >
<Input disabled={true} value={ web3Scripts.parseEtherValue(this.calcValue(this.state.dispositions[index]), true) } />
</Item>
</Col>
<Col span={2}>
<Button style={{ marginTop: '4px' }} icon='minus-square' title={FormHelp.removeBeneficiary} onClick={this.removeBeneficiary(index)} />
</Col>
</Row>
)
}
<Row>
<Col span={2}>
<Button style={{ marginTop: '4px' }} icon='plus-square' disabled={this.props.disbursed} title={FormHelp.addNewBeneficiary} onClick={this.addBeneficiary} />
</Col>
<Col offset={18} span={4}>
<Button type='primary' style={{ marginTop: '4px' }} icon='upload' disabled={!this.canUpdate} title={FormHelp.updateContract} onClick={this.storeToNetwork} >
Save
</Button>
</Col>
</Row>
</Form>
}
</Layout >
</Collapsable>
)
}

Expand All @@ -430,6 +430,7 @@ Beneficiaries.propTypes = {
contractBalance: PropTypes.number.isRequired,
disbursed: PropTypes.bool.isRequired,
networkId: PropTypes.number.isRequired,
closeCollapsable: PropTypes.bool,
selectedAccount: PropTypes.string,
transactionStack: PropTypes.array,
transactions: PropTypes.object
Expand Down
61 changes: 61 additions & 0 deletions src/App/Components/Collapsable.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React, { Component } from 'react';
import PropTypes from "prop-types";

import Col from 'antd/lib/col';
import Divider from 'antd/lib/divider';
import Layout from 'antd/lib/layout';

import 'antd/lib/col/style';
import 'antd/lib/divider/style';
import 'antd/lib/layout/style';

class Collapsable extends Component {

constructor (props) {
super(props);

this.state = {
collapsed: props.opened ? false : true
}
this.toggleCollapse = this.toggleCollapse.bind(this);
}

toggleCollapse () {
console.log(this.state)
this.setState({
collapsed: !this.state.collapsed
});
}

render () {
const { title, children, opened, ...others } = this.props;
return (
<Layout {...others}>
<Col span={24} style={{ cursor: 'pointer', margin: '0 0 12px' }}>
<div onClick={this.toggleCollapse} >
{typeof title === 'string' &&
<h3>
{title}
</h3>
}
{typeof title === 'object' &&
title
}
<Divider style={{ height: '1px', margin: '0' }} />
</div>
</Col>
<Col span={24} >
{ !this.state.collapsed && children }
</Col>
</Layout>
);
}
}

Collapsable.propTypes = {
opened: PropTypes.bool,
title: PropTypes.any.isRequired,
children: PropTypes.object.isRequired
}

export default Collapsable;
16 changes: 9 additions & 7 deletions src/App/Components/Contract.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,15 +213,16 @@ class Contract extends Component {
</Layout>
}
{ !this.state.loadingContracts &&
<Layout>
<Layout style={{ margin: '0 0 24px' }}>
<Row gutter={0} style={{ margin: '0 0 24px' }}>
<Col span={24}>
<h2>Contracts details</h2>
<h4 className='word-wrapped'>
(<a target='_blank' href={`${Explorers[this.props.networkId]}/address/${this.props.match.params.contractAddress}`}>
{ this.props.match.params.contractAddress }
</a>)
</h4>
<h2>Contracts details {' '}
<small className='word-wrapped' style={{fontSize: '0.7em'}}>
(<a target='_blank' href={`${Explorers[this.props.networkId]}/address/${this.props.match.params.contractAddress}`}>
{ this.props.match.params.contractAddress }
</a>)
</small>
</h2>
<Divider style={{ height: '1px', margin: '0' }} />
</Col>
</Row>
Expand Down Expand Up @@ -270,6 +271,7 @@ class Contract extends Component {
drizzle={ this.props.drizzle }
isOwner={ this.isContractOwner }
networkId={ this.props.networkId }
closeCollapsable={this.state.contract.contractType.toLowerCase() === 'willwallet'}
selectedAccount={ this.props.selectedAccount }
transactionStack={this.props.transactionStack}
transactions={this.props.transactions}
Expand Down
12 changes: 5 additions & 7 deletions src/App/Components/ContractsList.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Component } from "react";
import { Link, NavLink } from "react-router-dom";
import PropTypes from "prop-types";
import Collapsable from "./Collapsable";
import ErrorBoundary from "./ErrorBoundary";
import NetworkComponent from "./NetworkComponent";

Expand Down Expand Up @@ -126,8 +127,8 @@ class ContractsList extends Component {

render () {
return (
<Layout>
<Row gutter={0} style={{ margin: '0 0 24px' }}>
<Collapsable opened title={
<Row gutter={0} >
<Col span={20}>
<h2>Deployed Contracts</h2>
</Col>
Expand All @@ -143,10 +144,8 @@ class ContractsList extends Component {
</Col>
</Row>
</Col>
<Col span={24} >
<Divider style={{ height: '1px', margin: '0' }} />
</Col>
</Row>
}>
<Layout style={{ overflowY: 'auto', maxHeight: '900px' }}>
{this.displayList.map( (contract, index) => {
return (
Expand Down Expand Up @@ -186,8 +185,7 @@ class ContractsList extends Component {
);
})}
</Layout>

</Layout>
</Collapsable>
);
}
}
Expand Down
25 changes: 0 additions & 25 deletions src/App/Components/Postpone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,14 @@ import { web3Scripts } from '../../Scripts';
import Button from 'antd/lib/button';
import Col from 'antd/lib/col';
import Divider from 'antd/lib/divider';
import Form from 'antd/lib/form';
import notification from 'antd/lib/notification';
import Row from 'antd/lib/row';
import Select from 'antd/lib/select';

import 'antd/lib/button/style';
import 'antd/lib/col/style';
import 'antd/lib/divider/style';
import 'antd/lib/form/style';
import 'antd/lib/icon/style';
import 'antd/lib/input/style';
import 'antd/lib/notification/style';
import 'antd/lib/row/style';
import 'antd/lib/select/style';

const { Item } = Form;
const { Option } = Select;

const timeSpans = [
'second',
'day',
'month',
'year'
];

const timeSpansFactors = {
second: 1,
day: 86400,
month: 2592000,
year: 31536000

};

const MILLISECONDS = 1000;

Expand Down Expand Up @@ -125,7 +101,6 @@ class Postpone extends DrizzleTxResolver {
<Button type='primary' disabled={!this.canPostpone()} loading={this.state.postponing} onClick={this.postponeDisbursement} icon='fast-forward' title={FormHelp.postpone} >
Postpone Disbursement
</Button>
<Divider style={{ height: '1px', margin: '0' }} />
</Col>
</Row>
);
Expand Down
Loading

0 comments on commit 2f382e6

Please sign in to comment.