From 85400cdddadc77d9e6fc013114dca8a6ab4fe3ab Mon Sep 17 00:00:00 2001 From: Adam Odziemkowski Date: Fri, 22 Nov 2019 14:23:10 -0500 Subject: [PATCH 1/3] Upgrade slider to use react-native-slider --- app/widgets/Slider/index.js | 110 ++++++++++++++---- app/widgets/Slider/slider.js | 216 ----------------------------------- 2 files changed, 88 insertions(+), 238 deletions(-) delete mode 100644 app/widgets/Slider/slider.js diff --git a/app/widgets/Slider/index.js b/app/widgets/Slider/index.js index db84068f3..cbed3b9df 100644 --- 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, }) => ( - - {maxValue} - { itemList[itemList.length - 1].image ? : } - ({ text: item.name.en }))} - strict - barHeight={200} - selected={!!value} - onChange={onChange} - onPress={onPress} - onRelease={onRelease} - /> - { itemList[0].image ? : } - {minValue} + + + { + onRelease(); + onChange(val); + }} + /> + + + + {itemList[0].image && ( + + + + )} + {minValue} + + + {itemList[itemList.length - 1].image && ( + + + + )} + {maxValue} + + ); diff --git a/app/widgets/Slider/slider.js b/app/widgets/Slider/slider.js deleted file mode 100644 index aa40e9f77..000000000 --- a/app/widgets/Slider/slider.js +++ /dev/null @@ -1,216 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { - PanResponder, - Text, -} from 'react-native'; -import styled from 'styled-components'; - -const CIRCLE_DIAMETER = 25; - -export default class Slider extends React.Component { - static propTypes = { - min: PropTypes.number.isRequired, - max: PropTypes.number.isRequired, - labels: PropTypes.array, - strict: PropTypes.bool, - value: PropTypes.number.isRequired, - } - - constructor(props) { - super(props); - this.state = { - barHeight: 200, - deltaValue: 0, - value: this.props.value, - }; - this.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: (evt, gestureState) => { - this.props.onPress(); - return true; - }, - onPanResponderMove: (evt, gestureState) => { - return this.onMove(gestureState); - }, - onPanResponderRelease: (evt, gestureState) => { - this.onEndMove(); - this.props.onRelease(); - }, - }); - } - - onMove(gestureState) { - const { barHeight } = this.state; - const { min, max } = this.props; - const newDeltaValue = this.getValueFromBottomOffset( - -gestureState.dy, - barHeight, - min, - max, - ); - - this.setState({ - deltaValue: newDeltaValue, - selected: true, - }); - } - - onEndMove() { - const { strict, min, max, onChange } = this.props; - let { value, deltaValue } = this.state; - value = this.capValueWithinRange(value + deltaValue, [ - min, - max, - ]); - this.setState({ value, deltaValue: 0, selected: false }); - if (strict) onChange(Math.floor(value)); - else onChange(value); - } - - onBarLayout = (event) => { - const { height: barHeight } = event.nativeEvent.layout; - this.setState({ barHeight }); - }; - - capValueWithinRange = (value, range) => { - if (value < range[0]) return range[0]; - if (value > range[1]) return range[1]; - return value; - }; - - getValueFromBottomOffset = ( - offset, - barHeight, - rangeMin, - rangeMax, - ) => { - if (barHeight === null) return 0; - return ((rangeMax - rangeMin) * offset) / barHeight; - }; - - getBottomOffsetFromValue = ( - value, - rangeMin, - rangeMax, - barHeight, - ) => { - if (barHeight === null) return 0; - const valueOffset = value - rangeMin; - const totalRange = rangeMax - rangeMin; - const percentage = valueOffset / totalRange; - return barHeight * percentage; - }; - - render() { - const { value, deltaValue, barHeight } = this.state; - const { min, max, labels, strict, selected } = this.props; - - const cappedValue = this.capValueWithinRange(value + deltaValue, [ - min, - max, - ]); - const offset = strict ? Math.floor(cappedValue) : cappedValue; - const bottomOffset = this.getBottomOffsetFromValue( - offset, - min, - max, - barHeight, - ); - return ( - - - - {labels - && ( - - { - labels.map((label, idx) => {label.text}) - } - - ) - } - - - - - - - - - - ); - } -} - -const borderColor = 'rgb(189, 193, 204)'; -const sliderFillColor = 'rgb(39,103,155)'; - -const PageContainer = styled.View` - background-color: white; - flex-grow: 1; - align-self: stretch; - align-items: center; - padding-vertical: 20; -`; - -const Container = styled.View` - flex-grow: 1; - align-self: stretch; - justify-content: center; - flex-direction: row; -`; -const Value = styled.Text` - color: black; -`; - -const BarContainer = styled.View` - width: ${CIRCLE_DIAMETER}; - align-items: center; - padding-vertical: ${CIRCLE_DIAMETER / 2}; - margin-horizontal: 20; -`; -const Bar = styled.View` - width: 10; - background-color: white; - flex-grow: 1; - border-radius: 8; - border-color: ${borderColor}; - background-color: ${borderColor}; - border-width: 1; -`; - -const Circle = styled.View` - border-radius: ${CIRCLE_DIAMETER / 2}; - width: ${CIRCLE_DIAMETER}; - height: ${CIRCLE_DIAMETER}; - background-color: ${props => (props.isFilled ? '#0B3954' : 'white')}; - border-color: ${borderColor}; - position: absolute; - bottom: ${props => props.bottomOffset}; -`; - -const RoundRect = styled.View` - border-radius: 8; - width: ${CIRCLE_DIAMETER * 2}; - height: ${CIRCLE_DIAMETER}; - background-color: ${props => (props.isFilled ? sliderFillColor : 'white')}; - border-color: ${sliderFillColor}; - border-width: 3; - position: absolute; - bottom: ${props => props.bottomOffset}; -`; - -const LabelContainer = styled.View` - width: 50%; - height: 100%; - left: 50%; - padding-left: 40; - padding-top: 0; - padding-bottom: 0; - position: absolute; - justify-content: space-between; - flex-direction: column-reverse; -`; From cad6ab2a2a6325210adac5e1ad12025b382fec4e Mon Sep 17 00:00:00 2001 From: Adam Odziemkowski Date: Tue, 26 Nov 2019 12:47:36 -0500 Subject: [PATCH 2/3] Bump to version 0.9.3 --- CHANGELOG.md | 4 ++++ README.md | 2 +- android/app/build.gradle | 4 ++-- ios/MDCApp/Info.plist | 4 ++-- package.json | 2 +- 5 files changed, 10 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 95f78679f..1e22f5da9 100644 --- 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.3] - 2019-11-26 +### Changed +- Update slider bar (horizontal only) + ## [0.9.2] - 2019-11-21 ### Fixed - Sorting of activities diff --git a/README.md b/README.md index 69555038c..9dee18a9c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# MindLogger 0.9.2 +# MindLogger 0.9.3 _Note: v0.1 is deprecated as of June 12, 2019._ diff --git a/android/app/build.gradle b/android/app/build.gradle index 5aa310709..fa3d16394 100644 --- 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 95 - versionName "0.9.2" + versionCode 96 + versionName "0.9.3" ndk { abiFilters "arm64-v8a", "x86_64", "armeabi-v7a", "x86" } diff --git a/ios/MDCApp/Info.plist b/ios/MDCApp/Info.plist index 3ccb99f72..8f4302519 100644 --- a/ios/MDCApp/Info.plist +++ b/ios/MDCApp/Info.plist @@ -17,11 +17,11 @@ CFBundlePackageType APPL CFBundleShortVersionString - 0.9.2 + 0.9.3 CFBundleSignature ???? CFBundleVersion - 95 + 96 ITSAppUsesNonExemptEncryption LSRequiresIPhoneOS diff --git a/package.json b/package.json index 9f3b38c3a..61b48616f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "MindLogger", - "version": "0.9.2", + "version": "0.9.3", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", From ef7618181cc2acc8f1fb6f8e8a4b1365019139fb Mon Sep 17 00:00:00 2001 From: Jon Clucas Date: Tue, 26 Nov 2019 15:29:27 -0500 Subject: [PATCH 3/3] :bookmark: v0.9.4 Ref #305 --- CHANGELOG.md | 2 +- README.md | 2 +- android/app/build.gradle | 4 ++-- ios/MDCApp/Info.plist | 4 ++-- package.json | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e22f5da9..425dd0a99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] ======= -## [0.9.3] - 2019-11-26 +## [0.9.4] - 2019-11-26 ### Changed - Update slider bar (horizontal only) diff --git a/README.md b/README.md index 9dee18a9c..4f5466511 100644 --- 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 index fa3d16394..785ae1830 100644 --- 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/ios/MDCApp/Info.plist b/ios/MDCApp/Info.plist index 8f4302519..34893a8b1 100644 --- a/ios/MDCApp/Info.plist +++ b/ios/MDCApp/Info.plist @@ -17,11 +17,11 @@ CFBundlePackageType APPL CFBundleShortVersionString - 0.9.3 + 0.9.4 CFBundleSignature ???? CFBundleVersion - 96 + 97 ITSAppUsesNonExemptEncryption LSRequiresIPhoneOS diff --git a/package.json b/package.json index 61b48616f..c45666907 100644 --- 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",