Skip to content

Commit 1100302

Browse files
gjulivangjulivan
committed
feat(slider): update slider and range slider
1 parent 730781e commit 1100302

File tree

15 files changed

+123
-265
lines changed

15 files changed

+123
-265
lines changed

‎packages/pluggableWidgets/range-slider-web/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Breaking changes
10+
11+
- We updated rc-slider library to @rc-component/slider. This is a major version upgrade of rc-slider that might break current custom styling.
12+
913
## [2.1.4] - 2024-08-28
1014

1115
### Changed

‎packages/pluggableWidgets/range-slider-web/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@
4444
},
4545
"dependencies": {
4646
"@mendix/widget-plugin-component-kit": "workspace:*",
47-
"classnames": "^2.5.1",
48-
"rc-slider": "^8.7.1",
49-
"rc-tooltip": "^3.7.3"
47+
"@rc-component/slider": "^1.0.1",
48+
"@rc-component/tooltip": "^1.3.3",
49+
"classnames": "^2.5.1"
5050
},
5151
"devDependencies": {
5252
"@mendix/automation-utils": "workspace:*",

‎packages/pluggableWidgets/range-slider-web/src/RangeSlider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ReactNode } from "react";
22
import { RangeSliderContainerProps } from "../typings/RangeSliderProps";
3-
import "rc-slider/assets/index.css";
4-
import "rc-tooltip/assets/bootstrap.css";
3+
import "@rc-component/slider/assets/index.css";
4+
import "@rc-component/tooltip/assets/bootstrap.css";
55
import "./ui/RangeSlider.scss";
66
import { Container } from "./components/Container";
77

‎packages/pluggableWidgets/range-slider-web/src/components/Container.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { RangeSliderContainerProps } from "../../typings/RangeSliderProps";
33
import { useNumber } from "../utils/useNumber";
44
import { RangeSlider as RangeComponent } from "./RangeSlider";
55
import { useOnChangeDebounced } from "../utils/useOnChangeDebounced";
6-
import { createHandleGenerator } from "../utils/createHandleGenerator";
76
import { useMarks } from "../utils/useMarks";
87
import { getStyleProp, isVertical, maxProp, minProp, stepProp } from "../utils/prop-utils";
98
import { useScheduleUpdateOnce } from "@mendix/widget-plugin-hooks/useScheduleUpdateOnce";
9+
import { HandleTooltip } from "./TooltipHandler";
1010

1111
export function Container(props: RangeSliderContainerProps): ReactElement {
1212
const min = useNumber(minProp(props));
@@ -54,15 +54,8 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
5454
heightUnit: props.heightUnit
5555
});
5656

57-
const handle = createHandleGenerator({
58-
tooltipLower: props.tooltipLower,
59-
tooltipUpper: props.tooltipUpper,
60-
showTooltip: props.showTooltip,
61-
tooltipTypeLower: props.tooltipTypeLower,
62-
tooltipTypeUpper: props.tooltipTypeUpper,
63-
tooltipAlwaysVisible: props.tooltipAlwaysVisible,
64-
sliderRef
65-
});
57+
const tooltipTypeCheck = [props.tooltipTypeLower, props.tooltipTypeUpper];
58+
const tooltipValue = [props.tooltipLower, props.tooltipUpper];
6659

6760
useScheduleUpdateOnce(() => lowerBoundAttribute.status === "available");
6861

@@ -78,7 +71,21 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
7871
marks={marks}
7972
min={props.min}
8073
max={props.max}
81-
handle={handle}
74+
handleRender={(node, handleProps) => {
75+
const isCustomText = tooltipTypeCheck[handleProps.index] === "customText";
76+
const displayValue = isCustomText ? (tooltipValue[handleProps.index]?.value ?? "") : handleProps.value;
77+
return (
78+
<HandleTooltip
79+
value={displayValue}
80+
index={handleProps.index}
81+
visible={handleProps.dragging}
82+
sliderRef={sliderRef}
83+
{...props}
84+
>
85+
{node}
86+
</HandleTooltip>
87+
);
88+
}}
8289
ref={sliderRef}
8390
/>
8491
);

