support render top section at expandableSection (#983)

* support render top section at expandableSection

* add top open example in expandableSectionScreen

Author: lidord-wix

demo/src/screens/componentScreens/ExpandableSectionScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {PureComponent} from 'react';
-import {ScrollView, StyleSheet, TouchableOpacity} from 'react-native';
-import {Card, Text, Image, ListItem, Carousel, Spacings, View, ExpandableSection} from 'react-native-ui-lib';
+import {ScrollView, StyleSheet} from 'react-native';
+import {Card, Text, Image, ListItem, Carousel, Spacings, View, ExpandableSection, Switch} from 'react-native-ui-lib';
 
 const cardImage2 = require('../../assets/images/empty-state.jpg');
 const cardImage = require('../../assets/images/card-example.jpg');
@@ -43,7 +43,8 @@ const elements = [
 
 class ExpandableSectionScreen extends PureComponent {
   state = {
-    expanded: false
+    expanded: false,
+    top: false
   };
 
   onExpand() {
@@ -52,14 +53,21 @@ class ExpandableSectionScreen extends PureComponent {
     });
   }
 
+  getChevron() {
+    if (this.state.expanded) {
+      return this.state.top ? chevronDown : chevronUp;
+    }
+    return this.state.top ? chevronUp : chevronDown;
+  }
+
   getHeaderElement() {
     return (
       <View>
         <Text margin-10 dark10 text60>
           ExpandableSection's sectionHeader
         </Text>
         <View style={styles.header}>
-          <Image style={styles.icon} source={!this.state.expanded ? chevronUp : chevronDown} />
+          <Image style={styles.icon} source={this.getChevron()} />
         </View>
       </View>
     );
@@ -80,11 +88,27 @@ class ExpandableSectionScreen extends PureComponent {
   }
 
   render() {
-    const {expanded} = this.state;
+    const {expanded, top} = this.state;
 
     return (
       <ScrollView>
-        <ExpandableSection expanded={expanded} sectionHeader={this.getHeaderElement()} onPress={() => this.onExpand()}>
+        <View row center margin-20>
+          <Text dark10 text70 marginR-10>
+            Open section on top
+          </Text>
+          <Switch
+            value={this.state.top}
+            onValueChange={() => {
+              this.setState({top: !this.state.top});
+            }}
+          ></Switch>
+        </View>
+        <ExpandableSection
+          top={top}
+          expanded={expanded}
+          sectionHeader={this.getHeaderElement()}
+          onPress={() => this.onExpand()}
+        >
           {this.getBodyElement()}
         </ExpandableSection>
         <ListItem>

generatedTypes/components/expandableSection/index.d.ts

@@ -12,6 +12,10 @@ export declare type ExpandableSectionProps = {
      * should the expandableSection be expanded
      */
     expanded?: boolean;
+    /**
+     * should the expandableSection open above the sectionHeader
+     */
+    top?: boolean;
     /**
      * action for when pressing the header of the expandableSection
      */

src/components/expandableSection/index.tsx

@@ -17,24 +17,29 @@ export type ExpandableSectionProps = {
    * should the expandableSection be expanded
    */
   expanded?: boolean;
+  /**
+   * should the expandableSection open above the sectionHeader
+   */
+  top?: boolean;
   /**
    * action for when pressing the header of the expandableSection
    */
   onPress?: () => void;
 };
 
 function ExpandableSection(props: ExpandableSectionProps) {
-  const {expanded, sectionHeader, children} = props;
+  const {expanded, sectionHeader, children, top} = props;
 
 const onPress = () => {
   props.onPress?.();
   LayoutAnimation.configureNext({...LayoutAnimation.Presets.easeInEaseOut, duration: 300});
   }
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container}> 
+      {top && expanded && children}
       <TouchableOpacity onPress={onPress}>{sectionHeader}</TouchableOpacity>
-      {expanded && children}
+      {!top && expanded && children}
     </View>
   );
 }