2019-02-01 10:02:19 +01:00
|
|
|
// @flow
|
|
|
|
|
import * as React from "react";
|
|
|
|
|
import classNames from "classnames";
|
2019-02-01 10:39:41 +01:00
|
|
|
import injectSheet from "react-jss";
|
2019-02-01 10:02:19 +01:00
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
title: string,
|
|
|
|
|
closeButton: any,
|
|
|
|
|
body: any,
|
2019-02-01 10:39:41 +01:00
|
|
|
active: boolean,
|
|
|
|
|
classes: any
|
2019-02-01 10:02:19 +01:00
|
|
|
};
|
|
|
|
|
|
2019-02-01 10:39:41 +01:00
|
|
|
const styles = {
|
|
|
|
|
resize: {
|
|
|
|
|
maxWidth: "100%",
|
|
|
|
|
width: "auto !important",
|
|
|
|
|
display: "inline-block"
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2019-02-01 10:02:19 +01:00
|
|
|
class Modal extends React.Component<Props> {
|
|
|
|
|
|
|
|
|
|
render() {
|
2019-02-01 10:39:41 +01:00
|
|
|
const { title, closeButton, body, active, classes } = this.props;
|
2019-02-01 10:02:19 +01:00
|
|
|
|
|
|
|
|
const isActive = active ? "is-active" : null;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={classNames(
|
|
|
|
|
"modal",
|
|
|
|
|
isActive
|
|
|
|
|
)}>
|
|
|
|
|
<div className="modal-background" />
|
2019-02-01 10:39:41 +01:00
|
|
|
<div className={classNames("modal-card", classes.resize)}>
|
2019-02-01 10:02:19 +01:00
|
|
|
|
|
|
|
|
<header className="modal-card-head">
|
|
|
|
|
<p className="modal-card-title">
|
|
|
|
|
{title}
|
|
|
|
|
</p>
|
|
|
|
|
{closeButton}
|
|
|
|
|
</header>
|
|
|
|
|
<section className="modal-card-body">
|
|
|
|
|
{body}
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2019-02-01 10:39:41 +01:00
|
|
|
export default injectSheet(styles)(Modal);
|