openethereum/js/packages/dapp-console/Watches/watches.js

187 lines
4.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 { observer } from 'mobx-react';
import React, { Component } from 'react';
import WatchesStore from './watches.store';
import styles from './watches.css';
@observer
export default class Watches extends Component {
watchesStore = WatchesStore.get();
render () {
return (
<div className={ styles.container }>
{ this.renderAddWatch() }
{ this.renderWatches() }
</div>
);
}
renderAddForm () {
const { showAdd } = this.watchesStore;
if (!showAdd) {
return null;
}
return (
<div className={ styles.addForm }>
<div className={ styles.inputContainer }>
<input
className={ styles.input }
onChange={ this.handleAddNameChange }
placeholder='Name'
type='text'
/>
</div>
<div className={ styles.inputContainer }>
<input
className={ [ styles.input, styles.big ].join(' ') }
onChange={ this.handleAddFunctionChange }
placeholder='Function'
type='text'
/>
</div>
<div className={ styles.inputContainer }>
<input
className={ styles.input }
onChange={ this.handleAddContextChange }
placeholder='Context'
type='text'
/>
</div>
<button
className={ styles.button }
onClick={ this.handleAddWatch }
>
Add
</button>
</div>
);
}
renderAddWatch () {
const { showAdd } = this.watchesStore;
const classes = [ styles.add ];
if (showAdd) {
classes.push(styles.selected);
}
return (
<div className={ styles.addContainer }>
{ this.renderAddForm() }
<span
className={ classes.join(' ') }
onClick={ this.handleToggleAdd }
>
+
</span>
</div>
);
}
renderWatches () {
const { names } = this.watchesStore;
return names.map((name) => {
const { result, error } = this.watchesStore.get(name);
const classes = [ styles.watch ];
const resultStr = error
? error.toString()
: this.toString(result);
const onClick = () => this.handleRemoveWatch(name);
if (error) {
classes.push(styles.error);
}
return (
<div
className={ classes.join(' ') }
key={ name }
>
<span
className={ styles.remove }
onClick={ onClick }
title={ `Remove "${name}" watch` }
>
<span></span>
</span>
<span>{ name }</span>
<span className={ styles.result }>{ resultStr.toString() }</span>
</div>
);
});
}
handleAddFunctionChange = (event) => {
const { value } = event.target;
this.watchesStore.updateAddFunction(value);
};
handleAddContextChange = (event) => {
const { value } = event.target;
this.watchesStore.updateAddContext(value);
};
handleAddNameChange = (event) => {
const { value } = event.target;
this.watchesStore.updateAddName(value);
};
handleAddWatch = () => {
this.watchesStore.addWatch();
};
handleRemoveWatch = (name) => {
this.watchesStore.remove(name);
};
handleToggleAdd = () => {
this.watchesStore.toggleAdd();
};
toString (result) {
if (result === undefined) {
return 'undefined';
}
if (result === null) {
return 'null';
}
if (typeof result.toFormat === 'function') {
return result.toFormat();
}
if (typeof result.toString === 'function') {
return result.toString();
}
return result;
}
}