57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
import { useState } from '@wordpress/element';
|
|
import { Button, Modal, TextControl } from '@wordpress/components';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
const LCPHTMLModal= () => {
|
|
// State to control modal visibility and text value
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [textValue, setTextValue] = useState('');
|
|
|
|
// Open modal function
|
|
const openModal = () => setIsModalOpen(true);
|
|
|
|
// Close modal function
|
|
const closeModal = () => setIsModalOpen(false);
|
|
|
|
// Handle text change
|
|
const handleTextChange = (newValue) => {
|
|
setTextValue(newValue);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{/* Button to trigger modal */}
|
|
<Button isPrimary onClick={openModal}>
|
|
{__('Open Modal', 'lcp')}
|
|
</Button>
|
|
|
|
{/* Modal */}
|
|
{isModalOpen && (
|
|
<Modal
|
|
title={__('Text Area Modal', 'lcp')}
|
|
onRequestClose={closeModal}
|
|
className="my-modal"
|
|
>
|
|
{/* Modal content */}
|
|
<div>
|
|
<TextControl
|
|
label={__('Enter your text:', 'lcp')}
|
|
value={textValue}
|
|
onChange={handleTextChange}
|
|
placeholder={__('Type here...', 'lcp')}
|
|
style={{ width: '100%', minHeight: '100px' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Modal footer */}
|
|
<div style={{ marginTop: '16px', textAlign: 'right' }}>
|
|
<Button onClick={closeModal}>{__('Close', 'lcp')}</Button>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LCPHTMLModal;
|