‎packages/pluggableWidgets/range-slider-web/src/components/RangeSlider.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { CSSProperties, forwardRef, ReactElement, RefObject } from "react";
2-
import { Range, RangeProps } from "rc-slider";
2+
import Slider, { SliderProps } from "@rc-component/slider";
33
import classNames from "classnames";
4-
5-
export interface RangeSliderProps extends RangeProps {
4+
export interface RangeSliderProps extends SliderProps {
65
classNameSlider?: string;
76
rootStyle?: CSSProperties;
87
}
@@ -23,7 +22,7 @@ export const RangeSlider = forwardRef(
2322
className
2423
)}
2524
>
26-
<Range className={classNameSlider} {...rcRangeProps} />
25+
<Slider range className={classNameSlider} {...rcRangeProps} />
2726
</div>
2827
)
2928
);

‎packages/pluggableWidgets/range-slider-web/src/components/TooltipHandler.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Tooltip from "@rc-component/tooltip";
2+
import { ReactElement, RefObject } from "react";
3+
4+
interface HandleTooltipProps {
5+
showTooltip: boolean;
6+
tooltipAlwaysVisible: boolean;
7+
sliderRef: RefObject<HTMLDivElement | null>;
8+
visible: boolean;
9+
value: string | number;
10+
index: number;
11+
children: ReactElement;
12+
}
13+
14+
export function HandleTooltip(props: HandleTooltipProps): ReactElement | null {
15+
const { showTooltip, tooltipAlwaysVisible, sliderRef, visible, value, index, children } = props;
16+
if (!showTooltip && !sliderRef.current) {
17+
return null;
18+
}
19+
return (
20+
<Tooltip
21+
getTooltipContainer={() => sliderRef.current!}
22+
prefixCls="rc-slider-tooltip"
23+
overlay={value}
24+
trigger={["hover", "click", "focus"]}
25+
visible={tooltipAlwaysVisible || visible}
26+
placement="top"
27+
mouseLeaveDelay={0}
28+
key={`${index}${value}`}
29+
>
30+
{children}
31+
</Tooltip>
32+
);
33+
}

