status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implementation of adding new owner

This commit is contained in:
apanizo 2018-10-03 12:01:03 +02:00
parent 9e6c97aea8
commit d4557e8515
1 changed files with 55 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/routes/open/components/SafeOwnersForm/index.jsx
View File

@ -39,6 +39,9 @@ const styles = () => ({
padding: `${md} ${lg}`, padding: `${md} ${lg}`,
}, },
owner: { owner: {
padding: `0 ${lg}`,
},
header: {
padding: `${sm} ${lg}`, padding: `${sm} ${lg}`,
}, },
name: { name: {
@ -97,6 +100,12 @@ class SafeOwners extends React.Component<Props, State> {
})) }))
} }
onAddOwner = () => {
this.setState(state => ({
numOwners: state.numOwners + 1,
}))
}
render() { render() {
const { classes, errors, otherAccounts } = this.props const { classes, errors, otherAccounts } = this.props
const { numOwners } = this.state const { numOwners } = this.state
@ -109,56 +118,58 @@ class SafeOwners extends React.Component<Props, State> {
</Paragraph> </Paragraph>
</Block> </Block>
<Hairline /> <Hairline />
<Row className={classes.owner}> <Row className={classes.header}>
<Col xs={4}>NAME</Col> <Col xs={4}>NAME</Col>
<Col xs={8}>ADDRESS</Col> <Col xs={8}>ADDRESS</Col>
</Row> </Row>
<Hairline /> <Hairline />
{ [...Array(Number(numOwners))].map((x, index) => { <Block margin="md">
const addressName = getOwnerAddressBy(index) { [...Array(Number(numOwners))].map((x, index) => {
const addressName = getOwnerAddressBy(index)
return ( return (
<Row key={`owner${(index)}`} className={classes.owner}> <Row key={`owner${(index)}`} className={classes.owner}>
<Col xs={4}> <Col xs={4}>
<Field <Field
className={classes.name} className={classes.name}
name={getOwnerNameBy(index)} name={getOwnerNameBy(index)}
component={TextField} component={TextField}
type="text" type="text"
validate={required} validate={required}
placeholder="Owner Name*" placeholder="Owner Name*"
text="Owner Name" text="Owner Name"
/> />
</Col> </Col>
<Col xs={7}> <Col xs={7}>
<Field <Field
name={addressName} name={addressName}
component={TextField} component={TextField}
inputAdornment={noErrorsOn(addressName, errors) && { inputAdornment={noErrorsOn(addressName, errors) && {
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<CheckCircle className={classes.check} /> <CheckCircle className={classes.check} />
</InputAdornment> </InputAdornment>
), ),
}} }}
type="text" type="text"
validate={getAddressValidators(otherAccounts, index)} validate={getAddressValidators(otherAccounts, index)}
placeholder="Owner Address*" placeholder="Owner Address*"
text="Owner Address" text="Owner Address"
/> />
</Col> </Col>
<Col xs={1} center="xs" middle="xs"> <Col xs={1} center="xs" middle="xs">
{ index > 0 && { index > 0 &&
<IconButton aria-label="Delete" onClick={this.onRemoveRow(index)} className={classes.trash}> <IconButton aria-label="Delete" onClick={this.onRemoveRow(index)} className={classes.trash}>
<Delete /> <Delete />
</IconButton> </IconButton>
} }
</Col> </Col>
</Row> </Row>
) )
}) } }) }
</Block>
<Row align="center" grow className={classes.add} margin="xl"> <Row align="center" grow className={classes.add} margin="xl">
<Button color="secondary"> <Button color="secondary" onClick={this.onAddOwner}>
+ ADD ANOTHER OWNER + ADD ANOTHER OWNER
</Button> </Button>
</Row> </Row>