Skip to content

Commit 8c4a7e8

Browse files
MxKevinBeqoMxKevinBeqo
authored
feat: migrate to a new slider library (#506)
2 parents eea5707 + 38db803 commit 8c4a7e8

17 files changed

Lines changed: 2104 additions & 2528 deletions

File tree

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@
103103
},
104104
"patchedDependencies": {
105105
"@mendix/pluggable-widgets-tools@11.8.0": "patches/@mendix+pluggable-widgets-tools+11.8.0.patch",
106-
"@ptomasroos/react-native-multi-slider@1.0.0": "patches/@ptomasroos+react-native-multi-slider+1.0.0.patch",
107106
"react-native-gesture-handler@2.31.2": "patches/react-native-gesture-handler+2.31.2.patch",
108107
"react-native-slider@0.11.0": "patches/react-native-slider+0.11.0.patch",
109108
"react-native-snap-carousel@3.9.1": "patches/react-native-snap-carousel+3.9.1.patch",

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "range-slider-native",
33
"widgetName": "RangeSlider",
4-
"version": "2.4.0",
4+
"version": "3.0.0",
55
"license": "Apache-2.0",
66
"repository": {
77
"type": "git",
@@ -21,11 +21,9 @@
2121
"dependencies": {
2222
"@mendix/piw-native-utils-internal": "*",
2323
"@mendix/piw-utils-internal": "*",
24-
"@ptomasroos/react-native-multi-slider": "^1.0.0",
25-
"prop-types": "^15.7.2"
24+
"@miblanchard/react-native-slider": "^2.6.0"
2625
},
2726
"devDependencies": {
28-
"@mendix/pluggable-widgets-tools": "*",
29-
"@types/ptomasroos__react-native-multi-slider": "^0.0.1"
27+
"@mendix/pluggable-widgets-tools": "*"
3028
}
3129
}

‎packages/pluggableWidgets/range-slider-native/src/Marker.tsx‎

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

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

Lines changed: 24 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import { available, flattenStyles, toNumber, unavailable } from "@mendix/piw-native-utils-internal";
2-
import MultiSlider, { MarkerProps } from "@ptomasroos/react-native-multi-slider";
3-
import { ReactElement, useCallback, useRef, useState, JSX } from "react";
4-
import { LayoutChangeEvent, Text, View } from "react-native";
2+
import { Slider } from "@miblanchard/react-native-slider";
3+
import { ReactElement, useCallback, useRef } from "react";
4+
import { Text, View } from "react-native";
55
import { Big } from "big.js";
66

77
import { RangeSliderProps } from "../typings/RangeSliderProps";
8-
import { Marker } from "./Marker";
98
import { defaultRangeSliderStyle, RangeSliderStyle } from "./ui/Styles";
109
import { executeAction } from "@mendix/piw-utils-internal";
1110

1211
export type Props = RangeSliderProps<RangeSliderStyle>;
1312

1413
export function RangeSlider(props: Props): ReactElement {
15-
const [width, setWidth] = useState<number>();
1614
const styles = flattenStyles(defaultRangeSliderStyle, props.style);
1715

1816
const lastLowerValue = useRef<number | undefined>(toNumber(props.lowerValueAttribute));
@@ -23,27 +21,13 @@ export function RangeSlider(props: Props): ReactElement {
2321
const validationMessages = validate(props);
2422
const validProps = validationMessages.length === 0;
2523
const editable = props.editable !== "never" && validProps;
26-
const enabledOne = editable && lowerValue !== undefined && !props.lowerValueAttribute.readOnly;
27-
const enabledTwo = editable && upperValue !== undefined && !props.upperValueAttribute.readOnly;
24+
const enabledLower = editable && lowerValue !== undefined && !props.lowerValueAttribute.readOnly;
25+
const enabledUpper = editable && upperValue !== undefined && !props.upperValueAttribute.readOnly;
26+
const isEnabled = enabledLower || enabledUpper;
2827

29-
const customMarker =
30-
(markerEnabled: boolean, testID: string) =>
31-
(markerProps: MarkerProps): JSX.Element =>
32-
(
33-
<Marker
34-
{...markerProps}
35-
markerStyle={markerEnabled ? markerProps.markerStyle : styles.markerDisabled}
36-
testID={`${props.name}$${testID}`}
37-
/>
38-
);
39-
40-
const onLayout = useCallback((event: LayoutChangeEvent): void => {
41-
setWidth(event.nativeEvent.layout.width);
42-
}, []);
43-
44-
const onSlide = useCallback(
28+
const onValueChange = useCallback(
4529
(values: number[]): void => {
46-
if (values[0] === null || values[1] === null) {
30+
if (values[0] == null || values[1] == null) {
4731
return;
4832
}
4933
props.lowerValueAttribute.setValue(new Big(values[0]));
@@ -52,11 +36,11 @@ export function RangeSlider(props: Props): ReactElement {
5236
[props.lowerValueAttribute, props.upperValueAttribute]
5337
);
5438

55-
const onChange = useCallback(
39+
const onSlidingComplete = useCallback(
5640
(values: number[]): void => {
5741
if (
58-
values[0] === null ||
59-
values[1] === null ||
42+
values[0] == null ||
43+
values[1] == null ||
6044
(lastLowerValue.current === values[0] && lastUpperValue.current === values[1])
6145
) {
6246
return;
@@ -73,24 +57,19 @@ export function RangeSlider(props: Props): ReactElement {
7357
);
7458

7559
return (
76-
<View onLayout={onLayout} style={styles.container} testID={props.name}>
77-
<MultiSlider
78-
values={lowerValue != null && upperValue != null ? [lowerValue, upperValue] : undefined}
79-
min={validProps ? toNumber(props.minimumValue) : undefined}
80-
max={validProps ? toNumber(props.maximumValue) : undefined}
81-
step={validProps ? toNumber(props.stepSize) : undefined}
82-
enabledOne={enabledOne}
83-
enabledTwo={enabledTwo}
84-
markerStyle={styles.marker}
85-
trackStyle={enabledOne || enabledTwo ? styles.track : styles.trackDisabled}
86-
selectedStyle={enabledOne || enabledTwo ? styles.highlight : styles.highlightDisabled}
87-
pressedMarkerStyle={styles.markerActive}
88-
onValuesChange={onSlide}
89-
onValuesChangeFinish={onChange}
90-
sliderLength={width}
91-
isMarkersSeparated
92-
customMarkerLeft={customMarker(enabledOne, "leftMarker")}
93-
customMarkerRight={customMarker(enabledTwo, "rightMarker")}
60+
<View style={styles.container} testID={props.name}>
61+
<Slider
62+
value={lowerValue != null && upperValue != null ? [lowerValue, upperValue] : [0, 100]}
63+
minimumValue={validProps ? toNumber(props.minimumValue) ?? 0 : 0}
64+
maximumValue={validProps ? toNumber(props.maximumValue) ?? 100 : 100}
65+
step={validProps ? toNumber(props.stepSize) ?? 1 : 1}
66+
disabled={!isEnabled}
67+
trackStyle={isEnabled ? styles.track : styles.trackDisabled}
68+
minimumTrackStyle={isEnabled ? styles.highlight : styles.highlightDisabled}
69+
maximumTrackStyle={isEnabled ? styles.track : styles.tracktDisabled}
70+
thumbStyle={isEnabled ? styles.marker : styles.markerDisabled}
71+
onValueChange={onValueChange}
72+
onSlidingComplete={onSlidingComplete}
9473
/>
9574
{props.lowerValueAttribute.validation && (
9675
<Text style={styles.validationMessage}>{props.lowerValueAttribute.validation}</Text>

0 commit comments

Comments
 (0)