add NumberInput, Slider to widget edit modal

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

@@ -1,4 +1,15 @@
-import { Alert, Button, Group, MultiSelect, Stack, Switch, TextInput, Text } from '@mantine/core';
+import {
+  Alert,
+  Button,
+  Group,
+  MultiSelect,
+  Stack,
+  Switch,
+  TextInput,
+  Text,
+  NumberInput,
+  Slider,
+} from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { IconAlertTriangle } from '@tabler/icons';
 import { Trans, useTranslation } from 'next-i18next';
@@ -8,6 +19,7 @@ import type { IWidgetOptionValue } from '../../../../widgets/widgets';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { IWidget } from '../../../../widgets/widgets';
+import { useColorTheme } from '../../../../tools/color';
 
 export type WidgetEditModalInnerProps = {
   widgetId: string;
@@ -83,7 +95,38 @@ export const WidgetsEditModal = ({
             </Alert>
           );
         }
+        return WidgetOptionTypeSwitch(
+          option,
+          index,
+          t,
+          key,
+          value,
+          handleChange,
+          getMutliselectData
+        );
+      })}
+      <Group position="right">
+        <Button onClick={() => context.closeModal(id)} variant="light">
+          {t('common:cancel')}
+        </Button>
+        <Button onClick={handleSave}>{t('common:save')}</Button>
+      </Group>
+    </Stack>
+  );
+};
 
+// Widget options are computed based on their type.
+// here you can define new types for options (along with editing the widgets.d.ts file)
+function WidgetOptionTypeSwitch(
+  option: IWidgetOptionValue,
+  index: number,
+  t: any,
+  key: string,
+  value: string | number | boolean | string[],
+  handleChange: (key: string, value: IntegrationOptionsValueType) => void,
+  getMutliselectData: (option: string) => any
+) {
+  const { primaryColor, secondaryColor } = useColorTheme();
   switch (option.type) {
     case 'switch':
       return (
@@ -97,6 +140,7 @@ export const WidgetsEditModal = ({
     case 'text':
       return (
         <TextInput
+          color={primaryColor}
           key={`${option.type}-${index}`}
           label={t(`descriptor.settings.${key}.label`)}
           value={value as string}
@@ -106,6 +150,7 @@ export const WidgetsEditModal = ({
     case 'multi-select':
       return (
         <MultiSelect
+          color={primaryColor}
           key={`${option.type}-${index}`}
           data={getMutliselectData(key)}
           label={t(`descriptor.settings.${key}.label`)}
@@ -113,16 +158,30 @@ export const WidgetsEditModal = ({
           onChange={(v) => handleChange(key, v)}
         />
       );
+    case 'number':
+      return (
+        <NumberInput
+          color={primaryColor}
+          key={`${option.type}-${index}`}
+          label={t(`descriptor.settings.${key}.label`)}
+          value={value as number}
+          onChange={(v) => handleChange(key, v!)}
+        />
+      );
+    case 'slider':
+      return (
+        <Slider
+          color={primaryColor}
+          key={`${option.type}-${index}`}
+          label={t(`descriptor.settings.${key}.label`)}
+          value={value as number}
+          min={option.min}
+          max={option.max}
+          step={option.step}
+          onChange={(v) => handleChange(key, v)}
+        />
+      );
     default:
       return null;
   }
-      })}
+}
-      <Group position="right">
-        <Button onClick={() => context.closeModal(id)} variant="light">
-          {t('common:cancel')}
-        </Button>
-        <Button onClick={handleSave}>{t('common:save')}</Button>
-      </Group>
-    </Stack>
-  );
-};