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 6b10a5e1eca24e24d19ed97e474c71406900c059 Author: Enzo Martellucci <[email protected]> AuthorDate: Mon Jan 27 21:02:33 2025 +0100 refactor(Radio): - Radio.GroupWrapper customization for Radio.Group component - Replaces Radio.Group in the base code with Radio.GroupWrapper - Optimizes by removing excess code --- .../Chart/DrillBy/useDisplayModeToggle.tsx | 11 ++--- superset-frontend/src/components/Radio/index.tsx | 52 ++++++++++++++++------ .../header-renderers/HeaderWithRadioGroup.tsx | 5 ++- .../FiltersConfigForm/FiltersConfigForm.tsx | 8 ++-- .../explore/components/DataTableControl/index.tsx | 16 ++++--- .../DateFilterControl/components/CalendarFrame.tsx | 5 ++- .../DateFilterControl/components/CommonFrame.tsx | 5 ++- .../components/CurrentCalendarFrame.tsx | 6 ++- .../DateFilterControl/components/CustomFrame.tsx | 4 +- .../DateFilterControl/tests/CalendarFrame.test.tsx | 8 +--- 10 files changed, 73 insertions(+), 47 deletions(-) diff --git a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx index acc87a75b5..3b30517853 100644 --- a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx @@ -19,14 +19,14 @@ import { useMemo, useState } from 'react'; import { css, SupersetTheme, t } from '@superset-ui/core'; -import { Radio, CheckboxGroupProps } from 'src/components/Radio'; +import { Radio, CheckboxOptionType } from 'src/components/Radio'; import { DrillByType } from '../types'; export const useDisplayModeToggle = () => { const [drillByDisplayMode, setDrillByDisplayMode] = useState<DrillByType>( DrillByType.Chart, ); - const customButtons: CheckboxGroupProps<number>['options'] = [ + const customButtons: CheckboxOptionType[] = [ { label: t('Chart'), value: DrillByType.Chart }, { label: t('Table'), value: DrillByType.Table }, ]; @@ -35,15 +35,10 @@ export const useDisplayModeToggle = () => { <div css={(theme: SupersetTheme) => css` margin-bottom: ${theme.gridUnit * 6}px; - .antd5-radio-button-wrapper-checked:not( - .ant-radio-button-wrapper-disabled - ):focus-within { - box-shadow: none; - } `} data-test="drill-by-display-toggle" > - <Radio.Group + <Radio.GroupWrapper onChange={({ target: { value } }) => { setDrillByDisplayMode(value); }} diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index 70643fe5b0..3a4c796f72 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -17,35 +17,59 @@ * under the License. */ import { Radio as Antd5Radio } from 'antd-v5'; -import React from 'react'; import type { RadioChangeEvent, - RadioGroupProps, RadioProps, + RadioGroupProps, CheckboxOptionType, } from 'antd-v5'; -import type { CheckboxGroupProps } from 'antd-v5/es/checkbox'; +import { Space, SpaceProps } from 'src/components/Space'; -const verticalStyle: React.CSSProperties = { - display: 'flex', - flexDirection: 'column', - gap: '15px', +export type RadioGroupWrapperProps = RadioGroupProps & { + useSpace?: boolean; + direction?: SpaceProps['direction']; + spaceSize?: SpaceProps['size']; + align?: SpaceProps['align']; + options?: CheckboxOptionType[]; + children?: React.ReactNode; }; -// Wrapper for GroupVertical -const VerticalGroup = (props: RadioGroupProps) => ( - <Antd5Radio.Group {...props} style={{ ...verticalStyle, ...props.style }} /> -); +const RadioGroup = ({ + useSpace, + direction, + spaceSize, + options, + children, + ...props +}: RadioGroupWrapperProps) => { + const content = options + ? options.map((option: CheckboxOptionType) => ( + <Radio key={option.value} value={option.value}> + {option.label} + </Radio> + )) + : children; + + return ( + <Radio.Group {...props}> + {useSpace ? ( + <Space direction={direction} size={spaceSize}> + {content} + </Space> + ) : ( + content + )} + </Radio.Group> + ); +}; export type { RadioChangeEvent, RadioGroupProps, RadioProps, - CheckboxGroupProps, CheckboxOptionType, }; export const Radio = Object.assign(Antd5Radio, { - Group: Antd5Radio.Group, + GroupWrapper: RadioGroup, Button: Antd5Radio.Button, - VerticalGroup, }); diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index 6b9c26020a..aef121e01d 100644 --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -55,7 +55,10 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) { > {groupTitle} </div> - <Radio.VerticalGroup + <Radio.GroupWrapper + useSpace + direction="vertical" + spaceSize={4} value={value} onChange={e => { onChange(e.target.value); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx index ccf763e393..3c68560c9e 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx @@ -1106,7 +1106,7 @@ const FiltersConfigForm = ( initialValue={sort} label={<StyledLabel>{t('Sort type')}</StyledLabel>} > - <Radio.Group + <Radio.GroupWrapper onChange={value => { onSortChanged(value.target.value); formChanged(); @@ -1114,7 +1114,7 @@ const FiltersConfigForm = ( > <Radio value>{t('Sort ascending')}</Radio> <Radio value={false}>{t('Sort descending')}</Radio> - </Radio.Group> + </Radio.GroupWrapper> </StyledRowFormItem> {hasMetrics && ( <StyledRowSubFormItem @@ -1181,7 +1181,7 @@ const FiltersConfigForm = ( <StyledLabel>{t('Single value type')}</StyledLabel> } > - <Radio.Group + <Radio.GroupWrapper onChange={value => { onEnableSingleValueChanged(value.target.value); formChanged(); @@ -1196,7 +1196,7 @@ const FiltersConfigForm = ( <Radio value={SingleValueType.Maximum}> {t('Maximum')} </Radio> - </Radio.Group> + </Radio.GroupWrapper> </StyledRowFormItem> </CollapsibleControl> </CleanFormItem> diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx index f351ab717c..2fe6784d86 100644 --- a/superset-frontend/src/explore/components/DataTableControl/index.tsx +++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx @@ -30,7 +30,6 @@ import { import { Global } from '@emotion/react'; import { Column } from 'react-table'; import { debounce } from 'lodash'; -import { Space } from 'src/components/Space'; import { Input } from 'src/components/Input'; import { BOOL_FALSE_DISPLAY, @@ -141,12 +140,15 @@ const FormatPicker = ({ onChange: any; value: FormatPickerValue; }) => ( - <Radio.Group value={value} onChange={onChange}> - <Space direction="vertical"> - <Radio value={FormatPickerValue.Formatted}>{t('Formatted date')}</Radio> - <Radio value={FormatPickerValue.Original}>{t('Original value')}</Radio> - </Space> - </Radio.Group> + <Radio.GroupWrapper + useSpace + direction="vertical" + value={value} + onChange={onChange} + > + <Radio value={FormatPickerValue.Formatted}>{t('Formatted date')}</Radio> + <Radio value={FormatPickerValue.Original}>{t('Original value')}</Radio> + </Radio.GroupWrapper> ); const FormatPickerContainer = styled.div` diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx index 7f792bf4c4..a31373e041 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx @@ -45,8 +45,11 @@ export function CalendarFrame({ onChange, value }: FrameComponentProps) { <div className="section-title"> {t('Configure Time Range: Previous...')} </div> - <Radio.VerticalGroup + <Radio.GroupWrapper + useSpace size="large" + direction="vertical" + spaceSize={15} value={value} onChange={(e: any) => onChange(e.target.value)} options={CALENDAR_RANGE_OPTIONS} diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx index 21b301f32b..3bf3574992 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx @@ -41,8 +41,11 @@ export function CommonFrame(props: FrameComponentProps) { <div className="section-title" data-test={DateFilterTestKey.CommonFrame}> {t('Configure Time Range: Last...')} </div> - <Radio.VerticalGroup + <Radio.GroupWrapper + useSpace size="large" + direction="vertical" + spaceSize={15} value={commonRange} onChange={(e: any) => props.onChange(e.target.value)} options={COMMON_RANGE_OPTIONS} diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx index 5dfd7eef29..f3ca3d504b 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx @@ -41,9 +41,11 @@ export function CurrentCalendarFrame({ onChange, value }: FrameComponentProps) { <div className="section-title"> {t('Configure Time Range: Current...')} </div> - <Radio.VerticalGroup + <Radio.GroupWrapper + useSpace size="large" - value={value} + direction="vertical" + spaceSize={15} onChange={(e: any) => { let newValue = e.target.value; newValue = newValue.trim(); diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx index 378956c645..1d37f0c85a 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx @@ -238,7 +238,7 @@ export function CustomFrame(props: FrameComponentProps) { <div className="control-label">{t('Anchor to')}</div> <Row align="middle"> <Col> - <Radio.Group + <Radio.GroupWrapper onChange={onAnchorMode} defaultValue="now" value={anchorMode} @@ -249,7 +249,7 @@ export function CustomFrame(props: FrameComponentProps) { <Radio key="specific" value="specific"> {t('Date/Time')} </Radio> - </Radio.Group> + </Radio.GroupWrapper> </Col> {anchorMode !== 'now' && ( <Col> diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CalendarFrame.test.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CalendarFrame.test.tsx index d82da2a30c..b859d737b5 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CalendarFrame.test.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CalendarFrame.test.tsx @@ -42,13 +42,7 @@ describe('CalendarFrame', () => { const radios = screen.getAllByRole('radio'); expect(radios).toHaveLength(CALENDAR_RANGE_OPTIONS.length); CALENDAR_RANGE_OPTIONS.forEach(option => { - if ( - typeof option === 'object' && - 'label' in option && - typeof option.label === 'string' - ) { - expect(screen.getByText(option.label)).toBeInTheDocument(); - } + expect(screen.getByText(option.label as string)).toBeInTheDocument(); }); });
