refactor: replace bottom-sheet with interactable

codeestX · Jun 26, 2017 · 60c8dc2 · 60c8dc2
1 parent ac94edf
commit 60c8dc2
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 61 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -136,8 +136,8 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-interactable')
     compile project(':react-native-fs')
-    compile project(':react-native-bottom-sheet-behavior')
     compile project(':realm')
     compile project(':react-native-blur')
     compile project(':react-native-vector-icons')

diff --git a/android/app/src/main/java/com/moefm/MainApplication.java b/android/app/src/main/java/com/moefm/MainApplication.java
@@ -3,8 +3,8 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.wix.interactable.Interactable;
 import com.rnfs.RNFSPackage;
-import com.bottomsheetbehavior.BottomSheetBehaviorPackage;
 import io.realm.react.RealmReactPackage;
 import com.cmcewen.blurview.BlurViewPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
@@ -30,8 +30,8 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new Interactable(),
             new RNFSPackage(),
-            new BottomSheetBehaviorPackage(),
             new RealmReactPackage(),
             new BlurViewPackage(),
             new VectorIconsPackage(),

diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,8 +1,8 @@
 rootProject.name = 'MoeFM'
+include ':react-native-interactable'
+project(':react-native-interactable').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-interactable/android')
 include ':react-native-fs'
 project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')
-include ':react-native-bottom-sheet-behavior'
-project(':react-native-bottom-sheet-behavior').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bottom-sheet-behavior/android')
 include ':realm'
 project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
 include ':react-native-blur'

diff --git a/ios/MoeFM.xcodeproj/project.pbxproj b/ios/MoeFM.xcodeproj/project.pbxproj
@@ -53,6 +53,7 @@
 		8DB80E1F6A8F425CA1995EB9 /* libc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 5B5C3D91D0B34ED9ADBE48A9 /* libc++.tbd */; };
 		59FA70EE14CE4001A930AC43 /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 63CBD2C361FB443E9E2AE199 /* libz.tbd */; };
 		9098D677638A45FAA1C9549D /* libRNFS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 08D5F630AD8B4D189CF06FCB /* libRNFS.a */; };
