Fix add widget behavior, widget types and view settings button menu item...
This commit is contained in:
@@ -2,9 +2,13 @@ import GridLayout, { WidthProvider } from 'react-grid-layout';
|
||||
import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
|
||||
import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
|
||||
import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';
|
||||
import PlaceholderWidget from '../../CanvasComponents/PlaceholderWidget';
|
||||
import { WIDGET_REGISTRY, WIDGET_COMPONENTS } from '@/constants/widgetRegistry';
|
||||
|
||||
export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget}) {
|
||||
console.log("rendering MyDashboard");
|
||||
export default function MyDashboard({view, layout, onLayoutChange,
|
||||
isEditable, isDelete, DeleteWidget, widgetArray, appendWidget, openInspector
|
||||
}) {
|
||||
//console.log("rendering MyDashboard");
|
||||
const recipe = useSlotRecipe({ key: "widget" });
|
||||
const styles = recipe(); // using root recipe for widget below
|
||||
const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
|
||||
@@ -12,8 +16,8 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
|
||||
const handleDragStop = () => { document.body.style.userSelect = ""; }; // allow text highlighting all other times
|
||||
let merged = [];
|
||||
|
||||
console.log("widgetArray: ", widgetArray);
|
||||
console.log("layout: ", layout);
|
||||
//console.log("widgetArray: ", widgetArray);
|
||||
//console.log("layout: ", layout);
|
||||
|
||||
if (widgetArray.length && layout.length) {
|
||||
const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
|
||||
@@ -36,7 +40,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
|
||||
bg="gray.150"
|
||||
borderRadius="md"
|
||||
>
|
||||
<FirstWidgetButton appendWidget={ appendWidget } />
|
||||
<FirstWidgetButton view={view} appendWidget={ appendWidget } />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -59,11 +63,36 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
|
||||
position="relative"
|
||||
resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
|
||||
>
|
||||
{ merged.map((item) => {
|
||||
const Widget = item.widget;
|
||||
{merged.map((item) => {
|
||||
const def = WIDGET_REGISTRY[item.widgetKey];
|
||||
|
||||
const isReal = def?.kind === "real";
|
||||
|
||||
const Widget = isReal
|
||||
? WIDGET_COMPONENTS[item.widgetKey]
|
||||
: PlaceholderWidget;
|
||||
|
||||
const title =
|
||||
def?.PlaceholderTitle ??
|
||||
def?.label ??
|
||||
item.widgetKey ??
|
||||
"Widget";
|
||||
|
||||
return (
|
||||
<Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
|
||||
<Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget} appendWidget={appendWidget}/>
|
||||
<Widget
|
||||
title={!isReal ? title : undefined} // placeholder uses title prop
|
||||
id={item.i}
|
||||
config={item.config}
|
||||
isEditable={isEditable}
|
||||
isDelete={isDelete}
|
||||
DeleteWidget={DeleteWidget}
|
||||
appendWidget={appendWidget}
|
||||
openInspector={
|
||||
openInspector ? () => openInspector({ id: item.i, widgetKey: item.widgetKey })
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user