StackAggregator - fix children update (#2103)

* StackAggregator - migrate to functional component

* fix styling issue

* fix style for contentContainerStyle

* Revert "fix style for contentContainerStyle"

This reverts commit 283a0d8.

* change default

* apply contentContainerStyle of collapsed items

* fix style updates when collapsing changes

* remove style duplication

* Update collapsed state

* fix for layout animation doesn't effect on first interaction

* Fix animation timing

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

Author: Inbal-Tish

demo/src/screens/componentScreens/StackAggregatorScreen.tsx

@@ -4,15 +4,19 @@ import {ScrollView} from 'react-native';
 import {Colors, View, Text, Button, StackAggregator} from 'react-native-ui-lib';
 
 
-const contents = [
+const TEXTS = [
   '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 {
-  
+  state = { 
+    contents: TEXTS,
+    collapsed: true
+  };
+
   onItemPress = (index: number) => {
     console.warn('item pressed: ', index);
   }
@@ -21,24 +25,41 @@ export default class StackAggregatorScreen extends Component {
     console.warn('item\'s button pressed: ', index);
   }
 
+  refreshItems = () => {
+    const newItems = _.clone(this.state.contents);
+    newItems.push('New Item');
+    this.setState({contents: newItems});
+  }
+
+  toggleCollapsed = () => {
+    this.setState({collapsed: !this.state.collapsed});
+  }
+
   renderItem = (_: string, index: number) => {
     return (
       <View key={index} center padding-12>
         <Button label={`${index}`} marginB-10 size={Button.sizes.small} onPress={() => this.onPress(index)}/>
-        <Text>{contents[index]}</Text>
+        <Text>{this.state.contents[index]}</Text>
       </View>
     );
   }
 
   render() {
+    const {collapsed} = this.state;
+
     return (
       <ScrollView keyboardShouldPersistTaps={'handled'} showsVerticalScrollIndicator={false}>
+        <View row spread margin-5>
+          <Button link label={collapsed ? 'Open Stack' : 'Close Stack'} onPress={this.toggleCollapsed}/>
+          <Button link label="Update content" onPress={this.refreshItems}/>
+        </View>
         <Text center grey40 text90 marginT-20>Thu, 10 Dec, 11:29</Text>
         <StackAggregator
           containerStyle={{marginTop: 12}}
           onItemPress={this.onItemPress}
+          collapsed={collapsed}
         >
-          {_.map(contents, (item, index) => {
+          {_.map(this.state.contents, (item, index) => {
             return this.renderItem(item, index);
           })}
         </StackAggregator>
@@ -52,7 +73,7 @@ export default class StackAggregatorScreen extends Component {
           // itemBorderRadius={10}
           // buttonProps={{color: Colors.green30, labelStyle: {...Typography.text80, fontWeight: '500'}}}
         >
-          {_.map(contents, (item, index) => {
+          {_.map(this.state.contents, (item, index) => {
             return this.renderItem(item, index);
           })}
         </StackAggregator>