53 lines
941 B
JavaScript
53 lines
941 B
JavaScript
|
import './style.scss';
|
||
|
|
|
||
|
|
import classnames from 'classnames/dedupe';
|
||
|
|
|
||
|
|
import { Button, Modal } from '@wordpress/components';
|
||
|
|
import { Component } from '@wordpress/element';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Component Class
|
||
|
|
*/
|
||
|
|
export default class ToggleModal extends Component {
|
||
|
|
constructor(...args) {
|
||
|
|
super(...args);
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
isOpened: false,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { children, modalTitle, buttonLabel, size } = this.props;
|
||
|
|
|
||
|
|
const { isOpened } = this.state;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button
|
||
|
|
isSecondary
|
||
|
|
onClick={() => this.setState({ isOpened: !isOpened })}
|
||
|
|
>
|
||
|
|
{buttonLabel}
|
||
|
|
</Button>
|
||
|
|
{isOpened ? (
|
||
|
|
<Modal
|
||
|
|
title={modalTitle}
|
||
|
|
onRequestClose={() =>
|
||
|
|
this.setState({ isOpened: !isOpened })
|
||
|
|
}
|
||
|
|
className={classnames(
|
||
|
|
'vpf-component-modal',
|
||
|
|
size ? `vpf-component-modal-size-${size}` : ''
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Modal>
|
||
|
|
) : (
|
||
|
|
''
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|