Feat/expandable list item new component (#943)

* expandableListItem new component

* expandableSection

* expandableSection fixes

* generatedTypes

* delete gradlew.bat

* delete gradlew.bat

* add useEffect

* typing

Co-authored-by: Ethan Sharabi <[email protected]>

Author: lidord-wix

demo/src/index.js

@@ -46,6 +46,9 @@ module.exports = {
       get DrawerScreen() {
         return require('./screens/componentScreens/DrawerScreen').default;
       },
+      get ExpandableSectionScreen() {
+        return require('./screens/componentScreens/ExpandableSectionScreen').default;
+      },
       get TagsInputScreen() {
         return require('./screens/componentScreens/TagsInputScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -31,6 +31,7 @@ export const navigationData = {
       {title: 'Cards', tags: 'cards feed', screen: 'unicorn.components.CardsScreen'},
       {title: 'Connection Status Bar', tags: 'connection status bar', screen: 'unicorn.components.ConnectionStatusBar'},
       {title: 'Chip', tags: 'chip', screen: 'unicorn.components.ChipScreen'},
+      {title: 'ExpandableSection', tags: 'expandable section', screen: 'unicorn.components.ExpandableSectionScreen'},
       // {title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
       {title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},

demo/src/screens/componentScreens/ExpandableSectionScreen.tsx

@@ -0,0 +1,112 @@
+import _ from 'lodash';
+import React, {PureComponent} from 'react';
+import {ScrollView, StyleSheet, TouchableOpacity} from 'react-native';
+import {Card, Text, Image, ListItem, Carousel, Spacings, View} from 'react-native-ui-lib';
+import ExpandableSection from '../../../../src/components/expandableSection';
+
+const cardImage2 = require('../../assets/images/empty-state.jpg');
+const cardImage = require('../../assets/images/card-example.jpg');
+const chevronDown = require('../../assets/icons/chevronDown.png');
+const chevronUp = require('../../assets/icons/chevronUp.png');
+
+const elements = [
+  <Card style={{marginBottom: 10}} onPress={() => {}}>
+    <Card.Section
+      content={[
+        {text: 'Card #1', text70: true, dark10: true},
+        {text: 'card description', text90: true, dark50: true}
+      ]}
+      style={{padding: 20}}
+    />
+    <Card.Section imageSource={cardImage2} imageStyle={{height: 120}} />
+  </Card>,
+  <Card style={{marginBottom: 10}} onPress={() => {}}>
+    <Card.Section
+      content={[
+        {text: 'Card #2', text70: true, dark10: true},
+        {text: 'card description', text90: true, dark50: true}
+      ]}
+      style={{padding: 20}}
+    />
+    <Card.Section imageSource={cardImage} imageStyle={{height: 120}} />
+  </Card>,
+  <Card style={{marginBottom: 10}} onPress={() => {}}>
+    <Card.Section
+      content={[
+        {text: 'Card #3', text70: true, dark10: true},
+        {text: 'card description', text90: true, dark50: true}
+      ]}
+      style={{padding: 20}}
+    />
+    <Card.Section imageSource={cardImage2} imageStyle={{height: 120}} />
+  </Card>
+];
+
+class ExpandableSectionScreen extends PureComponent {
+  state = {
+    expanded: false
+  };
+
+  onExpand() {
+    this.setState({
+      expanded: !this.state.expanded
+    });
+  }
+
+  getHeaderElement() {
+    return (
+      <TouchableOpacity onPress={() => this.onExpand()}>
+        <Text margin-10 dark10 text60>
+          ExpandableSection's sectionHeader
+        </Text>
+        <View style={styles.header}>
+          <Image style={styles.icon} source={!this.state.expanded ? chevronUp : chevronDown} />
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  getBodyElement() {
+    return (
+      <Carousel pageWidth={350} itemSpacings={Spacings.s2}>
+        {_.map(elements, (element, key) => {
+          return (
+            <View key={key} margin-12>
+              {element}
+            </View>
+          );
+        })}
+      </Carousel>
+    );
+  }
+
+  render() {
+    const {expanded} = this.state;
+
+    return (
+      <ScrollView>
+        <ExpandableSection expanded={expanded} sectionHeader={this.getHeaderElement()}>
+          {this.getBodyElement()}
+        </ExpandableSection>
+        <ListItem>
+          <Text dark10 text60 marginL-10>
+            {'The next item'}
+          </Text>
+        </ListItem>
+      </ScrollView>
+    );
+  }
+}
+
+export default ExpandableSectionScreen;
+
+const styles = StyleSheet.create({
+  header: {
+    marginLeft: 380,
+    marginTop: 20,
+    position: 'absolute'
+  },
+  icon: {
+    backgroundColor: 'transparent'
+  }
+});

demo/src/screens/componentScreens/index.js

@@ -15,6 +15,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
   registrar('unicorn.components.DialogScreen', () => require('./DialogScreen').default);
   registrar('unicorn.components.DrawerScreen', () => require('./DrawerScreen').default);
+  registrar('unicorn.components.ExpandableSectionScreen', () => require('./ExpandableSectionScreen').default);
   registrar('unicorn.components.TagsInputScreen', () => require('./TagsInputScreen').default);
   registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);

expoDemo/android/gradlew.bat

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type ExpandableSectionProps = {
+    /**
+     * ExpandableSection text element
+     */
+    textElement?: JSX.Element;
+    /**
+     * ExpandableSection icon color
+     */
+    iconColor?: string;
+};
+declare function ExpandableSection(props: ExpandableSectionProps): JSX.Element;
+export default ExpandableSection;

generatedTypes/components/expandableListItem/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type ExpandableSectionProps = {
+    /**
+     * expandableSection header element
+     */
+    sectionHeader?: JSX.Element;
+    /**
+     * expandableSection expandable children
+     */
+    children?: React.ReactNode;
+    /**
+     * should the expandableSection be expanded
+     */
+    expanded?: boolean;
+};
+declare function ExpandableSection(props: ExpandableSectionProps): JSX.Element;
+export default ExpandableSection;

generatedTypes/components/expandableSection/index.d.ts

@@ -21,6 +21,7 @@ export {default as RadioButton, RadioButtonPropTypes} from './components/radioBu
 export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButton/RadioGroup';
 export {default as TabBar} from './components/TabBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
+export {default as ExpandableSection, ExpandableSectionProps } from './components/ExpandableSection';
 export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal';
 export {default as PanGestureView, PanGestureViewProps} from './components/panningViews/panGestureView';
 export {default as PanningContext} from './components/panningViews/panningContext';
@@ -48,6 +49,7 @@ export {
   ConnectionStatusBar,
   Dialog,
   Drawer,
+  ExpandableSection,
   FeatureHighlight,
   Hint,
   BaseInput,

generatedTypes/index.d.ts

@@ -0,0 +1,43 @@
+import _ from 'lodash';
+import React, {useEffect} from 'react';
+import {LayoutAnimation, StyleSheet} from 'react-native';
+import View from '../view';
+
+export type ExpandableSectionProps = {
+  /**
+   * expandableSection header element
+   */
+  sectionHeader?: JSX.Element;
+  /**
+   * expandableSection expandable children
+   */
+  children?: React.ReactNode;
+  /**
+   * should the expandableSection be expanded
+   */
+  expanded?: boolean;
+};
+
+function ExpandableSection(props: ExpandableSectionProps) {
+  const {expanded, sectionHeader, children} = props;
+
+  useEffect(() => {
+    LayoutAnimation.configureNext({...LayoutAnimation.Presets.easeInEaseOut, duration: 300});
+  }, [expanded]);
+
+
+  return (
+    <View style={styles.container}>
+      {sectionHeader}
+      {expanded && children}
+    </View>
+  );
+}
+
+export default ExpandableSection;
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  }
+});

src/components/expandableSection/index.tsx

@@ -54,6 +54,9 @@ export default {
   get Drawer() {
     return require('./components/drawer').default;
   },
+  get ExpandableSection() {
+    return require('./components/expandableSection').default;
+  },
   get Fader() {
     return require('./components/fader').default;
   },

src/index.js

@@ -23,6 +23,7 @@ export {default as RadioButton, RadioButtonPropTypes} from './components/radioBu
 export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButton/RadioGroup';
 export {default as TabBar} from './components/TabBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
+export {default as ExpandableSection, ExpandableSectionProps} from './components/expandableSection';
 export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal';
 export {default as PanGestureView, PanGestureViewProps} from './components/panningViews/panGestureView';
 export {default as PanningContext} from './components/panningViews/panningContext';