Feat/stack aggregator (#541)

* StackAggregator component

* StackAggregatorScreen

* adjust container height

* remove unused const

* Adding LayoutAnimation

* switching to children

* wrapping child with overflow hidden view

* moving Card inside the component to control content appearance

* adding style options, onPress, button icon

* fix Android collapsed issue

* cosmetics

* adjusting elevation

* adjusting elevation

* fix for bottom padding

* lint fix

* removing arrow function from onLayout; moving inline style to StyleSheet

Author: Inbal-Tish

demo/src/screens/MenuStructure.js

@@ -37,6 +37,7 @@ export const navigationData = {
       {title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
       {title: 'Pan Responder', tags: 'pan swipe drag responder', screen: 'unicorn.components.PanResponderScreen'},
       {title: 'Shared Transition', tags: 'shared transition element', screen: 'unicorn.components.SharedTransitionScreen'},
+      {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
       {title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
       {title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'},
       {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},

demo/src/screens/PlaygroundScreen.js

@@ -1,20 +1,15 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Colors, View, Text} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text} from 'react-native-ui-lib'; //eslint-disable-line
 
-export default class PlaygroundScreen extends Component {
-  
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
 
-  componentDidMount() {}
+export default class PlaygroundScreen extends Component {
 
   render() {
     return (
-      <View flex bg-dark80 center style={styles.container}>
-        <Text>Unicorn Playground Screen</Text>
+      <View center bg-dark80 flex>
+        <Text text50>Playground Screen</Text>
       </View>
     );
   }

demo/src/screens/componentScreens/StackAggregatorScreen.js

@@ -0,0 +1,62 @@
+import _ from 'lodash';
+import React, {Component} from 'react';
+import {ScrollView} from 'react-native';
+import {/* Colors, Typography,  */View, Text, Button, StackAggregator} from 'react-native-ui-lib'; //eslint-disable-line
+
+
+const contents = [
+  'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+  'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+  'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+  'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
+]
+
+export default class StackAggregatorScreen extends Component {
+  
+  onItemPress = (index) => {
+    console.warn('item pressed: ', index);
+  }
+
+  onPress = (index) => {
+    console.warn('item\'s button pressed: ', index);
+  }
+
+  renderItem = (item, index) => {
+    return (
+      <View key={index} center padding-12>
+        <Button label={`${index}`} marginB-10 size={'small'} onPress={() => this.onPress(index)}/>
+        <Text>{contents[index]}</Text>
+      </View>
+    );
+  }
+
+  render() {
+    return (
+      <ScrollView bg-dark80 keyboardShouldPersistTaps={'handled'} showsVerticalScrollIndicator={false}>
+        <Text center dark40 text90 marginT-20>Thu, 10 Dec, 11:29</Text>
+        <StackAggregator
+          containerStyle={{marginTop: 12}}
+          onItemPress={this.onItemPress}
+        >
+          {_.map(contents, (item, index) => {
+            return this.renderItem(item, index);
+          })}
+        </StackAggregator>
+
+        <Text center dark40 text90 marginT-20>Thu, 11 Dec, 13:03</Text>
+        <StackAggregator
+          containerStyle={{marginTop: 12}}
+          onItemPress={this.onItemPress}
+          collapsed={false}
+          // contentContainerStyle={{backgroundColor: Colors.red30}}
+          // itemBorderRadius={10}
+          // buttonProps={{color: Colors.green30, labelStyle: {...Typography.text80, fontWeight: '500'}}}
+        >
+          {_.map(contents, (item, index) => {
+            return this.renderItem(item, index);
+          })}
+        </StackAggregator>
+      </ScrollView>
+    );
+  }
+}

demo/src/screens/componentScreens/index.js

@@ -31,6 +31,7 @@ import WheelPickerDialogScreen from './WheelPickerDialogScreen';
 import SliderScreen from './SliderScreen';
 import FloatingButtonScreen from './FloatingButtonScreen';
 import ColorPickerScreen from './ColorPickerScreen';
+import StackAggregatorScreen from './StackAggregatorScreen';
 
 
 Navigation.registerComponent('unicorn.components.ActionSheetScreen', () => ActionSheetScreen);
@@ -65,3 +66,4 @@ Navigation.registerComponent('unicorn.components.WheelPickerDialogScreen', () =>
 Navigation.registerComponent('unicorn.components.SliderScreen', () => SliderScreen);
 Navigation.registerComponent('unicorn.components.FloatingButtonScreen', () => FloatingButtonScreen);
 Navigation.registerComponent('unicorn.components.ColorPickerScreen', () => ColorPickerScreen);
+Navigation.registerComponent('unicorn.components.StackAggregatorScreen', () => StackAggregatorScreen);

src/components/index.js

@@ -123,6 +123,9 @@ module.exports = {
   get SharedTransition() {
     return require('./sharedTransition').default;
   },
+  get StackAggregator() {
+    return require('./stackAggregator').default;
+  },
 
   get Slider() {
     return require('./slider').default;