perf: add marks dot classname

src/Steps/Dot.tsx

@@ -5,13 +5,14 @@ import SliderContext from '../context';
 
 export interface DotProps {
   prefixCls: string;
+  className?: string;
   value: number;
   style?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
   activeStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
 }
 
 export default function Dot(props: DotProps) {
-  const { prefixCls, value, style, activeStyle } = props;
+  const { prefixCls, className, value, style, activeStyle } = props;
   const { min, max, direction, included, includedStart, includedEnd } =
     React.useContext(SliderContext);
 
@@ -33,9 +34,13 @@ export default function Dot(props: DotProps) {
 
   return (
     <span
-      className={classNames(dotClassName, {
-        [`${dotClassName}-active`]: active,
-      })}
+      className={classNames(
+        dotClassName,
+        {
+          [`${dotClassName}-active`]: active,
+        },
+        className,
+      )}
       style={mergedStyle}
     />
   );

src/Steps/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { InternalMarkObj } from '../Marks';
 import SliderContext from '../context';
 import Dot from './Dot';
+import classNames from 'classnames';
 
 export interface StepsProps {
   prefixCls: string;
@@ -15,6 +16,11 @@ export default function Steps(props: StepsProps) {
   const { prefixCls, marks, dots, style, activeStyle } = props;
   const { min, max, step } = React.useContext(SliderContext);
 
+  const marksValueRef = React.useRef<number[]>([]);
+
+  // It defines the className for the marks dots.
+  const marksDotClassName = `${prefixCls}-marks-dot`;
+
   const stepDots = React.useMemo(() => {
     const dotSet = new Set<number>();
 
@@ -23,6 +29,9 @@ export default function Steps(props: StepsProps) {
       dotSet.add(mark.value);
     });
 
+    //Fill marksValue
+    marksValueRef.current = Array.from(dotSet);
+
     // Fill dots
     if (dots && step !== null) {
       let current = min;
@@ -37,15 +46,23 @@ export default function Steps(props: StepsProps) {
 
   return (
     <div className={`${prefixCls}-step`}>
-      {stepDots.map((dotValue) => (
-        <Dot
-          prefixCls={prefixCls}
-          key={dotValue}
-          value={dotValue}
-          style={style}
-          activeStyle={activeStyle}
-        />
-      ))}
+      {stepDots.map((dotValue) => {
+        // Check whether it is a marks dot
+        const isMarksDot = marksValueRef.current.indexOf(dotValue) >= 0;
+
+        return (
+          <Dot
+            prefixCls={prefixCls}
+            className={classNames({
+              [marksDotClassName]: isMarksDot,
+            })}
+            key={dotValue}
+            value={dotValue}
+            style={style}
+            activeStyle={activeStyle}
+          />
+        );
+      })}
     </div>
   );
 }

tests/marks.test.js

@@ -19,12 +19,14 @@ describe('marks', () => {
     const marks = { 0: 0, 30: '30', 99: '', 100: '100' };
 
     const { container } = render(<Slider value={30} marks={marks} />);
+    expect(container.getElementsByClassName('rc-slider-marks-dot')).toHaveLength(3);
     expect(container.getElementsByClassName('rc-slider-mark-text')).toHaveLength(3);
     expect(container.getElementsByClassName('rc-slider-mark-text')[0].innerHTML).toBe('0');
     expect(container.getElementsByClassName('rc-slider-mark-text')[1].innerHTML).toBe('30');
     expect(container.getElementsByClassName('rc-slider-mark-text')[2].innerHTML).toBe('100');
 
     const { container: container2 } = render(<Slider range value={[0, 30]} marks={marks} />);
+    expect(container2.getElementsByClassName('rc-slider-marks-dot')).toHaveLength(3);
     expect(container2.getElementsByClassName('rc-slider-mark-text')).toHaveLength(3);
     expect(container2.getElementsByClassName('rc-slider-mark-text')[0].innerHTML).toBe('0');
     expect(container2.getElementsByClassName('rc-slider-mark-text')[1].innerHTML).toBe('30');