@100mslive/react-native-room-kit/lib/module/components/Participants/ParticipantsGroupHeader.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 { useSelector } from 'react-redux';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
// import type { HMSRole } from '@100mslive/react-native-hms';

import { useHMSRoomStyleSheet } from '../../hooks-util';
import { ChevronIcon, ThreeDotsIcon } from '../../Icons';
import { Menu } from '../MenuModal';
import { ParticipantsGroupOptions } from './ParticipantsGroupOptions';
import { TestIds } from '../../utils/constants';
// import type { RootState } from '../../redux';
// import { isParticipantHostOrBroadcaster } from '../../utils/functions';

const _ParticipantsGroupHeader = ({
  id,
  label,
  expanded,
  onBackPress,
  toggleExpanded
}) => {
  // const selfHostOrBroadcaster = useSelector((state: RootState) => {
  //   const selfRole = state.hmsStates.localPeer?.role;
  //   return selfRole && isParticipantHostOrBroadcaster(selfRole);
  // });

  const [optionsVisible, setOptionsVisible] = React.useState(false);
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    container: {
      borderColor: theme.palette.border_bright
    },
    label: {
      color: theme.palette.on_surface_medium,
      fontFamily: `${typography.font_family}-SemiBold`
    },
    menu: {
      backgroundColor: theme.palette.surface_default,
      borderColor: theme.palette.border_bright
    }
  }));
  const show3Dots = false;
  // const show3Dots =
  //   selfHostOrBroadcaster &&
  //   ('role' in data
  //     ? !isParticipantHostOrBroadcaster(data.role)
  //     : data.id === 'hand-raised');

  const showOptions = () => setOptionsVisible(true);
  const hideOptions = () => setOptionsVisible(false);
  const toggleGroupExpand = toggleExpanded ? () => {
    toggleExpanded(expanded ? null : id);
  } : null;
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, expanded ? styles.expandedContainer : null, hmsRoomStyles.container]
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      alignItems: 'center'
    }
  }, onBackPress ? /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: TestIds.participants_group_back_btn,
    style: {
      marginRight: 8
    },
    onPress: onBackPress
  }, /*#__PURE__*/React.createElement(ChevronIcon, {
    direction: "left"
  })) : null, /*#__PURE__*/React.createElement(Text, {
    testID: TestIds.participants_group_name,
    style: [styles.label, hmsRoomStyles.label]
  }, label)), /*#__PURE__*/React.createElement(View, {
    style: styles.controls
  }, show3Dots ? /*#__PURE__*/React.createElement(Menu, {
    visible: optionsVisible,
    onRequestClose: hideOptions,
    anchor: /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.control,
      onPress: showOptions
    }, /*#__PURE__*/React.createElement(ThreeDotsIcon, {
      stack: "vertical"
    })),
    style: {
      ...styles.menu,
      ...hmsRoomStyles.menu
    }
  }, /*#__PURE__*/React.createElement(ParticipantsGroupOptions, null)) : null, toggleGroupExpand ? /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: expanded ? TestIds.participants_group_collapse_btn : TestIds.participants_group_expand_btn,
    style: [styles.control, expanded ? styles.expandedArrowIcon : null],
    onPress: toggleGroupExpand
  }, /*#__PURE__*/React.createElement(ChevronIcon, {
    direction: "down"
  })) : null));
};
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingVertical: 12,
    paddingHorizontal: 16,
    justifyContent: 'space-between'
  },
  label: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.1
  },
  expandedContainer: {
    borderBottomWidth: 1
  },
  controls: {
    flexDirection: 'row'
  },
  control: {
    marginLeft: 16
  },
  expandedArrowIcon: {
    transform: [{
      rotateZ: '180deg'
    }]
  },
  menu: {
    borderWidth: 1,
    borderRadius: 8,
    backgroundColor: 'transparent'
  }
});
export const ParticipantsGroupHeader = /*#__PURE__*/React.memo(_ParticipantsGroupHeader);
//# sourceMappingURL=ParticipantsGroupHeader.js.map