This is an automated email from the ASF dual-hosted git repository. enzomartellucci pushed a commit to branch refactor/antd5-radio in repository https://gitbox.apache.org/repos/asf/superset.git
commit f233d2405dda155478c7391a4ba5eab3739b4882 Author: Enzo Martellucci <[email protected]> AuthorDate: Sat Jan 25 20:06:46 2025 +0100 refactor(DisplayModeToggle): - Implements Radio from Antd5 - Update types in constants file for options constants --- .../Chart/DrillBy/useDisplayModeToggle.tsx | 37 ++++++++++------------ superset-frontend/src/components/Radio/index.tsx | 3 +- .../controls/DateFilterControl/utils/constants.ts | 13 ++++---- 3 files changed, 25 insertions(+), 28 deletions(-) diff --git a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx index bd2729633e..48a90aafc7 100644 --- a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx @@ -19,49 +19,44 @@ import { useMemo, useState } from 'react'; import { css, SupersetTheme, t } from '@superset-ui/core'; -import { Radio } from 'src/components/Radio'; +import { Radio, CheckboxGroupProps } from 'src/components/Radio'; import { DrillByType } from '../types'; export const useDisplayModeToggle = () => { const [drillByDisplayMode, setDrillByDisplayMode] = useState<DrillByType>( DrillByType.Chart, ); - - const displayModeToggle = useMemo( +const customButtons: CheckboxGroupProps<number>['options'] = [ + { label: t('Chart'), value: DrillByType.Chart }, + { label: t('Table'), value: DrillByType.Table }, +]; + const displayModeToggle = useMemo( () => ( <div css={(theme: SupersetTheme) => css` margin-bottom: ${theme.gridUnit * 6}px; - .ant-radio-button-wrapper-checked:not( + .antd5-radio-button-wrapper-checked:not( .ant-radio-button-wrapper-disabled ):focus-within { box-shadow: none; } `} data-test="drill-by-display-toggle" - > + > <Radio.Group onChange={({ target: { value } }) => { setDrillByDisplayMode(value); }} - defaultValue={DrillByType.Chart} - > - <Radio.Button - value={DrillByType.Chart} - data-test="drill-by-chart-radio" - > - {t('Chart')} - </Radio.Button> - <Radio.Button - value={DrillByType.Table} - data-test="drill-by-table-radio" - > - {t('Table')} - </Radio.Button> - </Radio.Group> + defaultValue={DrillByType.Chart} + options={customButtons} + value={drillByDisplayMode} + optionType="button" + buttonStyle="outline" + /> </div> ), - [], + [drillByDisplayMode], ); return { displayModeToggle, drillByDisplayMode }; }; + diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index 73be66487c..ce87e5b45c 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -19,6 +19,7 @@ import { Radio as Antd5Radio } from 'antd-v5'; import React from 'react'; import type { RadioChangeEvent, RadioGroupProps, RadioProps } from 'antd-v5'; +import type { CheckboxGroupProps } from 'antd-v5/es/checkbox'; const verticalStyle: React.CSSProperties = { display: 'flex', @@ -32,7 +33,7 @@ const VerticalGroup = (props: RadioGroupProps) => { <Antd5Radio.Group {...props} style={{ ...verticalStyle, ...props.style }} />) } -export type { RadioChangeEvent, RadioGroupProps, RadioProps }; +export type { RadioChangeEvent, RadioGroupProps, RadioProps, CheckboxGroupProps }; export const Radio = Object.assign(Antd5Radio, { Group: Antd5Radio.Group, Button: Antd5Radio.Button, diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts index 16b24d7a0b..584f420428 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts @@ -32,6 +32,7 @@ import { CurrentQuarter, CurrentDay, } from 'src/explore/components/controls/DateFilterControl/types'; +import { CheckboxGroupProps } from 'src/components/Radio'; import { extendedDayjs } from 'src/utils/dates'; export const FRAME_OPTIONS: SelectOptionType[] = [ @@ -43,7 +44,7 @@ export const FRAME_OPTIONS: SelectOptionType[] = [ { value: 'No filter', label: t('No filter') }, ]; -export const COMMON_RANGE_OPTIONS: SelectOptionType[] = [ +export const COMMON_RANGE_OPTIONS: CheckboxGroupProps<string>['options'] = [ { value: 'Last day', label: t('Last day') }, { value: 'Last week', label: t('Last week') }, { value: 'Last month', label: t('Last month') }, @@ -51,20 +52,20 @@ export const COMMON_RANGE_OPTIONS: SelectOptionType[] = [ { value: 'Last year', label: t('Last year') }, ]; export const COMMON_RANGE_VALUES_SET = new Set( - COMMON_RANGE_OPTIONS.map(({ value }) => value), + COMMON_RANGE_OPTIONS.map(( value ) => value), ); -export const CALENDAR_RANGE_OPTIONS: SelectOptionType[] = [ +export const CALENDAR_RANGE_OPTIONS: CheckboxGroupProps<string>['options'] = [ { value: PreviousCalendarWeek, label: t('previous calendar week') }, { value: PreviousCalendarMonth, label: t('previous calendar month') }, { value: PreviousCalendarQuarter, label: t('previous calendar quarter') }, { value: PreviousCalendarYear, label: t('previous calendar year') }, ]; export const CALENDAR_RANGE_VALUES_SET = new Set( - CALENDAR_RANGE_OPTIONS.map(({ value }) => value), + CALENDAR_RANGE_OPTIONS.map(( value ) => value), ); -export const CURRENT_RANGE_OPTIONS: SelectOptionType[] = [ +export const CURRENT_RANGE_OPTIONS: CheckboxGroupProps<string>['options'] = [ { value: CurrentDay, label: t('Current day') }, { value: CurrentWeek, label: t('Current week') }, { value: CurrentMonth, label: t('Current month') }, @@ -72,7 +73,7 @@ export const CURRENT_RANGE_OPTIONS: SelectOptionType[] = [ { value: CurrentYear, label: t('Current year') }, ]; export const CURRENT_RANGE_VALUES_SET = new Set( - CURRENT_RANGE_OPTIONS.map(({ value }) => value), + CURRENT_RANGE_OPTIONS.map(( value ) => value), ); const GRAIN_OPTIONS = [
