💄 Improve slider (#304)

ChildMindInstitute · Nov 26, 2019 · b485196 · b485196
2 parents 1ddb78d + 1357563
commit b485196
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 244 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 =======
+## [0.9.4] - 2019-11-26
+### Changed
+- Update slider bar (horizontal only)
+
 ## [0.9.3] - 2019-11-26
 ### Changed
 - Remove due date from activity list

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# MindLogger 0.9.3
+# MindLogger 0.9.4
 
 _Note: v0.1 is deprecated as of June 12, 2019._
 

diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -101,8 +101,8 @@ android {
         applicationId "lab.childmindinstitute.data"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 96
-        versionName "0.9.3"
+        versionCode 97
+        versionName "0.9.4"
         ndk {
             abiFilters "arm64-v8a", "x86_64", "armeabi-v7a", "x86"
         }

diff --git a/app/widgets/Slider/index.js b/app/widgets/Slider/index.js
@@ -1,10 +1,54 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Image } from 'react-native';
+import { View, Image, StyleSheet } from 'react-native';
 import { Text } from 'native-base';
-import SliderComponent from './slider';
+import SliderComponent from 'react-native-slider';
 import { getURL } from '../../services/helper';
+import { colors } from '../../themes/colors';
 
+const styles = StyleSheet.create({
+  container: { alignItems: 'center', paddingTop: 20 },
+  sliderWrapper: {
+    width: '100%',
+    justifyContent: 'center',
+    // transform: [{ rotate: '-90deg' }],
+    paddingLeft: 35,
+    paddingRight: 35,
+  },
+  track: {
+    height: 4,
+    borderRadius: 2,
+  },
+  thumbUnselected: {
+    width: 25,
+    height: 25,
+    borderRadius: 25 / 2,
+    backgroundColor: 'white',
+    borderColor: '#DDD',
+    borderWidth: 1,
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
+  },
+  thumb: {
+    width: 26,
+    height: 26,
+    borderRadius: 26 / 2,
+    backgroundColor: colors.primary,
+    elevation: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 10,
+  },
+  label: { textAlign: 'center' },
+  iconWrapper: { justifyContent: 'center', alignItems: 'center' },
+  icon: { width: 45, height: 45, resizeMode: 'cover' },
+  labelContainer: { width: '100%', justifyContent: 'space-between', flexDirection: 'row' },
+  labelBox: { width: 100 },
+});
 
 export const Slider = ({
   config: { maxValue, minValue, itemList },
@@ -13,26 +57,48 @@ export const Slider = ({
   onPress,
   onRelease,
 }) => (
-  <View style={{ alignItems: 'stretch', minHeight: 450 }}>
-    <Text style={{ textAlign: 'center' }}>{maxValue}</Text>
-    { itemList[itemList.length - 1].image ? <View style={{ justifyContent: 'center', alignItems: 'center' }}><Image style={{ width: 45, height: 45, resizeMode: 'cover' }} source={{ uri: getURL(itemList[itemList.length - 1].image) }} /></View> : <View />}
-    <SliderComponent
-      value={value || 0}
-      /**
-       * TODO: min and max below don't respect the schema's min and max
-       */
-      min={1}
-      max={itemList.length || 100}
-      labels={itemList.map(item => ({ text: item.name.en }))}
-      strict
-      barHeight={200}
-      selected={!!value}
-      onChange={onChange}
-      onPress={onPress}
-      onRelease={onRelease}
-    />
-    { itemList[0].image ? <View style={{ justifyContent: 'center', alignItems: 'center' }}><Image style={{ width: 45, height: 45, resizeMode: 'cover' }} source={{ uri: getURL(itemList[0].image) }} /></View> : <View />}
-    <Text style={{ textAlign: 'center' }}>{minValue}</Text>
+  <View style={styles.container}>
+    <View style={styles.sliderWrapper}>
+      <SliderComponent
+        value={value || 1}
+        minimumValue={1}
+        maximumValue={itemList.length || 100}
+        minimumTrackTintColor="#CCC"
+        maximumTrackTintColor="#CCC"
+        trackStyle={styles.track}
+        thumbStyle={value ? styles.thumb : styles.thumbUnselected}
+        step={itemList ? 1 : 0}
+        onSlidingStart={onPress}
+        onSlidingComplete={(val) => {
+          onRelease();
+          onChange(val);
+        }}
+      />
+    </View>
+    <View style={styles.labelContainer}>
+      <View style={styles.labelBox}>
+        {itemList[0].image && (
+          <View style={styles.iconWrapper}>
+            <Image
+              style={styles.icon}
+              source={{ uri: getURL(itemList[0].image) }}
+            />
+          </View>
+        )}
+        <Text style={styles.label}>{minValue}</Text>
+      </View>
+      <View style={styles.labelBox}>
+        {itemList[itemList.length - 1].image && (
+          <View style={styles.iconWrapper}>
+            <Image
+              style={styles.icon}
+              source={{ uri: getURL(itemList[itemList.length - 1].image) }}
+            />
+          </View>
+        )}
+        <Text style={styles.label}>{maxValue}</Text>
+      </View>
+    </View>
   </View>
 );
 

diff --git a/app/widgets/Slider/slider.js b/app/widgets/Slider/slider.js
diff --git a/ios/MDCApp/Info.plist b/ios/MDCApp/Info.plist
@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.9.3</string>
+	<string>0.9.4</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>96</string>
+	<string>97</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSRequiresIPhoneOS</key>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "MindLogger",
- "version": "0.9.3",
+ "version": "0.9.4",
  "private": true,
  "scripts": {
   "start": "node node_modules/react-native/local-cli/cli.js start",