Fix stepMarked prop of the StepMarker when the step props is not defa…

…ult 1
callstack · Mar 4, 2024 · 5f009bc · 5f009bc
1 parent 166ec7f
commit 5f009bc
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 19 deletions.
diff --git a/example/src/Examples.tsx b/example/src/Examples.tsx
@@ -1,13 +1,67 @@
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import Slider, {SliderProps} from '@react-native-community/slider';
+import React, {FC, useState} from 'react';
+import {Text, View, StyleSheet, Image} from 'react-native';
+import Slider, {MarkerProps, SliderProps} from '@react-native-community/slider';
 
 export interface Props {
   title: string;
   render(): JSX.Element;
   platform?: string;
 }
 
+const MyStepMarker: FC<MarkerProps> = ({stepMarked, currentValue}) => {
+  return stepMarked ? (
+    <View style={styles.background}>
+      <View style={styles.separator} />
+      <View style={styles.label}>
+        {currentValue !== undefined ? (
+          <Text>{currentValue}</Text>
+        ) : (
+          <Text>{'-'}</Text>
+        )}
+        <Image
+          style={styles.tinyLogo}
+          source={Image.resolveAssetSource(
+            require('./resources/twitter-small.png'),
+          )}
+        />
+      </View>
+    </View>
+  ) : (
+    <View style={styles.divider} />
+  );
+};
+
+const CONSTANTS = {
+  MAX_VALUE: 100,
+  MIN_VALUE: 10,
+  STEP: 10,
+  DEFAULT_STEP_RESOLUTION: 100,
+} as const;
+
+const SliderExampleWithCustomMarker = (props: SliderProps) => {
+  const [value, setValue] = useState(props.value ?? CONSTANTS.MIN_VALUE);
+
+  return (
+    <View>
+      <Text style={styles.text}>{value && +value.toFixed(3)}</Text>
+      <Slider
+        step={CONSTANTS.STEP}
+        style={[styles.slider, props.style]}
+        minimumValue={CONSTANTS.MIN_VALUE}
+        maximumValue={CONSTANTS.MAX_VALUE}
+        thumbImage={require('./resources/slider-left.png')}
+        tapToSeek
+        {...props}
+        value={value}
+        onValueChange={setValue}
+        StepMarker={MyStepMarker}
+        minimumTrackTintColor={'#00629A'}
+        maximumTrackTintColor={'#979EA4'}
+      />
+    </View>
+  );
+};
+
 const SliderExample = (props: SliderProps) => {
   const [value, setValue] = useState(props.value ?? 0);
   return (
@@ -265,17 +319,64 @@ const SlidingCustomStepsThumbImageWithNumbersAndDifferentWidth = (
 export default SliderExample;
 
 const styles = StyleSheet.create({
-  slider: {
-    width: 300,
-    opacity: 1,
-    marginTop: 10,
-  },
   text: {
     fontSize: 14,
     textAlign: 'center',
     fontWeight: '500',
     margin: 0,
   },
+  divider: {
+    width: 2,
+    height: 20,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  separator: {
+    width: 2,
+    height: 20,
+    backgroundColor: '#00629A',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  label: {
+    marginTop: 10,
+    width: 45,
+    // height: 40,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    backgroundColor: '#ffffff',
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  background: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    // backgroundColor: 'red',
+  },
+  tinyLogo: {
+    marginVertical: 5,
+    aspectRatio: 1,
+    flex: 1,
+    height: '100%',
+    width: '100%',
+  },
+  minMaxLabel: {
+    flexDirection: 'row',
+    zIndex: -1,
+  },
+  slider: {
+    width: 300,
+    opacity: 1,
+    marginTop: 10,
+  },
   outer: {
     width: 20,
     height: 20,
@@ -336,6 +437,12 @@ const styles = StyleSheet.create({
 });
 
 export const examples: Props[] = [
+  {
+    title: 'Custom step marker settings',
+    render() {
+      return <SliderExampleWithCustomMarker />;
+    },
+  },
   {
     title: 'Default settings',
     render() {

diff --git a/example/src/resources/slider-left.png b/example/src/resources/slider-left.png
diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx
@@ -216,16 +216,15 @@ const SliderComponent = (
   );
   const [width, setWidth] = useState(0);
 
+  const step = localProps.step
+    ? localProps.step
+    : constants.DEFAULT_STEP_RESOLUTION;
+
   const options = Array.from(
     {
-      length:
-        (localProps.maximumValue! - localProps.minimumValue!) /
-          (localProps.step
-            ? localProps.step
-            : constants.DEFAULT_STEP_RESOLUTION) +
-        1,
+      length: (localProps.maximumValue! - localProps.minimumValue!) / step + 1,
     },
-    (_, index) => index,
+    (_, index) => localProps.minimumValue! + index * step,
   );
 
   const defaultStyle =

diff --git a/package/src/__tests__/Slider.test.tsx b/package/src/__tests__/Slider.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
 import Slider from '../Slider';
+import {View} from 'react-native';
 
 describe('<Slider />', () => {
   it('renders enabled slider', () => {
@@ -60,4 +61,29 @@ describe('<Slider />', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  it('renders a slider with custom stepMaker', () => {
+    const tree = renderer
+      .create(
+        <Slider
+          value={2}
+          minimumValue={0}
+          maximumValue={4}
+          StepMarker={({stepMarked}) => {
+            return stepMarked ? (
+              <View>
+                <View style={{width: '10px', backgroundColor: 'red'}} />
+              </View>
+            ) : (
+              <View>
+                <View style={{width: '10px', backgroundColor: 'green'}} />
+              </View>
+            );
+          }}
+        />,
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/package/src/__tests__/__snapshots__/Slider.test.tsx.snap b/package/src/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -443,6 +443,163 @@ exports[`<Slider /> renders a slider with custom props 1`] = `
 </View>
 `;
 
+exports[`<Slider /> renders a slider with custom stepMaker 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    [
+      {
+        "defaultIndicatorIdle": {
+          "backgroundColor": "#C0C0C0",
+          "height": 10,
+          "width": 2,
+        },
+        "defaultIndicatorMarked": {
+          "backgroundColor": "#CCCCCC",
+          "height": 20,
+          "width": 5,
+        },
+        "defaultSlider": {},
+        "defaultSlideriOS": {
+          "height": 40,
+        },
+        "sliderMainContainer": {
+          "width": "100%",
+          "zIndex": 1,
+        },
+        "stepIndicatorElement": {
+          "alignContent": "center",
+          "alignItems": "center",
+        },
+        "stepNumber": {
+          "alignItems": "center",
+          "marginTop": 20,
+          "position": "absolute",
+        },
+        "stepsIndicator": {
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "top": 10,
+          "zIndex": 2,
+        },
+        "thumbImage": {
+          "alignContent": "center",
+          "alignItems": "center",
+          "position": "absolute",
+        },
+        "thumbImageContainer": {
+          "alignContent": "center",
+          "alignItems": "center",
+          "justifyContent": "center",
+          "position": "absolute",
+          "zIndex": 3,
+        },
+        "trackMarkContainer": {
+          "alignContent": "center",
+          "alignItems": "center",
+          "alignSelf": "center",
+          "justifyContent": "center",
+          "position": "absolute",
+          "zIndex": 3,
+        },
+      },
+      {
+        "height": 40,
+      },
+      {
+        "justifyContent": "center",
+      },
+    ]
+  }
+>
+  <View
+    pointerEvents="none"
+    style={
+      [
+        {
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "top": 10,
+          "zIndex": 2,
+        },
+        {
+          "marginHorizontal": 0,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "alignContent": "center",
+          "alignItems": "center",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "alignContent": "center",
+            "alignItems": "center",
+            "alignSelf": "center",
+            "justifyContent": "center",
+            "position": "absolute",
+            "zIndex": 3,
+          }
+        }
+      >
+        <View>
+          <View
+            style={
+              {
+                "backgroundColor": "green",
+                "width": "10px",
+              }
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+  <RNCSlider
+    StepMarker={[Function]}
+    disabled={false}
+    inverted={false}
+    lowerLimit={-9007199254740991}
+    maximumValue={4}
+    minimumValue={0}
+    onChange={[Function]}
+    onRNCSliderAccessibilityAction={null}
+    onRNCSliderSlidingComplete={null}
+    onRNCSliderSlidingStart={null}
+    onRNCSliderValueChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    step={0}
+    style={
+      [
+        {
+          "width": 0,
+          "zIndex": 1,
+        },
+        {
+          "height": 40,
+        },
+        {
+          "alignContent": "center",
+          "alignItems": "center",
+        },
+      ]
+    }
+    tapToSeek={false}
+    upperLimit={9007199254740991}
+    value={2}
+  />
+</View>
+`;
+
 exports[`<Slider /> renders disabled slider 1`] = `
 <View
   onLayout={[Function]}

diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx
@@ -47,6 +47,7 @@ export const StepsIndicator = ({
                 isTrue={currentValue === i}
                 thumbImage={thumbImage}
                 StepMarker={StepMarker}
+                currentValue={currentValue}
               />
               {renderStepNumber ? (
                 <StepNumber