Browse Source

Move accordion children in prop

Arnaud Vergnet 2 years ago
parent
commit
a1cfb0385a

+ 4
- 5
src/components/Animations/AnimatedAccordion.tsx View File

38
   opened?: boolean;
38
   opened?: boolean;
39
   unmountWhenCollapsed?: boolean;
39
   unmountWhenCollapsed?: boolean;
40
   enabled?: boolean;
40
   enabled?: boolean;
41
-  children?: React.ReactNode;
41
+  renderItem: () => React.ReactNode;
42
 };
42
 };
43
 
43
 
44
 function AnimatedAccordion(props: PropsType) {
44
 function AnimatedAccordion(props: PropsType) {
96
 
96
 
97
   const toggleAccordion = () => setExpanded(!expanded);
97
   const toggleAccordion = () => setExpanded(!expanded);
98
 
98
 
99
+  const renderChildren =
100
+    !props.unmountWhenCollapsed || (props.unmountWhenCollapsed && expanded);
99
   return (
101
   return (
100
     <View style={props.style}>
102
     <View style={props.style}>
101
       <List.Item
103
       <List.Item
125
       />
127
       />
126
       {enabled ? (
128
       {enabled ? (
127
         <Collapsible collapsed={!expanded}>
129
         <Collapsible collapsed={!expanded}>
128
-          {!props.unmountWhenCollapsed ||
129
-          (props.unmountWhenCollapsed && expanded)
130
-            ? props.children
131
-            : null}
130
+          {renderChildren ? props.renderItem() : null}
132
         </Collapsible>
131
         </Collapsible>
133
       ) : null}
132
       ) : null}
134
     </View>
133
     </View>

+ 10
- 7
src/components/Lists/Clubs/ClubListHeader.tsx View File

94
             icon="star"
94
             icon="star"
95
           />
95
           />
96
         )}
96
         )}
97
-        opened
98
-      >
99
-        <Text style={styles.text}>
100
-          {i18n.t('screens.clubs.categoriesFilterMessage')}
101
-        </Text>
102
-        <View style={styles.chipContainer}>{getCategoriesRender()}</View>
103
-      </AnimatedAccordion>
97
+        opened={true}
98
+        renderItem={() => (
99
+          <View>
100
+            <Text style={styles.text}>
101
+              {i18n.t('screens.clubs.categoriesFilterMessage')}
102
+            </Text>
103
+            <View style={styles.chipContainer}>{getCategoriesRender()}</View>
104
+          </View>
105
+        )}
106
+      />
104
     </Card>
107
     </Card>
105
   );
108
   );
106
 }
109
 }

+ 12
- 11
src/components/Lists/DashboardEdit/DashboardEditAccordion.tsx View File

84
             />
84
             />
85
           )
85
           )
86
         }
86
         }
87
-      >
88
-        <FlatList
89
-          data={item.content}
90
-          extraData={props.activeDashboard.toString()}
91
-          renderItem={getRenderItem}
92
-          listKey={item.key}
93
-          // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
94
-          getItemLayout={getItemLayout}
95
-          removeClippedSubviews
96
-        />
97
-      </AnimatedAccordion>
87
+        renderItem={() => (
88
+          <FlatList
89
+            data={item.content}
90
+            extraData={props.activeDashboard.toString()}
91
+            renderItem={getRenderItem}
92
+            listKey={item.key}
93
+            // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
94
+            getItemLayout={getItemLayout}
95
+            removeClippedSubviews={true}
96
+          />
97
+        )}
98
+      />
98
     </View>
99
     </View>
99
   );
100
   );
100
 }
101
 }

+ 13
- 12
src/components/Lists/PlanexGroups/GroupListAccordion.tsx View File

105
         (isFavorite && !isEmptyFavorite)
105
         (isFavorite && !isEmptyFavorite)
106
       }
106
       }
107
       enabled={!isEmptyFavorite}
107
       enabled={!isEmptyFavorite}
108
-    >
109
-      <FlatList
110
-        data={props.item.content}
111
-        extraData={props.currentSearchString + props.favorites.length}
112
-        renderItem={getRenderItem}
113
-        keyExtractor={keyExtractor}
114
-        listKey={props.item.id.toString()}
115
-        // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
116
-        getItemLayout={itemLayout}
117
-        removeClippedSubviews={true}
118
-      />
119
-    </AnimatedAccordion>
108
+      renderItem={() => (
109
+        <FlatList
110
+          data={props.item.content}
111
+          extraData={props.currentSearchString + props.favorites.length}
112
+          renderItem={getRenderItem}
113
+          keyExtractor={keyExtractor}
114
+          listKey={props.item.id.toString()}
115
+          // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
116
+          getItemLayout={itemLayout}
117
+          removeClippedSubviews={true}
118
+        />
119
+      )}
120
+    />
120
   );
121
   );
121
 }
122
 }
122
 
123
 

Loading…
Cancel
Save