From 5cc2fac8bc1d0edd78886c6c3f87a30249432618 Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Tue, 25 Jul 2023 21:07:43 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Tooltip=20for=20widget=20options?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Tiles/Widgets/WidgetsEditModal.tsx | 190 ++++++++++++------ src/widgets/widgets.ts | 9 + 2 files changed, 141 insertions(+), 58 deletions(-) diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index f37f4f1a5..aeadcf000 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -13,16 +13,17 @@ import { Text, TextInput, Title, + Tooltip, + useMantineTheme, } from '@mantine/core'; import { ContextModalProps } from '@mantine/modals'; -import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react'; +import { IconAlertTriangle, IconPlaylistX, IconPlus, IconAlertCircle } from '@tabler/icons-react'; 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'; import { IWidget } from '../../../../widgets/widgets'; @@ -135,70 +136,120 @@ const WidgetOptionTypeSwitch: FC<{ handleChange: (key: string, value: IntegrationOptionsValueType) => void; }> = ({ option, widgetId, propName: key, value, handleChange }) => { const { t } = useTranslation([`modules/${widgetId}`, 'common']); - const { primaryColor } = useColorTheme(); + const { fn } = useMantineTheme(); switch (option.type) { case 'switch': return ( - handleChange(key, ev.currentTarget.checked)} - /> + + handleChange(key, ev.currentTarget.checked)} + {...option.inputProps} + /> + {option.info? + + + : undefined + } + ); case 'text': return ( - handleChange(key, ev.currentTarget.value)} - /> + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + + handleChange(key, ev.currentTarget.value)} + {...option.inputProps} + /> + ); case 'multi-select': return ( - handleChange(key, v)} - /> + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + + handleChange(key, v)} + {...option.inputProps} + /> + ); case 'select': return ( - handleChange(key, v ?? option.defaultValue)} + {...option.inputProps} + /> + ); case 'number': return ( - handleChange(key, v!)} - {...option.inputProps} - /> + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + + handleChange(key, v!)} + {...option.inputProps} + /> + ); case 'slider': return ( - - {t(`descriptor.settings.${key}.label`)} + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + handleChange(key, v)} + {...option.inputProps} /> ); @@ -237,7 +288,14 @@ const WidgetOptionTypeSwitch: FC<{ return ( - {t(`descriptor.settings.${key}.label`)} + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + handleChange(key, v)} @@ -262,28 +320,44 @@ const WidgetOptionTypeSwitch: FC<{ ); case 'multiple-text': return ( - ({ value: name, label: name }))} - label={t(`descriptor.settings.${key}.label`)} - description={t(`descriptor.settings.${key}.description`)} - defaultValue={value as string[]} - withinPortal - searchable - creatable - getCreateLabel={(query) => t('common:createItem', { item: query })} - onChange={(values) => - handleChange( - key, - values.map((item: string) => item) - ) - } - /> + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + + ({ value: name, label: name }))} + description={t(`descriptor.settings.${key}.description`)} + defaultValue={value as string[]} + withinPortal + searchable + creatable + getCreateLabel={(query) => t('common:createItem', { item: query })} + onChange={(values) => + handleChange( + key, + values.map((item: string) => item) + ) + } + /> + ); case 'draggable-editable-list': const { t: translateDraggableList } = useTranslation('widgets/draggable-list'); return ( - {t(`descriptor.settings.${key}.label`)} + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + ({ data: v, diff --git a/src/widgets/widgets.ts b/src/widgets/widgets.ts index 989de520c..18e3e7eac 100644 --- a/src/widgets/widgets.ts +++ b/src/widgets/widgets.ts @@ -53,6 +53,7 @@ interface DataType { export type IMultiSelectOptionValue = { type: 'multi-select'; defaultValue: string[]; + info?: boolean; data: DataType[]; inputProps?: Partial; }; @@ -61,6 +62,7 @@ export type IMultiSelectOptionValue = { export type ISelectOptionValue = { type: 'select'; defaultValue: string; + info?: boolean; data: DataType[]; inputProps?: Partial; }; @@ -69,6 +71,7 @@ export type ISelectOptionValue = { export type ISwitchOptionValue = { type: 'switch'; defaultValue: boolean; + info?: boolean; inputProps?: Partial; }; @@ -76,6 +79,7 @@ export type ISwitchOptionValue = { export type ITextInputOptionValue = { type: 'text'; defaultValue: string; + info?: boolean; inputProps?: Partial; }; @@ -83,6 +87,7 @@ export type ITextInputOptionValue = { export type INumberInputOptionValue = { type: 'number'; defaultValue: number; + info?: boolean; inputProps?: Partial; }; @@ -90,6 +95,7 @@ export type INumberInputOptionValue = { export type ISliderInputOptionValue = { type: 'slider'; defaultValue: number; + info?: boolean; min: number; max: number; step: number; @@ -108,6 +114,7 @@ export type IDraggableListInputValue = { key: string; subValues?: Record; }[]; + info?: boolean; items: Record< string, Record, 'defaultValue'>> @@ -117,6 +124,7 @@ export type IDraggableListInputValue = { export type IDraggableEditableListInputValue = { type: 'draggable-editable-list'; defaultValue: TData[]; + info?: boolean; create: () => TData; getLabel: (data: TData) => string | JSX.Element; itemComponent: (props: { @@ -130,6 +138,7 @@ export type IDraggableEditableListInputValue = { export type IMultipleTextInputOptionValue = { type: 'multiple-text'; defaultValue: string[]; + info?: boolean; inputProps?: Partial; };