From 086b5e7190a78c850ba3b68b77929e6681932651 Mon Sep 17 00:00:00 2001
From: Trond Bergquist <trond_bergquist@hotmail.com>
Date: Thu, 2 May 2019 17:04:33 +0200
Subject: [PATCH] Hotels: Update ScorePopup with new design

Shared: Delete SliderLabels
closes #1598
---
 app/hotels/src/filter/score/ScorePopup.js     |  55 +++---
 packages/shared/index.js                      |   1 -
 packages/shared/src/forms/SliderLabels.js     | 109 ----------
 .../src/forms/__tests__/SliderLabels.test.js  | 187 ------------------
 .../__snapshots__/SliderLabels.test.js.snap   | 113 -----------
 5 files changed, 30 insertions(+), 435 deletions(-)
 delete mode 100644 packages/shared/src/forms/SliderLabels.js
 delete mode 100644 packages/shared/src/forms/__tests__/SliderLabels.test.js
 delete mode 100644 packages/shared/src/forms/__tests__/__snapshots__/SliderLabels.test.js.snap

diff --git a/app/hotels/src/filter/score/ScorePopup.js b/app/hotels/src/filter/score/ScorePopup.js
index f81a3463..304c5ca2 100644
--- a/app/hotels/src/filter/score/ScorePopup.js
+++ b/app/hotels/src/filter/score/ScorePopup.js
@@ -7,8 +7,8 @@ import {
   ButtonPopup,
   Slider,
   StyleSheet,
-  SliderLabels,
   Translation,
+  AdaptableBadge,
 } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 import { SafeAreaView } from 'react-navigation';
@@ -29,6 +29,14 @@ const convertScoreToSliderValue = (minScore: number | null) => {
   return minScore ? minScore - SLIDER_SHIFT : 0;
 };
 
