This commit is contained in:
ajnart
2022-12-20 11:45:33 +09:00
parent 79d7042cd9
commit 4d6e6123e1
32 changed files with 74 additions and 125 deletions

View File

@@ -3,8 +3,6 @@ import { DashboardDetailView } from './Views/DetailView';
import { DashboardEditView } from './Views/EditView';
import { useEditModeStore } from './Views/useEditModeStore';
interface DashboardProps {}
export const Dashboard = () => {
const isEditMode = useEditModeStore((x) => x.enabled);

View File

@@ -10,8 +10,7 @@ interface MobileRibbonSidebarDrawerProps {
export const MobileRibbonSidebarDrawer = ({
location,
...props
}: MobileRibbonSidebarDrawerProps) => {
return (
}: MobileRibbonSidebarDrawerProps) => (
<Drawer
position={location}
title={<Title order={4}>{location} sidebar</Title>}
@@ -24,4 +23,3 @@ export const MobileRibbonSidebarDrawer = ({
<DashboardSidebar location={location} />
</Drawer>
);
};

View File

@@ -22,7 +22,7 @@ export const ChangeWidgetPositionModal = ({
updateConfig(
configName,
(prev) => {
let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
currentWidget!.shape = {
location: {
x,

View File

@@ -29,11 +29,7 @@ interface IconSelectorProps {
allowAppNamePropagation: boolean;
}
export const IconSelector = ({
onChange,
allowAppNamePropagation,
form,
}: IconSelectorProps) => {
export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSelectorProps) => {
const { data, isLoading } = useRepositoryIconsQuery<WalkxcodeRepositoryIcon>({
url: 'https://api.github.com/repos/walkxcode/Dashboard-Icons/contents/png',
converter: (item) => ({

View File

@@ -1,6 +1,5 @@
import { Tabs, TextInput, Switch, Text } from '@mantine/core';
import { Tabs, Switch } from '@mantine/core';
import { UseFormReturnType } from '@mantine/form';
import { IconClick } from '@tabler/icons';
import { useTranslation } from 'next-i18next';
import { AppType } from '../../../../../../types/app';

View File

@@ -31,9 +31,9 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
let indexInFormValue =
form.values.integration?.properties.findIndex((p) => p.field === property) ?? -1;
if (indexInFormValue === -1) {
const type = Object.entries(integrationFieldDefinitions).find(
const { type } = Object.entries(integrationFieldDefinitions).find(
([k, v]) => k === property
)![1].type;
)![1];
const newProperty: AppIntegrationPropertyType = {
type,
field: property as IntegrationField,

View File

@@ -20,12 +20,7 @@ export const IntegrationTab = ({ form }: IntegrationTabProps) => {
{hasIntegrationSelected && (
<>
<Divider
label={t('integration.type.label')}
labelPosition="center"
mt="xl"
mb="md"
/>
<Divider label={t('integration.type.label')} labelPosition="center" mt="xl" mb="md" />
<Text size="sm" color="dimmed" mb="lg">
{t('integration.secrets.description')}
</Text>

View File

@@ -1,6 +1 @@
export type EditAppModalTab =
| 'general'
| 'behaviour'
| 'network'
| 'appereance'
| 'integration';
export type EditAppModalTab = 'general' | 'behaviour' | 'network' | 'appereance' | 'integration';

View File

@@ -21,9 +21,7 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
if (!configName) return null;
const getLowestWrapper = () => {
return config?.wrappers.sort((a, b) => a.position - b.position)[0];
};
const getLowestWrapper = () => config?.wrappers.sort((a, b) => a.position - b.position)[0];
const handleAddition = async () => {
updateConfig(

View File

@@ -1,4 +1,4 @@
import { Card, Center, Text, UnstyledButton } from '@mantine/core';
import { Center, Text, UnstyledButton } from '@mantine/core';
import { NextLink } from '@mantine/next';
import { createStyles } from '@mantine/styles';
import { AppType } from '../../../../types/app';

View File

@@ -1,6 +1,6 @@
import { HomarrCardWrapper } from './HomarrCardWrapper';
import { BaseTileProps } from './type';
export const EmptyTile = ({ className }: BaseTileProps) => {
return <HomarrCardWrapper className={className}>Empty</HomarrCardWrapper>;
};
export const EmptyTile = ({ className }: BaseTileProps) => (
<HomarrCardWrapper className={className}>Empty</HomarrCardWrapper>
);

View File

@@ -1,8 +1,8 @@
import Widgets from '../../../../widgets';
import { Button, Group, MultiSelect, Stack, Switch, TextInput } from '@mantine/core';
import { ContextModalProps } from '@mantine/modals';
import { useTranslation } from 'next-i18next';
import { useState } from 'react';
import Widgets from '../../../../widgets';
import { useConfigContext } from '../../../../config/provider';
import { useConfigStore } from '../../../../config/store';
import { IWidget } from '../../../../widgets/widgets';
@@ -48,7 +48,7 @@ export const WidgetsEditModal = ({
updateConfig(
configName,
(prev) => {
let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
currentWidget!.properties = moduleProperties;
return {

View File

@@ -38,7 +38,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
title: null,
innerProps: {
widgetId: integration,
widget: widget,
widget,
},
});
};

View File

@@ -1,5 +1,3 @@
import { DashboardView } from './DashboardView';
export const DashboardDetailView = () => {
return <DashboardView />;
};
export const DashboardDetailView = () => <DashboardView />;

View File

@@ -1,10 +1,6 @@
import { Card, Group, Title } from '@mantine/core';
import { Group, Title } from '@mantine/core';
import { CategoryType } from '../../../../types/category';
import { IWidgetDefinition } from '../../../../widgets/widgets';
import { HomarrCardWrapper } from '../../Tiles/HomarrCardWrapper';
import { Tiles } from '../../Tiles/tilesDefinitions';
import Widgets from '../../../../widgets';
import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
import { useEditModeStore } from '../../Views/useEditModeStore';
import { useGridstack } from '../gridstack/use-gridstack';
import { CategoryEditMenu } from './CategoryEditMenu';

View File

@@ -1,9 +1,5 @@
import { Card } from '@mantine/core';
import { RefObject } from 'react';
import { IWidgetDefinition } from '../../../../widgets/widgets';
import { Tiles } from '../../Tiles/tilesDefinitions';
import Widgets from '../../../../widgets';
import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
import { useGridstack } from '../gridstack/use-gridstack';
import { WrapperContent } from '../WrapperContent';
@@ -38,6 +34,5 @@ export const DashboardSidebar = ({ location }: DashboardSidebarProps) => {
);
};
const useMinRowForFullHeight = (wrapperRef: RefObject<HTMLDivElement>) => {
return wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 64) : 2;
};
const useMinRowForFullHeight = (wrapperRef: RefObject<HTMLDivElement>) =>
wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 64) : 2;

View File

@@ -19,44 +19,44 @@ interface WrapperContentProps {
}
export const WrapperContent = ({ apps, refs, widgets }: WrapperContentProps) => (
<>
{apps?.map((app) => {
const { component: TileComponent, ...tile } = Tiles.app;
return (
<GridstackTileWrapper
id={app.id}
type="app"
key={app.id}
itemRef={refs.items.current[app.id]}
{...tile}
{...app.shape.location}
{...app.shape.size}
>
<TileComponent className="grid-stack-item-content" app={app} />
</GridstackTileWrapper>
);
})}
{widgets.map((widget) => {
const definition = Widgets[widget.id as keyof typeof Widgets] as
| IWidgetDefinition
| undefined;
if (!definition) return null;
<>
{apps?.map((app) => {
const { component: TileComponent, ...tile } = Tiles.app;
return (
<GridstackTileWrapper
id={app.id}
type="app"
key={app.id}
itemRef={refs.items.current[app.id]}
{...tile}
{...app.shape.location}
{...app.shape.size}
>
<TileComponent className="grid-stack-item-content" app={app} />
</GridstackTileWrapper>
);
})}
{widgets.map((widget) => {
const definition = Widgets[widget.id as keyof typeof Widgets] as
| IWidgetDefinition
| undefined;
if (!definition) return null;
return (
<GridstackTileWrapper
type="widget"
key={widget.id}
itemRef={refs.items.current[widget.id]}
id={definition.id}
{...definition.gridstack}
{...widget.shape.location}
{...widget.shape.size}
>
<WidgetWrapper className="grid-stack-item-content" widget={widget} widgetId={widget.id}>
<definition.component className="grid-stack-item-content" widget={widget} />
</WidgetWrapper>
</GridstackTileWrapper>
);
})}
</>
);
return (
<GridstackTileWrapper
type="widget"
key={widget.id}
itemRef={refs.items.current[widget.id]}
id={definition.id}
{...definition.gridstack}
{...widget.shape.location}
{...widget.shape.size}
>
<WidgetWrapper className="grid-stack-item-content" widget={widget} widgetId={widget.id}>
<definition.component className="grid-stack-item-content" widget={widget} />
</WidgetWrapper>
</GridstackTileWrapper>
);
})}
</>
);