Create edit owner modal window

This commit is contained in:
Germán Martínez 2019-06-11 10:56:08 +02:00
parent ccee257a39
commit cf8427b89a
3 changed files with 190 additions and 0 deletions

View File

@ -0,0 +1,140 @@
// @flow
import React from 'react'
import { connect } from 'react-redux'
import { List } from 'immutable'
import { withStyles } from '@material-ui/core/styles'
import OpenInNew from '@material-ui/icons/OpenInNew'
import Row from '~/components/layout/Row'
import Col from '~/components/layout/Col'
import Link from '~/components/layout/Link'
import Block from '~/components/layout/Block'
import GnoForm from '~/components/forms/GnoForm'
import Button from '~/components/layout/Button'
import Hairline from '~/components/layout/Hairline'
import Field from '~/components/forms/Field'
import TextField from '~/components/forms/TextField'
import Paragraph from '~/components/layout/Paragraph'
import Identicon from '~/components/Identicon'
import IconButton from '@material-ui/core/IconButton'
import Close from '@material-ui/icons/Close'
import { getEtherScanLink } from '~/logic/wallets/getWeb3'
import type { Owner } from '~/routes/safe/store/models/owner'
import { makeOwner } from '~/routes/safe/store/models/owner'
import {
composeValidators,
required,
minMaxLength,
} from '~/components/forms/validator'
import Modal from '~/components/Modal'
import { setOwners } from '~/logic/safe/utils'
import { styles } from './style'
import { secondary } from '~/theme/variables'
const openIconStyle = {
height: '16px',
color: secondary,
}
const stylesModal = () => ({
smallerModalWindow: {
height: 'auto',
position: 'static',
},
})
type Props = {
onClose: () => void,
classes: Object,
isOpen: boolean,
safeAddress: string,
ownerAddress: string,
owners: List<Owner>,
network: string,
}
const EditOwnerComponent = ({
onClose,
isOpen,
classes,
safeAddress,
ownerAddress,
owners,
network,
}: Props) => {
const handleSubmit = (values) => {
const updatedOwners = owners.filter(o => o.address !== ownerAddress).push(
makeOwner({ name: values.ownerName, address: ownerAddress }),
)
setOwners(safeAddress, updatedOwners)
onClose()
}
return (
<Modal
title="Edit owner from Safe"
description="Edit owner from Safe"
handleClose={onClose}
open={isOpen}
paperClassName={stylesModal.smallerModalWindow}
>
<Row align="center" grow className={classes.heading}>
<Paragraph className={classes.manage} noMargin weight="bolder">
Edit owner name
</Paragraph>
<IconButton onClick={onClose} disableRipple>
<Close className={classes.close} />
</IconButton>
</Row>
<Hairline />
<GnoForm onSubmit={handleSubmit}>
{(...args) => (
<React.Fragment>
<Block className={classes.container}>
<Row margin="md">
<Field
name="ownerName"
component={TextField}
type="text"
validate={composeValidators(required, minMaxLength(1, 50))}
placeholder="Owner name*"
text="Owner name*"
className={classes.addressInput}
/>
</Row>
<Row>
<Block align="center" className={classes.user}>
<Identicon address={ownerAddress} diameter={32} />
<Paragraph style={{ marginLeft: 10 }} size="md" color="disabled" noMargin>
{ownerAddress}
</Paragraph>
<Link className={classes.open} to={getEtherScanLink(ownerAddress, network)} target="_blank">
<OpenInNew style={openIconStyle} />
</Link>
</Block>
</Row>
</Block>
<Hairline />
<Row align="center" className={classes.buttonRow}>
<Button className={classes.button} minWidth={140} onClick={onClose}>
Cancel
</Button>
<Button
type="submit"
className={classes.button}
variant="contained"
minWidth={140}
color="primary"
>
Save
</Button>
</Row>
</React.Fragment>
)}
</GnoForm>
</Modal>
)
}
const EditOwnerModal = withStyles(styles)(EditOwnerComponent)
export default EditOwnerModal

View File

@ -0,0 +1,39 @@
// @flow
import {
lg, md, sm, error, background,
} from '~/theme/variables'
export const styles = (theme: Object) => ({
heading: {
padding: `${sm} ${lg}`,
justifyContent: 'space-between',
maxHeight: '75px',
boxSizing: 'border-box',
},
manage: {
fontSize: '24px',
},
container: {
padding: `${md} ${lg}`,
paddingBottom: '40px',
},
close: {
height: '35px',
width: '35px',
},
buttonRow: {
height: '84px',
justifyContent: 'center',
},
buttonEdit: {
color: '#fff',
backgroundColor: error,
},
open: {
paddingLeft: sm,
width: 'auto',
'&:hover': {
cursor: 'pointer',
},
},
})

View File

@ -22,6 +22,7 @@ import Button from '~/components/layout/Button'
import AddOwnerModal from './AddOwnerModal'
import RemoveOwnerModal from './RemoveOwnerModal'
import ReplaceOwnerModal from './ReplaceOwnerModal'
import EditOwnerModal from './EditOwnerModal'
import OwnerAddressTableCell from './OwnerAddressTableCell'
import type { Owner } from '~/routes/safe/store/models/owner'
import {
@ -62,6 +63,7 @@ class ManageOwners extends React.Component<Props, State> {
showAddOwner: false,
showRemoveOwner: false,
showReplaceOwner: false,
showEditOwner: false,
}
onShow = (action: Action, row?: Object) => () => {
@ -95,6 +97,7 @@ class ManageOwners extends React.Component<Props, State> {
showAddOwner,
showRemoveOwner,
showReplaceOwner,
showEditOwner,
selectedOwnerName,
selectedOwnerAddress,
} = this.state
@ -185,6 +188,14 @@ class ManageOwners extends React.Component<Props, State> {
userAddress={userAddress}
createTransaction={createTransaction}
/>
<EditOwnerModal
onClose={this.onHide('EditOwner')}
isOpen={showEditOwner}
safeAddress={safeAddress}
ownerAddress={selectedOwnerAddress}
owners={owners}
network={network}
/>
</React.Fragment>
)
}