+const labels = {
+  '0': <Translation id="hotels_search.filter.score_filter.rating.any" />,
+  '1': <Translation id="hotels_search.filter.score_filter.rating.6" />,
+  '2': <Translation id="hotels_search.filter.score_filter.rating.7" />,
+  '3': <Translation id="hotels_search.filter.score_filter.rating.8" />,
+  '4': <Translation id="hotels_search.filter.score_filter.rating.9" />,
+};
+
 export default class ScorePopup extends React.Component<Props, State> {
   state = {
     sliderValue: 0,
@@ -52,20 +60,6 @@ export default class ScorePopup extends React.Component<Props, State> {
     return value ? value + SLIDER_SHIFT : null;
   };
 
-  renderLabel = (sliderValue: number) => {
-    const labels = [
-      <Translation
-        key="any"
-        id="hotels_search.filter.score_filter.rating.any"
-      />,
-      <Translation key="6" id="hotels_search.filter.score_filter.rating.6" />,
-      <Translation key="7" id="hotels_search.filter.score_filter.rating.7" />,
-      <Translation key="8" id="hotels_search.filter.score_filter.rating.8" />,
-      <Translation key="9" id="hotels_search.filter.score_filter.rating.9" />,
-    ];
-    return labels[sliderValue];
-  };
-
   render() {
     return (
       <SafeAreaView>
@@ -77,15 +71,17 @@ export default class ScorePopup extends React.Component<Props, State> {
           onClose={this.props.onClose}
           isVisible={this.props.isVisible}
         >
-          <Text style={styles.title}>
-            <Translation id="hotels_search.filter.score_filter.rating" />
-          </Text>
-          <SliderLabels
-            max={4}
-            min={0}
-            startLabel={this.renderLabel(this.state.sliderValue)}
-            startValue={this.state.sliderValue}
-          />
+          <View style={styles.titleContainer}>
+            <Text style={styles.title}>
+              <Translation id="hotels_search.filter.score_filter.rating" />
+            </Text>
+            <AdaptableBadge
+              translation={labels[this.state.sliderValue]}
+              type="info"
+              circled={true}
+              style={styles.badge}
+            />
+          </View>
           <View style={styles.sliderContainer}>
             <Slider
               startValue={this.state.sliderValue}
@@ -93,6 +89,8 @@ export default class ScorePopup extends React.Component<Props, State> {
               max={4}
               onChange={this.handleScoreChanged}
               snapped={true}
+              startLabel={labels[0]}
+              endLabel={labels[4]}
             />
           </View>
         </ButtonPopup>
@@ -106,10 +104,17 @@ const styles = StyleSheet.create({
     color: defaultTokens.colorHeading,
     fontSize: 16,
     fontWeight: '500',
-    paddingTop: 15,
     paddingBottom: 10,
+    marginEnd: 8,
   },
   sliderContainer: {
     paddingHorizontal: 10,
   },
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  badge: {
+    paddingHorizontal: 7,
+  },
 });
diff --git a/packages/shared/index.js b/packages/shared/index.js
index aa4bf38c..64c43ed1 100644
--- a/packages/shared/index.js
+++ b/packages/shared/index.js
@@ -50,7 +50,6 @@ export { default as Translation } from './src/Translation';
 export { default as TranslationFragment } from './src/TranslationFragment';
 export { default as Duration } from './src/Duration';
 
-export { default as SliderLabels } from './src/forms/SliderLabels';
 export { default as OfflineScreen } from './src/offlineScreen/OfflineScreen';
 export {
   default as StatusbarBackground,
diff --git a/packages/shared/src/forms/SliderLabels.js b/packages/shared/src/forms/SliderLabels.js
deleted file mode 100644
index d2bd961f..00000000
--- a/packages/shared/src/forms/SliderLabels.js
+++ /dev/null
@@ -1,109 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import { defaultTokens } from '@kiwicom/mobile-orbit';
-import { View } from 'react-native';
-
-import type { OnLayout } from '../../types/Events';
-import Text from '../Text';
-import StyleSheet from '../PlatformStyleSheet';
-import Price from '../Price';
-import type { TranslationType } from '../../types/Translation';
-
-type Props = {|
-  +startLabel: TranslationType | React.Element<typeof Price>,
-  +startValue: number,
-  +endLabel?: TranslationType | React.Element<typeof Price>,
-  +endValue?: number,
-  +max: number,
-  +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 [labelEndWidth, setLabelEndWidth] = React.useState(0);
-  const [paddingLeft, setPaddingLeft] = React.useState(0);
-  const [paddingRight, setPaddingRight] = React.useState(0);
-
-  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));
-  }
-
-  function saveLabelStartWidth(e: OnLayout) {
-    setLabelStartWidth(Math.floor(e.nativeEvent.layout.width));
-  }
-
-  function saveLabelEndWidth(e: OnLayout) {
-    setLabelEndWidth(Math.floor(e.nativeEvent.layout.width));
-  }
-
-  return (
-    <View
-      style={styles.sliderLabels}
-      onLayout={saveFullWidth}
-      testID="sliderLabelsContainer"
-    >
-      <View
-        onLayout={saveLabelStartWidth}
-        style={{
-          transform: [{ translateX: paddingLeft }],
-        }}
-        testID="startLabelContainer"
-      >
-        <Text style={styles.label}>{props.startLabel}</Text>
-      </View>
-      {props.endLabel && (
-        <View
-          onLayout={saveLabelEndWidth}
-          style={{
-            transform: [{ translateX: paddingRight }],
-          }}
-          testID="endLabelContainer"
-        >
-          <Text style={styles.label}>{props.endLabel}</Text>
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  sliderLabels: {
-    width: '100%',
-    flexDirection: 'row',
-    marginTop: 10,
-    marginBottom: 5,
-    justifyContent: 'space-between',
-  },
-  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
deleted file mode 100644
index a73f2436..00000000
--- a/packages/shared/src/forms/__tests__/SliderLabels.test.js
+++ /dev/null
@@ -1,187 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import renderer from 'react-test-renderer';
-import ShallowRenderer from 'react-test-renderer/shallow';
-
-import Translation from '../../Translation';
-import SliderLabels from '../SliderLabels';
-
-const shallowRenderer = new ShallowRenderer();
-
-it('renders with one label', () => {
-  expect(
-    shallowRenderer.render(
-      <SliderLabels
-        startLabel={<Translation passThrough="label" />}
-        startValue={46}
-        max={1000}
-        min={1}
-      />,
-    ),
-  ).toMatchSnapshot();
-});
-
-it('renders with two labels', () => {
-  expect(
-    shallowRenderer.render(
-      <SliderLabels
-        startLabel={<Translation passThrough="start label" />}
-        startValue={46}
-        endLabel={<Translation passThrough="end label" />}
-        endValue={850}
-        max={1000}
-        min={1}
-      />,
-    ),
-  ).toMatchSnapshot();
-});
-
-it('should have startValue in the middle', () => {
-  const wrapper = renderer.create(
-    <SliderLabels
-      max={5}
-      min={1}
-      startLabel={<Translation passThrough="label" />}
-      startValue={3}
-    />,
-  );
-  const viewContainer = wrapper.root.findByProps({
-    testID: 'sliderLabelsContainer',
-  });
-  const startLabel = wrapper.root.findByProps({
-    testID: 'startLabelContainer',
-  });
-
-  renderer.act(() => {
-    viewContainer.props.onLayout({
-      nativeEvent: { layout: { width: 500 } },
-    });
-    startLabel.props.onLayout({ nativeEvent: { layout: { width: 20 } } });
-  });
-
-  expect(startLabel.props.style).toMatchInlineSnapshot(`
-        Object {
-          "transform": Array [
-            Object {
-              "translateX": 290,
-            },
-          ],
-        }
-    `);
-});
-
-it('should display the label at the end', () => {
-  const wrapper = renderer.create(
-    <SliderLabels
-      max={5}
-      min={1}
-      startLabel={<Translation passThrough="label" />}
-      startValue={5}
-    />,
-  );
-
-  const viewContainer = wrapper.root.findByProps({
-    testID: 'sliderLabelsContainer',
-  });
-  const startLabel = wrapper.root.findByProps({
-    testID: 'startLabelContainer',
-  });
-
-  renderer.act(() => {
-    viewContainer.props.onLayout({
-      nativeEvent: { layout: { width: 500 } },
-    });
-    startLabel.props.onLayout({ nativeEvent: { layout: { width: 20 } } });
-  });
-
-  expect(startLabel.props.style).toMatchInlineSnapshot(`
-    Object {
-      "transform": Array [
-        Object {
-          "translateX": 472,
-        },
-      ],
-    }
-  `);
-});
-
-it('should have translateX on both labels', () => {
-  const wrapper = renderer.create(
-    <SliderLabels
-      max={20}
-      min={1}
-      startLabel={<Translation passThrough="label" />}
-      startValue={8}
-      endLabel={<Translation passThrough="label" />}
-      endValue={16}
-    />,
-  );
-
-  const viewContainer = wrapper.root.findByProps({
-    testID: 'sliderLabelsContainer',
-  });
-  const startLabel = wrapper.root.findByProps({
-    testID: 'startLabelContainer',
-  });
-  const endLabel = wrapper.root.findByProps({
-    testID: 'endLabelContainer',
-  });
-
-  renderer.act(() => {
-    viewContainer.props.onLayout({ nativeEvent: { layout: { width: 500 } } });
-    startLabel.props.onLayout({ nativeEvent: { layout: { width: 20 } } });
-    endLabel.props.onLayout({ nativeEvent: { layout: { width: 20 } } });
-  });
-
-  expect(startLabel.props.style).toMatchInlineSnapshot(`
-        Object {
-          "transform": Array [
-            Object {
-              "translateX": 190,
-            },
-          ],
-        }
-    `);
-  expect(endLabel.props.style).toMatchInlineSnapshot(`
-        Object {
-          "transform": Array [
-            Object {
-              "translateX": -90,
-            },
-          ],
-        }
-    `);
-});
-
-it('should have no translateX', () => {
-  const wrapper = renderer.create(
-    <SliderLabels
-      max={100}
-      min={1}
-      startLabel={<Translation passThrough="label" />}
-      startValue={1}
-      endLabel={<Translation passThrough="label" />}
-      endValue={100}
-    />,
-  );
-
-  const viewContainer = wrapper.root.findByProps({
-    testID: 'sliderLabelsContainer',
-  });
-  const startLabel = wrapper.root.findByProps({
-    testID: 'startLabelContainer',
-  });
-  const endLabel = wrapper.root.findByProps({
-    testID: 'endLabelContainer',
-  });
-
-  renderer.act(() => {
-    viewContainer.props.onLayout({ nativeEvent: { layout: { width: 500 } } });
-    startLabel.props.onLayout({ nativeEvent: { layout: { width: 20 } } });
-    endLabel.props.onLayout({ nativeEvent: { layout: { width: 20 } } });
-  });
-
-  expect(startLabel.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
deleted file mode 100644
index a181ed45..00000000
--- a/packages/shared/src/forms/__tests__/__snapshots__/SliderLabels.test.js.snap
+++ /dev/null
@@ -1,113 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders with one label 1`] = `
-<View
-  onLayout={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "marginBottom": 5,
-      "marginTop": 10,
-      "width": "100%",
-    }
-  }
-  testID="sliderLabelsContainer"
->
-  <View
-    onLayout={[Function]}
-    style={
-      Object {
-        "transform": Array [
-          Object {
-            "translateX": 0,
-          },
-        ],
-      }
-    }
-    testID="startLabelContainer"
-  >
-    <Text
-      style={
-        Object {
-          "color": "#0176D2",
-          "fontSize": 14,
-        }
-      }
-    >
-      <Translation
-        passThrough="label"
-      />
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`renders with two labels 1`] = `
-<View
-  onLayout={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "marginBottom": 5,
-      "marginTop": 10,
-      "width": "100%",
-    }
-  }
-  testID="sliderLabelsContainer"
->
-  <View
-    onLayout={[Function]}
-    style={
-      Object {
-        "transform": Array [
-          Object {
-            "translateX": 0,
-          },
-        ],
-      }
-    }
-    testID="startLabelContainer"
-  >
-    <Text
-      style={
-        Object {
-          "color": "#0176D2",
-          "fontSize": 14,
-        }
-      }
-    >
-      <Translation
-        passThrough="start label"
-      />
-    </Text>
-  </View>
-  <View
-    onLayout={[Function]}
-    style={
-      Object {
-        "transform": Array [
-          Object {
-            "translateX": 0,
-          },
-        ],
-      }
-    }
-    testID="endLabelContainer"
-  >
-    <Text
-      style={
-        Object {
-          "color": "#0176D2",
-          "fontSize": 14,
-        }
-      }
-    >
-      <Translation
-        passThrough="end label"
-      />
-    </Text>
-  </View>
-</View>
-`;