openethereum/js/packages/dapp-develop/LoadContract/loadContract.js

344 lines
8.3 KiB
JavaScript
Raw Normal View History

// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import moment from 'moment';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { Button, List, Portal, Tabs } from '@parity/ui';
import Editor from '@parity/ui/Editor';
import { CancelIcon, CheckIcon, DeleteIcon } from '@parity/ui/Icons';
import styles from './loadContract.css';
const REMOVAL_STYLE = {
backgroundColor: 'none',
cursor: 'default'
};
// const SELECTED_STYLE = {
// backgroundColor: 'rgba(255, 255, 255, 0.1)'
// };
export default class LoadContract extends Component {
static propTypes = {
onClose: PropTypes.func.isRequired,
onLoad: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
contracts: PropTypes.object.isRequired,
snippets: PropTypes.object.isRequired
};
state = {
activeTab: -1,
selected: -1,
deleteRequest: false,
deleteId: -1
};
render () {
const { deleteRequest } = this.state;
return (
<Portal
buttons={ this.renderDialogActions() }
onClose={ this.onClose }
open
title={
deleteRequest
? (
<FormattedMessage
id='loadContract.title.remove'
defaultMessage='confirm removal'
/>
)
: (
<FormattedMessage
id='loadContract.title.view'
defaultMessage='view contracts'
/>
)
}
>
{ this.renderBody() }
</Portal>
);
}
renderBody () {
const { activeTab, deleteRequest } = this.state;
if (deleteRequest) {
return this.renderConfirmRemoval();
}
const { contracts, snippets } = this.props;
const contractsTab = Object.keys(contracts).length === 0
? null
: (
<FormattedMessage
id='loadContract.tab.local'
defaultMessage='Local'
/>
);
return (
<div className={ styles.loadContainer }>
<Tabs
activeTab={ activeTab }
onChange={ this.handleChangeTab }
tabs={ [
contractsTab,
<FormattedMessage
id='loadContract.tab.snippets'
defaultMessage='Snippets'
/>
] }
/>
{ this.renderEditor() }
{
this.state.activeTab === 0
? (
<List
label={
<h4>
<FormattedMessage
id='loadContract.header.saved'
defaultMessage='Saved Contracts'
/>
</h4>
}
onChange={ this.onClickContract }
items={ this.renderContracts(contracts) }
/>
)
: (
<List
label={
<h4>
<FormattedMessage
id='loadContract.header.snippets'
defaultMessage='Contract Snippets'
/>
</h4>
}
onClick={ this.onClickContract }
items={ this.renderContracts(snippets, false) }
/>
)
}
</div>
);
}
renderConfirmRemoval () {
const { deleteId } = this.state;
const { name, timestamp, sourcecode } = this.props.contracts[deleteId];
return (
<div className={ styles.confirmRemoval }>
<p>
<FormattedMessage
id='loadContract.removal.confirm'
defaultMessage='Are you sure you want to remove the following contract from your saved contracts?'
/>
</p>
<List.Item
label={ name }
description={
<FormattedMessage
id='loadContract.removal.savedAt'
defaultMessage='Saved {when}'
values={ {
when: moment(timestamp).fromNow()
} }
/>
}
style={ REMOVAL_STYLE }
/>
<div className={ styles.editor }>
<Editor
value={ sourcecode }
maxLines={ 20 }
readOnly
/>
</div>
</div>
);
}
renderEditor () {
const { contracts, snippets } = this.props;
const { selected } = this.state;
const mergedContracts = Object.assign({}, contracts, snippets);
if (selected === -1 || !mergedContracts[selected]) {
return null;
}
const { sourcecode, name } = mergedContracts[selected];
return (
<div className={ styles.editor }>
<p>{ name }</p>
<Editor
readOnly
maxLines={ 20 }
value={ sourcecode }
/>
</div>
);
}
renderContracts (contracts, removable = true) {
return Object
.values(contracts)
.map((contract) => {
const { id, name, timestamp, description } = contract;
const onDelete = () => this.onDeleteRequest(id);
return {
key: id,
label: name,
buttons: removable && (
<Button
icon={ <DeleteIcon /> }
onClick={ onDelete }
/>
),
description: description || (
<FormattedMessage
id='loadContract.contract.savedAt'
defaultMessage='Saved {when}'
values={ {
when: moment(timestamp).fromNow()
} }
/>
)
};
});
}
renderDialogActions () {
const { deleteRequest } = this.state;
if (deleteRequest) {
return [
<Button
icon={ <CancelIcon /> }
key='No'
label={
<FormattedMessage
id='loadContract.button.no'
defaultMessage='No'
/>
}
onClick={ this.onRejectRemoval }
/>,
<Button
icon={ <DeleteIcon /> }
key='Yes'
label={
<FormattedMessage
id='loadContract.button.yes'
defaultMessage='Yes'
/>
}
onClick={ this.onConfirmRemoval }
/>
];
}
return [
<Button
icon={ <CancelIcon /> }
2017-05-09 17:31:48 +02:00
key='cancel'
label={
<FormattedMessage
id='loadContract.button.cancel'
defaultMessage='Cancel'
/>
}
onClick={ this.onClose }
/>,
<Button
disabled={ this.state.selected === -1 }
icon={ <CheckIcon /> }
2017-05-09 17:31:48 +02:00
key='load'
label={
<FormattedMessage
id='loadContract.button.load'
defaultMessage='Load'
/>
}
onClick={ this.onLoad }
/>
];
}
handleChangeTab = (event, activeTab) => {
this.setState({ activeTab, selected: -1 });
}
onClickContract = (event, selected) => {
this.setState({ selected });
}
onClose = () => {
this.props.onClose();
}
onLoad = () => {
const { contracts, snippets } = this.props;
const { selected } = this.state;
const mergedContracts = Object.assign({}, contracts, snippets);
const contract = mergedContracts[selected];
this.props.onLoad(contract);
this.props.onClose();
}
onDeleteRequest = (id) => {
this.setState({
deleteRequest: true,
deleteId: id
});
}
onConfirmRemoval = () => {
const { deleteId } = this.state;
this.props.onDelete(deleteId);
this.setState({
deleteRequest: false,
deleteId: -1,
selected: -1
});
}
onRejectRemoval = () => {
this.setState({
deleteRequest: false,
deleteId: -1
});
}
}