jiti-meet/react/features/participants-pane/components/native/CollapsibleList.js

66 lines
1.8 KiB
JavaScript
Raw Normal View History

// @flow
import React, { useCallback, useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { Icon, IconArrowDown, IconArrowUp } from '../../../base/icons';
import { StyleType } from '../../../base/styles';
import styles from '../breakout-rooms/components/native/styles';
type Props = {
/**
* The children to be displayed within this list.
*/
children: React$Node,
/**
* Additional style to be appended to the CollapsibleList container.
*/
containerStyle?: StyleType,
/**
* Callback to invoke when the {@code CollapsibleList} is long pressed.
*/
onLongPress?: Function,
/**
2022-08-30 14:21:58 +00:00
* Collapsible list title.
*/
title: Object
}
const CollapsibleList = ({ children, containerStyle, onLongPress, title }: Props) => {
const [ collapsed, setCollapsed ] = useState(false);
const _toggleCollapsed = useCallback(() => {
setCollapsed(!collapsed);
}, [ collapsed ]);
return (
<View style = { !collapsed && containerStyle }>
<TouchableOpacity
onLongPress = { onLongPress }
onPress = { _toggleCollapsed }
style = { styles.collapsibleList }>
<TouchableOpacity
onPress = { _toggleCollapsed }
style = { styles.arrowIcon }>
<Icon
size = { 18 }
src = { collapsed ? IconArrowDown : IconArrowUp } />
</TouchableOpacity>
<Text style = { styles.listTile }>
{
title
}
</Text>
</TouchableOpacity>
{
!collapsed && children
}
</View>
);
};
export default CollapsibleList;