From 6f74f16b397f93ca0def2c7fc3b1bd228ca1c8a7 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Mon, 29 Apr 2024 15:24:59 -0500 Subject: [PATCH] Mapped ActionGroup and ListActionGroup (#445) --- plugins/ui/docs/README.md | 24 +++++++++++++++++++ .../src/deephaven/ui/components/__init__.py | 2 ++ .../deephaven/ui/components/action_group.py | 12 ++++++++++ .../src/js/src/elements/ElementConstants.ts | 2 ++ .../ui/src/js/src/elements/ElementUtils.tsx | 4 ++-- .../js/src/elements/SpectrumElementUtils.ts | 2 ++ plugins/ui/src/js/src/widget/WidgetUtils.tsx | 9 ++++++- 7 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 plugins/ui/src/deephaven/ui/components/action_group.py diff --git a/plugins/ui/docs/README.md b/plugins/ui/docs/README.md index 5d3abe99d..3e317f52e 100644 --- a/plugins/ui/docs/README.md +++ b/plugins/ui/docs/README.md @@ -203,6 +203,30 @@ my_checkbox = ui_checkbox() ![Checkbox](_assets/checkbox.png) +## ActionGroup (string values) +An ActionGroup is a grouping of ActionButtons that are related to one another. + +```python +@ui.component +def action_group(): + [action, on_action] = ui.use_state() + + return ui.flex( + ui.action_group( + "Aaa", + "Bbb", + "Ccc", + action=action, + on_action=on_action, + ), + ui.text(action), + direction="column", + ) + + +ag = action_group() +``` + ## Picker (string values) The `ui.picker` component can be used to select from a list of items. Here's a basic example for selecting from a list of string values and displaying the selected key in a text field. diff --git a/plugins/ui/src/deephaven/ui/components/__init__.py b/plugins/ui/src/deephaven/ui/components/__init__.py index 09efe6596..2970e7117 100644 --- a/plugins/ui/src/deephaven/ui/components/__init__.py +++ b/plugins/ui/src/deephaven/ui/components/__init__.py @@ -1,3 +1,4 @@ +from .action_group import action_group from .icon import icon from .make_component import make_component as component from .fragment import fragment @@ -21,6 +22,7 @@ __all__ = [ "action_button", + "action_group", "button", "button_group", "checkbox", diff --git a/plugins/ui/src/deephaven/ui/components/action_group.py b/plugins/ui/src/deephaven/ui/components/action_group.py new file mode 100644 index 000000000..391e1f5bf --- /dev/null +++ b/plugins/ui/src/deephaven/ui/components/action_group.py @@ -0,0 +1,12 @@ +from ..elements import BaseElement + + +def action_group(*children, **props): + """ + An ActionGroup is a grouping of ActionButtons that are related to one another. + + Args: + children: A list of Item or primitive elements. + **props: Any other ActionGroup prop. + """ + return BaseElement(f"deephaven.ui.components.ActionGroup", *children, **props) diff --git a/plugins/ui/src/js/src/elements/ElementConstants.ts b/plugins/ui/src/js/src/elements/ElementConstants.ts index 49a9bcab3..996a3e23d 100644 --- a/plugins/ui/src/js/src/elements/ElementConstants.ts +++ b/plugins/ui/src/js/src/elements/ElementConstants.ts @@ -23,8 +23,10 @@ export const ELEMENT_NAME = { stack: uiComponentName('Stack'), /** Other Components */ + actionGroup: uiComponentName('ActionGroup'), fragment: uiComponentName('Fragment'), item: uiComponentName('Item'), + listActionGroup: uiComponentName('ListActionGroup'), listView: uiComponentName('ListView'), picker: uiComponentName('Picker'), section: uiComponentName('Section'), diff --git a/plugins/ui/src/js/src/elements/ElementUtils.tsx b/plugins/ui/src/js/src/elements/ElementUtils.tsx index 95b91ff1e..b5fa2759e 100644 --- a/plugins/ui/src/js/src/elements/ElementUtils.tsx +++ b/plugins/ui/src/js/src/elements/ElementUtils.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Text } from '@deephaven/components'; import type { dh } from '@deephaven/jsapi-types'; -import { ITEM_ELEMENT_NAME } from './ElementConstants'; +import { ELEMENT_NAME } from './ElementConstants'; import ObjectView from './ObjectView'; export const CALLABLE_KEY = '__dhCbid'; @@ -159,7 +159,7 @@ export function wrapElementChildren(element: ElementNode): ElementNode { const newProps = { ...element.props }; - const isItemElement = isElementNode(element, ITEM_ELEMENT_NAME); + const isItemElement = isElementNode(element, ELEMENT_NAME.item); // We will be wrapping all primitive `Item` children in a `Text` element to // ensure proper layout. Since `Item` components require a `textValue` prop diff --git a/plugins/ui/src/js/src/elements/SpectrumElementUtils.ts b/plugins/ui/src/js/src/elements/SpectrumElementUtils.ts index 623694ee1..312a6b5ab 100644 --- a/plugins/ui/src/js/src/elements/SpectrumElementUtils.ts +++ b/plugins/ui/src/js/src/elements/SpectrumElementUtils.ts @@ -34,6 +34,7 @@ export const SPECTRUM_ELEMENT_TYPE_PREFIX = 'deephaven.ui.spectrum.'; export const SpectrumSupportedTypes = { ActionButton, + ActionGroup, Button, ButtonGroup, Checkbox, @@ -45,6 +46,7 @@ export const SpectrumSupportedTypes = { Heading, Icon, IllustratedMessage, + ListActionGroup, NumberField, Item, RangeSlider, diff --git a/plugins/ui/src/js/src/widget/WidgetUtils.tsx b/plugins/ui/src/js/src/widget/WidgetUtils.tsx index ffe190997..e8c520518 100644 --- a/plugins/ui/src/js/src/widget/WidgetUtils.tsx +++ b/plugins/ui/src/js/src/widget/WidgetUtils.tsx @@ -3,7 +3,12 @@ import React, { ComponentType } from 'react'; // Importing `Item` and `Section` compnents directly since they should not be // wrapped due to how Spectrum collection components consume them. -import { Item, Section } from '@deephaven/components'; +import { + ActionGroup, + Item, + ListActionGroup, + Section, +} from '@deephaven/components'; import { ValueOf } from '@deephaven/utils'; import { ReadonlyWidgetData } from './WidgetTypes'; import { @@ -43,8 +48,10 @@ export const elementComponentMap = { [ELEMENT_NAME.stack]: Stack, // Other components + [ELEMENT_NAME.actionGroup]: ActionGroup, [ELEMENT_NAME.fragment]: React.Fragment, [ELEMENT_NAME.item]: Item, + [ELEMENT_NAME.listActionGroup]: ListActionGroup, [ELEMENT_NAME.listView]: ListView, [ELEMENT_NAME.picker]: Picker, [ELEMENT_NAME.section]: Section,