From 978d5a94043122a600b3663a4e9982b1fb4bae6e Mon Sep 17 00:00:00 2001 From: cookygg <379360444@qq.com> Date: Wed, 31 Aug 2022 16:37:44 +0800 Subject: [PATCH 1/8] perf: add marks dot classname --- src/Steps/Dot.tsx | 22 ++++++++++++++++------ src/Steps/index.tsx | 7 +++++++ 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/Steps/Dot.tsx b/src/Steps/Dot.tsx index a8eaa4bef..255a17f2b 100644 --- a/src/Steps/Dot.tsx +++ b/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 ( ); diff --git a/src/Steps/index.tsx b/src/Steps/index.tsx index e3c235f85..b33a9d140 100644 --- 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([]); + const stepDots = React.useMemo(() => { const dotSet = new Set(); @@ -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) => ( Date: Wed, 19 Apr 2023 15:49:22 +0800 Subject: [PATCH 2/8] test(marks): new className --- tests/marks.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/marks.test.js b/tests/marks.test.js index 0d8c53c57..17f2063a5 100644 --- a/tests/marks.test.js +++ b/tests/marks.test.js @@ -19,12 +19,14 @@ describe('marks', () => { const marks = { 0: 0, 30: '30', 99: '', 100: '100' }; const { container } = render(); + 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(); + 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'); From a67708ac897e9f0b128ddb1e60e4a409652ec9da Mon Sep 17 00:00:00 2001 From: cookygg <379360444@qq.com> Date: Wed, 19 Apr 2023 15:51:13 +0800 Subject: [PATCH 3/8] chore: description --- src/Steps/Dot.tsx | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/Steps/Dot.tsx b/src/Steps/Dot.tsx index 255a17f2b..b0f486ad7 100644 --- a/src/Steps/Dot.tsx +++ b/src/Steps/Dot.tsx @@ -13,13 +13,14 @@ export interface DotProps { export default function Dot(props: DotProps) { const { prefixCls, marksValue, value, style, activeStyle } = props; - const { min, max, direction, included, includedStart, includedEnd } = React.useContext( - SliderContext, - ); + 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; + + // It defines the className for the marks dots. + const marksDotClassName = `${prefixCls}-marks-dot`; const marksDot = marksValue.indexOf(value) >= 0; // ============================ Offset ============================ @@ -37,15 +38,10 @@ export default function Dot(props: DotProps) { return ( ); From fc1efeeb527947a705ee7acf9aa88c620dd2b0d9 Mon Sep 17 00:00:00 2001 From: cookygg <379360444@qq.com> Date: Wed, 19 Apr 2023 17:03:51 +0800 Subject: [PATCH 4/8] feat: add dot className props --- src/Steps/Dot.tsx | 19 +++++++++---------- src/Steps/index.tsx | 34 ++++++++++++++++++++++------------ 2 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/Steps/Dot.tsx b/src/Steps/Dot.tsx index b0f486ad7..9f2f91a10 100644 --- a/src/Steps/Dot.tsx +++ b/src/Steps/Dot.tsx @@ -5,24 +5,20 @@ import SliderContext from '../context'; export interface DotProps { prefixCls: string; + className?: 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, marksValue, value, style, activeStyle } = props; + const { prefixCls, className, value, style, activeStyle } = props; const { min, max, direction, included, includedStart, includedEnd } = React.useContext(SliderContext); const dotClassName = `${prefixCls}-dot`; const active = included && includedStart <= value && value <= includedEnd; - // It defines the className for the marks dots. - const marksDotClassName = `${prefixCls}-marks-dot`; - const marksDot = marksValue.indexOf(value) >= 0; - // ============================ Offset ============================ let mergedStyle = { ...getDirectionStyle(direction, value, min, max), @@ -38,10 +34,13 @@ export default function Dot(props: DotProps) { return ( ); diff --git a/src/Steps/index.tsx b/src/Steps/index.tsx index b33a9d140..1e35fd817 100644 --- a/src/Steps/index.tsx +++ b/src/Steps/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import type { InternalMarkObj } from '../Marks'; -import type { DotProps } from './Dot'; import SliderContext from '../context'; import Dot from './Dot'; +import classNames from 'classnames'; export interface StepsProps { prefixCls: string; @@ -16,7 +16,10 @@ export default function Steps(props: StepsProps) { const { prefixCls, marks, dots, style, activeStyle } = props; const { min, max, step } = React.useContext(SliderContext); - const marksValueRef = React.useRef([]); + const marksValueRef = React.useRef([]); + + // It defines the className for the marks dots. + const marksDotClassName = `${prefixCls}-marks-dot`; const stepDots = React.useMemo(() => { const dotSet = new Set(); @@ -43,16 +46,23 @@ export default function Steps(props: StepsProps) { return (
- {stepDots.map((dotValue) => ( - - ))} + {stepDots.map((dotValue) => { + // Check whether it is a marks dot + const isMarksDot = marksValueRef.current.indexOf(dotValue) >= 0; + + return ( + + ); + })}
); } From c140c81cbc14bb5e39d24f06f657a750bf025d93 Mon Sep 17 00:00:00 2001 From: cookygg <379360444@qq.com> Date: Wed, 19 Apr 2023 17:56:02 +0800 Subject: [PATCH 5/8] perf: set marksValue --- src/Steps/index.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/Steps/index.tsx b/src/Steps/index.tsx index 1e35fd817..3447124fd 100644 --- a/src/Steps/index.tsx +++ b/src/Steps/index.tsx @@ -16,12 +16,10 @@ export default function Steps(props: StepsProps) { const { prefixCls, marks, dots, style, activeStyle } = props; const { min, max, step } = React.useContext(SliderContext); - const marksValueRef = React.useRef([]); - // It defines the className for the marks dots. const marksDotClassName = `${prefixCls}-marks-dot`; - const stepDots = React.useMemo(() => { + const { stepDots, marksValue } = React.useMemo(() => { const dotSet = new Set(); // Add marks @@ -29,8 +27,8 @@ export default function Steps(props: StepsProps) { dotSet.add(mark.value); }); - //Fill marksValue - marksValueRef.current = Array.from(dotSet); + // Set marksValue + const uniqueMarksValue = Array.from(dotSet); // Fill dots if (dots && step !== null) { @@ -41,14 +39,17 @@ export default function Steps(props: StepsProps) { } } - return Array.from(dotSet); + return { + marksValue: uniqueMarksValue, + stepDots: Array.from(dotSet), + }; }, [min, max, step, dots, marks]); return (
{stepDots.map((dotValue) => { // Check whether it is a marks dot - const isMarksDot = marksValueRef.current.indexOf(dotValue) >= 0; + const isMarksDot = marksValue.indexOf(dotValue) >= 0; return ( Date: Wed, 19 Apr 2023 18:15:02 +0800 Subject: [PATCH 6/8] chore: format --- src/Steps/Dot.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/Steps/Dot.tsx b/src/Steps/Dot.tsx index 9f2f91a10..f3b8f3456 100644 --- a/src/Steps/Dot.tsx +++ b/src/Steps/Dot.tsx @@ -34,13 +34,9 @@ export default function Dot(props: DotProps) { return ( ); From 8dc1f33027de7db417ce331f03f697c6f51f7901 Mon Sep 17 00:00:00 2001 From: cookygg <379360444@qq.com> Date: Wed, 19 Apr 2023 18:27:03 +0800 Subject: [PATCH 7/8] chore: move className --- src/Steps/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Steps/index.tsx b/src/Steps/index.tsx index 3447124fd..e7b2e6781 100644 --- a/src/Steps/index.tsx +++ b/src/Steps/index.tsx @@ -16,9 +16,6 @@ export default function Steps(props: StepsProps) { const { prefixCls, marks, dots, style, activeStyle } = props; const { min, max, step } = React.useContext(SliderContext); - // It defines the className for the marks dots. - const marksDotClassName = `${prefixCls}-marks-dot`; - const { stepDots, marksValue } = React.useMemo(() => { const dotSet = new Set(); @@ -55,7 +52,7 @@ export default function Steps(props: StepsProps) { Date: Thu, 20 Apr 2023 16:40:34 +0800 Subject: [PATCH 8/8] feat: marks dot style --- assets/index.less | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/assets/index.less b/assets/index.less index 998a6063c..2aeffefbc 100644 --- a/assets/index.less +++ b/assets/index.less @@ -131,9 +131,18 @@ border: 2px solid #e9e9e9; border-radius: 50%; cursor: pointer; + + &.@{prefixClass}-marks-dot { + border-color: #d6d6d6; + } + &-active { - border-color: tint(@primary-color, 50%); + &, + &.@{prefixClass}-marks-dot { + border-color: tint(@primary-color, 50%); + } } + &-reverse { margin-right: -4px; }