diff --git a/app/components/AmountInput/AmountInput.js b/app/components/AmountInput/AmountInput.js index b9efb05e..ed9f91e0 100644 --- a/app/components/AmountInput/AmountInput.js +++ b/app/components/AmountInput/AmountInput.js @@ -7,6 +7,7 @@ class AmountInput extends React.Component { this.handleChange = this.handleChange.bind(this) this.handleBlur = this.handleBlur.bind(this) this.handleKeyDown = this.handleKeyDown.bind(this) + this.textInput = React.createRef() } setRules() { @@ -41,6 +42,14 @@ class AmountInput extends React.Component { } } + focusTextInput() { + this.textInput.current.focus() + } + + clearTextInput() { + this.textInput.current.value = '' + } + parseNumber(_value) { let value = _value || '' if (typeof _value === 'string') { @@ -143,6 +152,7 @@ class AmountInput extends React.Component { onBlur={this.handleBlur} onKeyDown={this.handleKeyDown} readOnly={readOnly} + ref={this.textInput} type="text" required value={amount} diff --git a/app/components/Contacts/AddChannel.js b/app/components/Contacts/AddChannel.js index 351910f4..019e996c 100644 --- a/app/components/Contacts/AddChannel.js +++ b/app/components/Contacts/AddChannel.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component } from 'react' import PropTypes from 'prop-types' import Isvg from 'react-inlinesvg' @@ -6,137 +6,150 @@ import x from 'icons/x.svg' import styles from './AddChannel.scss' -const AddChannel = ({ - contactsform, - closeContactsForm, - openSubmitChannelForm, - updateContactFormSearchQuery, - updateManualFormSearchQuery, - setNode, - activeChannelPubkeys, - nonActiveChannelPubkeys, - pendingOpenChannelPubkeys, - filteredNetworkNodes, - loadingChannelPubkeys, - showManualForm, - openManualForm -}) => { - const renderRightSide = node => { - if (loadingChannelPubkeys.includes(node.pub_key)) { - return ( - -
-
-
- - ) - } +class AddChannel extends Component { + constructor(props) { + super(props) + this.searchInput = React.createRef() + } - if (activeChannelPubkeys.includes(node.pub_key)) { - return ( - - Online - - ) - } + componentDidMount() { + // Focus the search input field. + this.searchInput.current.focus() + } - if (nonActiveChannelPubkeys.includes(node.pub_key)) { - return ( - - Offline - - ) - } + render() { + const { + contactsform, + closeContactsForm, + openSubmitChannelForm, + updateContactFormSearchQuery, + updateManualFormSearchQuery, + setNode, + activeChannelPubkeys, + nonActiveChannelPubkeys, + pendingOpenChannelPubkeys, + filteredNetworkNodes, + loadingChannelPubkeys, + showManualForm, + openManualForm + } = this.props + const renderRightSide = node => { + if (loadingChannelPubkeys.includes(node.pub_key)) { + return ( + +
+
+
+ + ) + } + + if (activeChannelPubkeys.includes(node.pub_key)) { + return ( + + Online + + ) + } + + if (nonActiveChannelPubkeys.includes(node.pub_key)) { + return ( + + Offline + + ) + } + + if (pendingOpenChannelPubkeys.includes(node.pub_key)) { + return ( + + Pending + + ) + } + + if (!node.addresses.length) { + return Private + } - if (pendingOpenChannelPubkeys.includes(node.pub_key)) { return ( - - Pending + { + // set the node public key for the submit form + setNode(node) + // open the submit form + openSubmitChannelForm() + }} + > + Connect ) } - if (!node.addresses.length) { - return Private + const searchUpdated = search => { + updateContactFormSearchQuery(search) + + if (search.includes('@') && search.split('@')[0].length === 66) { + updateManualFormSearchQuery(search) + } } return ( - { - // set the node public key for the submit form - setNode(node) - // open the submit form - openSubmitChannelForm() - }} - > - Connect - - ) - } +
+
+ searchUpdated(event.target.value)} + ref={this.searchInput} + /> + + + +
- const searchUpdated = search => { - updateContactFormSearchQuery(search) +
+
    + {filteredNetworkNodes.map(node => ( +
  • +
    + {node.alias.length > 0 ? ( +

    + {node.alias.trim()} + + ({node.pub_key.substr(0, 10)} + ... + {node.pub_key.substr(node.pub_key.length - 10)}) + +

    + ) : ( +

    + {node.pub_key} +

    + )} +
    +
    {renderRightSide(node)}
    +
  • + ))} +
+
- if (search.includes('@') && search.split('@')[0].length === 66) { - updateManualFormSearchQuery(search) - } + {showManualForm && ( +
+

+ Hm, looks like we can't see that node from here, wanna try to manually connect? +

+
+ Connect Manually +
+
+ )} +
+ ) } - - return ( -
-
- searchUpdated(event.target.value)} - // ref={input => input && input.focus()} - /> - - - -
- -
-
    - {filteredNetworkNodes.map(node => ( -
  • -
    - {node.alias.length > 0 ? ( -

    - {node.alias.trim()} - - ({node.pub_key.substr(0, 10)} - ... - {node.pub_key.substr(node.pub_key.length - 10)}) - -

    - ) : ( -

    - {node.pub_key} -

    - )} -
    -
    {renderRightSide(node)}
    -
  • - ))} -
-
- - {showManualForm && ( -
-

- Hm, looks like we can't see that node from here, wanna try to manually connect? -

-
- Connect Manually -
-
- )} -
- ) } AddChannel.propTypes = { diff --git a/app/components/Contacts/SubmitChannelForm.js b/app/components/Contacts/SubmitChannelForm.js index 63095d63..a0140e0b 100644 --- a/app/components/Contacts/SubmitChannelForm.js +++ b/app/components/Contacts/SubmitChannelForm.js @@ -8,6 +8,17 @@ import AmountInput from 'components/AmountInput' import styles from './SubmitChannelForm.scss' class SubmitChannelForm extends React.Component { + constructor(props) { + super(props) + this.amountInput = React.createRef() + } + + componentDidMount() { + // Clear and Focus the amount input field. + this.amountInput.current.clearTextInput() + this.amountInput.current.focusTextInput() + } + render() { const { closeChannelForm, @@ -107,6 +118,7 @@ class SubmitChannelForm extends React.Component { amount={contactCapacity} currency={ticker.currency} onChangeEvent={updateContactCapacity} + ref={this.amountInput} />
{ - const onCurrencyFilterClick = currency => { - // change the input amount - setRequestAmount(btc.convert(ticker.currency, currency, amount)) + // Clear the form of any previous data. + setRequestMemo('') + setRequestAmount('') - setCurrency(currency) - setRequestCurrencyFilters(false) + // Focus the amount input field. + this.amountInput.current.focusTextInput() } - return ( -
-
- -

Request Payment

-
- -
-
-
- - -
-
- -
-
setRequestCurrencyFilters(!showCurrencyFilters)} - > - {currencyName} - - - -
-
    - {currentCurrencyFilters.map(filter => ( -
  • onCurrencyFilterClick(filter.key)}> - {filter.name} -
  • - ))} -
+ render() { + const { + requestform: { amount, memo, showCurrencyFilters }, + ticker, + + setRequestAmount, + setRequestMemo, + setCurrency, + setRequestCurrencyFilters, + currencyName, + requestFiatAmount, + + currentCurrencyFilters, + + onRequestSubmit + } = this.props + + const onCurrencyFilterClick = currency => { + // change the input amount + setRequestAmount(btc.convert(ticker.currency, currency, amount)) + + setCurrency(currency) + setRequestCurrencyFilters(false) + } + + return ( +
+
+ +

Request Payment

+
+ +
+
+
+ + +
+
+ +
+
setRequestCurrencyFilters(!showCurrencyFilters)} + > + {currencyName} + + + +
+
    + {currentCurrencyFilters.map(filter => ( +
  • onCurrencyFilterClick(filter.key)}> + {filter.name} +
  • + ))} +
+
-
- -
{`≈ ${requestFiatAmount || 0} ${ - ticker.fiatTicker - }`}
-
- -
-
- -
-
- setRequestMemo(event.target.value)} - id="memo" - /> -
-
- -
-
0 ? styles.active : undefined}`} - onClick={onRequestSubmit} - > - Request -
-
+ +
{`≈ ${requestFiatAmount || 0} ${ + ticker.fiatTicker + }`}
+
+ +
+
+ +
+
+ setRequestMemo(event.target.value)} + id="memo" + /> +
+
+ +
+
0 ? styles.active : undefined}`} + onClick={onRequestSubmit} + > + Request +
+
+
-
- ) + ) + } } Request.propTypes = { diff --git a/test/unit/components/Form/Pay.spec.js b/test/unit/components/Form/Pay.spec.js index ef1503e1..8cf504e5 100644 --- a/test/unit/components/Form/Pay.spec.js +++ b/test/unit/components/Form/Pay.spec.js @@ -1,5 +1,5 @@ import React from 'react' -import { configure, shallow } from 'enzyme' +import { configure, mount } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import Pay from 'components/Form/Pay' @@ -45,7 +45,7 @@ const defaultProps = { describe('Form', () => { describe('should show the form without an input', () => { - const el = shallow() + const el = mount() it('should contain Pay', () => { expect(el.find('input#paymentRequest').props.value).toBe(undefined) @@ -54,7 +54,7 @@ describe('Form', () => { describe('should show lightning with a lightning input', () => { const props = { ...defaultProps, isLn: true } - const el = shallow() + const el = mount() it('should contain Pay', () => { expect(el.find('input#paymentRequest').props.value).toBe(undefined) @@ -63,7 +63,7 @@ describe('Form', () => { describe('should show on-chain with an on-chain input', () => { const props = { ...defaultProps, isOnchain: true } - const el = shallow() + const el = mount() it('should contain Pay', () => { expect(el.find('input#paymentRequest').props.value).toBe(undefined) diff --git a/test/unit/components/Form/Request.spec.js b/test/unit/components/Form/Request.spec.js index 7a5976e9..0df1c97b 100644 --- a/test/unit/components/Form/Request.spec.js +++ b/test/unit/components/Form/Request.spec.js @@ -1,5 +1,5 @@ import React from 'react' -import { configure, shallow } from 'enzyme' +import { configure, mount } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import Request from 'components/Form/Request' @@ -28,7 +28,7 @@ const defaultProps = { describe('Form', () => { describe('should show request form when formType is REQUEST_FORM', () => { const props = { ...defaultProps } - const el = shallow() + const el = mount() it('should contain Request', () => { expect(el.contains('Request')).toBe(true) })