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

feat: slider: enable basic data comparison slider implementations #529

Merged
merged 7 commits into from
Feb 8, 2023
Merged

feat: slider: enable basic data comparison slider implementations #529

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0b78b76
feat: slider: enable basic data comparison slider implementations
dkilgore-eightfold Feb 2, 2023
8cddf0f
chore: slider: add more unit tests
dkilgore-eightfold Feb 2, 2023
68c71b3
Merge branch 'main' into dkilgore-eightfold/slider-data-variant
dkilgore-eightfold Feb 2, 2023
7574e30
chore: slider: pass class names to marks
dkilgore-eightfold Feb 2, 2023
ed389c9
Merge branch 'main' into dkilgore-eightfold/slider-data-variant
dkilgore-eightfold Feb 2, 2023
f055cab
Merge branch 'main' into dkilgore-eightfold/slider-data-variant
dkilgore-eightfold Feb 8, 2023
0f237ca
chore: slider: address pr feedback by updating track color to track s…
dkilgore-eightfold Feb 8, 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
3 changes: 2 additions & 1 deletion src/components/Slider/Marks/Mark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { mergeClasses } from '../../../shared/utilities';
import styles from '../slider.module.scss';

export default function Mark(props: MarkProps) {
const { style, children, value, onClick } = props;
const { children, classNames, onClick, style, value } = props;
const { direction, included, includedEnd, includedStart, min, max } =
React.useContext(SliderContext);

Expand All @@ -21,6 +21,7 @@ export default function Mark(props: MarkProps) {
[styles.sliderMarkTextActive]:
included && includedStart <= value && value <= includedEnd,
},
classNames,
])}
style={{
...positionStyle,
Expand Down
10 changes: 8 additions & 2 deletions src/components/Slider/Marks/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,14 @@ export default function Marks(props: MarksProps) {

return (
<div className={styles.sliderMark}>
{marks.map(({ value, style, label }) => (
<Mark key={value} style={style} value={value} onClick={onClick}>
{marks.map(({ classNames, label, style, value }) => (
<Mark
classNames={classNames}
key={value}
style={style}
value={value}
onClick={onClick}
>
{label}
</Mark>
))}
Expand Down
768 changes: 766 additions & 2 deletions src/components/Slider/Slider.stories.tsx
View file
Open in desktop

Large diffs are not rendered by default.

43 changes: 42 additions & 1 deletion src/components/Slider/Slider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Enzyme, { mount, ReactWrapper } from 'enzyme';
import MatchMediaMock from 'jest-matchmedia-mock';
import { render, fireEvent } from '@testing-library/react';

import { Slider } from './';
import { Slider, SliderTrackColor } from './';

Enzyme.configure({ adapter: new Adapter() });

Expand Down Expand Up @@ -143,11 +143,21 @@ describe('Slider', () => {
expect(vals[1]).toEqual(10);
});

test('should render normally when `hideRail=true`', () => {
const { container } = render(<Slider hideRail value={50} />);
expect(() => container).not.toThrowError();
});

test('should render normally when `hideThumb=true`', () => {
const { container } = render(<Slider hideThumb value={50} />);
expect(() => container).not.toThrowError();
});

test('should render normally when `hideTrack=true`', () => {
const { container } = render(<Slider hideTrack value={50} />);
expect(() => container).not.toThrowError();
});

test('should render normally when `labelPosition=inline`', () => {
const { container } = render(<Slider labelPosition="inline" value={50} />);
expect(() => container).not.toThrowError();
Expand All @@ -171,6 +181,16 @@ describe('Slider', () => {
);
});

test('should render dots with custom class', () => {
const { container: container1 } = render(
<Slider value={50} step={10} dots dotClassNames="dot-test-class" />
);
expect(container1.getElementsByClassName('slider-dot')).toHaveLength(11);
expect(container1.getElementsByClassName('dot-test-class')).toHaveLength(
11
);
});

test('should render normally when `dots=true` and `step=null`', () => {
const { container } = render(<Slider step={null} value={50} dots />);
expect(() => container).not.toThrowError();
Expand Down Expand Up @@ -257,4 +277,25 @@ describe('Slider', () => {
container.getElementsByClassName('thumb')[0].getAttribute('value')
).toBe('30');
});

test('should render green track color', () => {
const { container: container1 } = render(
<Slider value={50} step={10} trackColor={SliderTrackColor.Green} />
);
expect(container1.getElementsByClassName('green')).toHaveLength(1);
});

test('should render orange track color', () => {
const { container: container1 } = render(
<Slider value={50} step={10} trackColor={SliderTrackColor.Orange} />
);
expect(container1.getElementsByClassName('orange')).toHaveLength(1);
});

test('should render red track color', () => {
const { container: container1 } = render(
<Slider value={50} step={10} trackColor={SliderTrackColor.Red} />
);
expect(container1.getElementsByClassName('red')).toHaveLength(1);
});
});
107 changes: 78 additions & 29 deletions src/components/Slider/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,18 @@ import SliderContext, { SliderContextProps } from './Context';
import Marks from './Marks';
import Steps from './Steps';
import {
LARGE_INLINE_MARGIN_OFFSET,
LARGE_MARKER_OFFSET,
LARGE_THUMB_DIAMETER,
LARGE_THUMB_RADIUS,
Marker,
MEDIUM_INLINE_MARGIN_OFFSET,
MEDIUM_MARKER_OFFSET,
MEDIUM_THUMB_DIAMETER,
MEDIUM_THUMB_RADIUS,
SliderMarker,
SliderProps,
SliderSize,
SMALL_INLINE_MARGIN_OFFSET,
SliderTrackColor,
SMALL_MARKER_OFFSET,
SMALL_THUMB_DIAMETER,
SMALL_THUMB_RADIUS,
THUMB_TOOLTIP_Y_OFFSET,
Expand Down Expand Up @@ -84,11 +85,14 @@ export const Slider: FC<SliderProps> = React.forwardRef(
containerClassNames,
disabled = false,
dots = false,
dotClassNames,
dotStyle,
formItemInput = false,
hideMax = false,
hideMin = false,
hideRail = false,
hideThumb = false,
hideTrack = false,
hideValue = false,
id,
included = true,
Expand All @@ -107,6 +111,7 @@ export const Slider: FC<SliderProps> = React.forwardRef(
step = 1,
tooltipContent,
tooltipProps,
trackColor,
type = 'default',
value,
valueLabel,
Expand Down Expand Up @@ -194,7 +199,11 @@ export const Slider: FC<SliderProps> = React.forwardRef(
};

const isMarkerSegmentActive = (markerValue: number): boolean => {
const markerPct = valueToPercent(markerValue, mergedMin, mergedMax);
const markerPct: number = valueToPercent(
markerValue,
mergedMin,
mergedMax
);
const segmentRangeOffset: number = 1;
return isRange
? markerPct >=
Expand All @@ -211,58 +220,58 @@ export const Slider: FC<SliderProps> = React.forwardRef(
const thumbGeometry = (): {
diameter: number;
radius: number;
inlineLabelOffset: number;
showMarkerOffset: number;
} => {
switch (mergedSize) {
case SliderSize.Large:
return {
diameter: LARGE_THUMB_DIAMETER,
radius: LARGE_THUMB_RADIUS,
inlineLabelOffset: LARGE_INLINE_MARGIN_OFFSET,
showMarkerOffset: LARGE_MARKER_OFFSET,
};
case SliderSize.Medium:
return {
diameter: MEDIUM_THUMB_DIAMETER,
radius: MEDIUM_THUMB_RADIUS,
inlineLabelOffset: MEDIUM_INLINE_MARGIN_OFFSET,
showMarkerOffset: MEDIUM_MARKER_OFFSET,
};
case SliderSize.Small:
return {
diameter: SMALL_THUMB_DIAMETER,
radius: SMALL_THUMB_RADIUS,
inlineLabelOffset: SMALL_INLINE_MARGIN_OFFSET,
showMarkerOffset: SMALL_MARKER_OFFSET,
};
case SliderSize.Flex:
if (largeScreenActive) {
return {
diameter: SMALL_THUMB_DIAMETER,
radius: SMALL_THUMB_RADIUS,
inlineLabelOffset: SMALL_INLINE_MARGIN_OFFSET,
showMarkerOffset: SMALL_MARKER_OFFSET,
};
} else if (mediumScreenActive) {
return {
diameter: MEDIUM_THUMB_DIAMETER,
radius: MEDIUM_THUMB_RADIUS,
inlineLabelOffset: MEDIUM_INLINE_MARGIN_OFFSET,
showMarkerOffset: MEDIUM_MARKER_OFFSET,
};
} else if (smallScreenActive) {
return {
diameter: MEDIUM_THUMB_DIAMETER,
radius: MEDIUM_THUMB_RADIUS,
inlineLabelOffset: MEDIUM_INLINE_MARGIN_OFFSET,
showMarkerOffset: MEDIUM_MARKER_OFFSET,
};
} else if (xSmallScreenActive) {
return {
diameter: LARGE_THUMB_DIAMETER,
radius: LARGE_THUMB_RADIUS,
inlineLabelOffset: LARGE_INLINE_MARGIN_OFFSET,
showMarkerOffset: LARGE_MARKER_OFFSET,
};
}
default:
return {
diameter: MEDIUM_THUMB_DIAMETER,
radius: MEDIUM_THUMB_RADIUS,
inlineLabelOffset: MEDIUM_INLINE_MARGIN_OFFSET,
showMarkerOffset: MEDIUM_MARKER_OFFSET,
};
}
};
Expand Down Expand Up @@ -342,18 +351,20 @@ export const Slider: FC<SliderProps> = React.forwardRef(
}

if (!isRange) {
const lowerLabelOffset: number = lowerLabelRef.current.offsetWidth / 2;
const inlineLabelOffest: number =
labelPosition === 'inline' ? thumbGeometry().inlineLabelOffset : 0;
const lowerLabelOffset: number =
lowerLabelRef.current?.offsetWidth / 2 -
sliderRef.current?.offsetLeft;
const showMarkerOffest: number =
showMarkers === true ? thumbGeometry().showMarkerOffset : 0;

if (htmlDir === 'rtl') {
lowerLabelRef.current.style.right = `${
lowerThumbOffset - lowerLabelOffset + inlineLabelOffest
lowerThumbOffset - lowerLabelOffset - showMarkerOffest
}px`;
lowerLabelRef.current.style.left = 'unset';
} else {
lowerLabelRef.current.style.left = `${
lowerThumbOffset - lowerLabelOffset + inlineLabelOffest
lowerThumbOffset - lowerLabelOffset - showMarkerOffest
}px`;
lowerLabelRef.current.style.right = 'unset';
}
Expand Down Expand Up @@ -532,7 +543,7 @@ export const Slider: FC<SliderProps> = React.forwardRef(
};

const changeToCloseValue = (newValue: number) => {
if (!disabled) {
if (!readOnly && !disabled) {
let valueIndex: number = 0;
let valueDist: number = mergedMax - mergedMin;

Expand Down Expand Up @@ -646,7 +657,7 @@ export const Slider: FC<SliderProps> = React.forwardRef(
// Update markers when shown
useLayoutEffect(() => {
updateLayout();
}, [showLabels, showMarkers, value, values]);
}, [labelPosition, showLabels, showMarkers, value, values]);

const context: SliderContextProps = useMemo<SliderContextProps>(
() => ({
Expand Down Expand Up @@ -716,9 +727,15 @@ export const Slider: FC<SliderProps> = React.forwardRef(
>
<div
ref={railRef}
className={mergeClasses(styles.sliderRail, {
[styles.sliderRailOpacity]: showMarkers,
})}
className={mergeClasses([
styles.sliderRail,
{
[styles.data]: type === 'data',
},
{
[styles.sliderRailOpacity]: !!hideTrack || !!showMarkers,
},
])}
onMouseDown={
!allowDisabledFocus && !readOnly ? onSliderMouseDown : null
}
Expand All @@ -728,7 +745,20 @@ export const Slider: FC<SliderProps> = React.forwardRef(
className={mergeClasses([
styles.sliderTrack,
{
[styles.sliderTrackOpacity]: showMarkers || !included,
[styles.green]:
!!trackColor && trackColor === SliderTrackColor.Green,
},
{
[styles.orange]:
!!trackColor && trackColor === SliderTrackColor.Orange,
},
{
[styles.red]:
!!trackColor && trackColor === SliderTrackColor.Red,
},
{
[styles.sliderTrackOpacity]:
!!hideTrack || !!showMarkers || !included,
},
])}
onMouseDown={
Expand All @@ -741,9 +771,23 @@ export const Slider: FC<SliderProps> = React.forwardRef(
return (
<div
className={mergeClasses(styles.railMarkerSegment, {
[styles.data]: type === 'data',
[styles.active]: isMarkerSegmentActive(mark.value),
[styles.green]:
isMarkerSegmentActive(mark.value) &&
!!trackColor &&
trackColor === SliderTrackColor.Green,
[styles.orange]:
isMarkerSegmentActive(mark.value) &&
!!trackColor &&
trackColor === SliderTrackColor.Orange,
[styles.red]:
isMarkerSegmentActive(mark.value) &&
!!trackColor &&
trackColor === SliderTrackColor.Red,
[styles.railMarkerSegmentHidden]:
index === markers.length - 1,
[styles.railMarkerSegmentOpacity]: !!hideTrack,
})}
key={index}
onMouseDown={
Expand All @@ -760,8 +804,11 @@ export const Slider: FC<SliderProps> = React.forwardRef(
<Steps
activeStyle={activeDotStyle}
dots={dots}
classNames={dotClassNames}
marks={markList}
style={dotStyle}
trackColor={trackColor}
type={type}
/>
<Marks
marks={markList}
Expand All @@ -771,17 +818,18 @@ export const Slider: FC<SliderProps> = React.forwardRef(
/>
{values.map((val: number, index: number) => (
<Tooltip
classNames={mergeClasses([
styles.sliderTooltip,
tooltipProps?.classNames,
])}
content={getTooltipContentByValue(val)}
key={`value-tooltip-${index}`}
offset={thumbGeometry().diameter + THUMB_TOOLTIP_Y_OFFSET}
placement={'top'}
portal
portalRoot={sliderRef.current}
theme={TooltipTheme.dark}
{...tooltipProps}
classNames={mergeClasses([
styles.sliderTooltip,
tooltipProps?.classNames,
])}
content={getTooltipContentByValue(val)}
tooltipStyle={getTooltipStyles(
htmlDir,
tooltipProps?.style,
Expand Down Expand Up @@ -812,6 +860,7 @@ export const Slider: FC<SliderProps> = React.forwardRef(
max={mergedMax}
name={getIdentifier(name, index)}
type="range"
readOnly={readOnly}
step={mergedStep}
value={val}
/>
Expand Down
Loading