+		F7B256AF36684540B9F2BF12 /* libInteractable.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 199014FE64814E36A5545820 /* libInteractable.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -296,6 +297,8 @@
 		63CBD2C361FB443E9E2AE199 /* libz.tbd */ = {isa = PBXFileReference; name = "libz.tbd"; path = "usr/lib/libz.tbd"; sourceTree = SDKROOT; fileEncoding = undefined; lastKnownFileType = sourcecode.text-based-dylib-definition; explicitFileType = undefined; includeInIndex = 0; };
 		D5647D4F7C314A5DB138B1BE /* RNFS.xcodeproj */ = {isa = PBXFileReference; name = "RNFS.xcodeproj"; path = "../node_modules/react-native-fs/RNFS.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
 		08D5F630AD8B4D189CF06FCB /* libRNFS.a */ = {isa = PBXFileReference; name = "libRNFS.a"; path = "libRNFS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		F87BF631884B418B811D264E /* Interactable.xcodeproj */ = {isa = PBXFileReference; name = "Interactable.xcodeproj"; path = "../node_modules/react-native-interactable/ios/Interactable.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		199014FE64814E36A5545820 /* libInteractable.a */ = {isa = PBXFileReference; name = "libInteractable.a"; path = "libInteractable.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -330,6 +333,7 @@
 				8DB80E1F6A8F425CA1995EB9 /* libc++.tbd in Frameworks */,
 				59FA70EE14CE4001A930AC43 /* libz.tbd in Frameworks */,
 				9098D677638A45FAA1C9549D /* libRNFS.a in Frameworks */,
+				F7B256AF36684540B9F2BF12 /* libInteractable.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -502,6 +506,7 @@
 				7507A13668024F93B1E802FB /* RNBlur.xcodeproj */,
 				9EEDD71B489844B48105C333 /* RealmReact.xcodeproj */,
 				D5647D4F7C314A5DB138B1BE /* RNFS.xcodeproj */,
+				F87BF631884B418B811D264E /* Interactable.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1075,6 +1080,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
@@ -1084,6 +1090,7 @@
 					"$(SRCROOT)/../node_modules/react-native-blur/ios",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
+					"$(SRCROOT)/../node_modules/react-native-interactable/ios/Interactable",
 				);
 			};
 			name = Debug;
@@ -1110,6 +1117,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
@@ -1119,6 +1127,7 @@
 					"$(SRCROOT)/../node_modules/react-native-blur/ios",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
+					"$(SRCROOT)/../node_modules/react-native-interactable/ios/Interactable",
 				);
 			};
 			name = Release;
@@ -1146,6 +1155,7 @@
 					"$(SRCROOT)/../node_modules/react-native-blur/ios",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
+					"$(SRCROOT)/../node_modules/react-native-interactable/ios/Interactable",
 				);
 			};
 			name = Debug;
@@ -1172,6 +1182,7 @@
 					"$(SRCROOT)/../node_modules/react-native-blur/ios",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
+					"$(SRCROOT)/../node_modules/react-native-interactable/ios/Interactable",
 				);
 			};
 			name = Release;
@@ -1207,6 +1218,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
@@ -1216,6 +1228,7 @@
 					"$(SRCROOT)/../node_modules/react-native-blur/ios",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
+					"$(SRCROOT)/../node_modules/react-native-interactable/ios/Interactable",
 				);
 			};
 			name = Debug;
@@ -1251,6 +1264,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
@@ -1260,6 +1274,7 @@
 					"$(SRCROOT)/../node_modules/react-native-blur/ios",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
+					"$(SRCROOT)/../node_modules/react-native-interactable/ios/Interactable",
 				);
 			};
 			name = Release;
@@ -1290,6 +1305,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 			};
 			name = Debug;
@@ -1320,6 +1336,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 			};
 			name = Release;

diff --git a/js/container/PlayButton.js b/js/container/PlayButton.js
@@ -16,9 +16,9 @@ class PlayButton extends Component {
     getPlayIcon(isPlaying) {
         switch (isPlaying) {
             case true:
-                return require('../images/ic_play.png');
-            case false:
                 return require('../images/ic_pause.png');
+            case false:
+                return require('../images/ic_play.png');
         }
     }
 

diff --git a/js/container/PlayButtonBottom.js b/js/container/PlayButtonBottom.js
@@ -16,9 +16,9 @@ class PlayButtonBottom extends Component {
     getPlayIcon(isPlaying) {
         switch (isPlaying) {
             case true:
-                return require('../images/bottom_play.png');
-            case false:
                 return require('../images/bottom_pause.png');
+            case false:
+                return require('../images/bottom_play.png');
         }
     }
 

diff --git a/js/container/PlayList.js b/js/container/PlayList.js
@@ -29,12 +29,20 @@ class PlayList extends Component {
         }
     }
 
+    getCurrentIndex = () => {
+        if (this.props.currentSong && this.props.playList) {
+            let index = this.props.playList.findIndex((it) => it.id === this.props.currentSong.id)
+            return index === -1? 0: index;
+        }
+        return 0;
+    };
+
     render() {
         return (
-            <View style={{backgroundColor: 'white', height: GlobalStyle.window_height - 50}}>
+            <View style={{backgroundColor: 'white', height: 265}}>
                 <FlatList
                     data={this.props.playList}
-                    renderItem={({item, index}) => <Item song={item} index={index} isSelected={this.props.currentIndex === index}
+                    renderItem={({item, index}) => <Item song={item} index={index} isSelected={this.getCurrentIndex() === index}
                                                          onPress={this.handlePoint.bind(this)} onDelete={this.handleDelete.bind(this)} />}
                     ItemSeparatorComponent={() => <Text style={styles.separator}/>}
                     keyExtractor={(item, index) => item.id}
@@ -55,7 +63,7 @@ const styles = StyleSheet.create({
 const mapStateToProps = (state) => {
     return {
         playList: state.songs.playList,
-        currentIndex: state.songs.currentIndex
+        currentSong: state.songs.currentSong
     }
 };
 

diff --git a/js/container/PlayerUIBottom.js b/js/container/PlayerUIBottom.js
@@ -11,68 +11,73 @@ import {
     View,
     Text,
     Image,
+    Animated
 } from 'react-native'
-import {
-    BottomSheetHeader,
-    BottomSheetBehavior,
-} from 'react-native-bottom-sheet-behavior'
+import Interactable from 'react-native-interactable';
 import CustomButton from '../component/CustomButton'
 import PlayerProgress from '../container/PlayerProgress'
 import PlayButtonBottom from '../container/PlayButtonBottom'
 import PlayList from '../container/PlayList'
 import GlobalStyle from '../style/global'
 
-const { STATE_ANCHOR_POINT, STATE_COLLAPSED } = BottomSheetBehavior;
-
 class PlayerUIBottom extends Component {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            snapToIndex: 0
+        };
+        this._deltaY = new Animated.Value(GlobalStyle.window_height-200);
+    }
+
     handleNext() {
         if (this.props.onNext) {
             this.props.onNext()
         }
     }
 
-    handleState = (state) => {
-        this.bottomSheet.setBottomSheetState(state)
+    handleState = () => {
+        this.refs['headInstance'].snapTo({index: this.state.snapToIndex});
+        this.setState({
+            snapToIndex: this.state.snapToIndex === 0? 1: 0
+        });
     };
 
     render() {
         if (this.props.currentSong === null || this.props.currentSong === undefined) {
             return null;
         }
         return (
-        <BottomSheetBehavior
-            anchorEnabled
-            anchorPoint={230}
-            peekHeight={55}
-            elevation={8}
-            ref={(bottomSheet) => { this.bottomSheet = bottomSheet }}>
-            <View style={{backgroundColor:'white'}}>
-                <BottomSheetHeader
-                    textColorExpanded={'black'}
-                    backgroundColor={'white'}
-                    backgroundColorExpanded={'white'}>
-                    <CustomButton onPress={() => this.props.onPress()}>
-                        <View style={{height: 55}}>
-                            <PlayerProgress/>
-                            <View style={styles.headerContainer}>
-                                <Image source={{uri: this.props.currentSong.cover, width: 30, height: 30}}/>
-                                <Text style={{flex: 1, marginLeft: 10}} numberOfLines={1}>{this.props.currentSong.title}</Text>
-                                <PlayButtonBottom innerStyle={styles.icon}/>
-                                <CustomButton onPress={this.handleNext.bind(this)}>
-                                    <Image style={styles.icon} source={require('../images/bottom_next.png')}/>
-                                </CustomButton>
-                                <CustomButton onPress={() => this.handleState(STATE_ANCHOR_POINT)}>
-                                    <Image style={styles.icon} source={require('../images/bottom_list.png')}/>
-                                </CustomButton>
+            <View style={styles.panelContainer}>
+                <Interactable.View
+                    ref='headInstance'
+                    verticalOnly={true}
+                    snapPoints={[{y: GlobalStyle.window_height-400}, {y: GlobalStyle.window_height-135}]}
+                    boundaries={{top: GlobalStyle.window_height-400}}
+                    initialPosition={{y: GlobalStyle.window_height-135}}
+                    animatedValueY={this._deltaY}>
+                    <View>
+                        <CustomButton onPress={() => this.props.onPress()}>
+                            <View style={{height: 55, backgroundColor: 'white'}}>
+                                <PlayerProgress/>
+                                <View style={styles.headerContainer}>
+                                    <Image source={{uri: this.props.currentSong.cover, width: 30, height: 30}}/>
+                                    <Text style={{flex: 1, marginLeft: 10}} numberOfLines={1}>{this.props.currentSong.title}</Text>
+                                    <PlayButtonBottom innerStyle={styles.icon}/>
+                                    <CustomButton onPress={this.handleNext.bind(this)}>
+                                        <Image style={styles.icon} source={require('../images/bottom_next.png')}/>
+                                    </CustomButton>
+                                    <CustomButton onPress={this.handleState}>
+                                        <Image style={styles.icon} source={require('../images/bottom_list.png')}/>
+                                    </CustomButton>
+                                </View>
+                                <Text style={{height: 0.5, backgroundColor: 'gray', width: GlobalStyle.window_width, marginTop: 3}}/>
                             </View>
-                            <Text style={{height: 0.5, backgroundColor: 'gray', width: GlobalStyle.window_width, marginTop: 3}}/>
-                        </View>
-                    </CustomButton>
-                </BottomSheetHeader>
-                <PlayList />
+                        </CustomButton>
+                        <PlayList />
+                    </View>
+                </Interactable.View>
             </View>
-        </BottomSheetBehavior>
         )
     }
 }
@@ -87,7 +92,14 @@ const styles = StyleSheet.create({
         marginVertical: 3,
         paddingHorizontal: 20,
         alignItems: 'center'
-    }
+    },
+    panelContainer: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+    },
 });
 
 const mapStateToProps = (state) => {

diff --git a/js/container/SongList.js b/js/container/SongList.js
@@ -15,11 +15,8 @@ import {
 import { connect } from 'react-redux'
 import Item from '../component/SongItem'
 import GlobalStyles from  '../style/global'
-import {
-    CoordinatorLayout,
-} from 'react-native-bottom-sheet-behavior'
 import CustomButton from '../component/CustomButton'
-import PlayerUIBottom from '../container/PlayerUIBottom'
+import PlayerUIBottom from './PlayerUIBottom'
 
 class SongList extends Component {
 
@@ -59,8 +56,9 @@ class SongList extends Component {
 
     render() {
         return (
-            <CoordinatorLayout style={{flex: 1}}>
+            <View style={{flex: 1}}>
                 <FlatList
+                    style={{flex: 1}}
                     data={this.props.subsData}
                     renderItem={({item, index}) => <Item song={item} index={index} onPress={(song) => {
                         if (this.props.onPushSong) {
@@ -72,15 +70,14 @@ class SongList extends Component {
                     ItemSeparatorComponent={() => <Text style={styles.separator}/>}
                     ListHeaderComponent={this.renderHeader.bind(this)}/>
                 <PlayerUIBottom onPress={this.props.onNavPlayPage}/>
-            </CoordinatorLayout>
+            </View>
         );
     }
 }
 
 const styles = StyleSheet.create({
     separator : {
         height: 0.5,
-        marginLeft: 50,
         backgroundColor: GlobalStyles.text_dark_hint,
     },
     addAllContainer: {