Allow callback for "dotStyle" and "activeDotStyle" props - with tests (#830)

* feat: callback for "dotStyle" and "activeDotStyle"

* fix: test

* fix: style lookup in test

* fix: style

* fix: prettier

* fix: fn argument

* fix: test style values

* fix: offset in second test

Author: yann-combarnous

README.md

@@ -97,8 +97,8 @@ The following APIs are shared by Slider and Range.
 | handleStyle | Array[Object] \| Object | `[{}]` | The style used for handle. (`both for slider(`Object`) and range(`Array of Object`), the array will be used for multi handle following element order`) |
 | trackStyle | Array[Object] \| Object | `[{}]` | The style used for track. (`both for slider(`Object`) and range(`Array of Object`), the array will be used for multi track following element order`)|
 | railStyle | Object | `{}` | The style used for the track base color.  |
-| dotStyle | Object | `{}` | The style used for the dots. |
-| activeDotStyle | Object | `{}` | The style used for the active dots. |
+| dotStyle | Object \| (dotValue) => Object | `{}` | The style used for the dots. |
+| activeDotStyle | Object \| (dotValue) => Object | `{}` | The style used for the active dots. |
 
 ### Slider
 

src/Slider.tsx

@@ -72,8 +72,8 @@ export interface SliderProps<ValueType = number | number[]> {
   trackStyle?: React.CSSProperties | React.CSSProperties[];
   handleStyle?: React.CSSProperties | React.CSSProperties[];
   railStyle?: React.CSSProperties;
-  dotStyle?: React.CSSProperties;
-  activeDotStyle?: React.CSSProperties;
+  dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
+  activeDotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
 
   // Decorations
   marks?: Record<string | number, React.ReactNode | MarkObj>;

src/Steps/Dot.tsx

@@ -6,8 +6,8 @@ import SliderContext from '../context';
 export interface DotProps {
   prefixCls: string;
   value: number;
-  style?: React.CSSProperties;
-  activeStyle?: React.CSSProperties;
+  style?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
+  activeStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
 }
 
 export default function Dot(props: DotProps) {
@@ -21,13 +21,13 @@ export default function Dot(props: DotProps) {
   // ============================ Offset ============================
   let mergedStyle = {
     ...getDirectionStyle(direction, value, min, max),
-    ...style,
+    ...(typeof style === 'function' ? style(value) : style),
   };
 
   if (active) {
     mergedStyle = {
       ...mergedStyle,
-      ...activeStyle,
+      ...(typeof activeStyle === 'function' ? activeStyle(value) : activeStyle),
     };
   }
 

src/Steps/index.tsx

@@ -7,8 +7,8 @@ export interface StepsProps {
   prefixCls: string;
   marks: InternalMarkObj[];
   dots?: boolean;
-  style?: React.CSSProperties;
-  activeStyle?: React.CSSProperties;
+  style?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
+  activeStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
 }
 
 export default function Steps(props: StepsProps) {

tests/common.test.js

@@ -51,6 +51,34 @@ describe('Common', () => {
     expect(container2.getElementsByClassName('rc-slider-dot-active')).toHaveLength(4);
   });
 
+  it('should render dots correctly when dotStyle is dynamic`', () => {
+    const { container: container1 } = render(
+      <Slider value={50} step={10} dots dotStyle={(dotValue) => ({ width: `${dotValue}px` })} />,
+    );
+    expect(container1.getElementsByClassName('rc-slider-dot')[1]).toHaveStyle(
+      'left: 10%; transform: translateX(-50%); width: 10px',
+    );
+    expect(container1.getElementsByClassName('rc-slider-dot')[2]).toHaveStyle(
+      'left: 20%; transform: translateX(-50%); width: 20px',
+    );
+
+    const { container: container2 } = render(
+      <Slider
+        range
+        value={[20, 50]}
+        step={10}
+        dots
+        activeDotStyle={(dotValue) => ({ width: `${dotValue}px` })}
+      />,
+    );
+    expect(container2.getElementsByClassName('rc-slider-dot-active')[1]).toHaveStyle(
+      'left: 30%; transform: translateX(-50%); width: 30px',
+    );
+    expect(container2.getElementsByClassName('rc-slider-dot-active')[2]).toHaveStyle(
+      'left: 40%; transform: translateX(-50%); width: 40px',
+    );
+  });
+
   it('should not set value greater than `max` or smaller `min`', () => {
     const { container: container1 } = render(<Slider value={0} min={10} />);
     expect(