From aa1b6a92b46ba67570adbeb3f73fe8bbe7d7f9a1 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Thu, 2 Jan 2025 15:09:36 +0800 Subject: [PATCH] feat: ConfigProvider support classNames and styles for slider (#52185) * draft * fix --- components/config-provider/context.ts | 5 +- components/config-provider/index.en-US.md | 2 +- components/config-provider/index.zh-CN.md | 2 +- components/slider/__tests__/index.test.tsx | 47 +++++++++++++++++ components/slider/demo/_semantic.tsx | 3 ++ components/slider/index.tsx | 59 +++++++++++++++++++--- 6 files changed, 108 insertions(+), 10 deletions(-) diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 851858b19e..e3eb635b0d 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -38,6 +38,7 @@ import type { TooltipProps } from '../tooltip'; import type { PopoverProps } from '../popover'; import type { PopconfirmProps } from '../popconfirm'; import type { DescriptionsProps } from '../descriptions'; +import type { SliderProps } from '../slider'; export const defaultPrefixCls = 'ant'; export const defaultIconPrefixCls = 'anticon'; @@ -192,6 +193,8 @@ export type PopconfirmConfig = Pick< 'className' | 'style' | 'styles' | 'classNames' >; +export type SliderConfig = ComponentStyleConfig & Pick; + export type SpinConfig = ComponentStyleConfig & Pick; export type InputNumberConfig = ComponentStyleConfig & Pick; @@ -285,7 +288,7 @@ export interface ConfigConsumerProps { modal?: ModalConfig; progress?: ComponentStyleConfig; result?: ComponentStyleConfig; - slider?: ComponentStyleConfig; + slider?: SliderConfig; breadcrumb?: ComponentStyleConfig; menu?: MenuConfig; checkbox?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 4abd6b861f..9080e74e39 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -149,7 +149,7 @@ const { | skeleton | Set Skeleton common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 | -| slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| slider | Set Slider common props | { className?: string, style?: React.CSSProperties, classNames?: [SliderProps\["classNames"\]](/components/slider#api), styles?: [SliderProps\["styles"\]](/components/slider#api) } | - | 5.7.0, `classNames` and `styles`: 5.23.0 | | switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space#api), styles?: [SpaceProps\["styles"\]](/components/space#api) } | - | 5.6.0 | | splitter | Set Splitter common props | { className?: string, style?: React.CSSProperties } | - | 5.21.0 | diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 5449059310..19d198c85a 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -151,7 +151,7 @@ const { | skeleton | 设置 Skeleton 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 | -| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [SliderProps\["classNames"\]](/components/slider-cn#api), styles?: [SliderProps\["styles"\]](/components/slider-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0 | | switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space-cn#api), styles?: [SpaceProps\["styles"\]](/components/space-cn#api) } | - | 5.6.0 | | splitter | 设置 Splitter 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.21.0 | diff --git a/components/slider/__tests__/index.test.tsx b/components/slider/__tests__/index.test.tsx index 1cf6afe969..58f9ed0748 100644 --- a/components/slider/__tests__/index.test.tsx +++ b/components/slider/__tests__/index.test.tsx @@ -225,4 +225,51 @@ describe('Slider', () => { errSpy.mockRestore(); }); + it('should apply custom styles to Descriptions', () => { + const customClassNames = { + root: 'custom-root', + track: 'custom-track', + tracks: 'custom-tracks', + rail: 'custom-rail', + handle: 'custom-handle', + }; + + const customStyles = { + root: { backgroundColor: 'red' }, + track: { backgroundColor: 'black' }, + tracks: { backgroundColor: 'yellow' }, + rail: { backgroundColor: 'purple' }, + handle: { backgroundColor: 'blue' }, + }; + + const { container } = render( + , + ); + + const rootElement = container.querySelector('.ant-slider') as HTMLElement; + const trackElement = container.querySelector('.ant-slider-track') as HTMLElement; + const tracksElement = container.querySelector('.ant-slider-tracks') as HTMLElement; + const railElement = container.querySelector('.ant-slider-rail') as HTMLElement; + const handleElement = container.querySelector('.ant-slider-handle') as HTMLElement; + + // check classNames + expect(rootElement.classList).toContain('custom-root'); + expect(trackElement.classList).toContain('custom-track'); + expect(tracksElement.classList).toContain('custom-tracks'); + expect(railElement.classList).toContain('custom-rail'); + expect(handleElement.classList).toContain('custom-handle'); + + // check styles + expect(rootElement.style.backgroundColor).toBe('red'); + expect(trackElement.style.backgroundColor).toBe('black'); + expect(tracksElement.style.backgroundColor).toBe('yellow'); + expect(railElement.style.backgroundColor).toBe('purple'); + expect(handleElement.style.backgroundColor).toBe('blue'); + }); }); diff --git a/components/slider/demo/_semantic.tsx b/components/slider/demo/_semantic.tsx index be5af92d77..d2c9f7553d 100644 --- a/components/slider/demo/_semantic.tsx +++ b/components/slider/demo/_semantic.tsx @@ -6,12 +6,14 @@ import useLocale from '../../../.dumi/hooks/useLocale'; const locales = { cn: { + root: '根元素', track: '范围选择下，点和点之间单个选取条', tracks: '范围选择下，整个范围选取条', rail: '背景条元素', handle: '抓取点元素', }, en: { + root: 'Root element', track: 'The selection bar between points and points under the range selection', tracks: 'The entire range selection bar under the range selection', rail: 'Background rail element', @@ -24,6 +26,7 @@ const App: React.FC = () => { return ( >; +export type SliderStyles = Partial>; +export interface SliderProps extends RcSliderProps { + classNames?: SliderClassNames; + styles?: SliderStyles; +} + interface HandleGeneratorInfo { value?: number; dragging?: boolean; @@ -59,8 +67,8 @@ export interface SliderBaseProps { tooltip?: SliderTooltipProps; autoFocus?: boolean; - styles?: RcSliderProps['styles']; - classNames?: RcSliderProps['classNames']; + styles?: SliderProps['styles']; + classNames?: SliderProps['classNames']; onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; @@ -142,6 +150,8 @@ const Slider = React.forwardRef tooltipPlacement: legacyTooltipPlacement, tooltip = {}, onChangeComplete, + classNames: sliderClassNames, + styles, ...restProps } = props; @@ -207,9 +217,11 @@ const Slider = React.forwardRef const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls); - const cls = classNames( + const rootClassNames = classNames( className, slider?.className, + slider?.classNames?.root, + sliderClassNames?.root, rootClassName, { [`${prefixCls}-rtl`]: isRTL, @@ -363,16 +375,49 @@ const Slider = React.forwardRef : undefined; // ============================== Render ============================== - const mergedStyle: React.CSSProperties = { ...slider?.style, ...style }; + const rootStyle: React.CSSProperties = { + ...slider?.styles?.root, + ...slider?.style, + ...styles?.root, + ...style, + }; + + const mergedTracks = { + ...slider?.styles?.tracks, + ...styles?.tracks, + }; + + const mergedTracksClassNames = classNames(slider?.classNames?.tracks, sliderClassNames?.tracks); return wrapCSSVar( // @ts-ignore