Refactor settings code; Add props access to every settings item

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -17,6 +17,7 @@ import { Trans, useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
+import { mapObject } from '../../../../tools/client/objects';
 import { useColorTheme } from '../../../../tools/color';
 import Widgets from '../../../../widgets';
 import type { IDraggableListInputValue, IWidgetOptionValue } from '../../../../widgets/widgets';
@@ -176,6 +177,7 @@ const WidgetOptionTypeSwitch: FC<{
           label={t(`descriptor.settings.${key}.label`)}
           value={value as number}
           onChange={(v) => handleChange(key, v!)}
+          {...option.inputProps}
         />
       );
     case 'slider':
@@ -193,55 +195,54 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'draggable-list':
-      // eslint-disable-next-line no-case-declarations
+      /* eslint-disable no-case-declarations */
       const typedVal = value as IDraggableListInputValue['defaultValue'];
 
+      const extractSubValue = (liName: string, settingName: string) =>
+        typedVal.find((v) => v.key === liName)?.subValues?.[settingName];
+
+      const handleSubChange = (liName: string, settingName: string) => (_: any, newVal: any) =>
+        handleChange(
+          key,
+          typedVal.map((oldVal) =>
+            oldVal.key === liName
+              ? {
+                  ...oldVal,
+                  subValues: {
+                    ...oldVal.subValues,
+                    [settingName]: newVal,
+                  },
+                }
+              : oldVal
+          )
+        );
+
       return (
         <Stack spacing="xs">
           <Text>{t(`descriptor.settings.${key}.label`)}</Text>
           <DraggableList
             value={typedVal}
             onChange={(v) => handleChange(key, v)}
-            labels={Object.fromEntries(
+            labels={mapObject(option.items, (liName) =>
-              Object.entries(option.items).map(([graphName]) => [
+              t(`descriptor.settings.${key}.${liName}.label`)
-                graphName,
-                t(`descriptor.settings.${key}.${graphName}.label`),
-              ])
             )}
           >
-            {Object.fromEntries(
+            {mapObject(option.items, (liName, liSettings) =>
-              Object.entries(option.items).map(([graphName, graph]) => [
+              Object.entries(liSettings).map(([settingName, setting], i) => (
-                graphName,
-                Object.entries(graph).map(([subKey, setting], i) => (
                 <WidgetOptionTypeSwitch
-                    key={`${graphName}.${subKey}.${i}`}
+                  key={`${liName}.${settingName}.${i}`}
                   option={setting as IWidgetOptionValue}
                   widgetId={widgetId}
-                    propName={`${key}.${graphName}.${subKey}`}
+                  propName={`${key}.${liName}.${settingName}`}
-                    value={typedVal.find((v) => v.key === graphName)?.subValues?.[subKey]}
+                  value={extractSubValue(liName, settingName)}
-                    handleChange={(_, newVal) =>
+                  handleChange={handleSubChange(liName, settingName)}
-                      handleChange(
-                        key,
-                        typedVal.map((oldVal) =>
-                          oldVal.key === graphName
-                            ? {
-                                ...oldVal,
-                                subValues: {
-                                  ...oldVal.subValues,
-                                  [subKey]: newVal,
-                                },
-                              }
-                            : oldVal
-                        )
-                      )
-                    }
                 />
-                )),
+              ))
-              ])
             )}
           </DraggableList>
         </Stack>
       );
+    /* eslint-enable no-case-declarations */
     default:
       return null;
   }

src/tools/client/objects.ts

@@ -0,0 +1,5 @@
+export const mapObject = <T, R>(
+  items: Record<string, T>,
+  mapper: (prop: string, item: T) => R
+): Record<string, R> =>
+  Object.fromEntries(Object.entries(items).map(([name, item]) => [name, mapper(name, item)]));

src/widgets/dashDot/DashDotTile.tsx

@@ -28,6 +28,11 @@ const definition = defineWidget({
     graphHeight: {
       type: 'number',
       defaultValue: 115,
+      inputProps: {
+        step: 5,
+        stepHoldDelay: 500,
+        stepHoldInterval: 100,
+      },
     },
     graphsOrder: {
       type: 'draggable-list',

src/widgets/widgets.ts

@@ -1,3 +1,11 @@
+import {
+  MultiSelectProps,
+  NumberInputProps,
+  SelectProps,
+  SliderProps,
+  SwitchProps,
+  TextInputProps,
+} from '@mantine/core';
 import { TablerIcon } from '@tabler/icons';
 import React from 'react';
 import { AreaType } from '../types/area';
@@ -41,31 +49,36 @@ export type IMultiSelectOptionValue = {
   type: 'multi-select';
   defaultValue: string[];
   data: DataType[];
+  inputProps?: Partial<MultiSelectProps>;
 };
 
-// will show a multi-select with specified data
+// will show a select with specified data
 export type ISelectOptionValue = {
   type: 'select';
   defaultValue: string;
   data: DataType[];
+  inputProps?: Partial<SelectProps>;
 };
 
 // will show a switch
 export type ISwitchOptionValue = {
   type: 'switch';
   defaultValue: boolean;
+  inputProps?: Partial<SwitchProps>;
 };
 
 // will show a text-input
 export type ITextInputOptionValue = {
   type: 'text';
   defaultValue: string;
+  inputProps?: Partial<TextInputProps>;
 };
 
 // will show a number-input
 export type INumberInputOptionValue = {
   type: 'number';
   defaultValue: number;
+  inputProps?: Partial<NumberInputProps>;
 };
 
 // will show a slider-input
@@ -75,8 +88,10 @@ export type ISliderInputOptionValue = {
   min: number;
   max: number;
   step: number;
+  inputProps?: Partial<SliderProps>;
 };
 
+// will show a sortable list that can have sub settings
 export type IDraggableListInputValue = {
   type: 'draggable-list';
   defaultValue: {