feat(dot-style): add marks dot classname

Author: howiepu

src/Steps/Dot.tsx

@@ -6,17 +6,21 @@ import SliderContext from '../context';
 export interface DotProps {
   prefixCls: string;
   value: number;
+  marksValue: 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 { min, max, direction, included, includedStart, includedEnd } =
-    React.useContext(SliderContext);
+  const { prefixCls, marksValue, value, style, activeStyle } = props;
+  const { min, max, direction, included, includedStart, includedEnd } = React.useContext(
+    SliderContext,
+  );
 
   const dotClassName = `${prefixCls}-dot`;
+  const marksDotClassName = `${prefixCls}-marks-dot`;
   const active = included && includedStart <= value && value <= includedEnd;
+  const marksDot = marksValue.indexOf(value) >= 0;
 
   // ============================ Offset ============================
   let mergedStyle = {
@@ -33,9 +37,15 @@ export default function Dot(props: DotProps) {
 
   return (
     <span
-      className={classNames(dotClassName, {
-        [`${dotClassName}-active`]: active,
-      })}
+      className={classNames(
+        dotClassName,
+        {
+          [`${dotClassName}-active`]: active,
+        },
+        {
+          [marksDotClassName]: marksDot,
+        },
+      )}
       style={mergedStyle}
     />
   );

src/Steps/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { InternalMarkObj } from '../Marks';
+import type { DotProps } from './Dot';
 import SliderContext from '../context';
 import Dot from './Dot';
 
@@ -15,6 +16,8 @@ export default function Steps(props: StepsProps) {
   const { prefixCls, marks, dots, style, activeStyle } = props;
   const { min, max, step } = React.useContext(SliderContext);
 
+  const marksValueRef = React.useRef<DotProps['marksValue']>([]);
+
   const stepDots = React.useMemo(() => {
     const dotSet = new Set<number>();
 
@@ -23,6 +26,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;
@@ -40,6 +46,7 @@ export default function Steps(props: StepsProps) {
       {stepDots.map((dotValue) => (
         <Dot
           prefixCls={prefixCls}
+          marksValue={marksValueRef.current}
           key={dotValue}
           value={dotValue}
           style={style}