refactor: extract slider parts to separate component

kiwicom · Jan 10, 2019 · 44aab0a · 44aab0a
1 parent c555063
commit 44aab0a
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 121 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
   "license": "MIT",
   "dependencies": {
     "@kiwicom/orbit-design-tokens": "^0.2.5",
-    "react-native-multi-slider": "https://github.com/lukewalczak/react-native-multi-slider.git#feat/block-overlap",
+    "react-native-multi-slider": "https://github.com/lukewalczak/react-native-multi-slider.git#180b479ecf01eca852d6c00a430fd6a65e178600",
     "react-native-status-bar-height": "^2.2.0",
     "styled-components": "^4.1.2"
   },

diff --git a/src/Slider/Slider.js b/src/Slider/Slider.js
@@ -6,10 +6,10 @@ import { View } from 'react-native';
 import MultiSlider from 'react-native-multi-slider';
 
 import Marker from './Marker';
+import SliderParts from './SliderParts';
 import { Text } from '../Text';
 import { StyleSheet } from '../PlatformStyleSheet';
 
-const LABEL_LENGTH = 200;
 const TRACK_HEIGHT = 4;
 
 type Props = {|
@@ -79,46 +79,6 @@ export default class Slider extends React.Component<Props, State> {
     onValuesChange && onValuesChange();
   };
 
-  calculateOffset = (value: number) => {
-    const { minValue, maxValue } = this.props;
-    const { width } = this.state;
-    return (value * width) / (maxValue - minValue) - LABEL_LENGTH / 2;
-  };
-
-  createParts = () => {
-    const { numOfParts = 1, minValue, maxValue } = this.props;
-    const step = (maxValue - minValue) / numOfParts;
-
-    const parts = [];
-    let i;
-
-    if (numOfParts != null && numOfParts < 1) {
-      console.error('numOfParts cannot be lower than 1');
-    }
-
-    for (i = 0; i <= numOfParts; i++) {
-      const valuePerStep = Math.floor(step * i);
-
-      parts.push(
-        <View
-          key={i}
-          style={[
-            styles.partStyle,
-            {
-              left: this.calculateOffset(valuePerStep),
-            },
-          ]}
-        >
-          <View style={styles.partBorder} />
-          <Text size="small" style={styles.labelText}>
-            {valuePerStep + minValue}
-          </Text>
-        </View>
-      );
-    }
-    return parts;
-  };
-
   onLayout = ({ nativeEvent }: OnLayout) => {
     const { sliderLength } = this.props;
     this.setState({
@@ -137,14 +97,10 @@ export default class Slider extends React.Component<Props, State> {
       customMarker,
       onValuesChangeFinish,
       onValuesChangeStart,
+      numOfParts,
     } = this.props;
     const { multiSliderValues, width, singleSliderValue } = this.state;
 
-    const typeLineStyle =
-      type === 'single' && singleSliderValue[0] >= minValue
-        ? styles.selected
-        : styles.unselected;
-
     const labelValue =
       type === 'multi'
         ? `${multiSliderValues[0]} - ${multiSliderValues[1]}`
@@ -174,26 +130,13 @@ export default class Slider extends React.Component<Props, State> {
           <View onLayout={this.onLayout}>
             <View style={styles.contentContainer}>
               <View>
-                <View>{this.createParts()}</View>
-                <View
-                  style={[
-                    styles.trackLine,
-                    typeLineStyle,
-                    {
-                      right: 0,
-                      width: width + 10,
-                    },
-                  ]}
-                />
-                <View
-                  style={[
-                    styles.trackLine,
-                    styles.unselected,
-                    {
-                      left: 0,
-                      width: width + 10,
-                    },
-                  ]}
+                <SliderParts
+                  width={width}
+                  minValue={minValue}
+                  maxValue={maxValue}
+                  numOfParts={numOfParts}
+                  type={type}
+                  singleSliderValue={singleSliderValue}
                 />
                 <MultiSlider
                   values={values}
@@ -240,34 +183,11 @@ const styles = StyleSheet.create({
   unselected: {
     backgroundColor: defaultTokens.paletteInkLighter,
   },
-  trackLine: {
-    borderRadius: 5,
-    height: TRACK_HEIGHT,
-    position: 'absolute',
-    top: 25 - TRACK_HEIGHT / 2,
-    alignSelf: 'center',
-  },
-  partStyle: {
-    position: 'absolute',
-    width: LABEL_LENGTH,
-    alignItems: 'center',
-  },
-  partBorder: {
-    position: 'absolute',
-    borderStartWidth: 2,
-    borderStartColor: defaultTokens.paletteCloudLightHover,
-    height: 34,
-    top: 8,
-  },
   labelContainer: {
     paddingHorizontal: 20,
     flexDirection: 'row',
     alignItems: 'center',
   },
-  labelText: {
-    top: 50,
-    position: 'absolute',
-  },
   resultContainer: {
     flexDirection: 'row',
     backgroundColor: defaultTokens.paletteBlueNormal,

diff --git a/src/Slider/Slider.stories.js b/src/Slider/Slider.stories.js
@@ -16,34 +16,6 @@ import { Slider } from '.';
 
 storiesOf('Slider', module)
   .addDecorator(withKnobs)
-  .add('Playground', () => {
-    const minValue = number('Min value', 0);
-    const maxValue = number('Max value', 10000);
-    const startValue = number('Start value', 2000);
-    const endValue = number('End value', 8000);
-    const label = text('Label', 'Price');
-    const type = select('Type', ['multi', 'single'], 'single');
-    const snapped = boolean('Snapped', false);
-    const numOfParts = number('Number of parts', 5);
-    const sliderLength = number('Slider length', 315);
-
-    return (
-      <Slider
-        minValue={minValue}
-        maxValue={maxValue}
-        startValue={startValue}
-        endValue={endValue}
-        label={label}
-        type={type}
-        snapped={snapped}
-        numOfParts={numOfParts}
-        sliderLength={sliderLength}
-        onValuesChange={action('change')}
-        onValuesChangeFinish={action('finish')}
-        onValuesChangeStart={action('start')}
-      />
-    );
-  })
   .add('Default', () => (
     <ScrollView style={{ flex: 1 }}>
       <Slider
@@ -105,4 +77,34 @@ storiesOf('Slider', module)
         numOfParts={5}
       />
     </ScrollView>
-  ));
+  ))
+  .add('Playground', () => {
+    const minValue = number('Min value', 0);
+    const maxValue = number('Max value', 10000);
+    const startValue = number('Start value', 2000);
+    const endValue = number('End value', 8000);
+    const label = text('Label', 'Price');
+    const type = select('Type', ['multi', 'single'], 'single');
+    const snapped = boolean('Snapped', false);
+    const numOfParts = number('Number of parts', 5);
+    const sliderLength = number('Slider length', 315);
+    const step = number('Step', 1000);
+
+    return (
+      <Slider
+        minValue={minValue}
+        maxValue={maxValue}
+        startValue={startValue}
+        endValue={endValue}
+        label={label}
+        type={type}
+        snapped={snapped}
+        numOfParts={numOfParts}
+        sliderLength={sliderLength}
+        onValuesChange={action('change')}
+        onValuesChangeFinish={action('finish')}
+        onValuesChangeStart={action('start')}
+        step={step}
+      />
+    );
+  });
diff --git a/src/Slider/SliderParts.js b/src/Slider/SliderParts.js
@@ -0,0 +1,128 @@
+// @flow
+
+import * as React from 'react';
+import { defaultTokens } from '@kiwicom/orbit-design-tokens';
+import { View } from 'react-native';
+
+import { Text } from '../Text';
+import { StyleSheet } from '../PlatformStyleSheet';
+
+const LABEL_LENGTH = 200;
+const TRACK_HEIGHT = 4;
+
+type Props = {|
+  +type: 'multi' | 'single',
+  +minValue: number,
+  +maxValue: number,
+  +numOfParts?: number,
+  +singleSliderValue: Array<number>,
+  +width: number,
+|};
+
+export default function SliderParts({
+  minValue,
+  maxValue,
+  width,
+  numOfParts = 1,
+  singleSliderValue,
+  type,
+}: Props) {
+  const calculateOffset = (value: number) =>
+    (value * width) / (maxValue - minValue) - LABEL_LENGTH / 2;
+
+  const createParts = () => {
+    const step = (maxValue - minValue) / numOfParts;
+
+    const parts = [];
+    let i;
+
+    if (numOfParts != null && numOfParts < 1) {
+      console.error('numOfParts cannot be lower than 1');
+    }
+
+    for (i = 0; i <= numOfParts; i++) {
+      const valuePerStep = Math.floor(step * i);
+
+      parts.push(
+        <View
+          key={i}
+          style={[
+            styles.partStyle,
+            {
+              left: calculateOffset(valuePerStep),
+            },
+          ]}
+        >
+          <View style={styles.partBorder} />
+          <Text size="small" style={styles.labelText}>
+            {valuePerStep + minValue}
+          </Text>
+        </View>
+      );
+    }
+    return parts;
+  };
+
+  const typeLineStyle =
+    type === 'single' && singleSliderValue[0] >= minValue
+      ? styles.selected
+      : styles.unselected;
+
+  return (
+    <View>
+      <View>{createParts()}</View>
+      <View
+        style={[
+          styles.trackLine,
+          typeLineStyle,
+          {
+            right: 0,
+            width: width + 10,
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.trackLine,
+          styles.unselected,
+          {
+            left: 0,
+            width: width + 10,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  selected: {
+    backgroundColor: defaultTokens.paletteBlueNormal,
+  },
+  unselected: {
+    backgroundColor: defaultTokens.paletteInkLighter,
+  },
+  trackLine: {
+    borderRadius: 5,
+    height: TRACK_HEIGHT,
+    position: 'absolute',
+    top: 25 - TRACK_HEIGHT / 2,
+    alignSelf: 'center',
+  },
+  partStyle: {
+    position: 'absolute',
+    width: LABEL_LENGTH,
+    alignItems: 'center',
+  },
+  partBorder: {
+    position: 'absolute',
+    borderStartWidth: 2,
+    borderStartColor: defaultTokens.paletteCloudLightHover,
+    height: 34,
+    top: 8,
+  },
+  labelText: {
+    top: 50,
+    position: 'absolute',
+  },
+});
diff --git a/yarn.lock b/yarn.lock
@@ -9996,8 +9996,8 @@ react-native-modal@^5.4.0:
     react-native-animatable "^1.2.4"
 
 "react-native-multi-slider@https://github.com/lukewalczak/react-native-multi-slider.git#feat/block-overlap":
-  version "2.0.0"
-  resolved "https://github.com/lukewalczak/react-native-multi-slider.git#920046a4a6ab49f7f163d0e00ae34993b9778807"
+  version "2.0.2"
+  resolved "https://github.com/lukewalczak/react-native-multi-slider.git#ad977facbc402dce725efc3ac537778531d944df"
 
 react-native-status-bar-height@^2.2.0:
   version "2.2.0"