🎨 Refactor repeating code

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

@@ -137,10 +137,10 @@ const WidgetOptionTypeSwitch: FC<{
 }> = ({ option, widgetId, propName: key, value, handleChange }) => {
   const { t } = useTranslation([`modules/${widgetId}`, 'common']);
   const { colorScheme } = useMantineTheme();
+  const info = option.info ?? false;
 
   switch (option.type) {
     case 'switch':
-      var info = option.info !== undefined ? option.info : false;
       return (
         <Group align="center" spacing="sm">
           <Switch
@@ -149,37 +149,36 @@ const WidgetOptionTypeSwitch: FC<{
             onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
             {...option.inputProps}
           />
-          {info?
+          {info &&
             <Tooltip.Floating
               label={t(`descriptor.settings.${key}.info`)}
               position="right-start"
               c={ colorScheme === 'light' ? "black" : "dark.0" }
               color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-              styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+              styles={{ tooltip: { maxWidth: 300, }, }}
               multiline
             >
               <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-            </Tooltip.Floating> : undefined
+            </Tooltip.Floating>
           }
         </Group>
       );
     case 'text':
-      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info?
+            {info &&
               <Tooltip.Floating
                 label={t(`descriptor.settings.${key}.info`)}
                 position="right-start"
                 c={ colorScheme === 'light' ? "black" : "dark.0" }
                 color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-                styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+                styles={{ tooltip: { maxWidth: 300, }, }}
                 multiline
               >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-              </Tooltip.Floating> : undefined
+              </Tooltip.Floating>
             }
           </Group>
           <TextInput
@@ -190,22 +189,21 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'multi-select':
-      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info?
+            {info &&
               <Tooltip.Floating
                 label={t(`descriptor.settings.${key}.info`)}
                 position="right-start"
                 c={ colorScheme === 'light' ? "black" : "dark.0" }
                 color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-                styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+                styles={{ tooltip: { maxWidth: 300, }, }}
                 multiline
               >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-              </Tooltip.Floating> : undefined
+              </Tooltip.Floating>
             }
           </Group>
           <MultiSelect
@@ -218,22 +216,21 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'select':
-      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info?
+            {info &&
               <Tooltip.Floating
                 label={t(`descriptor.settings.${key}.info`)}
                 position="right-start"
                 c={ colorScheme === 'light' ? "black" : "dark.0" }
                 color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-                styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+                styles={{ tooltip: { maxWidth: 300, }, }}
                 multiline
               >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-              </Tooltip.Floating> : undefined
+              </Tooltip.Floating>
             }
           </Group>
           <Select
@@ -246,22 +243,21 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'number':
-      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info?
+            {info &&
               <Tooltip.Floating
                 label={t(`descriptor.settings.${key}.info`)}
                 position="right-start"
                 c={ colorScheme === 'light' ? "black" : "dark.0" }
                 color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-                styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+                styles={{ tooltip: { maxWidth: 300, }, }}
                 multiline
               >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-              </Tooltip.Floating> : undefined
+              </Tooltip.Floating>
             }
           </Group>
           <NumberInput
@@ -272,22 +268,21 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'slider':
-      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info?
+            {info &&
               <Tooltip.Floating
                 label={t(`descriptor.settings.${key}.info`)}
                 position="right-start"
                 c={ colorScheme === 'light' ? "black" : "dark.0" }
                 color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-                styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+                styles={{ tooltip: { maxWidth: 300, }, }}
                 multiline
               >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-              </Tooltip.Floating> : undefined
+              </Tooltip.Floating>
             }
           </Group>
           <Slider
@@ -312,7 +307,6 @@ const WidgetOptionTypeSwitch: FC<{
       );
 
     case 'draggable-list':
-      var info = option.info !== undefined ? option.info : false;
       /* eslint-disable no-case-declarations */
       const typedVal = value as IDraggableListInputValue['defaultValue'];
 
@@ -339,17 +333,17 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {info?
+            {info &&
               <Tooltip.Floating
                 label={t(`descriptor.settings.${key}.info`)}
                 position="right-start"
                 c={ colorScheme === 'light' ? "black" : "dark.0" }
                 color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-                styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+                styles={{ tooltip: { maxWidth: 300, }, }}
                 multiline
               >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-              </Tooltip.Floating> : undefined
+              </Tooltip.Floating>
             }
           </Group>
           <StaticDraggableList
@@ -375,22 +369,21 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'multiple-text':
-      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info?
+            {info &&
               <Tooltip.Floating
                 label={t(`descriptor.settings.${key}.info`)}
                 position="right-start"
                 c={ colorScheme === 'light' ? "black" : "dark.0" }
                 color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-                styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+                styles={{ tooltip: { maxWidth: 300, }, }}
                 multiline
               >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-              </Tooltip.Floating> : undefined
+              </Tooltip.Floating>
             }
           </Group>
           <MultiSelect
@@ -411,23 +404,22 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'draggable-editable-list':
-      var info = option.info !== undefined ? option.info : false;
       const { t: translateDraggableList } = useTranslation('widgets/draggable-list');
       return (
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {info?
+            {info &&
               <Tooltip.Floating
                 label={t(`descriptor.settings.${key}.info`)}
                 position="right-start"
                 c={ colorScheme === 'light' ? "black" : "dark.0" }
                 color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-                styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+                styles={{ tooltip: { maxWidth: 300, }, }}
                 multiline
               >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-              </Tooltip.Floating> : undefined
+              </Tooltip.Floating>
             }
           </Group>
           <DraggableList

src/widgets/widgets.ts

@@ -11,6 +11,7 @@ import React from 'react';
 
 import { AreaType } from '../types/area';
 import { ShapeType } from '../types/shape';
+import { boolean } from 'zod';
 
 // Type of widgets which are saved to config
 export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition> = {
@@ -31,7 +32,7 @@ export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition>
 type MakeLessSpecific<T> = T extends boolean ? boolean : T;
 
 // Types of options that can be specified for the widget edit modal
-export type IWidgetOptionValue =
+export type IWidgetOptionValue = (
   | IMultiSelectOptionValue
   | ISwitchOptionValue
   | ITextInputOptionValue
@@ -41,7 +42,7 @@ export type IWidgetOptionValue =
   | IDraggableListInputValue
   | IDraggableEditableListInputValue<any>
   | IMultipleTextInputOptionValue
-  | ILocationOptionValue;
+  | ILocationOptionValue) & CommonOptions;
 
 // Interface for data type
 interface DataType {
@@ -49,11 +50,14 @@ interface DataType {
   value: string;
 }
 
+interface CommonOptions {
+  info?: boolean;
+};
+
 // will show a multi-select with specified data
 export type IMultiSelectOptionValue = {
   type: 'multi-select';
   defaultValue: string[];
-  info?: boolean;
   data: DataType[];
   inputProps?: Partial<MultiSelectProps>;
 };
@@ -62,7 +66,6 @@ export type IMultiSelectOptionValue = {
 export type ISelectOptionValue = {
   type: 'select';
   defaultValue: string;
-  info?: boolean;
   data: DataType[];
   inputProps?: Partial<SelectProps>;
 };
@@ -71,7 +74,6 @@ export type ISelectOptionValue = {
 export type ISwitchOptionValue = {
   type: 'switch';
   defaultValue: boolean;
-  info?: boolean;
   inputProps?: Partial<SwitchProps>;
 };
 
@@ -79,7 +81,6 @@ export type ISwitchOptionValue = {
 export type ITextInputOptionValue = {
   type: 'text';
   defaultValue: string;
-  info?: boolean;
   inputProps?: Partial<TextInputProps>;
 };
 
@@ -87,7 +88,6 @@ export type ITextInputOptionValue = {
 export type INumberInputOptionValue = {
   type: 'number';
   defaultValue: number;
-  info?: boolean;
   inputProps?: Partial<NumberInputProps>;
 };
 
@@ -95,13 +95,13 @@ export type INumberInputOptionValue = {
 export type ISliderInputOptionValue = {
   type: 'slider';
   defaultValue: number;
-  info?: boolean;
   min: number;
   max: number;
   step: number;
   inputProps?: Partial<SliderProps>;
 };
 
+// will show a custom location selector
 type ILocationOptionValue = {
   type: 'location';
   defaultValue: { latitude: number; longitude: number };
@@ -114,7 +114,6 @@ export type IDraggableListInputValue = {
     key: string;
     subValues?: Record<string, any>;
   }[];
-  info?: boolean;
   items: Record<
     string,
     Record<string, Omit<Exclude<IWidgetOptionValue, IDraggableListInputValue>, 'defaultValue'>>
@@ -124,7 +123,6 @@ export type IDraggableListInputValue = {
 export type IDraggableEditableListInputValue<TData extends { id: string }> = {
   type: 'draggable-editable-list';
   defaultValue: TData[];
-  info?: boolean;
   create: () => TData;
   getLabel: (data: TData) => string | JSX.Element;
   itemComponent: (props: {
@@ -138,7 +136,6 @@ export type IDraggableEditableListInputValue<TData extends { id: string }> = {
 export type IMultipleTextInputOptionValue = {
   type: 'multiple-text';
   defaultValue: string[];
-  info?: boolean;
   inputProps?: Partial<TextInputProps>;
 };