wp_back/wp-content/plugins/visual-portfolio/gutenberg/components/toggle-modal/index.js
2024-05-20 15:37:46 +03:00

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>
) : (
''
)}
</>
);
}
}