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

Fixed message dialog

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-28 10:53:32 -08:00
parent 4ce0638655
commit c2eeccb66f
16 changed files with 101 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,31 +1,50 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Modal, Button, Column, Text } from 'ui'
import { Modal, Button, Column, Row, Text, Icon } from 'ui'
import { sizeInfo } from 'ui/style'
export class MessageModal extends React.Component {
static propTypes = {
open: PropTypes.bool,
title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
detail: PropTypes.string,
onDismiss: PropTypes.func
}
render() {
const { onDismiss, open } = this.props
const { onDismiss, open, icon, message, detail } = this.props
return (
<Modal open={open} onCancel={onDismiss}>
<Column>
<Column.Item>
<Text>{this.props.title}</Text>
</Column.Item>
<Column.Item>
<Text>{this.props.message}</Text>
</Column.Item>
<Column.Item>
<Button onClick={onDismiss}>OK</Button>
</Column.Item>
</Column>
<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' tone='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>
)
}