Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Python list_view implementation #359

Merged
merged 7 commits into from
Apr 3, 2024
Merged

feat: Add Python list_view implementation #359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3910e5b
initial impl
jnumainville Mar 14, 2024
7cdb160
small fix
jnumainville Mar 14, 2024
dbec903
fix import
jnumainville Mar 14, 2024
17dc230
comments
jnumainville Mar 27, 2024
8a4c82f
tweaks
jnumainville Mar 27, 2024
3ed8965
fixed imports
jnumainville Apr 1, 2024
ac218b9
Update plugins/ui/DESIGN.md
jnumainville Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 63 additions & 18 deletions plugins/ui/DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1188,6 +1188,50 @@ picker7 = ui.picker(
)
```

###### ui.list_action_group
A group of action buttons that can be used to create a list of actions.
This component should be used within the actions prop of a `ListView` component.

```py
def list_action_group(
*children: ActionGroupItem,
on_action: Callable[[ActionKey, Key], None] | None = None,
on_selection_change: Callable[[Selection, Key], None] | None = None,
**props: Any
) -> ListActionGroupElement:
```

###### Parameters
| Parameter | Type | Description |
|-------------------------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|
| `*children` | `ActionGroupItem` | The actions to render within the action group. |
| `on_action` | `Callable[[ActionKey, Key], None] \| None` | Handler that is called when an item is pressed. The first argument is the key of the action, the second argument is the key of the list_view item. |
| `on_selection_change` | `Callable[[Selection, Key], None] \| None` | Handler that is called when the selection changes. The first argument is the selection, the second argument is the key of the list_view item. |
| `**props` | `Any` | Any other [ActionGroup](https://react-spectrum.adobe.com/react-spectrum/ActionGroup.html) prop. |



###### ui.list_action_menu
A group of action buttons that can be used to create a list of actions.
This component should be used within the actions prop of a `ListView` component.

```py
def list_action_menu(
*children: ActionMenuItem,
on_action: Callable[[ActionKey, Key], None] | None = None,
on_open_change: Callable[[bool, Key], None] | None = None,
**props: Any
) -> ListActionMenuElement:
```

###### Parameters
| Parameter | Type | Description |
|-------------------------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|
| `*children` | `ActionMenuItem` | The options to render within the picker. |
| `on_action` | `Callable[[ActionKey, Key], None] \| None` | Handler that is called when an item is pressed. The first argument is the key of the action, the second argument is the key of the list_view item. |
| `on_open_change` | `Callable[[bool, Key], None] \| None` | The first argument is a boolean indicating if the menu is open, the second argument is the key of the list_view item. |
| `**props` | `Any` | Any other [ActionMenu](https://react-spectrum.adobe.com/react-spectrum/ActionMenu.html) prop. |

###### ui.list_view
A list view that can be used to create a list of items. Children should be one of two types:
1. If children are of type `ListViewItem`, they are the list items.
Expand All @@ -1201,7 +1245,7 @@ ui.list_view(
label_column: ColumnName | None = None,
description_column: ColumnName | None = None,
icon_column: ColumnName | None = None,
action_buttons: ActionButtonElement | ActionGroupElement | ActionMenuElement | None = None,
actions: ListActionGroupElement | ListActionMenuElement | None = None,
default_selected_keys: Selection | None = None,
selected_keys: Selection | None = None,
render_empty_state: Element | None = None,
Expand All @@ -1212,20 +1256,20 @@ ui.list_view(
```

