IOS Accordion for datepicker #5

Suprnovae · May 18, 2016 · b060b6a · b060b6a
1 parent a38d26d
commit b060b6a
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 14 deletions.
diff --git a/components/RecordFormViewIOS.js b/components/RecordFormViewIOS.js
@@ -13,8 +13,10 @@ import React, {
 
 var moment = require('moment');
 
+
 import styles from '../styles/Initial';
 import CameraViewIOS from '../components/CameraViewIOS';
+import Collapsible from 'react-native-collapsible';
 
 export default class RecordFormViewIOS extends Component {
   constructor(props) {
@@ -24,10 +26,24 @@ export default class RecordFormViewIOS extends Component {
       nav: this.props.navigator,
       date: new Date(),
       showDatePicker: false,
-      timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60
+      timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
+      collapsed: true 
     };
   }
 
+  _toggleExpanded() {
+    this.setState({ collapsed: !this.state.collapsed});
+    this.setState({showDatePicker: !this.state.showDatePicker});
+  }
+
+  _renderHeader(section, i, isActive) {
+    return (
+      <Animatable.View duration={400} style={[styles.header, isActive ? styles.active : styles.inactive]} transition="backgroundColor">
+        <Text style={styles.headerText}>{section.title}</Text>
+      </Animatable.View>
+    );
+  }
+
   render() {     
     var showDatePicker = this.state.showDatePicker ?
             <DatePickerIOS
@@ -36,7 +52,8 @@ export default class RecordFormViewIOS extends Component {
                 date={this.state.date}
                 onDateChange={this.onDateChange.bind(this)}
                 timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
-                mode="datetime"/> : <View /> ;      
+                mode="datetime"/> : <View /> ; 
+
     return(
         <ScrollView style={styles.list}>
           <View style={[styles.container]} >
@@ -65,18 +82,25 @@ export default class RecordFormViewIOS extends Component {
               </View>
               </View>
 
+            <TouchableHighlight onPress={this._toggleExpanded.bind(this)}>
             <View style={styles.newrecordblock}>
-           <View style={styles.newrecordleft}>
-           <Text style={{height: 40,  fontSize: 16,}}>On</Text>
-           </View>
-           <View style={styles.newrecordright}>
-            <TouchableOpacity style={{height: 40}}
-                 onPress={() => this.setState({showDatePicker: !this.state.showDatePicker})}>
-            <Text style={styles.text}>{moment(this.state.date).format('LLL')}</Text>
-            </TouchableOpacity>
+
+
+              <View style={styles.newrecordleft}>
+              <Text style={{height: 40,  fontSize: 16,}}>On</Text>
               </View>
 
+              <View style={styles.newrecordright}>
+              <Text style={styles.text}>{moment(this.state.date).format('LLL')}</Text>
+              </View> 
+          </View>
+          </TouchableHighlight>
+
+          <Collapsible collapsed={this.state.collapsed} align="center">
+              <View style={styles.datepicker}>
+              {showDatePicker}
               </View>
+              </Collapsible>
 
               <View style={styles.newrecordblock}>
            <View style={styles.categoryleft}>
@@ -105,9 +129,7 @@ export default class RecordFormViewIOS extends Component {
               </View>
 
           </View>
-          <View style={styles.datepicker}>
-          {showDatePicker}
-          </View>
+
           </ScrollView>
 
         );

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "react-native": "^0.24.1",
     "react-native-action-button": "^1.1.4",
     "react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
+    "react-native-collapsible": "^0.6.0",
     "react-native-extra-dimensions-android": "^0.17.0",
     "react-native-material-design": "^0.3.3",
     "react-native-vector-icons": "^1.3.4"

diff --git a/styles/Initial.js b/styles/Initial.js
@@ -162,6 +162,22 @@ export default StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
-    marginTop:60,
+    height:220,
+    backgroundColor:'white'
+  },
+  header: {
+    backgroundColor: '#F5FCFF',
+    padding: 10,
+  },
+  headerText: {
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  active: {
+    backgroundColor: 'rgba(255,255,255,1)',
+  },
+  inactive: {
+    backgroundColor: 'rgba(245,252,255,1)',
   },
 });