feat(slider): update slider and range slider

Author: gjulivan

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

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Breaking Changed
+
+- We updated rc-slider library to @rc-component/slider. This is a major version upgrade of rc-slider that might break current custom styling.
+
 ## [2.1.4] - 2024-08-28
 
 ### Changed

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

@@ -44,9 +44,9 @@
     },
     "dependencies": {
         "@mendix/widget-plugin-component-kit": "workspace:*",
-        "classnames": "^2.5.1",
-        "rc-slider": "^8.7.1",
-        "rc-tooltip": "^3.7.3"
+        "@rc-component/slider": "^1.0.1",
+        "@rc-component/tooltip": "^1.3.3",
+        "classnames": "^2.5.1"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",

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

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { RangeSliderContainerProps } from "../typings/RangeSliderProps";
-import "rc-slider/assets/index.css";
-import "rc-tooltip/assets/bootstrap.css";
+import "@rc-component/slider/assets/index.css";
+import "@rc-component/tooltip/assets/bootstrap.css";
 import "./ui/RangeSlider.scss";
 import { Container } from "./components/Container";
 

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

@@ -3,10 +3,10 @@ import { RangeSliderContainerProps } from "../../typings/RangeSliderProps";
 import { useNumber } from "../utils/useNumber";
 import { RangeSlider as RangeComponent } from "./RangeSlider";
 import { useOnChangeDebounced } from "../utils/useOnChangeDebounced";
-import { createHandleGenerator } from "../utils/createHandleGenerator";
 import { useMarks } from "../utils/useMarks";
 import { getStyleProp, isVertical, maxProp, minProp, stepProp } from "../utils/prop-utils";
 import { useScheduleUpdateOnce } from "@mendix/widget-plugin-hooks/useScheduleUpdateOnce";
+import { HandleTooltip } from "./TooltipHandler";
 
 export function Container(props: RangeSliderContainerProps): ReactElement {
     const min = useNumber(minProp(props));
@@ -54,15 +54,8 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
         heightUnit: props.heightUnit
     });
 
-    const handle = createHandleGenerator({
-        tooltipLower: props.tooltipLower,
-        tooltipUpper: props.tooltipUpper,
-        showTooltip: props.showTooltip,
-        tooltipTypeLower: props.tooltipTypeLower,
-        tooltipTypeUpper: props.tooltipTypeUpper,
-        tooltipAlwaysVisible: props.tooltipAlwaysVisible,
-        sliderRef
-    });
+    const tooltipTypeCheck = [props.tooltipTypeLower, props.tooltipTypeUpper];
+    const tooltipValue = [props.tooltipLower, props.tooltipUpper];
 
     useScheduleUpdateOnce(() => lowerBoundAttribute.status === "available");
 
@@ -78,7 +71,21 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
             marks={marks}
             min={props.min}
             max={props.max}
-            handle={handle}
+            handleRender={(node, handleProps) => {
+                const isCustomText = tooltipTypeCheck[handleProps.index] === "customText";
+                const displayValue = isCustomText ? (tooltipValue[handleProps.index]?.value ?? "") : handleProps.value;
+                return (
+                    <HandleTooltip
+                        value={displayValue}
+                        index={handleProps.index}
+                        visible={handleProps.dragging}
+                        sliderRef={sliderRef}
+                        {...props}
+                    >
+                        {node}
+                    </HandleTooltip>
+                );
+            }}
             ref={sliderRef}
         />
     );

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

@@ -1,8 +1,7 @@
 import { CSSProperties, forwardRef, ReactElement, RefObject } from "react";
-import { Range, RangeProps } from "rc-slider";
+import Slider, { SliderProps } from "@rc-component/slider";
 import classNames from "classnames";
-
-export interface RangeSliderProps extends RangeProps {
+export interface RangeSliderProps extends SliderProps {
     classNameSlider?: string;
     rootStyle?: CSSProperties;
 }
@@ -23,7 +22,7 @@ export const RangeSlider = forwardRef(
                 className
             )}
         >
-            <Range className={classNameSlider} {...rcRangeProps} />
+            <Slider range className={classNameSlider} {...rcRangeProps} />
         </div>
     )
 );

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

@@ -0,0 +1,33 @@
+import Tooltip from "@rc-component/tooltip";
+import { ReactElement, RefObject } from "react";
+
+interface HandleTooltipProps {
+    showTooltip: boolean;
+    tooltipAlwaysVisible: boolean;
+    sliderRef: RefObject<HTMLDivElement | null>;
+    visible: boolean;
+    value: string | number;
+    index: number;
+    children: ReactElement;
+}
+
+export function HandleTooltip(props: HandleTooltipProps): ReactElement | null {
+    const { showTooltip, tooltipAlwaysVisible, sliderRef, visible, value, index, children } = props;
+    if (!showTooltip && !sliderRef.current) {
+        return null;
+    }
+    return (
+        <Tooltip
+            getTooltipContainer={() => sliderRef.current!}
+            prefixCls="rc-slider-tooltip"
+            overlay={value}
+            trigger={["hover", "click", "focus"]}
+            visible={tooltipAlwaysVisible || visible}
+            placement="top"
+            mouseLeaveDelay={0}
+            key={`${index}${value}`}
+        >
+            {children}
+        </Tooltip>
+    );
+}

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

@@ -1,5 +1,5 @@
-@use "~rc-slider/assets/index.css";
-@use "~rc-tooltip/assets/bootstrap.css";
+@use "~@rc-component/slider/assets/index.css";
+@use "~@rc-component/tooltip/assets/bootstrap.css";
 
 .widget-range-slider {
     padding: 4px 8px;

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

@@ -1,6 +1,6 @@
-export interface Marks {
-    [value: number]: string;
-}
+import { MarkObj } from "@rc-component/slider/lib/Marks";
+
+export type Marks = Record<string | number, React.ReactNode | MarkObj>;
 
 export interface CreateMarksParams {
     numberOfMarks: number;

packages/pluggableWidgets/range-slider-web/src/utils/marks.ts

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We increase the rc-slider library version dependencies to support react 19.
+
 ## [2.1.4] - 2024-08-28
 
 ### Changed