Change rendering from id to type

This commit is contained in:
Meier Lukas
2023-03-30 21:54:44 +02:00
parent 66f9dd51dd
commit 43dc1cd70c
3 changed files with 9 additions and 7 deletions

View File

@@ -42,17 +42,18 @@ export function WrapperContent({ apps, refs, widgets }: WrapperContentProps) {
); );
})} })}
{widgets.map((widget) => { {widgets.map((widget) => {
const definition = Widgets[widget.id as keyof typeof Widgets] as const definition = Widgets[widget.type as keyof typeof Widgets] as
| IWidgetDefinition | IWidgetDefinition
| undefined; | undefined;
if (!definition) return null; if (!definition) return null;
console.log(definition);
return ( return (
<GridstackTileWrapper <GridstackTileWrapper
type="widget" type="widget"
key={widget.id} key={widget.id}
itemRef={refs.items.current[widget.id]} itemRef={refs.items.current[widget.id]}
id={definition.id} id={widget.id}
{...definition.gridstack} {...definition.gridstack}
{...widget.shape[shapeSize]?.location} {...widget.shape[shapeSize]?.location}
{...widget.shape[shapeSize]?.size} {...widget.shape[shapeSize]?.size}
@@ -60,7 +61,7 @@ export function WrapperContent({ apps, refs, widgets }: WrapperContentProps) {
<WidgetWrapper <WidgetWrapper
className="grid-stack-item-content" className="grid-stack-item-content"
widget={widget} widget={widget}
widgetId={widget.id} widgetType={widget.type}
WidgetComponent={definition.component} WidgetComponent={definition.component}
/> />
</GridstackTileWrapper> </GridstackTileWrapper>

View File

@@ -6,7 +6,7 @@ import ErrorBoundary from './boundary';
import { IWidget } from './widgets'; import { IWidget } from './widgets';
interface WidgetWrapperProps { interface WidgetWrapperProps {
widgetId: string; widgetType: string;
widget: IWidget<string, any>; widget: IWidget<string, any>;
className: string; className: string;
WidgetComponent: ComponentType<{ widget: IWidget<string, any> }>; WidgetComponent: ComponentType<{ widget: IWidget<string, any> }>;
@@ -14,7 +14,7 @@ interface WidgetWrapperProps {
// If a property has no value, set it to the default value // If a property has no value, set it to the default value
const useWidget = <T extends IWidget<string, any>>(widget: T): T => { const useWidget = <T extends IWidget<string, any>>(widget: T): T => {
const definition = Widgets[widget.id as keyof typeof Widgets]; const definition = Widgets[widget.type as keyof typeof Widgets];
return useMemo(() => { return useMemo(() => {
const newProps = { ...widget.properties }; const newProps = { ...widget.properties };
@@ -33,7 +33,7 @@ const useWidget = <T extends IWidget<string, any>>(widget: T): T => {
}; };
export const WidgetWrapper = ({ export const WidgetWrapper = ({
widgetId, widgetType: widgetId,
widget, widget,
className, className,
WidgetComponent, WidgetComponent,

View File

@@ -13,7 +13,8 @@ import { ShapeType } from '../types/shape';
// Type of widgets which are saved to config // Type of widgets which are saved to config
export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition> = { export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition> = {
id: TKey; id: string;
type: TKey;
properties: { properties: {
[key in keyof TDefinition['options']]: MakeLessSpecific< [key in keyof TDefinition['options']]: MakeLessSpecific<
TDefinition['options'][key]['defaultValue'] TDefinition['options'][key]['defaultValue']