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

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

@@ -94,13 +94,16 @@ function ClubListHeader(props: PropsType) {
94 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 107
     </Card>
105 108
   );
106 109
 }

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

@@ -84,17 +84,18 @@ function DashboardEditAccordion(props: PropsType) {
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 99
     </View>
99 100
   );
100 101
 }

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

@@ -105,18 +105,19 @@ function GroupListAccordion(props: PropsType) {
105 105
         (isFavorite && !isEmptyFavorite)
106 106
       }
107 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