Your IP : 216.73.216.171
/**
* External dependencies
*/
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
/**
* Internal dependencies
*/
import Button from '../sui-button';
/**
* Modal component.
*/
export default class Modal extends React.Component {
/**
* Close modal.
*/
closeModal() {
window.SUI.closeModal();
}
/**
* Render component.
*
* @return {*} Modal component.
*/
render() {
const sizeClass = this.props.size ? 'sui-modal-' + this.props.size : '';
return (
<div className={ classNames( 'sui-modal', sizeClass ) }>
<div role="dialog" id={ 'modal-' + this.props.id } className="sui-modal-content" aria-modal="true" aria-labelledby={ 'modal-title-' + this.props.id } aria-describedby={ 'modal-description-' + this.props.id }>
<div className="sui-box">
<div className="sui-box-header sui-flatten sui-content-center sui-spacing-top--60">
<Button
type="button"
classes={ [ 'sui-button-icon', 'sui-button-float--right' ] }
icon="sui-icon-close sui-md"
text={ <span className="sui-screen-reader-text">{ __( 'Close', 'wphb' ) }</span> }
onClick={ this.closeModal } />
<h3 className="sui-box-title sui-lg" id={ 'modal-title-' + this.props.id }>
{ this.props.title }
</h3>
{ this.props.description &&
<p className="sui-description" id={ 'modal-description-' + this.props.id }>
{ this.props.description }
</p> }
</div>
{this.props.content &&
<div className="sui-box-body">
{this.props.content}
</div>
}
<div className="sui-box-footer sui-flatten sui-content-center">
{this.props.footer && this.props.footer}
{!this.props.footer && this.props.footerBtn &&
<>
<Button
onClick={this.closeModal}
type="button"
classes={['sui-button', 'sui-button-ghost']}
text={__('Cancel', 'wphb')}/>
{this.props.footerBtn}
</>
}
</div>
{ this.props.isMember && this.props.imagePath &&
<img
className="sui-image"
alt={ this.props.title }
src={ this.props.imagePath }
srcSet={ this.props.imageSrcSet }
/> }
</div>
</div>
</div>
);
}
}
Modal.propTypes = {
id: PropTypes.string,
isMember: PropTypes.bool,
imagePath: PropTypes.string,
imageSrcSet: PropTypes.string,
size: PropTypes.string,
title: PropTypes.string,
description: PropTypes.string,
content: PropTypes.element,
footerBtn: PropTypes.element,
};