‎packages/pluggableWidgets/range-slider-web/src/components/__tests__/__snapshots__/RangeSlider.spec.tsx.snap‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`RangeSlider renders horizontal RangeSlider correctly 1`] = `
66
class="widget-range-slider"
77
>
88
<div
9-
class="rc-slider"
9+
class="rc-slider rc-slider-horizontal"
1010
>
1111
<div
1212
class="rc-slider-rail"
@@ -20,6 +20,7 @@ exports[`RangeSlider renders horizontal RangeSlider correctly 1`] = `
2020
/>
2121
<div
2222
aria-disabled="false"
23+
aria-orientation="horizontal"
2324
aria-valuemax="100"
2425
aria-valuemin="-100"
2526
aria-valuenow="-20"
@@ -30,6 +31,7 @@ exports[`RangeSlider renders horizontal RangeSlider correctly 1`] = `
3031
/>
3132
<div
3233
aria-disabled="false"
34+
aria-orientation="horizontal"
3335
aria-valuemax="100"
3436
aria-valuemin="-100"
3537
aria-valuenow="30"
@@ -38,9 +40,6 @@ exports[`RangeSlider renders horizontal RangeSlider correctly 1`] = `
3840
style="left: 65%; transform: translateX(-50%);"
3941
tabindex="0"
4042
/>
41-
<div
42-
class="rc-slider-mark"
43-
/>
4443
</div>
4544
</div>
4645
</DocumentFragment>
@@ -52,7 +51,7 @@ exports[`RangeSlider renders markers correctly 1`] = `
5251
class="widget-range-slider"
5352
>
5453
<div
55-
class="rc-slider rc-slider-with-marks"
54+
class="rc-slider rc-slider-horizontal rc-slider-with-marks"
5655
>
5756
<div
5857
class="rc-slider-rail"
@@ -66,27 +65,28 @@ exports[`RangeSlider renders markers correctly 1`] = `
6665
>
6766
<span
6867
class="rc-slider-dot"
69-
style="left: 0%;"
68+
style="left: 0%; transform: translateX(-50%);"
7069
/>
7170
<span
7271
class="rc-slider-dot"
73-
style="left: 25%;"
72+
style="left: 25%; transform: translateX(-50%);"
7473
/>
7574
<span
7675
class="rc-slider-dot rc-slider-dot-active"
77-
style="left: 50%;"
76+
style="left: 50%; transform: translateX(-50%);"
7877
/>
7978
<span
8079
class="rc-slider-dot"
81-
style="left: 75%;"
80+
style="left: 75%; transform: translateX(-50%);"
8281
/>
8382
<span
8483
class="rc-slider-dot"
85-
style="left: 100%;"
84+
style="left: 100%; transform: translateX(-50%);"
8685
/>
8786
</div>
8887
<div
8988
aria-disabled="false"
89+
aria-orientation="horizontal"
9090
aria-valuemax="100"
9191
aria-valuemin="-100"
9292
aria-valuenow="-20"
@@ -97,6 +97,7 @@ exports[`RangeSlider renders markers correctly 1`] = `
9797
/>
9898
<div
9999
aria-disabled="false"
100+
aria-orientation="horizontal"
100101
aria-valuemax="100"
101102
aria-valuemin="-100"
102103
aria-valuenow="30"
@@ -110,31 +111,31 @@ exports[`RangeSlider renders markers correctly 1`] = `
110111
>
111112
<span
112113
class="rc-slider-mark-text"
113-
style="transform: translateX(-50%); left: 0%;"
114+
style="left: 0%; transform: translateX(-50%);"
114115
>
115116
-100
116117
</span>
117118
<span
118119
class="rc-slider-mark-text"
119-
style="transform: translateX(-50%); left: 25%;"
120+
style="left: 25%; transform: translateX(-50%);"
120121
>
121122
-50
122123
</span>
123124
<span
124125
class="rc-slider-mark-text rc-slider-mark-text-active"
125-
style="transform: translateX(-50%); left: 50%;"
126+
style="left: 50%; transform: translateX(-50%);"
126127
>
127128
0
128129
</span>
129130
<span
130131
class="rc-slider-mark-text"
131-
style="transform: translateX(-50%); left: 75%;"
132+
style="left: 75%; transform: translateX(-50%);"
132133
>
133134
50
134135
</span>
135136
<span
136137
class="rc-slider-mark-text"
137-
style="transform: translateX(-50%); left: 100%;"
138+
style="left: 100%; transform: translateX(-50%);"
138139
>
139140
100
140141
</span>
@@ -164,27 +165,26 @@ exports[`RangeSlider renders vertical RangeSlider correctly 1`] = `
164165
/>
165166
<div
166167
aria-disabled="false"
168+
aria-orientation="vertical"
167169
aria-valuemax="100"
168170
aria-valuemin="-100"
169171
aria-valuenow="-20"
170172
class="rc-slider-handle rc-slider-handle-1"
171173
role="slider"
172-
style="bottom: 40%; transform: translateY(+50%);"
174+
style="bottom: 40%; transform: translateY(50%);"
173175
tabindex="0"
174176
/>
175177
<div
176178
aria-disabled="false"
179+
aria-orientation="vertical"
177180
aria-valuemax="100"
178181
aria-valuemin="-100"
179182
aria-valuenow="30"
180183
class="rc-slider-handle rc-slider-handle-2"
181184
role="slider"
182-
style="bottom: 65%; transform: translateY(+50%);"
185+
style="bottom: 65%; transform: translateY(50%);"
183186
tabindex="0"
184187
/>
185-
<div
186-
class="rc-slider-mark"
187-
/>
188188
</div>
189189
</div>
190190
</DocumentFragment>

‎packages/pluggableWidgets/range-slider-web/src/ui/RangeSlider.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use "~rc-slider/assets/index.css";
2-
@use "~rc-tooltip/assets/bootstrap.css";
1+
@use "~@rc-component/slider/assets/index.css";
2+
@use "~@rc-component/tooltip/assets/bootstrap.css";
33

44
.widget-range-slider {
55
padding: 4px 8px;

‎packages/pluggableWidgets/range-slider-web/src/utils/createHandleGenerator.tsx‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎packages/pluggableWidgets/range-slider-web/src/utils/getPreviewValues.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import { RangeSliderPreviewProps } from "../../typings/RangeSliderProps";
2-
3-
interface GetPreviewValuesParams extends Omit<RangeSliderPreviewProps, "class"> {}
4-
52
interface PreviewValues {
63
min: number;
74
max: number;
85
value: [number, number];
96
step: number;
107
}
118

12-
export function getPreviewValues(params: GetPreviewValuesParams): PreviewValues {
9+
export function getPreviewValues(params: Omit<RangeSliderPreviewProps, "class">): PreviewValues {
1310
const min = params.minValueType === "static" ? (params.staticMinimumValue ?? 0) : 0;
1411
const max = params.maxValueType === "static" ? (params.staticMaximumValue ?? 100) : 100;
1512
const step = params.stepSizeType === "static" ? (params.stepValue ?? 1) : 1;

0 commit comments

Comments
 (0)