Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-13 08:55:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Improved changeability of wrappers with new wrapper content component

Browse Source
This commit is contained in:
Meierschlumpf
2022-12-19 18:03:52 +01:00
parent 8f7a3111ca
commit 383a7fa04b
6 changed files with 91 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
View File

@@ -1,16 +1,13 @@
import { WrapperType } from '../../../../types/wrapper';
import Widgets from '../../../../widgets';
import { IWidget, IWidgetDefinition } from '../../../../widgets/widgets';
import { Tiles } from '../../Tiles/tilesDefinitions';
import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
import { useGridstack } from '../gridstack/use-gridstack';
import { WrapperContent } from '../WrapperContent';
interface DashboardWrapperProps {
wrapper: WrapperType;
}
export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => {
const { refs, items, widgets } = useGridstack('wrapper', wrapper.id);
const { refs, apps, widgets } = useGridstack('wrapper', wrapper.id);
return (
<div
@@ -19,42 +16,7 @@ export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => {
data-wrapper={wrapper.id}
ref={refs.wrapper}
>
{items?.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}
>
<definition.component className="grid-stack-item-content" widget={widget} />
</GridstackTileWrapper>
);
})}
<WrapperContent apps={apps} refs={refs} widgets={widgets} />
</div>
);
};