refactor(react/global_menu): get rid of outsideChildren

This commit is contained in:
Elian Doran 2025-08-29 12:50:45 +03:00
parent 168ff90e38
commit f0ac301417
No known key found for this signature in database
2 changed files with 8 additions and 10 deletions

View File

@ -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" />
&nbsp; &nbsp;
@ -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")} />
); );

View File

@ -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>
); );
} }