@momo-kits/slider 0.0.49-beta.7 → 0.0.50-rc.1

package/Slider.js

@@ -9,11 +9,13 @@ import {
     Text,
 } from 'react-native';
 import { get } from 'lodash';
-import { Colors, Spacing } from '@momo-kits/core';
+import { Colors, Spacing, LocalizedStrings } from '@momo-kits/core';
 import DefaultMarker from './DefaultMarker';
 import DefaultLabel from './DefaultLabel';
 import { createArray, valueToPosition, positionToValue } from './converters';
 
+const LANGUAGE = LocalizedStrings.getLanguage();
+
 export default class Slider extends Component {
     constructor(props) {
         super(props);
@@ -393,6 +395,34 @@ export default class Slider extends Component {
         }
     }
 
+    _nFormatter(num) {
+        let markerLabel = num;
+        let digits = 0;
+
+        if (markerLabel >= 1000000) {
+            digits = 1;
+        }
+
+        const lookup = [
+            { value: 1000000, symbol: LANGUAGE == 'en' ? 'M' : 'Tr' },
+            { value: 1000, symbol: 'K' },
+            { value: 1, symbol: '' },
+        ];
+
+        let item = lookup.slice().find((item) => {
+            return markerLabel >= item.value;
+        });
+
+        if (item) {
+            markerLabel =
+                (markerLabel / item.value).toFixed(digits) + item.symbol;
+        } else {
+            markerLabel = '0';
+        }
+
+        return markerLabel;
+    }
+
     render() {
         const {
             positionOne,
@@ -457,12 +487,12 @@ export default class Slider extends Component {
 
         const markerContainerOne = {
             top: markerOffsetY - 24,
-            left: trackOneLength + markerOffsetX - 24,
+            left: trackOneLength + markerOffsetX - 32,
         };
 
         const markerContainerTwo = {
             top: markerOffsetY - 24,
-            right: trackThreeLength - markerOffsetX - 24,
+            right: trackThreeLength - markerOffsetX - 32,
         };
 
         const newContainerStyle = [styles.container, containerStyle];
@@ -473,6 +503,9 @@ export default class Slider extends Component {
             });
         }
 
+        const markerLabel1 = this._nFormatter(valueOne);
+        const markerLabel2 = this._nFormatter(valueTwo);
+
         const body = (
             <View style={{ alignItems: 'center' }}>
                 <View style={[styles.fullTrack, { width: sliderLength }]}>
@@ -521,7 +554,7 @@ export default class Slider extends Component {
                                 <>
                                     {onePressed && enableLabel && (
                                         <View style={styles.valueContainer}>
-                                            <Text>{valueOne}</Text>
+                                            <Text>{markerLabel1}</Text>
                                         </View>
                                     )}
                                     <Marker
@@ -541,7 +574,7 @@ export default class Slider extends Component {
                                 <>
                                     {onePressed && enableLabel && (
                                         <View style={styles.valueContainer}>
-                                            <Text>{valueTwo}</Text>
+                                            <Text>{markerLabel2}</Text>
                                         </View>
                                     )}
                                     <MarkerLeft
@@ -577,7 +610,7 @@ export default class Slider extends Component {
                                     <>
                                         {twoPressed && enableLabel && (
                                             <View style={styles.valueContainer}>
-                                                <Text>{valueTwo}</Text>
+                                                <Text>{markerLabel2}</Text>
                                             </View>
                                         )}
                                         <Marker
@@ -599,7 +632,7 @@ export default class Slider extends Component {
                                     <>
                                         {twoPressed && enableLabel && (
                                             <View style={styles.valueContainer}>
-                                                <Text>{valueTwo}</Text>
+                                                <Text>{markerLabel2}</Text>
                                             </View>
                                         )}
                                         <MarkerRight
@@ -661,7 +694,7 @@ const styles = StyleSheet.create({
     },
     markerContainer: {
         position: 'absolute',
-        width: 48,
+        width: 64,
         height: 48,
         backgroundColor: 'transparent',
         justifyContent: 'center',
@@ -678,7 +711,6 @@ const styles = StyleSheet.create({
     },
     full: { width: '100%', height: '100%' },
     valueContainer: {
-        width: 40,
         height: 32,
         borderRadius: Spacing.S,
         backgroundColor: Colors.white,
@@ -694,6 +726,7 @@ const styles = StyleSheet.create({
         shadowOpacity: 0.24,
         shadowRadius: 6,
         elevation: 12,
+        paddingHorizontal: 8,
     },
 });
 

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@momo-kits/slider",
-    "version": "0.0.49-beta.7",
+    "version": "0.0.50-rc.1",
     "private": false,
     "main": "index.js",
     "dependencies": {
-        "@momo-platform/versions": "4.0.1-40011-48-45"
+        "@momo-platform/versions": "4.0.2"
     },
     "peerDependencies": {
         "@momo-kits/core": ">=0.0.5-beta",