bquintan/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Move accordion children in prop

Browse source
This commit is contained in:
Arnaud Vergnet 2021-05-13 18:20:47 +02:00
parent 52651ecf85
commit a1cfb0385a
4 changed files with 39 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/Animations/AnimatedAccordion.tsx
View file

@ -38,7 +38,7 @@ type PropsType = {
opened?: boolean;
unmountWhenCollapsed?: boolean;
enabled?: boolean;
children?: React.ReactNode;
renderItem: () => React.ReactNode;
};
function AnimatedAccordion(props: PropsType) {
@ -96,6 +96,8 @@ function AnimatedAccordion(props: PropsType) {
const toggleAccordion = () => setExpanded(!expanded);
const renderChildren =
!props.unmountWhenCollapsed || (props.unmountWhenCollapsed && expanded);
return (
<View style={props.style}>
<List.Item
@ -125,10 +127,7 @@ function AnimatedAccordion(props: PropsType) {
/>
{enabled ? (
<Collapsible collapsed={!expanded}>
{!props.unmountWhenCollapsed ||
(props.unmountWhenCollapsed && expanded)
? props.children
: null}
{renderChildren ? props.renderItem() : null}
</Collapsible>
) : null}
</View>

17
src/components/Lists/Clubs/ClubListHeader.tsx
View file

@ -94,13 +94,16 @@ function ClubListHeader(props: PropsType) {
icon="star"
/>
)}
opened
>
<Text style={styles.text}>
{i18n.t('screens.clubs.categoriesFilterMessage')}
</Text>
<View style={styles.chipContainer}>{getCategoriesRender()}</View>
</AnimatedAccordion>
opened={true}
renderItem={() => (
<View>
<Text style={styles.text}>
{i18n.t('screens.clubs.categoriesFilterMessage')}
</Text>
<View style={styles.chipContainer}>{getCategoriesRender()}</View>
</View>
)}
/>
</Card>
);
}

23
src/components/Lists/DashboardEdit/DashboardEditAccordion.tsx
View file

@ -84,17 +84,18 @@ function DashboardEditAccordion(props: PropsType) {
/>
)
}
>
<FlatList
data={item.content}
extraData={props.activeDashboard.toString()}
renderItem={getRenderItem}
listKey={item.key}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={getItemLayout}
removeClippedSubviews
/>
</AnimatedAccordion>
renderItem={() => (
<FlatList
data={item.content}
extraData={props.activeDashboard.toString()}
renderItem={getRenderItem}
listKey={item.key}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={getItemLayout}
removeClippedSubviews={true}
/>
)}
/>
</View>
);
}

25
src/components/Lists/PlanexGroups/GroupListAccordion.tsx
View file

@ -105,18 +105,19 @@ function GroupListAccordion(props: PropsType) {
(isFavorite && !isEmptyFavorite)
}
enabled={!isEmptyFavorite}
>
<FlatList
data={props.item.content}
extraData={props.currentSearchString + props.favorites.length}
renderItem={getRenderItem}
keyExtractor={keyExtractor}
listKey={props.item.id.toString()}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={itemLayout}
removeClippedSubviews={true}
/>
</AnimatedAccordion>
renderItem={() => (
<FlatList
data={props.item.content}
extraData={props.currentSearchString + props.favorites.length}
renderItem={getRenderItem}
keyExtractor={keyExtractor}
listKey={props.item.id.toString()}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={itemLayout}
removeClippedSubviews={true}
/>
)}
/>
);
}