diff options
author | Dan J Miller <danjm.com@gmail.com> | 2019-06-17 22:05:47 +0800 |
---|---|---|
committer | Whymarrh Whitby <whymarrh.whitby@gmail.com> | 2019-06-17 22:05:47 +0800 |
commit | 18179fd34551680bd65df7c0c3caaa5945d1e94d (patch) | |
tree | 13618080a568ed2d8be0c61e9ced62b6eb9963ea /ui/app/pages/settings/networks-tab/network-form | |
parent | a47370057e9453e49c1d83a17fcdda275affb940 (diff) | |
download | tangerine-wallet-browser-18179fd34551680bd65df7c0c3caaa5945d1e94d.tar.gz tangerine-wallet-browser-18179fd34551680bd65df7c0c3caaa5945d1e94d.tar.zst tangerine-wallet-browser-18179fd34551680bd65df7c0c3caaa5945d1e94d.zip |
Add delete to custom RPC form (#6718, #6650)
Diffstat (limited to 'ui/app/pages/settings/networks-tab/network-form')
-rw-r--r-- | ui/app/pages/settings/networks-tab/network-form/network-form.component.js | 128 |
1 files changed, 104 insertions, 24 deletions
diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js index 5e455b65e..388e2665f 100644 --- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js +++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import validUrl from 'valid-url' -import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' import TextField from '../../../../components/ui/text-field' +import Button from '../../../../components/ui/button' -export default class NetworksTab extends PureComponent { +export default class NetworkForm extends PureComponent { static contextTypes = { t: PropTypes.func.isRequired, metricsEvent: PropTypes.func.isRequired, @@ -12,6 +12,7 @@ export default class NetworksTab extends PureComponent { static propTypes = { editRpc: PropTypes.func.isRequired, + delRpcTarget: PropTypes.func.isRequired, rpcUrl: PropTypes.string, chainId: PropTypes.string, ticker: PropTypes.string, @@ -20,6 +21,7 @@ export default class NetworksTab extends PureComponent { onClear: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired, networksTabIsInAddMode: PropTypes.bool, + isCurrentRpcTarget: PropTypes.bool, blockExplorerUrl: PropTypes.string, rpcPrefs: PropTypes.object, } @@ -70,6 +72,71 @@ export default class NetworksTab extends PureComponent { }) } + resetForm () { + const { + rpcUrl, + chainId, + ticker, + networkName, + blockExplorerUrl, + } = this.props + + this.setState({ rpcUrl, chainId, ticker, networkName, blockExplorerUrl, errors: {} }) + } + + onSubmit = () => { + const { + setRpcTarget, + rpcUrl: propsRpcUrl, + editRpc, + rpcPrefs = {}, + onClear, + networksTabIsInAddMode, + } = this.props + const { + networkName, + rpcUrl, + chainId, + ticker, + blockExplorerUrl, + } = this.state + if (propsRpcUrl && rpcUrl !== propsRpcUrl) { + editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, { + blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, + ...rpcPrefs, + }) + } else { + setRpcTarget(rpcUrl, chainId, ticker, networkName, { + blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, + ...rpcPrefs, + }) + } + + if (networksTabIsInAddMode) { + onClear() + } + } + + onCancel = () => { + const { + networksTabIsInAddMode, + onClear, + } = this.props + + if (networksTabIsInAddMode) { + onClear() + } else { + this.resetForm() + } + } + + onDelete = () => { + const { delRpcTarget, rpcUrl, onClear } = this.props + delRpcTarget(rpcUrl) + this.resetForm() + onClear() + } + stateIsUnchanged () { const { rpcUrl, @@ -152,16 +219,23 @@ export default class NetworksTab extends PureComponent { } render () { - const { setRpcTarget, viewOnly, rpcUrl: propsRpcUrl, editRpc, rpcPrefs = {} } = this.props + const { t } = this.context + const { + viewOnly, + isCurrentRpcTarget, + networksTabIsInAddMode, + } = this.props const { networkName, rpcUrl, - chainId, + chainId = '', ticker, blockExplorerUrl, errors, } = this.state + const isSubmitDisabled = viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl + const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly return ( <div className="networks-tab__network-form"> @@ -198,26 +272,32 @@ export default class NetworksTab extends PureComponent { blockExplorerUrl, 'optionalBlockExplorerUrl', )} - <PageContainerFooter - cancelText={this.context.t('cancel')} - hideCancel={true} - onSubmit={() => { - if (propsRpcUrl && rpcUrl !== propsRpcUrl) { - editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, { - blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, - ...rpcPrefs, - }) - } else { - setRpcTarget(rpcUrl, chainId, ticker, networkName, { - blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, - ...rpcPrefs, - }) - } - }} - submitText={this.context.t('save')} - submitButtonType={'confirm'} - disabled={viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl} - /> + <div className="network-form__footer"> + { + deletable && ( + <Button + type="danger" + onClick={this.onDelete} + > + { t('delete') } + </Button> + ) + } + <Button + type="default" + onClick={this.onCancel} + disabled={viewOnly || this.stateIsUnchanged()} + > + { t('cancel') } + </Button> + <Button + type="secondary" + disabled={isSubmitDisabled} + onClick={this.onSubmit} + > + { t('save') } + </Button> + </div> </div> ) } |