Skip to content

Commit

Permalink
Add delete and reset form
Browse files Browse the repository at this point in the history
  • Loading branch information
@chikeichan
chikeichan committed Jun 13, 2019
1 parent 33daae1 commit 749832d
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 49 deletions.
20 changes: 20 additions & 0 deletions ui/app/pages/settings/networks-tab/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,3 +198,23 @@
color: #000000;
}
}

.network-form {
&__footer {
display: flex;
flex-flow: row nowrap;
margin: .75rem 0;

.btn-default {
margin-right: .375rem;
}

.btn-secondary {
margin-left: .375rem;
}

.btn-danger {
margin-right: 3.75rem;
}
}
}
137 changes: 112 additions & 25 deletions ui/app/pages/settings/networks-tab/network-form/network-form.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ 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,
Expand Down Expand Up @@ -72,6 +73,63 @@ 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 = {},
} = 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,
})
}
}

onCancel = () => {
const {
networksTabIsInAddMode,
onClear,
} = this.props

if (networksTabIsInAddMode) {
onClear()
} else {
this.resetForm()
}
}

onDelete = () => {
const { delRpcTarget, rpcUrl } = this.props
delRpcTarget(rpcUrl)
}

stateIsUnchanged () {
const {
rpcUrl,
Expand Down Expand Up @@ -154,6 +212,7 @@ export default class NetworksTab extends PureComponent {
}

render () {
const { t } = this.context
const {
setRpcTarget,
delRpcTarget,
Expand All @@ -162,18 +221,20 @@ export default class NetworksTab extends PureComponent {
rpcUrl: propsRpcUrl,
editRpc,
rpcPrefs = {},
onCancel,
networksTabIsInAddMode,
} = this.props
const {
networkName,
rpcUrl,
chainId,
chainId = '',
ticker,
blockExplorerUrl,
errors,
} = this.state

const hideCancel = viewOnly || isCurrentRpcTarget || networksTabIsInAddMode
const isSubmitDisabled = viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl
const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly;

return (
<div className="networks-tab__network-form">
Expand Down Expand Up @@ -210,28 +271,54 @@ export default class NetworksTab extends PureComponent {
blockExplorerUrl,
'optionalBlockExplorerUrl',
)}
<PageContainerFooter
cancelText={this.context.t('delete')}
cancelButtonType="danger"
hideCancel={hideCancel}
onCancel={() => !hideCancel && delRpcTarget(rpcUrl)}
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}
>
{ t('cancel') }
</Button>
<Button
type="secondary"
disabled={isSubmitDisabled}
onClick={this.onSubmit}
>
{ t('save') }
</Button>
</div>
{/*<PageContainerFooter*/}
{/* cancelText={this.context.t('cancel')}*/}
{/* cancelButtonType="default"*/}
{/* hideCancel={hideCancel}*/}
{/* onCancel={() => !hideCancel && delRpcTarget(rpcUrl)}*/}
{/* 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>
)
}
Expand Down
75 changes: 51 additions & 24 deletions ui/app/pages/settings/networks-tab/networks-tab.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,15 +128,36 @@ export default class NetworksTab extends PureComponent {
const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props

return (
<div className={classnames('networks-tab__networks-list', {
'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode,
})}>
<div
className={classnames('networks-tab__networks-list', {
'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode,
})}
>
{ networksToRender.map(network => this.renderNetworkListItem(network, selectedNetwork.rpcUrl)) }
{
networksTabIsInAddMode && (
<div
className="networks-tab__networks-list-item"
>
<NetworkDropdownIcon
backgroundColor="white"
innerBorder="1px solid rgb(106, 115, 125)"
/>
<div
className="networks-tab__networks-list-name networks-tab__networks-list-name--selected"
>
{ this.context.t('newNetwork') }
</div>
<div className="networks-tab__networks-list-arrow" />
</div>
)
}
</div>
)
}

renderNetworksTabContent () {
const { t } = this.context
const {
setRpcTarget,
delRpcTarget,
Expand All @@ -157,31 +178,37 @@ export default class NetworksTab extends PureComponent {
networkDefaultedToProvider,
providerUrl,
} = this.props

const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)

return (
<div className="networks-tab__content">
{this.renderNetworksList()}
{networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
? <NetworkForm
setRpcTarget={setRpcTarget}
editRpc={editRpc}
networkName={label || labelKey && this.context.t(labelKey) || ''}
rpcUrl={rpcUrl}
chainId={chainId}
ticker={ticker}
onClear={() => {
setNetworksTabAddMode(false)
setSelectedSettingsRpcUrl(null)
}}
delRpcTarget={delRpcTarget}
viewOnly={viewOnly}
isCurrentRpcTarget={providerUrl === rpcUrl}
networksTabIsInAddMode={networksTabIsInAddMode}
rpcPrefs={rpcPrefs}
blockExplorerUrl={blockExplorerUrl}
/>
: null
{ this.renderNetworksList() }
{
shouldRenderNetworkForm
? (
<NetworkForm
setRpcTarget={setRpcTarget}
editRpc={editRpc}
networkName={label || labelKey && t(labelKey) || ''}
rpcUrl={rpcUrl}
chainId={chainId}
ticker={ticker}
onClear={() => {
setNetworksTabAddMode(false)
setSelectedSettingsRpcUrl(null)
}}
delRpcTarget={delRpcTarget}
viewOnly={viewOnly}
isCurrentRpcTarget={providerUrl === rpcUrl}
networksTabIsInAddMode={networksTabIsInAddMode}
rpcPrefs={rpcPrefs}
blockExplorerUrl={blockExplorerUrl}
cancelText={t('cancel')}
/>
)
: null
}
</div>
)
Expand Down

0 comments on commit 749832d

Please sign in to comment.