john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Get modal with embedded form working

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-28 13:15:46 -08:00
parent 6f4330adc5
commit eb54ca0b62
6 changed files with 75 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
website/src/Modal/MessageModal.js
View File

@@ -2,6 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import { Modal, Button, Column, Row, Text, Icon } from 'ui'
import { sizeInfo } from 'ui/style'
import { reactAutoBind } from 'auto-bind2'
export class MessageModal extends React.Component {
static propTypes = {
@@ -12,39 +13,57 @@ export class MessageModal extends React.Component {
onDismiss: PropTypes.func
}
constructor(props) {
super(props)
reactAutoBind(this)
}
onSubmit(e) {
e.preventDefault()
e.stopPropagation()
const { onDismiss } = this.props
if (onDismiss) {
onDismiss()
}
}
render() {
const { onDismiss, open, icon, message, detail } = this.props
const { open, icon, message, detail } = this.props
return (
<Modal open={open} width={400} onCancel={onDismiss}>
<Row>
<Row.Item>
<Icon name={icon} size={150} />
</Row.Item>
<Row.Item grow>
<Column height='100%'>
<Column.Item height={15} />
<Column.Item grow>
<Text width='100%' align='center'>{message}</Text>
</Column.Item>
<Column.Item>
<Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text>
</Column.Item>
<Column.Item height={15} />
<Column.Item height={sizeInfo.buttonHeight}>
<Row>
<Row.Item grow />
<Row.Item>
<Button onClick={onDismiss}>OK</Button>
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item height={15} />
</Column>
</Row.Item>
<Row.Item width={10} />
</Row>
<Modal open={open} width={400}>
<form onSubmit={this.onSubmit} id='messageModal'>
<Row>
<Row.Item>
<Icon name={icon} size={150} />
</Row.Item>
<Row.Item grow>
<Column height='100%'>
<Column.Item height={15} />
<Column.Item grow>
<Text width='100%' align='center'>{message}</Text>
</Column.Item>
<Column.Item>
<Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text>
</Column.Item>
<Column.Item height={15} />
<Column.Item height={sizeInfo.buttonHeight}>
<Row>
<Row.Item grow />
<Row.Item>
<Button submit='messageModal' onClick={this.onSubmit}>OK</Button>
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item height={15} />
</Column>
</Row.Item>
<Row.Item width={10} />
</Row>
</form>
</Modal>
)
}