feat(dot-style): add marks dot classname

react-component · Aug 31, 2022 · 57ea9b9 · 57ea9b9
1 parent 5924005
commit 57ea9b9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/Steps/Dot.tsx b/src/Steps/Dot.tsx
@@ -6,17 +6,20 @@ 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 { 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.includes(value);
 
  // ============================ Offset ============================
  let mergedStyle = {
@@ -33,9 +36,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}
  />
  );

diff --git a/src/Steps/index.tsx b/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}