Use TypedInputs in Contracts view (#4015)

* Use TypedInput in Contracts * Add right readOnly Bool TypedInput * PR Grumbles
2017-01-03 17:41:46 +01:00 · 2017-01-03 17:41:46 +01:00 · e8ef7b357d
commit e8ef7b357d
parent 0f41c5b847
8 changed files with 127 additions and 112 deletions
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@ -58,11 +58,13 @@ class AddressSelect extends Component {
    tokens: PropTypes.object,

    // Optional props
+    allowCopy: PropTypes.bool,
    allowInput: PropTypes.bool,
    disabled: PropTypes.bool,
    error: nodeOrStringProptype(),
    hint: nodeOrStringProptype(),
    label: nodeOrStringProptype(),
+    readOnly: PropTypes.bool,
    value: nodeOrStringProptype()
  };

@ -121,12 +123,12 @@ class AddressSelect extends Component {

  renderInput () {
    const { focused } = this.state;
-    const { accountsInfo, disabled, error, hint, label, value } = this.props;
+    const { accountsInfo, allowCopy, disabled, error, hint, label, readOnly, value } = this.props;

    const input = (
      <InputAddress
        accountsInfo={ accountsInfo }
-        allowCopy={ false }
+        allowCopy={ allowCopy }
        disabled={ disabled }
        error={ error }
        hint={ hint }
@ -139,7 +141,7 @@ class AddressSelect extends Component {
      />
    );

-    if (disabled) {
+    if (disabled || readOnly) {
      return input;
    }

@ -152,10 +154,10 @@ class AddressSelect extends Component {

  renderContent () {
    const { muiTheme } = this.context;
-    const { hint, disabled, label } = this.props;
+    const { hint, disabled, label, readOnly } = this.props;
    const { expanded, inputFocused } = this.state;

-    if (disabled) {
+    if (disabled || readOnly) {
      return null;
    }

@ -507,6 +509,10 @@ class AddressSelect extends Component {
  }

  handleMainBlur = () => {
+    if (this.props.readOnly) {
+      return;
+    }
+
    if (window.document.hasFocus() && !this.state.expanded) {
      this.closing = false;
      this.setState({ focused: false });
@ -514,7 +520,7 @@ class AddressSelect extends Component {
  }

  handleMainFocus = () => {
-    if (this.state.focused) {
+    if (this.state.focused || this.props.readOnly) {
      return;
    }

@ -529,6 +535,12 @@ class AddressSelect extends Component {
  }

  handleFocus = () => {
+    const { disabled, readOnly } = this.props;
+
+    if (disabled || readOnly) {
+      return;
+    }
+
    this.setState({ expanded: true, focusedItem: null, focusedCat: null }, () => {
      window.setTimeout(() => {
        this.handleDOMAction(this.inputRef, 'focus');
--- a/js/src/ui/Form/Input/input.js
+++ b/js/src/ui/Form/Input/input.js
@ -185,7 +185,7 @@ export default class Input extends Component {

    const text = typeof allowCopy === 'string'
      ? allowCopy
-      : value;
+      : value.toString();

    const style = hideUnderline
      ? {}
--- a/js/src/ui/Form/InputAddress/inputAddress.js
+++ b/js/src/ui/Form/InputAddress/inputAddress.js
@ -78,7 +78,7 @@ class InputAddress extends Component {
    return (
      <div className={ containerClasses.join(' ') }>
        <Input
-          allowCopy={ allowCopy && (disabled ? value : false) }
+          allowCopy={ allowCopy && ((disabled || readOnly) ? value : false) }
          className={ classes.join(' ') }
          disabled={ disabled }
          error={ error }
@ -103,13 +103,13 @@ class InputAddress extends Component {
  }

  renderIcon () {
-    const { value, disabled, label, allowCopy, hideUnderline } = this.props;
+    const { value, disabled, label, allowCopy, hideUnderline, readOnly } = this.props;

    if (!value || !value.length || !util.isAddressValid(value)) {
      return null;
    }

-    const classes = [disabled ? styles.iconDisabled : styles.icon];
+    const classes = [(disabled || readOnly) ? styles.iconDisabled : styles.icon];

    if (!label) {
      classes.push(styles.noLabel);
--- a/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
+++ b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
@ -25,27 +25,33 @@ class InputAddressSelect extends Component {
    accounts: PropTypes.object.isRequired,
    contacts: PropTypes.object.isRequired,
    contracts: PropTypes.object.isRequired,
+
+    allowCopy: PropTypes.bool,
    error: PropTypes.string,
-    label: PropTypes.string,
    hint: PropTypes.string,
-    value: PropTypes.string,
-    onChange: PropTypes.func
+    label: PropTypes.string,
+    onChange: PropTypes.func,
+    readOnly: PropTypes.bool,
+    value: PropTypes.string
  };

  render () {
-    const { accounts, contacts, contracts, label, hint, error, value, onChange } = this.props;
+    const { accounts, allowCopy, contacts, contracts, label, hint, error, value, onChange, readOnly } = this.props;

    return (
      <AddressSelect
+        allowCopy={ allowCopy }
        allowInput
        accounts={ accounts }
        contacts={ contacts }
        contracts={ contracts }
        error={ error }
-        label={ label }
        hint={ hint }
+        label={ label }
+        onChange={ onChange }
+        readOnly={ readOnly }
        value={ value }
-        onChange={ onChange } />
+      />
    );
  }
 }
--- a/js/src/ui/Form/TypedInput/typedInput.js
+++ b/js/src/ui/Form/TypedInput/typedInput.js
@ -17,6 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { MenuItem, Toggle } from 'material-ui';
 import { range } from 'lodash';
+import BigNumber from 'bignumber.js';

 import IconButton from 'material-ui/IconButton';
 import AddIcon from 'material-ui/svg-icons/content/add';
@ -33,26 +34,31 @@ import styles from './typedInput.css';
 export default class TypedInput extends Component {

  static propTypes = {
-    onChange: PropTypes.func.isRequired,
+    param: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string
+    ]).isRequired,

    accounts: PropTypes.object,
+    allowCopy: PropTypes.bool,
    error: PropTypes.any,
    hint: PropTypes.string,
    isEth: PropTypes.bool,
    label: PropTypes.string,
    max: PropTypes.number,
    min: PropTypes.number,
-    param: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]).isRequired,
+    onChange: PropTypes.func,
+    readOnly: PropTypes.bool,
    value: PropTypes.any
  };

  static defaultProps = {
+    allowCopy: false,
+    isEth: null,
    min: null,
    max: null,
-    isEth: null
+    onChange: () => {},
+    readOnly: false
  };

  state = {
@ -61,8 +67,11 @@ export default class TypedInput extends Component {
  };

  componentWillMount () {
-    if (this.props.isEth && this.props.value) {
-      this.setState({ isEth: true, ethValue: fromWei(this.props.value) });
+    const { isEth, value } = this.props;
+
+    if (typeof isEth === 'boolean' && value) {
+      const ethValue = isEth ? fromWei(value) : value;
+      this.setState({ isEth, ethValue });
    }
  }

@ -78,7 +87,7 @@ export default class TypedInput extends Component {
  }

  renderParam (param) {
-    const { isEth } = this.props;
+    const { allowCopy, isEth, readOnly } = this.props;
    const { type } = param;

    if (type === ABI_TYPES.ARRAY) {
@ -96,10 +105,12 @@ export default class TypedInput extends Component {

        return (
          <TypedInput
+            accounts={ accounts }
+            allowCopy={ allowCopy }
            key={ `${subtype.type}_${index}` }
            onChange={ onChange }
-            accounts={ accounts }
            param={ subtype }
+            readOnly={ readOnly }
            value={ value[index] }
          />
        );
@ -226,21 +237,23 @@ export default class TypedInput extends Component {
  }

  renderInteger (value = this.props.value, onChange = this.onChange) {
-    const { label, error, hint, min, max } = this.props;
+    const { allowCopy, label, error, hint, min, max, readOnly } = this.props;
    const param = this.getParam();

-    const realValue = value && typeof value.toNumber === 'function'
-      ? value.toNumber()
+    const realValue = value
+      ? (new BigNumber(value))[readOnly ? 'toFormat' : 'toNumber']()
      : value;

    return (
      <Input
+        allowCopy={ allowCopy }
        label={ label }
        hint={ hint }
        value={ realValue }
        error={ error }
        onChange={ onChange }
-        type='number'
+        readOnly={ readOnly }
+        type={ readOnly ? 'text' : 'number' }
        step={ 1 }
        min={ min !== null ? min : (param.signed ? null : 0) }
        max={ max !== null ? max : null }
@ -256,20 +269,22 @@ export default class TypedInput extends Component {
   * @see https://github.com/facebook/react/issues/1549
   */
  renderFloat (value = this.props.value, onChange = this.onChange) {
-    const { label, error, hint, min, max } = this.props;
+    const { allowCopy, label, error, hint, min, max, readOnly } = this.props;
    const param = this.getParam();

-    const realValue = value && typeof value.toNumber === 'function'
-      ? value.toNumber()
+    const realValue = value
+      ? (new BigNumber(value))[readOnly ? 'toFormat' : 'toNumber']()
      : value;

    return (
      <Input
+        allowCopy={ allowCopy }
        label={ label }
        hint={ hint }
        value={ realValue }
        error={ error }
        onChange={ onChange }
+        readOnly={ readOnly }
        type='text'
        min={ min !== null ? min : (param.signed ? null : 0) }
        max={ max !== null ? max : null }
@ -278,37 +293,44 @@ export default class TypedInput extends Component {
  }

  renderDefault () {
-    const { label, value, error, hint } = this.props;
+    const { allowCopy, label, value, error, hint, readOnly } = this.props;

    return (
      <Input
+        allowCopy={ allowCopy }
        label={ label }
        hint={ hint }
        value={ value }
        error={ error }
        onSubmit={ this.onSubmit }
+        readOnly={ readOnly }
      />
    );
  }

  renderAddress () {
-    const { accounts, label, value, error, hint } = this.props;
+    const { accounts, allowCopy, label, value, error, hint, readOnly } = this.props;

    return (
      <InputAddressSelect
+        allowCopy={ allowCopy }
        accounts={ accounts }
-        label={ label }
-        hint={ hint }
-        value={ value }
        error={ error }
+        hint={ hint }
+        label={ label }
        onChange={ this.onChange }
-        editing
+        readOnly={ readOnly }
+        value={ value }
      />
    );
  }

  renderBoolean () {
-    const { label, value, error, hint } = this.props;
+    const { allowCopy, label, value, error, hint, readOnly } = this.props;
+
+    if (readOnly) {
+      return this.renderDefault();
+    }

    const boolitems = ['false', 'true'].map((bool) => {
      return (
@ -323,6 +345,7 @@ export default class TypedInput extends Component {

    return (
      <Select
+        allowCopy={ allowCopy }
        error={ error }
        hint={ hint }
        label={ label }
--- a/js/src/views/Contract/Queries/inputQuery.js
+++ b/js/src/views/Contract/Queries/inputQuery.js
@ -19,29 +19,31 @@ import React, { Component, PropTypes } from 'react';
 import LinearProgress from 'material-ui/LinearProgress';
 import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';

-import { Button, Input, InputAddress, InputAddressSelect } from '~/ui';
+import { Button, TypedInput } from '~/ui';
+import { arrayOrObjectProptype } from '~/util/proptypes';

 import styles from './queries.css';

 export default class InputQuery extends Component {
  static contextTypes = {
    api: PropTypes.object
-  }
+  };

  static propTypes = {
+    accountsInfo: PropTypes.object.isRequired,
    contract: PropTypes.object.isRequired,
-    inputs: PropTypes.array.isRequired,
-    outputs: PropTypes.array.isRequired,
+    inputs: arrayOrObjectProptype().isRequired,
+    outputs: arrayOrObjectProptype().isRequired,
    name: PropTypes.string.isRequired,
    signature: PropTypes.string.isRequired,
    className: PropTypes.string
-  }
+  };

  state = {
    isValid: true,
    results: [],
    values: {}
-  }
+  };

  render () {
    const { name, className } = this.props;
@ -89,7 +91,7 @@ export default class InputQuery extends Component {

  renderResults () {
    const { results, isLoading } = this.state;
-    const { outputs } = this.props;
+    const { accountsInfo, outputs } = this.props;

    if (isLoading) {
      return (<LinearProgress mode='indeterminate' />);
@ -108,25 +110,16 @@ export default class InputQuery extends Component {
      }))
      .sort((outA, outB) => outA.display.length - outB.display.length)
      .map((out, index) => {
-        let input = null;
-        if (out.type === 'address') {
-          input = (
-            <InputAddress
-              className={ styles.queryValue }
-              disabled
-              value={ out.display }
-            />
-          );
-        } else {
-          input = (
-            <Input
-              className={ styles.queryValue }
-              readOnly
+        const input = (
+          <TypedInput
+            accounts={ accountsInfo }
            allowCopy
+            isEth={ false }
+            param={ out.type }
+            readOnly
            value={ out.display }
          />
        );
-        }

        return (
          <div key={ index }>
@ -144,8 +137,7 @@ export default class InputQuery extends Component {
    const { name, type } = input;
    const label = `${name ? `${name}: ` : ''}${type}`;

-    const onChange = (event, input) => {
-      const value = event && event.target.value || input;
+    const onChange = (value) => {
      const { values } = this.state;

      this.setState({
@ -156,28 +148,15 @@ export default class InputQuery extends Component {
      });
    };

-    if (type === 'address') {
    return (
      <div key={ name }>
-          <InputAddressSelect
+        <TypedInput
          hint={ type }
          label={ label }
-            value={ values[name] }
-            required
+          isEth={ false }
          onChange={ onChange }
-          />
-        </div>
-      );
-    }
-
-    return (
-      <div key={ name }>
-        <Input
-          hint={ type }
-          label={ label }
+          param={ type }
          value={ values[name] }
-          required
-          onChange={ onChange }
        />
      </div>
    );
@ -192,7 +171,9 @@ export default class InputQuery extends Component {

    if (api.util.isInstanceOf(value, BigNumber)) {
      return value.toFormat(0);
-    } else if (api.util.isArray(value)) {
+    }
+
+    if (api.util.isArray(value)) {
      return api.util.bytesToHex(value);
    }

--- a/js/src/views/Contract/Queries/queries.js
+++ b/js/src/views/Contract/Queries/queries.js
@ -14,12 +14,11 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import { Card, CardTitle, CardText } from 'material-ui/Card';

 import InputQuery from './inputQuery';
-import { Container, Input, InputAddress } from '~/ui';
+import { Container, TypedInput } from '~/ui';

 import styles from './queries.css';

@ -29,6 +28,7 @@ export default class Queries extends Component {
  }

  static propTypes = {
+    accountsInfo: PropTypes.object.isRequired,
    contract: PropTypes.object,
    values: PropTypes.object
  }
@ -74,11 +74,12 @@ export default class Queries extends Component {

  renderInputQuery (fn) {
    const { abi, name, signature } = fn;
-    const { contract } = this.props;
+    const { accountsInfo, contract } = this.props;

    return (
      <div className={ styles.container } key={ fn.signature }>
        <InputQuery
+          accountsInfo={ accountsInfo }
          className={ styles.method }
          inputs={ abi.inputs }
          outputs={ abi.outputs }
@ -116,34 +117,23 @@ export default class Queries extends Component {
    }

    const { api } = this.context;
-    let valueToDisplay = null;
+    const { accountsInfo } = this.props;

-    if (api.util.isInstanceOf(value, BigNumber)) {
-      valueToDisplay = value.toFormat(0);
-    } else if (api.util.isArray(value)) {
+    let valueToDisplay = value;
+
+    if (api.util.isArray(value)) {
      valueToDisplay = api.util.bytesToHex(value);
    } else if (typeof value === 'boolean') {
      valueToDisplay = value ? 'true' : 'false';
-    } else {
-      valueToDisplay = value.toString();
    }
-
-    if (type === 'address') {
    return (
-        <InputAddress
-          className={ styles.queryValue }
-          value={ valueToDisplay }
-          disabled
-        />
-      );
-    }
-
-    return (
-      <Input
-        className={ styles.queryValue }
-        value={ valueToDisplay }
-        readOnly
+      <TypedInput
+        accounts={ accountsInfo }
        allowCopy
+        isEth={ false }
+        param={ type }
+        readOnly
+        value={ valueToDisplay }
      />
    );
  }
--- a/js/src/views/Contract/contract.js
+++ b/js/src/views/Contract/contract.js
@ -46,6 +46,7 @@ class Contract extends Component {
    setVisibleAccounts: PropTypes.func.isRequired,

    accounts: PropTypes.object,
+    accountsInfo: PropTypes.object,
    balances: PropTypes.object,
    contracts: PropTypes.object,
    isTest: PropTypes.bool,
@ -115,7 +116,7 @@ class Contract extends Component {
  }

  render () {
-    const { balances, contracts, params, isTest } = this.props;
+    const { accountsInfo, balances, contracts, params, isTest } = this.props;
    const { allEvents, contract, queryValues, loadingEvents } = this.state;
    const account = contracts[params.address];
    const balance = balances[params.address];
@ -138,6 +139,7 @@ class Contract extends Component {
          />

          <Queries
+            accountsInfo={ accountsInfo }
            contract={ contract }
            values={ queryValues }
          />
@ -447,13 +449,14 @@ class Contract extends Component {
 }

 function mapStateToProps (state) {
-  const { accounts, contracts } = state.personal;
+  const { accounts, accountsInfo, contracts } = state.personal;
  const { balances } = state.balances;
  const { isTest } = state.nodeStatus;

  return {
    isTest,
    accounts,
+    accountsInfo,
    contracts,
    balances
  };