###### Parameters
| Parameter | Type | Description |
|------------------------------|----------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `*children` | `ListViewItem \| Table` | The options to render within the picker. |
| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to use as item keys. Defaults to the first column. |
| `label_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to display as primary text. Defaults to the `key_column` value. |
| `description_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to display as descriptions. |
| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to map to icons. |
| `action_buttons` | `ActionButtonElement \| ActionGroupElement \| ActionMenuElement \| None` | Only valid if any `ListViewItem` children do not already have embedded buttons. The action buttons to render for all elements within the list view. The `on_*` event handlers within the passed object will be modified so that the second argument is the key for the `list_view` item that the buttons are embedded in. |
| `default_selected_keys` | `Selection \| None` | The initial selected keys in the collection (uncontrolled). |
| `selected_keys` | `Selection \| None` | The currently selected keys in the collection (controlled). |
| `render_empty_state` | `Element \| None` | Sets what the `list_view` should render when there is no content to display. |
| `on_selection_change` | `Callable[[Selection], None] \| None` | Handler that is called when the selections changes. |
| `on_change` | `Callable[[Selection], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selections changes. |
| `**props` | `Any` | Any other [ListView](https://react-spectrum.adobe.com/react-spectrum/ListView.html) prop, with the exception of `items`, `dragAndDropHooks`, and `onLoadMore`. |
| Parameter | Type | Description |
|-------------------------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `*children` | `ListViewItem \| Table` | The options to render within the picker. |
| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to use as item keys. Defaults to the first column. |
| `label_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to display as primary text. Defaults to the `key_column` value. |
| `description_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to display as descriptions. |
| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to map to icons. |
| `actions` | `ListActionGroupElement \| ListActionMenuElement \| None` | Only valid if children are of type Table. The action group or menus to render for all elements within the list view. |
jnumainville marked this conversation as resolved.
Show resolved Hide resolved
| `default_selected_keys` | `Selection \| None` | The initial selected keys in the collection (uncontrolled). |
| `selected_keys` | `Selection \| None` | The currently selected keys in the collection (controlled). |
| `render_empty_state` | `Element \| None` | Sets what the `list_view` should render when there is no content to display. |
| `on_selection_change` | `Callable[[Selection], None] \| None` | Handler that is called when the selections changes. |
| `on_change` | `Callable[[Selection], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selections changes. |
| `**props` | `Any` | Any other [ListView](https://react-spectrum.adobe.com/react-spectrum/ListView.html) prop, with the exception of `items`, `dragAndDropHooks`, and `onLoadMore`. |
bmingles marked this conversation as resolved.
Show resolved Hide resolved


```py
Expand Down Expand Up @@ -1298,15 +1342,15 @@ list_view5 = ui.list_view(


# Buttons can be embedded in the list view. Note key is added to the on_press handler, but is not required.
on_button_action = lambda e, key: print(f"Event {e} was emitted for list item {key}")
button = ui.action_button("Print Item", on_press=on_button_action)
on_button_action = lambda action_key, key: print(f"Action {action_key} was pressed for list item {key}")
button = ui.list_action_group("Print Item", on_action=on_button_action)

list_view7 = ui.list_view(
"Option 1",
"Option 2",
"Option 3",
"Option 4",
action_buttons=button,
actions=button,
bmingles marked this conversation as resolved.
Show resolved Hide resolved
)
```

Expand Down Expand Up @@ -1826,6 +1870,7 @@ TransformedData = Any
Stringable = str | int | float | bool
PickerItem = Stringable | ItemElement
Key = Stringable
ActionKey = Key
Selection = Sequence[Key]
ListViewItem = Stringable | ItemElement

Expand Down
6 changes: 6 additions & 0 deletions plugins/ui/src/deephaven/ui/components/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
from .picker import picker
from .section import section
from .item import item
from .list_view import list_view
from .list_action_group import list_action_group
from .list_action_menu import list_action_menu

from . import html

Expand All @@ -34,6 +37,9 @@
"icon_wrapper",
"item",
"illustrated_message",
"list_view",
"list_action_group",
"list_action_menu",
"html",
"number_field",
"panel",
Expand Down
37 changes: 37 additions & 0 deletions plugins/ui/src/deephaven/ui/components/list_action_group.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
from __future__ import annotations

from typing import Callable, Any, Union

from .item import ItemElement
from ..elements import BaseElement, Element
from .._internal.utils import create_props
from ..types import Stringable, Selection, Key, ActionKey

ActionGroupItem = Union[Stringable, ItemElement]
ListActionGroupElement = Element


def list_action_group(
*children: ActionGroupItem,
on_action: Callable[[ActionKey, Key], None] | None = None,
on_selection_change: Callable[[Selection, Key], None] | None = None,
**props: Any,
) -> ListActionGroupElement:
"""
A group of action buttons that can be used to create a list of actions.
This component should be used within the actions prop of a `ListView` component.

Args:
*children: The options to render within the list_action_group.
on_action: Handler that is called when an item is pressed.
The first argument is the key of the action, the second argument is the key of the list_view item.
on_selection_change: Handler that is called when the selection changes.
The first argument is the selection, the second argument is the key of the list_view item.
**props: Any other ActionGroup prop.

Returns:
A ListActionGroup that can be used within the actions prop of a `ListView` component.
"""
children, props = create_props(locals())

return BaseElement("deephaven.ui.components.ListActionGroup", *children, **props)
38 changes: 38 additions & 0 deletions plugins/ui/src/deephaven/ui/components/list_action_menu.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
from __future__ import annotations

from typing import Callable, Any, Union


from .item import ItemElement
from ..elements import BaseElement, Element
from .._internal.utils import create_props
from ..types import Stringable, Key, ActionKey

ActionMenuItem = Union[Stringable, ItemElement]
ListActionMenuElement = Element


def list_action_menu(
*children: ActionMenuItem,
on_action: Callable[[ActionKey, Key], None] | None = None,
on_open_change: Callable[[bool, Key], None] | None = None,
**props: Any,
) -> ListActionMenuElement:
"""
A menu of action buttons that can be used to create a list of actions.
This component should be used within the actions prop of a `ListView` component.

Args:
*children: The options to render within the list_action_menu.
on_action: Handler that is called when an item is selected.
The first argument is the key of the action, the second argument is the key of the list_view item.
on_open_change: Handler that is called when the menu is opened or closed.
The first argument is a boolean indicating if the menu is open, the second argument is the key of the list_view item.
**props: Any other ActionMenu prop.

Returns:
A ListActionMenu that can be used within the actions prop of a `ListView` component.
"""
children, props = create_props(locals())

return BaseElement("deephaven.ui.components.ListActionMenu", *children, **props)
Loading
Loading