diff --git a/src/components/Dashboard/Wrappers/WrapperContent.tsx b/src/components/Dashboard/Wrappers/WrapperContent.tsx index 5a864b6ab..1d1d3ad87 100644 --- a/src/components/Dashboard/Wrappers/WrapperContent.tsx +++ b/src/components/Dashboard/Wrappers/WrapperContent.tsx @@ -57,9 +57,12 @@ export function WrapperContent({ apps, refs, widgets }: WrapperContentProps) { {...widget.shape[shapeSize]?.location} {...widget.shape[shapeSize]?.size} > - - - + ); })} diff --git a/src/widgets/WidgetWrapper.tsx b/src/widgets/WidgetWrapper.tsx index da0837307..bb7323073 100644 --- a/src/widgets/WidgetWrapper.tsx +++ b/src/widgets/WidgetWrapper.tsx @@ -1,4 +1,5 @@ -import { ReactNode } from 'react'; +import { ComponentType, useMemo } from 'react'; +import Widgets from '.'; import { HomarrCardWrapper } from '../components/Dashboard/Tiles/HomarrCardWrapper'; import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu'; import { IWidget } from './widgets'; @@ -7,12 +8,41 @@ interface WidgetWrapperProps { widgetId: string; widget: IWidget; className: string; - children: ReactNode; + WidgetComponent: ComponentType<{ widget: IWidget }>; } -export const WidgetWrapper = ({ widgetId, widget, className, children }: WidgetWrapperProps) => ( - - - {children} - -); +// If a property has no value, set it to the default value +const useWidget = >(widget: T): T => { + const definition = Widgets[widget.id as keyof typeof Widgets]; + + return useMemo(() => { + const newProps = { ...widget.properties }; + + Object.entries(definition.options).forEach(([key, option]) => { + if (newProps[key] == null) { + newProps[key] = option.defaultValue; + } + }); + + return { + ...widget, + properties: newProps, + }; + }, [widget]); +}; + +export const WidgetWrapper = ({ + widgetId, + widget, + className, + WidgetComponent, +}: WidgetWrapperProps) => { + const widgetWithDefaultProps = useWidget(widget); + + return ( + + + + + ); +}; diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx index f06ca88d2..edd4b6672 100644 --- a/src/widgets/calendar/CalendarTile.tsx +++ b/src/widgets/calendar/CalendarTile.tsx @@ -43,7 +43,7 @@ const definition = defineWidget({ component: CalendarTile, }); -export type ICalendarWidget = IWidget; +export type ICalendarWidget = IWidget<(typeof definition)['id'], typeof definition>; interface CalendarTileProps { widget: ICalendarWidget; @@ -124,7 +124,7 @@ const getReleasedMediasForDate = ( date: Date, widget: ICalendarWidget ): MediasType => { - const radarrReleaseType = widget.properties.radarrReleaseType ?? 'inCinemas'; + const { radarrReleaseType } = widget.properties; const books = medias?.books.filter((b) => new Date(b.releaseDate).toDateString() === date.toDateString()) ?? diff --git a/src/widgets/dashDot/DashDotTile.tsx b/src/widgets/dashDot/DashDotTile.tsx index 34175f4b3..522c555c3 100644 --- a/src/widgets/dashDot/DashDotTile.tsx +++ b/src/widgets/dashDot/DashDotTile.tsx @@ -188,7 +188,7 @@ function DashDotTile({ widget }: DashDotTileProps) { {graphsOrder .filter((g) => g.subValues.enabled) .map((g) => ( - +