75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import { Modal, Button, Column, Row, Text, Icon } from "ui"
|
|
import { sizeInfo } from "ui/style"
|
|
import autobind from "autobind-decorator"
|
|
|
|
export class MessageModal extends React.Component {
|
|
static propTypes = {
|
|
open: PropTypes.bool,
|
|
icon: PropTypes.string.isRequired,
|
|
message: PropTypes.string.isRequired,
|
|
detail: PropTypes.string,
|
|
onDismiss: PropTypes.func,
|
|
}
|
|
|
|
@autobind
|
|
onSubmit(e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
|
|
const { onDismiss } = this.props
|
|
|
|
if (onDismiss) {
|
|
onDismiss()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { open, icon, message, detail } = this.props
|
|
|
|
return (
|
|
<Modal open={open} width={sizeInfo.modalWidth}>
|
|
<form onSubmit={this.onSubmit} id="MessageForm">
|
|
<Row>
|
|
<Row.Item>
|
|
<Icon name={icon} size={sizeInfo.modalMessageIcon} />
|
|
</Row.Item>
|
|
<Row.Item grow>
|
|
<Column height="100%">
|
|
<Column.Item height={sizeInfo.formColumnSpacing} />
|
|
<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={sizeInfo.formColumnSpacing} />
|
|
<Column.Item height={sizeInfo.buttonHeight}>
|
|
<Row>
|
|
<Row.Item grow />
|
|
<Row.Item>
|
|
<Button
|
|
submit="MessageForm"
|
|
text="OK"
|
|
onClick={this.onSubmit}
|
|
/>
|
|
</Row.Item>
|
|
<Row.Item grow />
|
|
</Row>
|
|
</Column.Item>
|
|
<Column.Item height={sizeInfo.formColumnSpacing} />
|
|
</Column>
|
|
</Row.Item>
|
|
<Row.Item width={sizeInfo.formRowSpacing} />
|
|
</Row>
|
|
</form>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|