Bookmarks - Open in new Tab (#983)

This commit is contained in:
Sourav Ghosh
2023-05-29 21:29:31 +05:30
committed by GitHub
parent ccff2061f1
commit bdf61fa35f

View File

@@ -12,6 +12,7 @@ import {
TextInput, TextInput,
Title, Title,
createStyles, createStyles,
Switch,
} from '@mantine/core'; } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { import {
@@ -36,6 +37,7 @@ interface BookmarkItem {
name: string; name: string;
href: string; href: string;
iconUrl: string; iconUrl: string;
openNewTab: boolean;
} }
const definition = defineWidget({ const definition = defineWidget({
@@ -54,6 +56,7 @@ const definition = defineWidget({
name: 'Homarr Documentation', name: 'Homarr Documentation',
href: 'https://homarr.dev', href: 'https://homarr.dev',
iconUrl: '/imgs/logo/logo.png', iconUrl: '/imgs/logo/logo.png',
openNewTab: false,
}; };
}, },
itemComponent({ data, onChange, delete: deleteData }) { itemComponent({ data, onChange, delete: deleteData }) {
@@ -96,7 +99,7 @@ const definition = defineWidget({
return; return;
} }
onChange(form.values); onChange({ ...form.values, openNewTab: form.values.openNewTab });
}, [form.values]); }, [form.values]);
return ( return (
@@ -121,6 +124,11 @@ const definition = defineWidget({
form.setFieldValue('iconUrl', value ?? ''); form.setFieldValue('iconUrl', value ?? '');
}} }}
/> />
<Switch
{...form.getInputProps('openNewTab')}
label="Open in new tab"
checked={form.values.openNewTab}
/>
<Button <Button
onClick={() => deleteData()} onClick={() => deleteData()}
leftIcon={<IconTrash size="1rem" />} leftIcon={<IconTrash size="1rem" />}
@@ -205,6 +213,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
px="xl" px="xl"
component="a" component="a"
href={item.href} href={item.href}
target={item.openNewTab ? '_blank' : undefined}
withBorder withBorder
> >
<BookmarkItemContent item={item} /> <BookmarkItemContent item={item} />
@@ -232,6 +241,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
px="xl" px="xl"
component="a" component="a"
href={item.href} href={item.href}
target={item.openNewTab ? '_blank' : undefined}
withBorder withBorder
> >
<BookmarkItemContent item={item} /> <BookmarkItemContent item={item} />