bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx
2019-02-26 14:40:01 -03:00

86 lines
2.1 KiB
JavaScript
Executable File

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Button from '/imports/ui/components/button/component';
import ModalBase, { withModalState } from '../base/component';
import { styles } from './styles';
const propTypes = {
title: PropTypes.string,
dismiss: PropTypes.shape({
callback: PropTypes.func,
label: PropTypes.string.isRequired,
description: PropTypes.string,
}),
};
const defaultProps = {
shouldCloseOnOverlayClick: true,
shouldShowCloseButton: true,
overlayClassName: styles.overlay,
dismiss: {
label: 'Cancel',
description: 'Disregards changes and closes the modal',
},
};
class ModalSimple extends Component {
constructor(props) {
super(props);
this.handleDismiss = this.handleDismiss.bind(this);
}
handleDismiss() {
this.props.modalHide(this.props.dismiss.callback);
}
render() {
const {
title,
hideBorder,
dismiss,
className,
modalisOpen,
onRequestClose,
shouldShowCloseButton,
...otherProps
} = this.props;
const closeModel = (onRequestClose || this.handleDismiss);
return (
<ModalBase
isOpen={modalisOpen}
className={cx(className, styles.modal)}
onRequestClose={closeModel}
contentLabel={title}
{...otherProps}
>
<header className={hideBorder ? styles.headerNoBorder : styles.header}>
<h1 className={styles.title}>{title}</h1>
{shouldShowCloseButton ? (
<Button
className={styles.dismiss}
label={dismiss.label}
icon="close"
circle
hideLabel
onClick={closeModel}
aria-describedby="modalDismissDescription"
/>
) : null}
</header>
<div className={styles.content}>
{this.props.children}
</div>
<div id="modalDismissDescription" hidden>{confirm.description}</div>
</ModalBase>
);
}
}
ModalSimple.propTypes = propTypes;
ModalSimple.defaultProps = defaultProps;
export default withModalState(ModalSimple);