Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Widget options always visible, use defaultValue

Browse Source
This commit is contained in:
ajnart
2023-01-06 11:18:29 +09:00
parent b2ceb5345a
commit f2d45b67e7
2 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
View File

@@ -24,6 +24,7 @@ import { useColorTheme } from '../../../../tools/color';
export type WidgetEditModalInnerProps = { export type WidgetEditModalInnerProps = {
widgetId: string; widgetId: string;
options: IWidget<string, any>['properties']; options: IWidget<string, any>['properties'];
widgetOptions: IWidget<string, any>['properties'];
}; };
type IntegrationOptionsValueType = IWidget<string, any>['properties'][string]; type IntegrationOptionsValueType = IWidget<string, any>['properties'][string];
@@ -35,7 +36,11 @@ export const WidgetsEditModal = ({
}: ContextModalProps<WidgetEditModalInnerProps>) => { }: ContextModalProps<WidgetEditModalInnerProps>) => {
const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']); const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']);
const [moduleProperties, setModuleProperties] = useState(innerProps.options); const [moduleProperties, setModuleProperties] = useState(innerProps.options);
const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][]; // const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][];
const items = Object.entries(innerProps.widgetOptions ?? {}) as [
string,
IntegrationOptionsValueType
][];
// Find the Key in the "Widgets" Object that matches the widgetId // Find the Key in the "Widgets" Object that matches the widgetId
const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets]; const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets];
@@ -79,8 +84,9 @@ export const WidgetsEditModal = ({
return ( return (
<Stack> <Stack>
{items.map(([key, value], index) => { {items.map(([key, defaultValue], index) => {
const option = (currentWidgetDefinition as any).options[key] as IWidgetOptionValue; const option = (currentWidgetDefinition as any).options[key] as IWidgetOptionValue;
const value = moduleProperties[key] ?? defaultValue;
if (!option) { if (!option) {
return ( return (
@@ -176,7 +182,6 @@ function WidgetOptionTypeSwitch(
<Slider <Slider
color={primaryColor} color={primaryColor}
key={`${option.type}-${index}`} key={`${option.type}-${index}`}
label={t(`descriptor.settings.${key}.label`)}
value={value as number} value={value as number}
min={option.min} min={option.min}
max={option.max} max={option.max}

11
src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
View File

@@ -5,6 +5,7 @@ import { IWidget } from '../../../../widgets/widgets';
import { GenericTileMenu } from '../GenericTileMenu'; import { GenericTileMenu } from '../GenericTileMenu';
import { WidgetEditModalInnerProps } from './WidgetsEditModal'; import { WidgetEditModalInnerProps } from './WidgetsEditModal';
import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal'; import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
import WidgetsDefinitions from '../../../../widgets';
export type WidgetChangePositionModalInnerProps = { export type WidgetChangePositionModalInnerProps = {
widgetId: string; widgetId: string;
@@ -20,6 +21,14 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
const { t } = useTranslation(`modules/${integration}`); const { t } = useTranslation(`modules/${integration}`);
if (!widget) return null; if (!widget) return null;
// Match widget.id with WidgetsDefinitions
// First get the keys
const keys = Object.keys(WidgetsDefinitions);
// Then find the key that matches the widget.id
const widgetDefinition = keys.find((key) => key === widget.id);
// Then get the widget definition
const widgetDefinitionObject =
WidgetsDefinitions[widgetDefinition as keyof typeof WidgetsDefinitions];
const handleDeleteClick = () => { const handleDeleteClick = () => {
openContextModalGeneric<WidgetsRemoveModalInnerProps>({ openContextModalGeneric<WidgetsRemoveModalInnerProps>({
@@ -50,6 +59,8 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
innerProps: { innerProps: {
widgetId: integration, widgetId: integration,
options: widget.properties, options: widget.properties,
// Cast as the right type for the correct widget
widgetOptions: widgetDefinitionObject.options as any,
}, },
}); });
}; };