[MOO-2139] feat: migrate to react-native-community/slider and update snapshots

packages/pluggableWidgets/slider-native/package.json

@@ -21,11 +21,9 @@
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
-    "@ptomasroos/react-native-multi-slider": "^1.0.0",
-    "prop-types": "^15.7.2"
+    "@react-native-community/slider": "^5.2.0"
   },
   "devDependencies": {
-    "@mendix/pluggable-widgets-tools": "*",
-    "@types/ptomasroos__react-native-multi-slider": "^0.0.1"
+    "@mendix/pluggable-widgets-tools": "*"
   }
 }

packages/pluggableWidgets/slider-native/src/Slider.tsx

@@ -1,64 +1,52 @@
 import { available, flattenStyles, toNumber, unavailable } from "@mendix/piw-native-utils-internal";
 import { executeAction } from "@mendix/piw-utils-internal";
-import { ValueStatus, Option } from "mendix";
-import MultiSlider, { MarkerProps } from "@ptomasroos/react-native-multi-slider";
-import { ReactElement, useCallback, useRef, useState, JSX } from "react";
-import { LayoutChangeEvent, Text, View } from "react-native";
+import { ValueStatus } from "mendix";
+import RNSlider from "@react-native-community/slider";
+import { ReactElement, useCallback, useRef } from "react";
+import { Text, View } from "react-native";
 import { Big } from "big.js";
 
 import { SliderProps } from "../typings/SliderProps";
