Unfinished support for updating attributes
This commit is contained in:
Jeremy Rangel
@ -11,6 +11,10 @@
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"selectedDataset": {
|
||||
"type": "number",
|
||||
"default": 1
|
||||
},
|
||||
"columnTypes": {
|
||||
"type": "object",
|
||||
"default": {}
|
||||
@ -39,29 +43,93 @@
|
||||
"type": "number",
|
||||
"default": 1
|
||||
},
|
||||
"datasets": {
|
||||
"gridColumnDefinitions": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"name": "Data",
|
||||
"columns": [
|
||||
{
|
||||
"field": "Department",
|
||||
"dataType": "text",
|
||||
"renderFormat": "text",
|
||||
"sorted": "",
|
||||
"width": 150,
|
||||
"editable": true,
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"field": "Budget",
|
||||
"dataType": "number",
|
||||
"renderFormat": "currency",
|
||||
"sorted": "asc",
|
||||
"width": 120,
|
||||
"editable": true,
|
||||
"position": 1
|
||||
},
|
||||
{
|
||||
"field": "MeetAt",
|
||||
"dataType": "date",
|
||||
"renderFormat": "datetime",
|
||||
"sorted": "",
|
||||
"width": 150,
|
||||
"editable": true,
|
||||
"position": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Locations",
|
||||
"columns": [
|
||||
{
|
||||
"field": "State",
|
||||
"dataType": "text",
|
||||
"renderFormat": "text",
|
||||
"sorted": "",
|
||||
"width": 150,
|
||||
"editable": true,
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"field": "Coordinates",
|
||||
"dataType": "number",
|
||||
"renderFormat": "number",
|
||||
"sorted": "",
|
||||
"width": 120,
|
||||
"editable": true,
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"test": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"datasets": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"name": "Main",
|
||||
"data": [
|
||||
{
|
||||
"Department": "Sheriffs Office",
|
||||
"Budget": "150",
|
||||
"Budget": 1,
|
||||
"MeetAt": "2025-01-26T14:30:00Z",
|
||||
"preferredColor": "red",
|
||||
"PostContent": "<div> </div>"
|
||||
},
|
||||
{
|
||||
"Department": "Assessor",
|
||||
"Budget": "100",
|
||||
"Budget": 2,
|
||||
"MeetAt": "2025-01-26T14:30:00Z",
|
||||
"preferredColor": "#232323",
|
||||
"PostContent": "<div> </div>"
|
||||
},
|
||||
{
|
||||
"Department": "Treasurer",
|
||||
"Budget": "50",
|
||||
"Budget": 3,
|
||||
"MeetAt": "2025-01-26T14:30:00Z",
|
||||
"preferredColor": "#E72323",
|
||||
"PostContent": "<div> </div>"
|
||||
|
||||
@ -1 +1 @@
|
||||
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '5afb8b4f337b11cc4837');
|
||||
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '7a75b5732cbc1928c7a2');
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -11,6 +11,10 @@
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"selectedDataset": {
|
||||
"type": "number",
|
||||
"default": 1
|
||||
},
|
||||
"columnTypes": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
@ -41,14 +45,79 @@
|
||||
"type": "number",
|
||||
"default": 1
|
||||
},
|
||||
"gridColumnDefinitions": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"name": "Data",
|
||||
"columns": [
|
||||
{
|
||||
"field": "Department",
|
||||
"dataType": "text",
|
||||
"renderFormat": "text",
|
||||
"sorted": "",
|
||||
"width": 150,
|
||||
"editable": true,
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"field": "Budget",
|
||||
"dataType": "number",
|
||||
"renderFormat": "currency",
|
||||
"sorted": "asc",
|
||||
"width": 120,
|
||||
"editable": true,
|
||||
"position": 1
|
||||
},
|
||||
{
|
||||
"field": "MeetAt",
|
||||
"dataType": "date",
|
||||
"renderFormat": "datetime",
|
||||
"sorted": "",
|
||||
"width": 150,
|
||||
"editable": true,
|
||||
"position": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Locations",
|
||||
"columns": [
|
||||
{
|
||||
"field": "State",
|
||||
"dataType": "text",
|
||||
"renderFormat": "text",
|
||||
"sorted": "",
|
||||
"width": 150,
|
||||
"editable": true,
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"field": "Coordinates",
|
||||
"dataType": "number",
|
||||
"renderFormat": "number",
|
||||
"sorted": "",
|
||||
"width": 120,
|
||||
"editable": true,
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
"test": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"datasets": {
|
||||
"type": "array",
|
||||
"default": [{
|
||||
"name": "Data",
|
||||
"name": "Main",
|
||||
"data": [
|
||||
{ "Department": "Sheriffs Office", "Budget": "150", "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "red", "PostContent": "<div> </div>" },
|
||||
{ "Department": "Assessor", "Budget": "100", "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#232323", "PostContent": "<div> </div>" },
|
||||
{ "Department": "Treasurer", "Budget": "50", "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#E72323", "PostContent": "<div> </div>" }
|
||||
{ "Department": "Sheriffs Office", "Budget": 1, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "red", "PostContent": "<div> </div>" },
|
||||
{ "Department": "Assessor", "Budget": 2, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#232323", "PostContent": "<div> </div>" },
|
||||
{ "Department": "Treasurer", "Budget": 3, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#E72323", "PostContent": "<div> </div>" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
||||
import { ToggleControl, TextControl,PanelBody, ColorPicker, SelectControl, __experimentalNumberControl as NumberControl} from '@wordpress/components';
|
||||
import { ToggleControl, TextControl, PanelBody, ColorPicker, SelectControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';
|
||||
import './editor.scss';
|
||||
import BarGraph from './components/BarGraph';
|
||||
import LCPDatasetBuilder from '../../components/LCPDatasetBuilder';
|
||||
@ -8,23 +8,18 @@ import LCPDimensionControl from '../../components/LCPDimensionControl';
|
||||
import LCPChartBlockSettings from '../../components/LCPChartBlockSettings';
|
||||
import LCPLegend from '../../components/LCPLegend';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
|
||||
|
||||
const items = [
|
||||
{ Label: "Category 1", color: "#ff0000" },
|
||||
{ Label: "Category 2", color: "#00ff00" },
|
||||
{ Label: "Category 1", color: "#ff0000" },
|
||||
{ Label: "Categokhkjhkjhkjhky 2", color: "#00ff00" },
|
||||
{ Label: "Category 2", color: "#00ff00" },
|
||||
{ Label: "Category 1", color: "#ff0000" },
|
||||
{ Label: "Category 2", color: "#00ff00" },
|
||||
{ Label: "Category 1", color: "#ff0000" },
|
||||
{ Label: "Cat 2", color: "#00ff00" },
|
||||
{ Label: "Coy 1", color: "#ff0000" },
|
||||
|
||||
{ Label: "Category 2", color: "#00ff00" },
|
||||
];
|
||||
|
||||
const {
|
||||
@ -45,18 +40,12 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
renderLegend = false,
|
||||
toolbarLocation = 'top',
|
||||
enableGroupedBars = false,
|
||||
groupedBarsColumn = ''
|
||||
groupedBarsColumn = '',
|
||||
datasets
|
||||
} = attributes;
|
||||
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
const handleDatasetChange = (newData) => {
|
||||
setAttributes({ chartData: newData });
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<InspectorControls>
|
||||
@ -64,10 +53,10 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
<PanelBody title={__('Chart Settings', 'lcp')}>
|
||||
<LCPDatasetBuilder
|
||||
chartType="bar"
|
||||
chartData={chartData}
|
||||
onChange={handleDatasetChange}
|
||||
attributes={attributes}
|
||||
setAttributes={setAttributes}
|
||||
datasets={attributes.datasets} // Ensure datasets are passed to the component
|
||||
attributes={attributes} // Pass the full attributes
|
||||
setAttributes={setAttributes} // Pass setAttributes to LCPDatasetBuilder
|
||||
|
||||
/>
|
||||
{/* Select the source of the hierarchies */}
|
||||
<SelectControl
|
||||
@ -87,7 +76,7 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
onChange={(value) => setAttributes({ hierarchicalColumnOrder: value })}
|
||||
/>
|
||||
)}
|
||||
{/* Enable Drilling Down through hierarchies */}
|
||||
{/* Enable Drilling Down through hierarchies */}
|
||||
<ToggleControl
|
||||
label={__('Enable Drill Down', 'lcp')}
|
||||
checked={enableDrillDown}
|
||||
@ -108,36 +97,34 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
value={chartWidth}
|
||||
onChange={(value) => setAttributes({ chartWidth: value })}
|
||||
/>
|
||||
|
||||
</PanelBody>
|
||||
|
||||
{/* Color Settings */}
|
||||
<PanelBody title={__('Color Settings', 'lcp-visualize')} initialOpen={true}>
|
||||
{/* Color Settings */}
|
||||
{/* Select how the colors will be chosen */}
|
||||
<SelectControl
|
||||
label={__('Color Source', 'lcp')}
|
||||
help={__('Select the logic for setting the colors', 'lcp')}
|
||||
value={barsColorSource || 'default'}
|
||||
options={[
|
||||
{ label: 'Default', value: 'default' }, // Use the default color logic, value: 'option1' },
|
||||
{ label: 'Default', value: 'default' },
|
||||
{ label: 'Swatch', value: 'swatch' }
|
||||
]}
|
||||
onChange={(value) => setAttributes({ barsColorSource: value })}
|
||||
/>
|
||||
</PanelBody>
|
||||
|
||||
{/* Common Chart Settings */}
|
||||
<LCPChartBlockSettings
|
||||
attributes={attributes}
|
||||
setAttributes={setAttributes}
|
||||
/>
|
||||
|
||||
</InspectorControls>
|
||||
|
||||
<div className="lcp-bar-graph-container">
|
||||
{toolbarLocation === 'top' && (
|
||||
<div className="lcp-visualizer-toolbar">
|
||||
<span>Toolbar</span>
|
||||
</div>
|
||||
<div className="lcp-visualizer-toolbar">
|
||||
<span>Toolbar</span>
|
||||
</div>
|
||||
)}
|
||||
{renderLegend && (
|
||||
<LCPLegend
|
||||
@ -165,7 +152,6 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,9 +3,40 @@ import { AgGridReact } from 'ag-grid-react';
|
||||
import 'ag-grid-community/styles/ag-grid.css';
|
||||
import 'ag-grid-community/styles/ag-theme-alpine.css';
|
||||
|
||||
import LCPDataGridHeader from './LCPDataGridHeader';
|
||||
import LCPGridColorRender from './LCPGridColorRender';
|
||||
|
||||
const LCPDataGrid = ({dataset}) => {
|
||||
const LCPDataGrid = ({ dataset, index, updateDataset }) => {
|
||||
|
||||
|
||||
const onCellValueChanged = (event) => {
|
||||
// console.log('Cell value changed. Grid index:', index);
|
||||
|
||||
// Access the grid API
|
||||
const gridApi = gridRef.current.api;
|
||||
|
||||
// Fetch all the data in the grid after the change
|
||||
const allRowData = [];
|
||||
gridApi.forEachNode(node => allRowData.push(node.data));
|
||||
|
||||
// Log the entire row data
|
||||
//console.log('All Grid Data:', allRowData);
|
||||
|
||||
// Optionally, log the updated row data (just the changed row)
|
||||
// console.log('Updated Row Data:', event.data);
|
||||
|
||||
// Optionally, log the updated cell value
|
||||
// console.log('Updated Cell Value:', event.newValue);
|
||||
|
||||
// Create a fresh copy of the dataset and update its data
|
||||
const updatedDataset = { data: allRowData };
|
||||
console.log(updatedDataset.data);
|
||||
|
||||
// Send the updated data back to the parent (LCPDatasetBuilder) through updateDataset
|
||||
updateDataset(index, updatedDataset); // Call the parent function to update the dataset
|
||||
|
||||
};
|
||||
|
||||
|
||||
// lcpCellRenderer to dynamically assign the right cellRenderer
|
||||
function lcpCellRenderer(params) {
|
||||
@ -66,6 +97,10 @@ function lcpCellRenderer(params) {
|
||||
const isValidCSSColor = (value) => {
|
||||
// Ensure the value is a string before trimming
|
||||
value = String(value).trim(); // Convert to string if it's not already
|
||||
// If the value is a Date object, it should not be processed as a CSS color
|
||||
if (value instanceof Date) {
|
||||
return false; // Return false if it's a Date object
|
||||
}
|
||||
|
||||
// Regex to match valid CSS color formats (hex, rgb, rgba, hsl, hsla, named colors)
|
||||
const cssColorRegex = /^(#([0-9a-fA-F]{3}){1,2}|[a-zA-Z]+|rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)|rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(0(\.\d+)?|1(\.0+)?)\)|hsl\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%\)|hsla\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%,\s*(0(\.\d+)?|1(\.0+)?)\))$/i;
|
||||
@ -215,13 +250,21 @@ const isValidCSSColor = (value) => {
|
||||
// If it's the pinned top row, return the value as-is
|
||||
return params.newValue;
|
||||
} else {
|
||||
// Check if the value is a Date object first
|
||||
let value = params.newValue;
|
||||
|
||||
if (value instanceof Date) {
|
||||
// If it's a Date object, return the string representation (this could be customized if needed)
|
||||
return value.toLocaleString(); // or use `toISOString()` if you prefer
|
||||
}
|
||||
|
||||
// Process based on the detected data type
|
||||
switch (dataType) {
|
||||
case 'number':
|
||||
// If it's a number, return the number or NaN
|
||||
return Number(params.newValue);
|
||||
return Number(value);
|
||||
case 'date':
|
||||
const dateStr = params.newValue;
|
||||
const dateStr = value;
|
||||
|
||||
// Check if the value is an empty string or undefined
|
||||
if (!dateStr || dateStr.trim() === '') {
|
||||
@ -245,13 +288,13 @@ const isValidCSSColor = (value) => {
|
||||
return !isNaN(parsedDate.getTime()) ? parsedDate : dateStr;
|
||||
case 'color':
|
||||
// If it's a color, return the value as-is
|
||||
return params.newValue;
|
||||
return value;
|
||||
case 'html':
|
||||
// If it's HTML, we can either sanitize or leave the value as is (for now, leaving it as is)
|
||||
return params.newValue;
|
||||
return value;
|
||||
default:
|
||||
// If it's text (or any other type), return the value as-is
|
||||
return params.newValue;
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -259,6 +302,7 @@ const isValidCSSColor = (value) => {
|
||||
|
||||
|
||||
|
||||
|
||||
// Create columnDefs dynamically
|
||||
const [columnDefs, setColumnDefs] = useState([]);
|
||||
const [pinnedTopRowData, setPinnedTopRowData] = useState([]);
|
||||
@ -275,7 +319,7 @@ const isValidCSSColor = (value) => {
|
||||
field: key, // Field will match the key (Department2, Budget, etc.)
|
||||
valueParser: lcpDataTypeParser,
|
||||
cellRenderer: lcpCellRenderer, // Reference the custom cell renderer
|
||||
|
||||
headerComponent: LCPDataGridHeader
|
||||
|
||||
};
|
||||
});
|
||||
@ -378,6 +422,8 @@ const isValidCSSColor = (value) => {
|
||||
onSortChanged={onSortChanged}
|
||||
onFilterChanged={onFilterChanged}
|
||||
onGridReady={onGridReady}
|
||||
onCellValueChanged={onCellValueChanged}
|
||||
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,67 +1,46 @@
|
||||
import React, { useState } from 'react';
|
||||
import {Icon, calendar } from '@wordpress/icons'; // Make sure to use the correct import
|
||||
|
||||
const LCPDataGridHeader = (props) => {
|
||||
const { displayName, column, updateData, sort, menu } = props;
|
||||
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [newHeader, setNewHeader] = useState(displayName);
|
||||
const colId = column.colId;
|
||||
const handleEditClick = () => {
|
||||
setEditing(true);
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
setEditing(false);
|
||||
if (updateData && typeof updateData === 'function') {
|
||||
updateData(newHeader); // Save the new header name
|
||||
// Sorting function
|
||||
const handleSort = () => {
|
||||
if (sort === 'asc') {
|
||||
updateData(colId, 'desc'); // Assuming updateData is a function to set sort direction
|
||||
} else {
|
||||
updateData(colId, 'asc');
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
setNewHeader(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="custom-header">
|
||||
<div className="lcp-data-grid-column-header" style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
|
||||
|
||||
{/* Calendar Icon */}
|
||||
<span style={{ marginRight: '8px', display: 'inline-block' }}>
|
||||
<Icon icon={ calendar } />
|
||||
|
||||
{/* Column ID
|
||||
<div>
|
||||
<span style={{ marginRight: '8px' }}>
|
||||
<strong>{colId}</strong>
|
||||
</span>
|
||||
</div>*/}
|
||||
|
||||
{/* Editable Header Text */}
|
||||
{/* Icon */}
|
||||
<span style={{ marginRight: '8px' }}>
|
||||
<img src="your-icon-path.svg" alt="icon" style={{ width: '20px', height: '20px' }} />
|
||||
<span
|
||||
style={{ fontWeight: 'bold', fontSize: '16px' }}
|
||||
onClick={handleSort} // Click header for sorting
|
||||
>
|
||||
{displayName}
|
||||
</span>
|
||||
{editing ? (
|
||||
<input
|
||||
type="text"
|
||||
value={newHeader}
|
||||
onBlur={handleBlur}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '14px', padding: '2px 5px', width: '100%' }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={handleEditClick}
|
||||
style={{ cursor: 'pointer', fontWeight: 'bold', fontSize: '16px' }}
|
||||
>
|
||||
{newHeader}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Sorting *
|
||||
{/* Sorting Indicators */}
|
||||
<span style={{ marginLeft: '8px' }}>
|
||||
{sort === 'asc' && <span>↑</span>}
|
||||
{sort === 'desc' && <span>↓</span>}
|
||||
</span> */}
|
||||
</span>
|
||||
|
||||
{/* Additional Menu *
|
||||
{/* Additional Menu */}
|
||||
<span style={{ marginLeft: '8px' }}>
|
||||
<button onClick={menu}>Menu</button>
|
||||
</span> */}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -3,9 +3,36 @@ import { Button, Modal } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import LCPDataGrid from './LCPDataGrid';
|
||||
|
||||
const LCPDatasetBuilder = ({ attributes }) => {
|
||||
const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState(0); // Track the active tab
|
||||
const handleUpdateDataset = (index, newData) => {
|
||||
// Log the newData in a readable format
|
||||
console.log("newData (formatted for copy-pasting):", JSON.stringify(newData, null, 2));
|
||||
|
||||
// Make a shallow copy of the datasets to avoid mutation
|
||||
const datasets = [...attributes.datasets];
|
||||
|
||||
// Ensure the data structure is correct before replacing
|
||||
if (newData && newData.data) {
|
||||
// Replace the data array at the specified index with the new data
|
||||
datasets[0].data = newData.data;
|
||||
|
||||
// Log the datasets before the update
|
||||
console.log("Before Update:", JSON.stringify(datasets, null, 2));
|
||||
|
||||
// Update the attributes with the modified datasets
|
||||
setAttributes({
|
||||
datasets: datasets
|
||||
});
|
||||
|
||||
// Log the updated attributes (you can check this after re-rendering)
|
||||
console.log("After Update:", JSON.stringify(datasets, null, 2));
|
||||
} else {
|
||||
console.error("Invalid data format:", newData);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -56,7 +83,11 @@ const LCPDatasetBuilder = ({ attributes }) => {
|
||||
transition: 'display 0.3s ease',
|
||||
}}
|
||||
>
|
||||
<LCPDataGrid dataset={dataset.data} />
|
||||
<LCPDataGrid
|
||||
dataset={dataset.data} // Pass the specific dataset data (only the data, not the entire dataset)
|
||||
index={index}
|
||||
updateDataset={handleUpdateDataset} // Function defined outside of class context
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Popover, ColorPicker } from '@wordpress/components';
|
||||
|
||||
// AG-Grid Cell Renderer Component
|
||||
const LCPGridColorRender = (props) => {
|
||||
const [color, setColor] = useState(props.value || ''); // Get the color value from the cell data
|
||||
const [isPopoverVisible, setPopoverVisible] = useState(false); // To toggle the visibility of the Popover
|
||||
|
||||
useEffect(() => {
|
||||
// Update color if the value from AG-Grid changes
|
||||
@ -11,18 +13,44 @@ const LCPGridColorRender = (props) => {
|
||||
}
|
||||
}, [props.value]); // Dependency on props.value so it updates when the cell value changes
|
||||
|
||||
// Handle the color change from the color picker
|
||||
const handleColorChange = (newColor) => {
|
||||
setColor(newColor);
|
||||
// Optionally, update the cell value in AG-Grid here
|
||||
if (props.setValue) {
|
||||
props.setValue(newColor);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
backgroundColor: color,
|
||||
border: '1px solid #000',
|
||||
margin: '0 auto'
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
{/* Color square */}
|
||||
<div
|
||||
onClick={() => setPopoverVisible(!isPopoverVisible)} // Toggle popover visibility on click
|
||||
style={{
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
backgroundColor: color,
|
||||
border: '1px solid #000',
|
||||
margin: '0 auto',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Popover for color picker */}
|
||||
{isPopoverVisible && (
|
||||
<Popover
|
||||
position="bottom center"
|
||||
onClose={() => setPopoverVisible(false)} // Close popover when clicking outside
|
||||
>
|
||||
<ColorPicker
|
||||
color={color}
|
||||
onChangeComplete={(value) => handleColorChange(value.hex)} // Update color on change
|
||||
/>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LCPGridColorRender;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user