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 52aba75836ce565bc9aca2d3f517332e0fdae703 Author: Enzo Martellucci <[email protected]> AuthorDate: Sat Jan 25 18:29:33 2025 +0100 refactor(CalendarFrame): Implements Radio from Antd5 --- .../src/components/Radio/{index.ts => index.tsx} | 17 ++++++++++++++++- .../DateFilterControl/components/CalendarFrame.tsx | 16 ++++++---------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/superset-frontend/src/components/Radio/index.ts b/superset-frontend/src/components/Radio/index.tsx similarity index 67% rename from superset-frontend/src/components/Radio/index.ts rename to superset-frontend/src/components/Radio/index.tsx index 2c416288fb..73be66487c 100644 --- a/superset-frontend/src/components/Radio/index.ts +++ b/superset-frontend/src/components/Radio/index.tsx @@ -17,10 +17,25 @@ * under the License. */ import { Radio as Antd5Radio } from 'antd-v5'; +import React from 'react'; +import type { RadioChangeEvent, RadioGroupProps, RadioProps } from 'antd-v5'; -export type { RadioChangeEvent, RadioGroupProps, RadioProps } from 'antd-v5'; +const verticalStyle: React.CSSProperties = { + display: 'flex', + flexDirection: 'column', + gap: '15px' +} +// Wrapper for GroupVertical +const VerticalGroup = (props: RadioGroupProps) => { + return ( + <Antd5Radio.Group {...props} style={{ ...verticalStyle, ...props.style }} />) +} + +export type { RadioChangeEvent, RadioGroupProps, RadioProps }; export const Radio = Object.assign(Antd5Radio, { Group: Antd5Radio.Group, Button: Antd5Radio.Button, + VerticalGroup: VerticalGroup }); + 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 8900e213f4..56f369159c 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx @@ -45,16 +45,12 @@ export function CalendarFrame({ onChange, value }: FrameComponentProps) { <div className="section-title"> {t('Configure Time Range: Previous...')} </div> - <Radio.Group - value={value} - onChange={(e: any) => onChange(e.target.value)} - > - {CALENDAR_RANGE_OPTIONS.map(({ value, label }) => ( - <Radio key={value} value={value} className="vertical-radio"> - {label} - </Radio> - ))} - </Radio.Group> + <Radio.VerticalGroup + size='large' + value={value} + onChange={(e: any) => onChange(e.target.value)} + options={CALENDAR_RANGE_OPTIONS} + /> </> ); }
