zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-10 23:54:21 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor(react): use component for map type switcher

Browse source
This commit is contained in:
Elian Doran 2025-10-04 12:58:24 +03:00
parent 20dcbff68f
commit ad5ff6e41a
No known key found for this signature in database
1 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
apps/client/src/widgets/note_map/NoteMap.tsx
View file

@ -67,21 +67,8 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
return ( return (
<div className="note-map-widget"> <div className="note-map-widget">
<div className="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group"> <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
<ActionButton <MapTypeSwitcher type="link" icon="bx bx-network-chart" text={t("note-map.button-link-map")} currentMapType={mapType} setMapType={setMapType} />
icon="bx bx-network-chart" <MapTypeSwitcher type="tree" icon="bx bx-sitemap" text={t("note-map.button-tree-map")} currentMapType={mapType} setMapType={setMapType} />
text={t("note-map.button-link-map")}
disabled={mapType === "link"}
onClick={() => setMapType("link")}
frame
/>
<ActionButton
icon="bx bx-sitemap"
text={t("note-map.button-tree-map")}
disabled={mapType === "tree"}
onClick={() => setMapType("tree")}
frame
/>
</div> </div>
<div ref={styleResolverRef} class="style-resolver" /> <div ref={styleResolverRef} class="style-resolver" />
@ -90,6 +77,23 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
) )
} }
function MapTypeSwitcher({ icon, text, type, currentMapType, setMapType }: {
icon: string;
text: string;
type: MapType;
currentMapType: MapType;
setMapType: (type: MapType) => void;
}) {
return (
<ActionButton
icon={icon} text={text}
disabled={currentMapType === type}
onClick={() => setMapType(type)}
frame
/>
)
}
function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData { function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData {
const containerStyle = window.getComputedStyle(container); const containerStyle = window.getComputedStyle(container);
const styleResolverStyle = window.getComputedStyle(styleResolver); const styleResolverStyle = window.getComputedStyle(styleResolver);