Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: add marks dot classname #842

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
+41 −14
Open

perf: add marks dot classname #842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
978d5a9
perf: add marks dot classname
howiepu Aug 31, 2022
6e82204
test(marks): new className
howiepu Apr 19, 2023
a67708a
chore: description
howiepu Apr 19, 2023
fc1efee
feat: add dot className props
howiepu Apr 19, 2023
c140c81
perf: set marksValue
howiepu Apr 19, 2023
edc0647
chore: format
howiepu Apr 19, 2023
8dc1f33
chore: move className
howiepu Apr 19, 2023
7a3fe19
feat: marks dot style
howiepu Apr 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion assets/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
5 changes: 3 additions & 2 deletions src/Steps/Dot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -35,7 +36,7 @@ export default function Dot(props: DotProps) {
<span
className={classNames(dotClassName, {
[`${dotClassName}-active`]: active,
})}
}, className)}
style={mergedStyle}
/>
);
Expand Down
37 changes: 26 additions & 11 deletions src/Steps/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -15,14 +16,17 @@ export default function Steps(props: StepsProps) {
const { prefixCls, marks, dots, style, activeStyle } = props;
const { min, max, step } = React.useContext(SliderContext);

const stepDots = React.useMemo(() => {
const { stepDots, marksValue } = React.useMemo(() => {
const dotSet = new Set<number>();

// Add marks
marks.forEach((mark) => {
dotSet.add(mark.value);
});

// Set marksValue
const uniqueMarksValue = Array.from(dotSet);

// Fill dots
if (dots && step !== null) {
let current = min;
Expand All @@ -32,20 +36,31 @@ export default function Steps(props: StepsProps) {
}
}

return Array.from(dotSet);
return {
marksValue: uniqueMarksValue,
stepDots: Array.from(dotSet),
};
}, [min, max, step, dots, marks]);

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 = marksValue.indexOf(dotValue) >= 0;

return (
<Dot
prefixCls={prefixCls}
className={classNames({
[`${prefixCls}-marks-dot`]: isMarksDot,
yoyo837 marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

[`${prefixCls}-marks-dot`]: isMarksDot,
+markedDot,

@MadCcc An additional?

Copy link
Member

@MadCcc MadCcc Apr 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, current design do not need a className to style dot with mark. It's better to append customized className to this element.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, I'll write it down when I have time.

})}
key={dotValue}
value={dotValue}
style={style}
activeStyle={activeStyle}
/>
);
})}
</div>
);
}
2 changes: 2 additions & 0 deletions tests/marks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down