From be4ee2ce6fb61e06182c926add1040a271387c76 Mon Sep 17 00:00:00 2001 From: mikebender Date: Thu, 13 Jun 2024 15:39:55 -0400 Subject: [PATCH] Revert "feat: ui.checkbox, ui.button, ui.button_group, ui.radio, ui.radio_group, ui.icon (#512)" This reverts commit 6b1dbeb48b4305ee10261c0789e09358539ecbc2. --- package-lock.json | 2 + plugins/ui/docs/README.md | 30 ---------- .../src/deephaven/ui/components/__init__.py | 4 -- .../ui/src/deephaven/ui/components/radio.py | 14 ----- .../deephaven/ui/components/radio_group.py | 14 ----- plugins/ui/src/js/package.json | 1 + .../src/js/src/elements/ElementConstants.ts | 2 - .../src/js/src/elements/IconElementView.tsx | 2 +- plugins/ui/src/js/src/elements/Radio.tsx | 40 -------------- plugins/ui/src/js/src/elements/RadioGroup.tsx | 23 -------- .../js/src/elements/SerializedPropTypes.ts | 48 ---------------- .../js/src/elements/SpectrumElementUtils.ts | 5 +- .../js/src/elements/spectrum/ActionButton.tsx | 5 +- .../src/js/src/elements/spectrum/Button.tsx | 10 ++-- .../src/elements/spectrum/useButtonProps.ts | 55 ++++++++++++++++--- plugins/ui/src/js/src/widget/WidgetUtils.tsx | 4 -- plugins/ui/src/js/vite.config.ts | 1 + 17 files changed, 61 insertions(+), 199 deletions(-) delete mode 100644 plugins/ui/src/deephaven/ui/components/radio.py delete mode 100644 plugins/ui/src/deephaven/ui/components/radio_group.py delete mode 100644 plugins/ui/src/js/src/elements/Radio.tsx delete mode 100644 plugins/ui/src/js/src/elements/RadioGroup.tsx delete mode 100644 plugins/ui/src/js/src/elements/SerializedPropTypes.ts diff --git a/package-lock.json b/package-lock.json index 9e40899e9..478136423 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34884,6 +34884,7 @@ "version": "0.14.0", "license": "Apache-2.0", "dependencies": { + "@adobe/react-spectrum": "^3.34.1", "@deephaven/chart": "^0.81.1", "@deephaven/components": "^0.81.1", "@deephaven/dashboard": "^0.81.1", @@ -39509,6 +39510,7 @@ "@deephaven/js-plugin-ui": { "version": "file:plugins/ui/src/js", "requires": { + "@adobe/react-spectrum": "^3.34.1", "@deephaven/chart": "^0.81.1", "@deephaven/components": "^0.81.1", "@deephaven/dashboard": "^0.81.1", diff --git a/plugins/ui/docs/README.md b/plugins/ui/docs/README.md index c8d245d4d..8c8e5c2af 100644 --- a/plugins/ui/docs/README.md +++ b/plugins/ui/docs/README.md @@ -249,36 +249,6 @@ def ui_action_menu(): my_action_menu = ui_action_menu() ``` -## ButtonGroup - -ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other. - -```python -@ui.component -def ui_button_group(): - return ui.button_group(ui.button("One"), ui.button("Two")) - - -my_button_group = ui_button_group() -``` - -## RadioGroup - -Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare. - -```python -@ui.component -def ui_radio_group(): - return ui.radio_group( - ui.radio("One", value="one"), - ui.radio("Two", value="two"), - label="Radio Group", - ) - - -my_radio_group = ui_radio_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 ef50b13c8..7d919dbe9 100644 --- a/plugins/ui/src/deephaven/ui/components/__init__.py +++ b/plugins/ui/src/deephaven/ui/components/__init__.py @@ -19,8 +19,6 @@ from .list_action_group import list_action_group from .list_action_menu import list_action_menu from .item_table_source import item_table_source -from .radio import radio -from .radio_group import radio_group from . import html @@ -54,8 +52,6 @@ "number_field", "panel", "picker", - "radio", - "radio_group", "range_slider", "row", "section", diff --git a/plugins/ui/src/deephaven/ui/components/radio.py b/plugins/ui/src/deephaven/ui/components/radio.py deleted file mode 100644 index 7b4ce5cfd..000000000 --- a/plugins/ui/src/deephaven/ui/components/radio.py +++ /dev/null @@ -1,14 +0,0 @@ -from ..elements import BaseElement - -# TODO: Add pydocs #515 -def radio(*children, **props): - """ - Radio buttons allow users to select a single option from a list of mutually - exclusive options. All possible options are exposed up front for users to - compare. - - Args: - children: The label for the Radio. Accepts any renderable node. - **props: Any other Radio props. - """ - return BaseElement(f"deephaven.ui.components.Radio", *children, **props) diff --git a/plugins/ui/src/deephaven/ui/components/radio_group.py b/plugins/ui/src/deephaven/ui/components/radio_group.py deleted file mode 100644 index ec9301489..000000000 --- a/plugins/ui/src/deephaven/ui/components/radio_group.py +++ /dev/null @@ -1,14 +0,0 @@ -from ..elements import BaseElement - -# TODO: Add pydocs #514 -def radio_group(*children, **props): - """ - Radio buttons allow users to select a single option from a list of mutually - exclusive options. All possible options are exposed up front for users to - compare. - - Args: - children: The Radio(s) contained within the RadioGroup. - **props: Any other RadioGroup props. - """ - return BaseElement(f"deephaven.ui.components.RadioGroup", *children, **props) diff --git a/plugins/ui/src/js/package.json b/plugins/ui/src/js/package.json index 7da3ee411..3543d32fc 100644 --- a/plugins/ui/src/js/package.json +++ b/plugins/ui/src/js/package.json @@ -41,6 +41,7 @@ "react-dom": "^17.0.2" }, "dependencies": { + "@adobe/react-spectrum": "^3.34.1", "@deephaven/chart": "^0.81.1", "@deephaven/components": "^0.81.1", "@deephaven/dashboard": "^0.81.1", diff --git a/plugins/ui/src/js/src/elements/ElementConstants.ts b/plugins/ui/src/js/src/elements/ElementConstants.ts index 6fffd69de..24383121a 100644 --- a/plugins/ui/src/js/src/elements/ElementConstants.ts +++ b/plugins/ui/src/js/src/elements/ElementConstants.ts @@ -31,8 +31,6 @@ export const ELEMENT_NAME = { listActionMenu: uiComponentName('ListActionMenu'), listView: uiComponentName('ListView'), picker: uiComponentName('Picker'), - radio: uiComponentName('Radio'), - radioGroup: uiComponentName('RadioGroup'), section: uiComponentName('Section'), } as const; diff --git a/plugins/ui/src/js/src/elements/IconElementView.tsx b/plugins/ui/src/js/src/elements/IconElementView.tsx index 930e338ad..64edc1ce0 100644 --- a/plugins/ui/src/js/src/elements/IconElementView.tsx +++ b/plugins/ui/src/js/src/elements/IconElementView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from '@deephaven/components'; +import { Icon } from '@adobe/react-spectrum'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { getIcon, IconElementNode } from './IconElementUtils'; import { ELEMENT_KEY } from './ElementUtils'; diff --git a/plugins/ui/src/js/src/elements/Radio.tsx b/plugins/ui/src/js/src/elements/Radio.tsx deleted file mode 100644 index 313f5c2a3..000000000 --- a/plugins/ui/src/js/src/elements/Radio.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { - Radio as DHRadio, - RadioProps as DHRadioProps, -} from '@deephaven/components'; -import { - SerializedFocusEventProps, - SerializedKeyboardEventProps, -} from './SerializedPropTypes'; -import { useFocusEventCallback } from './spectrum/useFocusEventCallback'; -import { useKeyboardEventCallback } from './spectrum/useKeyboardEventCallback'; - -export type SerializedRadioProps = SerializedFocusEventProps< - SerializedKeyboardEventProps ->; - -function Radio({ - onFocus: serializedOnFocus, - onBlur: serializedOnBlur, - onKeyDown: serializedOnKeyDown, - onKeyUp: serializedOnKeyUp, - ...props -}: SerializedRadioProps): JSX.Element { - const onFocus = useFocusEventCallback(serializedOnFocus); - const onBlur = useFocusEventCallback(serializedOnBlur); - const onKeyDown = useKeyboardEventCallback(serializedOnKeyDown); - const onKeyUp = useKeyboardEventCallback(serializedOnKeyUp); - - return ( - - ); -} - -export default Radio; diff --git a/plugins/ui/src/js/src/elements/RadioGroup.tsx b/plugins/ui/src/js/src/elements/RadioGroup.tsx deleted file mode 100644 index 2a3528ef1..000000000 --- a/plugins/ui/src/js/src/elements/RadioGroup.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { - RadioGroup as DHRadioGroup, - RadioGroupProps as DHRadioGroupProps, -} from '@deephaven/components'; -import { SerializedFocusEventProps } from './SerializedPropTypes'; -import { useFocusEventCallback } from './spectrum/useFocusEventCallback'; - -export type SerializedRadioGroupProps = - SerializedFocusEventProps; - -function RadioGroup({ - onFocus: serializedOnFocus, - onBlur: serializedOnBlur, - ...props -}: SerializedRadioGroupProps): JSX.Element { - const onFocus = useFocusEventCallback(serializedOnFocus); - const onBlur = useFocusEventCallback(serializedOnBlur); - - // eslint-disable-next-line react/jsx-props-no-spreading - return ; -} - -export default RadioGroup; diff --git a/plugins/ui/src/js/src/elements/SerializedPropTypes.ts b/plugins/ui/src/js/src/elements/SerializedPropTypes.ts deleted file mode 100644 index ad8a8ecb7..000000000 --- a/plugins/ui/src/js/src/elements/SerializedPropTypes.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { SerializedFocusEventCallback } from './spectrum/useFocusEventCallback'; -import { SerializedKeyboardEventCallback } from './spectrum/useKeyboardEventCallback'; -import { SerializedPressEventCallback } from './spectrum/usePressEventCallback'; - -export type SerializedFocusEventProps = Omit & { - /** Handler that is called when the element receives focus. */ - onFocus?: SerializedFocusEventCallback; - - /** Handler that is called when the element loses focus. */ - onBlur?: SerializedFocusEventCallback; -}; - -export type SerializedKeyboardEventProps = Omit< - T, - 'onKeyDown' | 'onKeyUp' -> & { - /** Handler that is called when a key is pressed */ - onKeyDown?: SerializedKeyboardEventCallback; - - /** Handler that is called when a key is released */ - onKeyUp?: SerializedKeyboardEventCallback; -}; - -export type SerializedPressEventProps = Omit< - T, - 'onPress' | 'onPressStart' | 'onPressEnd' | 'onPressUp' -> & { - /** Handler that is called when the press is released over the target. */ - onPress?: SerializedPressEventCallback; - - /** Handler that is called when a press interaction starts. */ - onPressStart?: SerializedPressEventCallback; - /** - * Handler that is called when a press interaction ends, either - * over the target or when the pointer leaves the target. - */ - onPressEnd?: SerializedPressEventCallback; - - /** - * Handler that is called when a press is released over the target, regardless of - * whether it started on the target or not. - */ - onPressUp?: SerializedPressEventCallback; -}; - -export type SerializedButtonEventProps = SerializedFocusEventProps< - SerializedKeyboardEventProps> ->; diff --git a/plugins/ui/src/js/src/elements/SpectrumElementUtils.ts b/plugins/ui/src/js/src/elements/SpectrumElementUtils.ts index 991a24f4e..d070f9d04 100644 --- a/plugins/ui/src/js/src/elements/SpectrumElementUtils.ts +++ b/plugins/ui/src/js/src/elements/SpectrumElementUtils.ts @@ -1,8 +1,8 @@ +import { ButtonGroup, Checkbox } from '@adobe/react-spectrum'; import { ValueOf } from '@deephaven/utils'; import { ActionGroup, ActionMenu, - ButtonGroup, Content, ContextualHelp, Grid, @@ -13,8 +13,6 @@ import { ListActionGroup, ListActionMenu, NumberField, - RadioGroup, - SpectrumCheckbox as Checkbox, Switch, Tabs, TabList, @@ -55,7 +53,6 @@ export const SpectrumSupportedTypes = { ListActionMenu, NumberField, Item, - RadioGroup, RangeSlider, Slider, Switch, diff --git a/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx b/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx index 064fce34a..89ab5cdfc 100644 --- a/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx @@ -3,11 +3,10 @@ import { ActionButton as DHCActionButton, ActionButtonProps as DHCActionButtonProps, } from '@deephaven/components'; -import { useButtonProps } from './useButtonProps'; -import { SerializedButtonEventProps } from '../SerializedPropTypes'; +import { SerializedButtonEventProps, useButtonProps } from './useButtonProps'; function ActionButton( - props: SerializedButtonEventProps + props: DHCActionButtonProps & SerializedButtonEventProps ): JSX.Element { const buttonProps = useButtonProps(props); diff --git a/plugins/ui/src/js/src/elements/spectrum/Button.tsx b/plugins/ui/src/js/src/elements/spectrum/Button.tsx index d6643c359..7db01e1b5 100644 --- a/plugins/ui/src/js/src/elements/spectrum/Button.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/Button.tsx @@ -1,10 +1,12 @@ import React from 'react'; -import { SpectrumButton, SpectrumButtonProps } from '@deephaven/components'; -import { useButtonProps } from './useButtonProps'; -import { SerializedButtonEventProps } from '../SerializedPropTypes'; +import { + Button as SpectrumButton, + SpectrumButtonProps, +} from '@adobe/react-spectrum'; +import { SerializedButtonEventProps, useButtonProps } from './useButtonProps'; function Button( - props: SerializedButtonEventProps + props: SpectrumButtonProps & SerializedButtonEventProps ): JSX.Element { const buttonProps = useButtonProps(props); diff --git a/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts b/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts index a7f67fd81..d0daa1297 100644 --- a/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts +++ b/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts @@ -1,11 +1,52 @@ -import { usePressEventCallback } from './usePressEventCallback'; -import { useFocusEventCallback } from './useFocusEventCallback'; -import { useKeyboardEventCallback } from './useKeyboardEventCallback'; +import { + SerializedPressEventCallback, + usePressEventCallback, +} from './usePressEventCallback'; +import { + SerializedFocusEventCallback, + useFocusEventCallback, +} from './useFocusEventCallback'; +import { + SerializedKeyboardEventCallback, + useKeyboardEventCallback, +} from './useKeyboardEventCallback'; import { mapSpectrumProps } from './mapSpectrumProps'; -import { SerializedButtonEventProps } from '../SerializedPropTypes'; + +export type SerializedButtonEventProps = { + /** Handler that is called when the press is released over the target. */ + onPress?: SerializedPressEventCallback; + + /** Handler that is called when a press interaction starts. */ + onPressStart?: SerializedPressEventCallback; + /** + * Handler that is called when a press interaction ends, either + * over the target or when the pointer leaves the target. + */ + onPressEnd?: SerializedPressEventCallback; + + /** + * Handler that is called when a press is released over the target, regardless of + * whether it started on the target or not. + */ + onPressUp?: SerializedPressEventCallback; + + /** Handler that is called when the element receives focus. */ + onFocus?: SerializedFocusEventCallback; + + /** Handler that is called when the element loses focus. */ + onBlur?: SerializedFocusEventCallback; + + /** Handler that is called when a key is pressed */ + onKeyDown?: SerializedKeyboardEventCallback; + + /** Handler that is called when a key is released */ + onKeyUp?: SerializedKeyboardEventCallback; +}; // returns SpectrumButtonProps -export function useButtonProps(props: SerializedButtonEventProps): T { +export function useButtonProps( + props: SerializedButtonEventProps & T +): T & SerializedButtonEventProps { const { onPress: propOnPress, onPressStart: propsOnPressStart, @@ -37,7 +78,5 @@ export function useButtonProps(props: SerializedButtonEventProps): T { onKeyDown, onKeyUp, ...mapSpectrumProps(otherProps), - } as T; + } as T & SerializedButtonEventProps; } - -export default useButtonProps; diff --git a/plugins/ui/src/js/src/widget/WidgetUtils.tsx b/plugins/ui/src/js/src/widget/WidgetUtils.tsx index 524e6f763..76c1ed142 100644 --- a/plugins/ui/src/js/src/widget/WidgetUtils.tsx +++ b/plugins/ui/src/js/src/widget/WidgetUtils.tsx @@ -34,8 +34,6 @@ import Dashboard from '../layout/Dashboard'; import ListView from '../elements/ListView'; import Picker from '../elements/Picker'; import ActionGroup from '../elements/ActionGroup'; -import Radio from '../elements/Radio'; -import RadioGroup from '../elements/RadioGroup'; /* * Map element node names to their corresponding React components @@ -60,8 +58,6 @@ export const elementComponentMap = { [ELEMENT_NAME.listActionMenu]: ListActionMenu, [ELEMENT_NAME.listView]: ListView, [ELEMENT_NAME.picker]: Picker, - [ELEMENT_NAME.radio]: Radio, - [ELEMENT_NAME.radioGroup]: RadioGroup, [ELEMENT_NAME.section]: Section, } as const satisfies Record, unknown>; diff --git a/plugins/ui/src/js/vite.config.ts b/plugins/ui/src/js/vite.config.ts index 9a1abb16f..f64b5e9f1 100644 --- a/plugins/ui/src/js/vite.config.ts +++ b/plugins/ui/src/js/vite.config.ts @@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => ({ 'react-dom', 'redux', 'react-redux', + '@adobe/react-spectrum', '@deephaven/chart', '@deephaven/components', '@deephaven/dashboard',