Refactor: moved Widget and CanvasHeader code into Canvas.jsx to handle both as a parent element
This commit is contained in:
Daniel S. Hansen
@@ -0,0 +1,45 @@
|
||||
// This component defines a generic Widget that can be dynamically resized and
|
||||
// dragged inside the canvas
|
||||
// Content not included, must be populated using custom charts plots and notifications
|
||||
import { useState } from 'react';
|
||||
import CanvasHeader from './CanvasHeader';
|
||||
import GridLayout from 'react-grid-layout';
|
||||
import Widget from './Widget.jsx';
|
||||
import { Box } from '@chakra-ui/react';
|
||||
|
||||
export default function Canvas() {
|
||||
// Define widgets initial position and size
|
||||
// TODO Add dynamic adding/deleting of widgets via options button
|
||||
const [layout, setLayout] = useState([
|
||||
{ i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
|
||||
{ i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
|
||||
{ i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
|
||||
]);
|
||||
|
||||
const onLayoutChange = (newLayout) => {
|
||||
setLayout(newLayout);
|
||||
console.log('Updated layout:', newLayout)
|
||||
};
|
||||
|
||||
return (
|
||||
<Box height="100%" width="100%">
|
||||
<CanvasHeader />
|
||||
<GridLayout
|
||||
className="layout"
|
||||
layout={layout}
|
||||
cols={12} // Total columns in grid
|
||||
rowHeight={30} //Height of a single row in px
|
||||
width={1200} // Total width of the grid
|
||||
margin={[10, 10]} // [horizontal, vertical] gap
|
||||
onLayoutChange={onLayoutChange}
|
||||
draggableHandle=".widget-handle" // Make only the header draggable
|
||||
>
|
||||
{layout.map((item) => (
|
||||
<div key={item.i} style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
||||
<Widget title="VDAP Widget" />
|
||||
</div>
|
||||
))}
|
||||
</GridLayout>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,57 +1,76 @@
|
||||
// This component defines a generic Widget that can be dynamically resized and
|
||||
// dragged inside the canvas
|
||||
// Content not included, must be populated using custom charts plots and notifications
|
||||
|
||||
import { useState } from 'react';
|
||||
import GridLayout from 'react-grid-layout';
|
||||
|
||||
export default function Widget() {
|
||||
// Define widgets initial position and size
|
||||
// TODO Add dynamic adding/deleting of widgets via options button
|
||||
const [layout, setLayout] = useState([
|
||||
{ i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
|
||||
{ i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
|
||||
{ i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
|
||||
]);
|
||||
|
||||
const onLayoutChange = (newLayout) => {
|
||||
setLayout(newLayout);
|
||||
console.log('Updated layout:', newLayout)
|
||||
};
|
||||
|
||||
// Widget.jsx
|
||||
export default function Widget({ title }) {
|
||||
return (
|
||||
<GridLayout
|
||||
className="layout"
|
||||
layout={layout}
|
||||
cols={12} // Total columns in grid
|
||||
rowHeight={30} //Height of a single row in px
|
||||
width={1200} // Total width of the grid
|
||||
margin={[10, 10]} // [horizontal, vertical] gap
|
||||
onLayoutChange={onLayoutChange}
|
||||
draggableHandle=".widget-handle" // Make only the header draggable
|
||||
<>
|
||||
<div
|
||||
className="widget-handle"
|
||||
style={{ padding: '4px', cursor: 'move', background: '#ddd' }}
|
||||
>
|
||||
<div key="myWidget1" style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
||||
<div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
|
||||
VDAP Widget
|
||||
</div>
|
||||
<div style={{ padding: '8px' }}>
|
||||
This is the widget content - drag or resize me!
|
||||
</div>
|
||||
</div><div key="myWidget2" style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
||||
<div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
|
||||
VDAP Widget
|
||||
</div>
|
||||
<div style={{ padding: '8px' }}>
|
||||
This is the widget content - drag or resize me!
|
||||
</div>
|
||||
</div><div key="myWidget3" style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
||||
<div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
|
||||
VDAP Widget
|
||||
</div>
|
||||
<div style={{ padding: '8px' }}>
|
||||
This is the widget content - drag or resize me!
|
||||
</div>
|
||||
</div>
|
||||
</GridLayout>
|
||||
{title}
|
||||
</div>
|
||||
<div style={{ padding: '8px' }}>
|
||||
This is the widget content - drag or resize me!
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// The below code has been moved to Canvas.jsx
|
||||
|
||||
// // This component defines a generic Widget that can be dynamically resized and
|
||||
// // dragged inside the canvas
|
||||
// // Content not included, must be populated using custom charts plots and notifications
|
||||
|
||||
// import { useState } from 'react';
|
||||
// import GridLayout from 'react-grid-layout';
|
||||
|
||||
// export default function Widget() {
|
||||
// // Define widgets initial position and size
|
||||
// // TODO Add dynamic adding/deleting of widgets via options button
|
||||
// const [layout, setLayout] = useState([
|
||||
// { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
|
||||
// { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
|
||||
// { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
|
||||
// ]);
|
||||
|
||||
// const onLayoutChange = (newLayout) => {
|
||||
// setLayout(newLayout);
|
||||
// console.log('Updated layout:', newLayout)
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <GridLayout
|
||||
// className="layout"
|
||||
// layout={layout}
|
||||
// cols={12} // Total columns in grid
|
||||
// rowHeight={30} //Height of a single row in px
|
||||
// width={1200} // Total width of the grid
|
||||
// margin={[10, 10]} // [horizontal, vertical] gap
|
||||
// onLayoutChange={onLayoutChange}
|
||||
// draggableHandle=".widget-handle" // Make only the header draggable
|
||||
// >
|
||||
// <div key="myWidget1" style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
||||
// <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
|
||||
// VDAP Widget
|
||||
// </div>
|
||||
// <div style={{ padding: '8px' }}>
|
||||
// This is the widget content - drag or resize me!
|
||||
// </div>
|
||||
// </div><div key="myWidget2" style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
||||
// <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
|
||||
// VDAP Widget
|
||||
// </div>
|
||||
// <div style={{ padding: '8px' }}>
|
||||
// This is the widget content - drag or resize me!
|
||||
// </div>
|
||||
// </div><div key="myWidget3" style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
||||
// <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
|
||||
// VDAP Widget
|
||||
// </div>
|
||||
// <div style={{ padding: '8px' }}>
|
||||
// This is the widget content - drag or resize me!
|
||||
// </div>
|
||||
// </div>
|
||||
// </GridLayout>
|
||||
// );
|
||||
// }
|
||||
|
||||
Reference in New Issue
Block a user