paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-11-04 05:53:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

make the diagram icon component flexible (#476)

Browse Source
This commit is contained in:
Guy Ben-Aharon
2024-12-10 15:22:04 +02:00
committed by GitHub
parent 5409288388
commit 5f9c74a9ad
3 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/diagram-icon/diagram-icon.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import type { Diagram } from '@/lib/domain/diagram';
import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip/tooltip'; import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip/tooltip';
import type { DatabaseEdition } from '@/lib/domain/database-edition';
import { import {
databaseEditionToImageMap, databaseEditionToImageMap,
databaseEditionToLabelMap, databaseEditionToLabelMap,
@@ -9,39 +9,44 @@ import {
databaseSecondaryLogoMap, databaseSecondaryLogoMap,
databaseTypeToLabelMap, databaseTypeToLabelMap,
} from '@/lib/databases'; } from '@/lib/databases';
import type { DatabaseType } from '@/lib/domain/database-type';
import { cn } from '@/lib/utils';
export interface DiagramIconProps { export interface DiagramIconProps
diagram: Diagram; extends React.ComponentPropsWithoutRef<'div'> {
databaseType: DatabaseType;
databaseEdition?: DatabaseEdition;
imgClassName?: string;
} }
export const DiagramIcon = React.forwardRef< export const DiagramIcon = React.forwardRef<
React.ElementRef<typeof TooltipTrigger>, React.ElementRef<typeof TooltipTrigger>,
DiagramIconProps DiagramIconProps
>(({ diagram }, ref) => >(({ databaseType, databaseEdition, className, imgClassName }, ref) =>
diagram.databaseEdition ? ( databaseEdition ? (
<Tooltip> <Tooltip>
<TooltipTrigger className="mr-1" ref={ref}> <TooltipTrigger className={cn('mr-1', className)} ref={ref}>
<img <img
src={databaseEditionToImageMap[diagram.databaseEdition]} src={databaseEditionToImageMap[databaseEdition]}
className="h-5 max-w-fit rounded-full" className={cn('h-5 max-w-fit rounded-full', imgClassName)}
alt="database" alt="database"
/> />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{databaseEditionToLabelMap[diagram.databaseEdition]} {databaseEditionToLabelMap[databaseEdition]}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
) : ( ) : (
<Tooltip> <Tooltip>
<TooltipTrigger className="mr-2" ref={ref}> <TooltipTrigger className={cn('mr-2', className)} ref={ref}>
<img <img
src={databaseSecondaryLogoMap[diagram.databaseType]} src={databaseSecondaryLogoMap[databaseType]}
className="h-5 max-w-fit" className={cn('h-5 max-w-fit', imgClassName)}
alt="database" alt="database"
/> />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{databaseTypeToLabelMap[diagram.databaseType]} {databaseTypeToLabelMap[databaseType]}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
) )

7
src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx
View File

@@ -137,7 +137,12 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
<TableCell className="table-cell"> <TableCell className="table-cell">
<div className="flex justify-center"> <div className="flex justify-center">
<DiagramIcon <DiagramIcon
diagram={diagram} databaseType={
diagram.databaseType
}
databaseEdition={
diagram.databaseEdition
}
/> />
</div> </div>
</TableCell> </TableCell>

5
src/pages/editor-page/top-navbar/diagram-name.tsx
View File

@@ -60,7 +60,10 @@ export const DiagramName: React.FC<DiagramNameProps> = () => {
} }
)} )}
> >
<DiagramIcon diagram={currentDiagram} /> <DiagramIcon
databaseType={currentDiagram.databaseType}
databaseEdition={currentDiagram.databaseEdition}
/>
<div className="flex"> <div className="flex">
{isDesktop ? <Label>{t('diagrams')}/</Label> : null} {isDesktop ? <Label>{t('diagrams')}/</Label> : null}
</div> </div>