Shared: Refactor SliderLabels logic

closes #1592
kiwicom · Apr 29, 2019 · 2a0da49 · 2a0da49
1 parent 6de108e
commit 2a0da49
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 196 deletions.
diff --git a/packages/shared/src/forms/SliderLabels.js b/packages/shared/src/forms/SliderLabels.js
@@ -9,7 +9,6 @@ import Text from '../Text';
 import StyleSheet from '../PlatformStyleSheet';
 import Price from '../Price';
 import type { TranslationType } from '../../types/Translation';
-import useCalculateSliderPositions from './useCalculateSliderPositions';
 
 type Props = {|
   +startLabel: TranslationType | React.Element<typeof Price>,
@@ -20,30 +19,38 @@ type Props = {|
   +min: number,
 |};
 
+const LABEL_MARGIN = parseInt(defaultTokens.spaceXSmall, 10);
+
 export default function SliderLabels(props: Props) {
   const [width, setWidth] = React.useState(0);
   const [labelStartWidth, setLabelStartWidth] = React.useState(0);
-  const [labelStartAtMax, setLabelStartAtMax] = React.useState(false);
   const [labelEndWidth, setLabelEndWidth] = React.useState(0);
   const [paddingLeft, setPaddingLeft] = React.useState(0);
   const [paddingRight, setPaddingRight] = React.useState(0);
 
-  useCalculateSliderPositions({
-    labelEndWidth,
-    labelStartAtMax,
-    labelStartWidth,
-    paddingLeft,
-    paddingRight,
-    props,
-    width,
-    setPaddingLeft,
-    setLabelStartAtMax,
-    setPaddingRight,
-    min: props.min,
-    max: props.max,
-    endValue: props.endValue,
-    startValue: props.startValue,
-  });
+  React.useEffect(() => {
+    const maxOffsetLeft =
+      width - labelStartWidth - labelEndWidth - LABEL_MARGIN + paddingRight;
+    const offsetLeft = Math.max(
+      (props.startValue / props.max) * width - labelStartWidth / 2,
+      0,
+    );
+    setPaddingLeft(Math.min(maxOffsetLeft, offsetLeft));
+  }, [props.startValue, labelStartWidth]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  React.useEffect(() => {
+    if (props.endValue != null) {
+      const maxOffsetRight =
+        (width - labelEndWidth - labelStartWidth - LABEL_MARGIN - paddingLeft) *
+        -1;
+      const offsetRight = Math.min(
+        (props.endValue / props.max) * width - width + labelEndWidth / 2,
+        0,
+      );
+
+      setPaddingRight(Math.max(maxOffsetRight, offsetRight));
+    }
+  }, [props.endValue, labelEndWidth]); // eslint-disable-line react-hooks/exhaustive-deps
 
   function saveFullWidth(e: OnLayout) {
     setWidth(Math.floor(e.nativeEvent.layout.width));
@@ -59,14 +66,14 @@ export default function SliderLabels(props: Props) {
 
   return (
     <View
-      style={[styles.sliderLabels, labelStartAtMax && styles.sliderLabelsEnd]}
+      style={styles.sliderLabels}
       onLayout={saveFullWidth}
       testID="sliderLabelsContainer"
     >
       <View
         onLayout={saveLabelStartWidth}
         style={{
-          transform: [{ translateX: labelStartAtMax ? 0 : paddingLeft }],
+          transform: [{ translateX: paddingLeft }],
         }}
         testID="startLabelContainer"
       >
@@ -76,7 +83,7 @@ export default function SliderLabels(props: Props) {
         <View
           onLayout={saveLabelEndWidth}
           style={{
-            transform: [{ translateX: -paddingRight }],
+            transform: [{ translateX: paddingRight }],
           }}
           testID="endLabelContainer"
         >
@@ -95,9 +102,6 @@ const styles = StyleSheet.create({
     marginBottom: 5,
     justifyContent: 'space-between',
   },
-  sliderLabelsEnd: {
-    justifyContent: 'flex-end',
-  },
   label: {
     fontSize: 14,
     color: defaultTokens.paletteBlueNormal,

diff --git a/packages/shared/src/forms/__tests__/SliderLabels.test.js b/packages/shared/src/forms/__tests__/SliderLabels.test.js
@@ -61,14 +61,14 @@ it('should have startValue in the middle', () => {
   });
 
   expect(startLabel.props.style).toMatchInlineSnapshot(`
-    Object {
-      "transform": Array [
         Object {
-          "translateX": 365,
-        },
-      ],
-    }
-  `);
+          "transform": Array [
+            Object {
+              "translateX": 290,
+            },
+          ],
+        }
+    `);
 });
 
 it('should display the label at the end', () => {
@@ -95,7 +95,15 @@ it('should display the label at the end', () => {
     startLabel.props.onLayout({ nativeEvent: { layout: { width: 20 } } });
   });
 
-  expect(viewContainer.props.style[1].justifyContent).toBe('flex-end');
+  expect(startLabel.props.style).toMatchInlineSnapshot(`
+    Object {
+      "transform": Array [
+        Object {
+          "translateX": 472,
+        },
+      ],
+    }
+  `);
 });
 
 it('should have translateX on both labels', () => {
@@ -130,7 +138,7 @@ it('should have translateX on both labels', () => {
         Object {
           "transform": Array [
             Object {
-              "translateX": 201,
+              "translateX": 190,
             },
           ],
         }
@@ -139,7 +147,7 @@ it('should have translateX on both labels', () => {
         Object {
           "transform": Array [
             Object {
-              "translateX": -69,
+              "translateX": -90,
             },
           ],
         }
@@ -175,5 +183,5 @@ it('should have no translateX', () => {
   });
 
   expect(startLabel.props.style.transform[0].translateX).toBe(0);
-  expect(endLabel.props.style.transform[0].translateX).toBe(-0);
+  expect(endLabel.props.style.transform[0].translateX).toBe(0);
 });
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/SliderLabels.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/SliderLabels.test.js.snap
@@ -4,16 +4,13 @@ exports[`renders with one label 1`] = `
 <View
   onLayout={[Function]}
   style={
-    Array [
-      Object {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "marginBottom": 5,
-        "marginTop": 10,
-        "width": "100%",
-      },
-      false,
-    ]
+    Object {
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "marginBottom": 5,
+      "marginTop": 10,
+      "width": "100%",
+    }
   }
   testID="sliderLabelsContainer"
 >
@@ -50,16 +47,13 @@ exports[`renders with two labels 1`] = `
 <View
   onLayout={[Function]}
   style={
-    Array [
-      Object {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "marginBottom": 5,
-        "marginTop": 10,
-        "width": "100%",
-      },
-      false,
-    ]
+    Object {
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "marginBottom": 5,
+      "marginTop": 10,
+      "width": "100%",
+    }
   }
   testID="sliderLabelsContainer"
 >
@@ -95,7 +89,7 @@ exports[`renders with two labels 1`] = `
       Object {
         "transform": Array [
           Object {
-            "translateX": -0,
+            "translateX": 0,
           },
         ],
       }

diff --git a/packages/shared/src/forms/useCalculateSliderPositions.js b/packages/shared/src/forms/useCalculateSliderPositions.js