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) => (
-
+