From 93eebff8a9bb0e2f61eccc0af02f282f8c553762 Mon Sep 17 00:00:00 2001 From: Don Date: Mon, 13 Nov 2023 17:43:36 -0500 Subject: [PATCH] refactor: replace html selects with Select component (#1637) Replaces all the places we used raw html select components with the Select component. This was orignally needed for themeing so we could re-style the Select component, but we came up with an alternate solution. --- .../settings/ColumnSpecificSectionContent.tsx | 18 ++-- .../src/settings/FormattingSectionContent.tsx | 22 +++-- .../code-studio/src/styleguide/Inputs.tsx | 25 ++++-- packages/components/src/Select.tsx | 86 ++++++++++--------- packages/console/src/csv/CsvInputBar.tsx | 10 +-- .../dropdown-filter/DropdownFilter.test.tsx | 4 +- .../dropdown-filter/DropdownFilter.tsx | 30 ++++--- .../src/controls/input-filter/InputFilter.tsx | 21 ++--- .../src/panels/FilterSetManager.tsx | 27 +++--- .../src/AdvancedFilterCreatorFilterItem.tsx | 12 +-- packages/iris-grid/src/GotoRow.tsx | 26 +++--- .../iris-grid/src/sidebar/ChartBuilder.tsx | 58 +++++-------- .../src/sidebar/SelectDistinctBuilder.tsx | 18 ++-- .../src/sidebar/TableCsvExporter.tsx | 11 ++- .../ConditionEditor.tsx | 11 +-- 15 files changed, 195 insertions(+), 184 deletions(-) diff --git a/packages/code-studio/src/settings/ColumnSpecificSectionContent.tsx b/packages/code-studio/src/settings/ColumnSpecificSectionContent.tsx index 6ec5fed1cb..e7998cb145 100644 --- a/packages/code-studio/src/settings/ColumnSpecificSectionContent.tsx +++ b/packages/code-studio/src/settings/ColumnSpecificSectionContent.tsx @@ -10,7 +10,7 @@ import memoize from 'memoizee'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import debounce from 'lodash.debounce'; import classNames from 'classnames'; -import { Button, ThemeExport } from '@deephaven/components'; +import { Button, Select, ThemeExport } from '@deephaven/components'; import { DateTimeColumnFormatter, IntegerColumnFormatter, @@ -362,8 +362,8 @@ export class ColumnSpecificSectionContent extends PureComponent< this.handleFormatRuleChange(i, 'columnName', e.target.value); const onNameBlur = (): void => this.handleFormatRuleChange(i, 'isNewRule', false); - const onTypeChange = (e: ChangeEvent): void => - this.handleFormatRuleChange(i, 'columnType', e.target.value); + const onTypeChange = (eventTargetValue: string): void => + this.handleFormatRuleChange(i, 'columnType', eventTargetValue); const ruleError = this.getRuleError(rule); @@ -396,14 +396,14 @@ export class ColumnSpecificSectionContent extends PureComponent< /> - +
@@ -478,14 +478,14 @@ export class ColumnSpecificSectionContent extends PureComponent< const value = format.formatString ?? ''; return ( - + ); } diff --git a/packages/code-studio/src/settings/FormattingSectionContent.tsx b/packages/code-studio/src/settings/FormattingSectionContent.tsx index 9947c52c26..a15d1e9b24 100644 --- a/packages/code-studio/src/settings/FormattingSectionContent.tsx +++ b/packages/code-studio/src/settings/FormattingSectionContent.tsx @@ -9,7 +9,7 @@ import { vsRefresh } from '@deephaven/icons'; import memoize from 'memoizee'; import debounce from 'lodash.debounce'; import classNames from 'classnames'; -import { Button, Checkbox } from '@deephaven/components'; +import { Button, Checkbox, Select } from '@deephaven/components'; import { IntegerColumnFormatter, DecimalColumnFormatter, @@ -170,12 +170,10 @@ export class FormattingSectionContent extends PureComponent< this.debouncedCommitChanges(); } - handleDefaultDateTimeFormatChange( - event: ChangeEvent - ): void { - log.debug('handleDefaultDateTimeFormatChange', event.target.value); + handleDefaultDateTimeFormatChange(value: string): void { + log.debug('handleDefaultDateTimeFormatChange', value); const update = { - defaultDateTimeFormat: event.target.value, + defaultDateTimeFormat: value, }; this.setState(update); this.queueUpdate(update); @@ -233,8 +231,8 @@ export class FormattingSectionContent extends PureComponent< this.queueUpdate(update); } - handleTimeZoneChange(event: ChangeEvent): void { - const update = { timeZone: event.target.value }; + handleTimeZoneChange(value: string): void { + const update = { timeZone: value }; this.setState(update); this.queueUpdate(update); } @@ -364,14 +362,14 @@ export class FormattingSectionContent extends PureComponent< Time zone
- +
- +
Dropdown filter control will apply its filter to all columns matching this name in this dashboard. @@ -481,16 +485,16 @@ export class DropdownFilter extends Component<
- +
{settingsError && (
diff --git a/packages/dashboard-core-plugins/src/controls/input-filter/InputFilter.tsx b/packages/dashboard-core-plugins/src/controls/input-filter/InputFilter.tsx index 0664e22a4d..6380cf4d5d 100644 --- a/packages/dashboard-core-plugins/src/controls/input-filter/InputFilter.tsx +++ b/packages/dashboard-core-plugins/src/controls/input-filter/InputFilter.tsx @@ -10,7 +10,7 @@ import React, { KeyboardEvent, ReactElement, } from 'react'; -import { Button, CardFlip } from '@deephaven/components'; +import { Button, CardFlip, Select } from '@deephaven/components'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { vsGear } from '@deephaven/icons'; import type { Column } from '@deephaven/jsapi-types'; @@ -123,10 +123,9 @@ class InputFilter extends Component { return name; }); - handleColumnChange(event: ChangeEvent): void { + handleColumnChange(eventTargetValue: string): void { const { columns } = this.props; - const { value } = event.target; - const selectedColumn = columns[parseInt(value, 10)]; + const selectedColumn = columns[parseInt(eventTargetValue, 10)]; log.debug2('handleColumnChange', selectedColumn); @@ -241,11 +240,13 @@ class InputFilter extends Component {
- + item.name === selectedColumn?.name && + item.type === selectedColumn?.type + ) )} className="custom-select" onChange={this.handleColumnChange} @@ -263,7 +264,7 @@ class InputFilter extends Component { No Available Columns )} - +
Input filter control will apply its filter to all columns matching this name in this dashboard. diff --git a/packages/dashboard-core-plugins/src/panels/FilterSetManager.tsx b/packages/dashboard-core-plugins/src/panels/FilterSetManager.tsx index f2c8c211dd..8c18d3f53d 100644 --- a/packages/dashboard-core-plugins/src/panels/FilterSetManager.tsx +++ b/packages/dashboard-core-plugins/src/panels/FilterSetManager.tsx @@ -25,7 +25,13 @@ import { vsArrowSmallUp, } from '@deephaven/icons'; import Log from '@deephaven/log'; -import { Button, CardFlip, RadioGroup, RadioItem } from '@deephaven/components'; +import { + Button, + CardFlip, + RadioGroup, + RadioItem, + Select, +} from '@deephaven/components'; import './FilterSetManager.scss'; @@ -193,13 +199,12 @@ class FilterSetManager extends Component< } } - handleEditDropdownChange(event: ChangeEvent): void { - const { value: editId } = event.target; - this.setState({ editId }); + handleEditDropdownChange(eventTargetValue: string): void { + this.setState({ editId: eventTargetValue }); } - handleFilterChange(event: ChangeEvent): void { - const { value: selectedId } = event.target; + handleFilterChange(eventTargetValue: string): void { + const selectedId = eventTargetValue; const { isValueShown, onChange } = this.props; this.applyFilterSet(selectedId); onChange({ isValueShown, selectedId }); @@ -595,7 +600,7 @@ class FilterSetManager extends Component<
- +