mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 15:19:01 +02:00
refactor(react/global_menu): get rid of outsideChildren
This commit is contained in:
parent
168ff90e38
commit
f0ac301417
@ -99,7 +99,7 @@ function SwitchToOptions() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function MenuItem({ icon, text, title, command, disabled, active, outsideChildren }: MenuItemProps<KeyboardActionNames | CommandNames | (() => void)>) {
|
function MenuItem({ icon, text, title, command, disabled, active }: MenuItemProps<KeyboardActionNames | CommandNames | (() => void)>) {
|
||||||
return <FormListItem
|
return <FormListItem
|
||||||
icon={icon}
|
icon={icon}
|
||||||
title={title}
|
title={title}
|
||||||
@ -107,7 +107,6 @@ function MenuItem({ icon, text, title, command, disabled, active, outsideChildre
|
|||||||
onClick={typeof command === "function" ? command : undefined}
|
onClick={typeof command === "function" ? command : undefined}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
active={active}
|
active={active}
|
||||||
outsideChildren={outsideChildren}
|
|
||||||
>{text}</FormListItem>
|
>{text}</FormListItem>
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,8 +114,7 @@ function KeyboardActionMenuItem({ text, command, ...props }: MenuItemProps<Keybo
|
|||||||
return <MenuItem
|
return <MenuItem
|
||||||
{...props}
|
{...props}
|
||||||
command={command}
|
command={command}
|
||||||
text={text}
|
text={<>{text} <KeyboardShortcut actionName={command as KeyboardActionNames} /></>}
|
||||||
outsideChildren={<KeyboardShortcut actionName={command as KeyboardActionNames} />}
|
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -177,7 +175,9 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
|
|||||||
<FormListItem
|
<FormListItem
|
||||||
icon="bx bx-empty"
|
icon="bx bx-empty"
|
||||||
className="zoom-container"
|
className="zoom-container"
|
||||||
outsideChildren={<>
|
>
|
||||||
|
{t("global_menu.zoom")}
|
||||||
|
<>
|
||||||
<div className="zoom-buttons">
|
<div className="zoom-buttons">
|
||||||
<ZoomControlButton command="toggleFullscreen" title={t("global_menu.toggle_fullscreen")} icon="bx bx-expand-alt" />
|
<ZoomControlButton command="toggleFullscreen" title={t("global_menu.toggle_fullscreen")} icon="bx bx-expand-alt" />
|
||||||
|
|
||||||
@ -185,8 +185,8 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
|
|||||||
<ZoomControlButton command="zoomReset" title={t("global_menu.reset_zoom_level")}>{zoomLevel}{t("units.percentage")}</ZoomControlButton>
|
<ZoomControlButton command="zoomReset" title={t("global_menu.reset_zoom_level")}>{zoomLevel}{t("units.percentage")}</ZoomControlButton>
|
||||||
<ZoomControlButton command="zoomIn" title={t("global_menu.zoom_in")} icon="bx bx-plus" />
|
<ZoomControlButton command="zoomIn" title={t("global_menu.zoom_in")} icon="bx bx-plus" />
|
||||||
</div>
|
</div>
|
||||||
</>}
|
</>
|
||||||
>{t("global_menu.zoom")}</FormListItem>
|
</FormListItem>
|
||||||
) : (
|
) : (
|
||||||
<MenuItem icon="bx bx-expand-alt" command="toggleFullscreen" text={t("global_menu.toggle_fullscreen")} />
|
<MenuItem icon="bx bx-expand-alt" command="toggleFullscreen" text={t("global_menu.toggle_fullscreen")} />
|
||||||
);
|
);
|
||||||
|
@ -89,7 +89,6 @@ interface FormListItemOpts {
|
|||||||
description?: string;
|
description?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
rtl?: boolean;
|
rtl?: boolean;
|
||||||
outsideChildren?: ComponentChildren;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
|
const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
|
||||||
@ -97,7 +96,7 @@ const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
|
|||||||
fallbackPlacements: [ "right" ]
|
fallbackPlacements: [ "right" ]
|
||||||
}
|
}
|
||||||
|
|
||||||
export function FormListItem({ className, icon, value, title, active, disabled, checked, onClick, selected, rtl, triggerCommand, outsideChildren, description, ...contentProps }: FormListItemOpts) {
|
export function FormListItem({ className, icon, value, title, active, disabled, checked, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) {
|
||||||
const itemRef = useRef<HTMLLIElement>(null);
|
const itemRef = useRef<HTMLLIElement>(null);
|
||||||
|
|
||||||
if (checked) {
|
if (checked) {
|
||||||
@ -124,7 +123,6 @@ export function FormListItem({ className, icon, value, title, active, disabled,
|
|||||||
) : (
|
) : (
|
||||||
<FormListContent description={description} {...contentProps} />
|
<FormListContent description={description} {...contentProps} />
|
||||||
)}
|
)}
|
||||||
{outsideChildren}
|
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user