@100mslive/react-native-room-kit/lib/module/components/Participants/MultiRoleParticipantsList.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { useFilteredParticipants, useHMSRoomStyle } from '../../hooks-util';
import { ParticipantsAccordian } from './ParticipantsAccordian';
export const MultiRoleParticipantsList = ({
  searchText,
  onViewAllPress
}) => {
  const {
    data,
    formattedSearchText,
    expandedGroup,
    setExpandedGroup
  } = useFilteredParticipants(searchText);
  const emptyTextStyles = useHMSRoomStyle((theme, typography) => ({
    color: theme.palette.on_surface_medium,
    fontFamily: `${typography.font_family}-SemiBold`
  }));
  const searchTextExists = formattedSearchText.length > 0;
  if (searchTextExists && data.length <= 0) {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.emptyContainer
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.emptyText, emptyTextStyles]
    }, "No results found..."));
  }
  return /*#__PURE__*/React.createElement(ScrollView, {
    contentContainerStyle: {
      paddingBottom: 40
    }
  }, data.map(item => /*#__PURE__*/React.createElement(ParticipantsAccordian, {
    key: item.id,
    open: expandedGroup === item.id,
    data: item,
    toggle: setExpandedGroup,
    showViewAll: item.showViewAll,
    onViewAllPress: onViewAllPress
  })));
};
const styles = StyleSheet.create({
  list: {
    paddingBottom: 32
  },
  emptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  emptyText: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.25
  }
});
//# sourceMappingURL=MultiRoleParticipantsList.js.map