-import { Marker } from "./Marker";
 import { defaultSliderStyle, SliderStyle } from "./ui/Styles";
 
 export type Props = SliderProps<SliderStyle>;
 
 export function Slider(props: Props): ReactElement {
-    const [width, setWidth] = useState<number>();
-
     const lastValue = useRef<number | undefined>(toNumber(props.valueAttribute));
 
     const value = toNumber(props.valueAttribute);
     const validationMessages = validate(props);
     const validProps = validationMessages.length === 0;
     const editable = props.editable !== "never" && !props.valueAttribute.readOnly && validProps;
     const styles = flattenStyles(defaultSliderStyle, props.style);
-    // We have to fix the decimal count ourselves because of an unresolved bug in the library: https://github.com/ptomasroos/react-native-multi-slider/issues/211
+
     const decimalCount = useCallback(
-        (value: Option<Big>): number => value?.toString().split(".")?.[1]?.length || 0,
+        (val: Big | undefined): number => val?.toString().split(".")?.[1]?.length || 0,
         []
     );
 
-    const customMarker =
-        () =>
-        (markerProps: MarkerProps): JSX.Element =>
-            <Marker {...markerProps} testID={`${props.name}$marker`} />;
-
-    const onLayout = useCallback((event: LayoutChangeEvent): void => {
-        setWidth(event.nativeEvent.layout.width);
-    }, []);
-
     const onSlide = useCallback(
-        (values: number[]): void => {
-            if (values[0] === null) {
+        (newValue: number): void => {
+            if (newValue === null) {
                 return;
             }
 
             if (props.stepSize.status === ValueStatus.Available) {
-                props.valueAttribute.setValue(new Big(values[0].toFixed(decimalCount(props.stepSize.value))));
+                props.valueAttribute.setValue(new Big(newValue.toFixed(decimalCount(props.stepSize.value))));
             }
         },
         [props.valueAttribute, props.stepSize, decimalCount]
     );
 
     const onChange = useCallback(
-        (values: number[]): void => {
-            if (values[0] === null || lastValue.current === values[0]) {
+        (newValue: number): void => {
+            if (newValue === null || lastValue.current === newValue) {
                 return;
             }
 
-            lastValue.current = values[0];
+            lastValue.current = newValue;
             if (props.stepSize.status === ValueStatus.Available) {
-                props.valueAttribute.setValue(new Big(values[0].toFixed(decimalCount(props.stepSize.value))));
+                props.valueAttribute.setValue(new Big(newValue.toFixed(decimalCount(props.stepSize.value))));
             }
 
             executeAction(props.onChange);
@@ -67,22 +55,29 @@ export function Slider(props: Props): ReactElement {
     );
 
     return (
-        <View onLayout={onLayout} style={styles.container} testID={props.name}>
-            <MultiSlider
-                values={value != null ? [value] : undefined}
-                min={validProps ? toNumber(props.minimumValue) : undefined}
-                max={validProps ? toNumber(props.maximumValue) : undefined}
+        <View style={styles.container} testID={props.name}>
+            <RNSlider
+                testID={`${props.name}$slider`}
+                value={value != null ? value : undefined}
+                minimumValue={validProps ? toNumber(props.minimumValue) : undefined}
+                maximumValue={validProps ? toNumber(props.maximumValue) : undefined}
                 step={validProps ? toNumber(props.stepSize) : undefined}
-                enabledOne={editable}
-                markerStyle={editable ? styles.marker : styles.markerDisabled}
-                trackStyle={editable ? styles.track : styles.trackDisabled}
-                selectedStyle={editable ? styles.highlight : styles.highlightDisabled}
-                pressedMarkerStyle={styles.markerActive}
-                onValuesChange={onSlide}
-                onValuesChangeFinish={onChange}
-                sliderLength={width}
-                allowOverlap
-                customMarker={customMarker()}
+                disabled={!editable}
+                minimumTrackTintColor={
+                    editable
+                        ? styles.sliderColors?.minimumTrackTintColor
+                        : styles.sliderColors?.minimumTrackTintColorDisabled
+                }
+                maximumTrackTintColor={
+                    editable
+                        ? styles.sliderColors?.maximumTrackTintColor
+                        : styles.sliderColors?.maximumTrackTintColorDisabled
+                }
+                thumbTintColor={
+                    editable ? styles.sliderColors?.thumbTintColor : styles.sliderColors?.thumbTintColorDisabled
+                }
+                onValueChange={onSlide}
+                onSlidingComplete={onChange}
             />
             {!validProps && <Text style={styles.validationMessage}>{validationMessages.join("\n")}</Text>}
             {props.valueAttribute.validation && (

packages/pluggableWidgets/slider-native/src/__tests__/Slider.spec.tsx

@@ -1,8 +1,6 @@
 import { actionValue, dynamicValue, EditableValueBuilder } from "@mendix/piw-utils-internal";
 import { Big } from "big.js";
-import { View } from "react-native";
-import { fireEvent, render, RenderAPI } from "@testing-library/react-native";
-import { ReactTestInstance } from "react-test-renderer";
+import { fireEvent, render } from "@testing-library/react-native";
 import { ValueStatus, DynamicValue } from "mendix";
 
 import { Props, Slider } from "../Slider";
@@ -93,91 +91,38 @@ describe("Slider", () => {
         expect(component.queryByText("The current value can not be greater than the maximum value.")).not.toBeNull();
     });
 
-    it("renders with the width of the parent view", () => {
-        const component = render(
-            <Slider
-                {...defaultProps}
-                style={[
-                    {
-                        container: { width: 100 },
-                        highlight: {},
-                        highlightDisabled: {},
-                        marker: {},
-                        markerActive: {},
-                        markerDisabled: {},
-                        track: {},
-                        trackDisabled: {},
-                        validationMessage: {}
-                    }
-                ]}
-            />
-        );
-        fireEvent(component.getByTestId("slider-test"), "layout", { nativeEvent: { layout: { width: 100 } } });
-        expect(component.getByTestId("slider-test").findByProps({ sliderLength: 100 })).not.toBeNull();
-    });
-
     it("renders a validation message", () => {
         const value = new EditableValueBuilder<Big>().withValidation("Invalid").build();
         const component = render(<Slider {...defaultProps} valueAttribute={value} />);
 
         expect(component.queryByText("Invalid")).not.toBeNull();
     });
 
-    it.skip("handles an invalid step size", () => {
-        const component = render(<Slider {...defaultProps} stepSize={dynamicValue(new Big(-10))} />);
-        expect(component.getByTestId("slider-test").findByProps({ step: 1 })).not.toBeNull();
-    });
-
-    it("changes the value when swiping", () => {
+    it("changes the value when sliding completes", () => {
         const onChangeAction = actionValue();
         const component = render(<Slider {...defaultProps} onChange={onChangeAction} />);
 
-        fireEvent(getHandle(component), "responderGrant", { touchHistory: { touchBank: [] } });
-        fireEvent(getHandle(component), "responderMove", responderMove(50));
-
-        expect(onChangeAction.execute).not.toHaveBeenCalled();
-
-        fireEvent(getHandle(component), "responderRelease", {});
+        const slider = component.getByTestId("slider-test$slider");
+        fireEvent(slider, "onSlidingComplete", 190);
 
         expect(defaultProps.valueAttribute.setValue).toHaveBeenCalledWith(new Big(190));
         expect(onChangeAction.execute).toHaveBeenCalledTimes(1);
     });
 
+    it("calls onValueChange while sliding", () => {
+        const component = render(<Slider {...defaultProps} />);
+
+        const slider = component.getByTestId("slider-test$slider");
+        fireEvent(slider, "onValueChange", 150);
+
+        expect(defaultProps.valueAttribute.setValue).toHaveBeenCalledWith(new Big(150));
+    });
+
     it("does not change the value when non editable", () => {
         const onChangeAction = actionValue();
         const component = render(<Slider {...defaultProps} editable={"never"} onChange={onChangeAction} />);
 
-        fireEvent(getHandle(component), "responderGrant", { touchHistory: { touchBank: [] } });
-        fireEvent(getHandle(component), "responderMove", responderMove(50));
-        fireEvent(getHandle(component), "responderRelease", {});
-
-        expect(onChangeAction.execute).not.toHaveBeenCalled();
-        expect(defaultProps.valueAttribute.setValue).not.toHaveBeenCalled();
+        const slider = component.getByTestId("slider-test$slider");
+        expect(slider.props.disabled).toBe(true);
     });
 });
-
-function getHandle(component: RenderAPI): ReactTestInstance {
-    return component
-        .getByTestId("slider-test")
-        .findAllByType(View)
-        .filter(instance => instance.props.onMoveShouldSetResponder)[0];
-}
-
-function responderMove(dx: number): any {
-    return {
-        touchHistory: {
-            numberActiveTouches: 1,
-            indexOfSingleActiveTouch: 0,
-            touchBank: [
-                {
-                    touchActive: true,
-                    currentTimeStamp: Date.now(),
-                    currentPageX: dx,
-                    currentPageY: 0,
-                    previousPageX: 0,
-                    previousPageY: 0
-                }
-            ]
-        }
-    };
-}