71 lines
3.1 KiB
JavaScript
71 lines
3.1 KiB
JavaScript
import { useState } from '@wordpress/element';
|
|
import { Button, Modal } from '@wordpress/components';
|
|
import { __ } from '@wordpress/i18n';
|
|
import LCPDataGrid from './LCPDataGrid';
|
|
|
|
const LCPDatasetBuilder = ({ attributes }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [activeTab, setActiveTab] = useState(0); // Track the active tab
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => setIsOpen(true)}
|
|
style={{ marginBottom: '10px', width: '100%' }}
|
|
>
|
|
{__('Edit Dataset', 'lcp-visualize')}
|
|
</Button>
|
|
|
|
{isOpen && (
|
|
<Modal
|
|
onRequestClose={() => setIsOpen(false)}
|
|
title={__('Dataset Builder', 'lcp-visualize')}
|
|
style={{ width: '90vw', height: '90vh' }}
|
|
>
|
|
<div style={{ height: 'calc(90vh - 40px)', padding: '20px' }}>
|
|
{/* Tabs */}
|
|
<div style={{ display: 'flex', marginBottom: '20px' }}>
|
|
{attributes.datasets.map((dataset, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setActiveTab(index)} // Set the active tab
|
|
style={{
|
|
padding: '10px 20px',
|
|
margin: '0 5px',
|
|
backgroundColor: activeTab === index ? '#007cba' : '#f1f1f1',
|
|
color: activeTab === index ? 'white' : 'black',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '5px',
|
|
cursor: 'pointer',
|
|
transition: 'background-color 0.3s ease',
|
|
}}
|
|
>
|
|
{dataset.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Render all the LCPDataGrid components */}
|
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
{attributes.datasets.map((dataset, index) => (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
display: activeTab === index ? 'block' : 'none', // Show only the active tab
|
|
transition: 'display 0.3s ease',
|
|
}}
|
|
>
|
|
<LCPDataGrid dataset={dataset.data} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LCPDatasetBuilder;
|