laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix context and dropdown menu

Browse Source
This commit is contained in:
Tom Gotsman 2024-10-29 17:58:03 +00:00
parent 756a7cab23
commit f45dcd9253
2 changed files with 110 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
reflex/components/radix/themes/components/context_menu.py
View File

@ -1,6 +1,6 @@
"""Interactive components provided by @radix-ui/themes."""
from typing import List, Literal
from typing import Dict, List, Literal, Union
from reflex.components.component import ComponentNamespace
from reflex.components.core.breakpoints import Responsive
@ -12,6 +12,20 @@ from ..base import (
RadixThemesComponent,
)
LiteralDirType = Literal["ltr", "rtl"]
LiteralSizeType = Literal["1", "2"]
LiteralVariantType = Literal["solid", "soft"]
LiteralSideType = Literal["top", "right", "bottom", "left"]
LiteralAlignType = Literal["start", "center", "end"]
LiteralStickyType = Literal[
"partial",
"always",
]
class ContextMenuRoot(RadixThemesComponent):
"""Menu representing a set of actions, displayed at the origin of a pointer right-click or long-press."""
@ -26,6 +40,9 @@ class ContextMenuRoot(RadixThemesComponent):
# Fired when the open state changes.
on_open_change: EventHandler[identity_event(bool)]
# The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
dir: Var[LiteralDirType]
class ContextMenuTrigger(RadixThemesComponent):
"""Wraps the element that will open the context menu."""
@ -45,37 +62,64 @@ class ContextMenuContent(RadixThemesComponent):
tag = "ContextMenu.Content"
# Button size "1" - "4"
size: Var[Responsive[Literal["1", "2"]]]
# Dropdown Menu Content size "1" - "2"
size: Var[Responsive[LiteralSizeType]]
# Variant of button: "solid" | "soft" | "outline" | "ghost"
variant: Var[Literal["solid", "soft"]]
# Variant of Dropdown Menu Content: "solid" | "soft"
variant: Var[LiteralVariantType]
# Override theme color for button
# Override theme color for Dropdown Menu Content
color_scheme: Var[LiteralAccentColor]
# Whether to render the button with higher contrast color against background
# Renders the Dropdown Menu Content in higher contrast
high_contrast: Var[bool]
# The vertical distance in pixels from the anchor.
align_offset: Var[int]
# Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
as_child: Var[bool]
# When true, overrides the side and aligns preferences to prevent collisions with boundary edges.
# When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
loop: Var[bool]
# Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
force_mount: Var[bool]
# The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
side: Var[LiteralSideType]
# The distance in pixels from the trigger. Defaults to 0.
side_offset: Var[Union[float, int]]
# The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
align: Var[LiteralAlignType]
# An offset in pixels from the "start" or "end" alignment options.
align_offset: Var[Union[float, int]]
# When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
avoid_collisions: Var[bool]
# Fired when the context menu is closed.
# The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
# The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
sticky: Var[LiteralStickyType]
# Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
hide_when_detached: Var[bool]
# Fired when the dialog is closed.
on_close_auto_focus: EventHandler[empty_event]
# Fired when the escape key is pressed.
on_escape_key_down: EventHandler[empty_event]
# Fired when a pointer down event happens outside the context menu.
# Fired when the pointer is down outside the dialog.
on_pointer_down_outside: EventHandler[empty_event]
# Fired when focus moves outside the context menu.
# Fired when focus moves outside the dialog.
on_focus_outside: EventHandler[empty_event]
# Fired when interacting outside the context menu.
# Fired when the pointer interacts outside the dialog.
on_interact_outside: EventHandler[empty_event]
@ -84,15 +128,30 @@ class ContextMenuSub(RadixThemesComponent):
tag = "ContextMenu.Sub"
# The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
open: Var[bool]
# The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
default_open: Var[bool]
# Fired when the open state changes.
on_open_change: EventHandler[identity_event(bool)]
class ContextMenuSubTrigger(RadixThemesComponent):
"""An item that opens a submenu."""
tag = "ContextMenu.SubTrigger"
# Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
as_child: Var[bool]
# Whether the trigger is disabled
disabled: Var[bool]
# Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
text_value: Var[str]
_valid_parents: List[str] = ["ContextMenuContent", "ContextMenuSub"]
@ -101,9 +160,33 @@ class ContextMenuSubContent(RadixThemesComponent):
tag = "ContextMenu.SubContent"
# When true, keyboard navigation will loop from last item to first, and vice versa.
# Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
as_child: Var[bool]
# When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
loop: Var[bool]
# Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
force_mount: Var[bool]
# The distance in pixels from the trigger. Defaults to 0.
side_offset: Var[Union[float, int]]
# An offset in pixels from the "start" or "end" alignment options.
align_offset: Var[Union[float, int]]
# When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
avoid_collisions: Var[bool]
# The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
# The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
sticky: Var[LiteralStickyType]
# Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
hide_when_detached: Var[bool]
_valid_parents: List[str] = ["ContextMenuSub"]
# Fired when the escape key is pressed.
@ -130,8 +213,20 @@ class ContextMenuItem(RadixThemesComponent):
# Shortcut to render a menu item as a link
shortcut: Var[str]
# Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
as_child: Var[bool]
# When true, prevents the user from interacting with the item.
disabled: Var[bool]
# Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
text_value: Var[str]
_valid_parents: List[str] = ["ContextMenuContent", "ContextMenuSubContent"]
# Fired when the item is selected.
on_select: EventHandler[empty_event]
class ContextMenuSeparator(RadixThemesComponent):
"""Separates items in a context menu."""

7
reflex/components/radix/themes/components/dropdown_menu.py
View File

@ -23,7 +23,6 @@ LiteralSideType = Literal["top", "right", "bottom", "left"]
LiteralAlignType = Literal["start", "center", "end"]
LiteralStickyType = Literal[
"partial",
"always",
@ -110,9 +109,6 @@ class DropdownMenuContent(RadixThemesComponent):
# The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
# The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
arrow_padding: Var[Union[float, int]]
# The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
sticky: Var[LiteralStickyType]
@ -193,9 +189,6 @@ class DropdownMenuSubContent(RadixThemesComponent):
# The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
# The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
arrow_padding: Var[Union[float, int]]
# The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
sticky: Var[LiteralStickyType]