@100mslive/roomkit-react 0.1.14-alpha.0 → 0.1.14-alpha.2

package/src/Prebuilt/components/Chat/ChatSelector.jsx

@@ -1,161 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import {
-  selectMessagesUnreadCountByPeerID,
-  selectMessagesUnreadCountByRole,
-  selectRemotePeers,
-  selectUnreadHMSMessagesCount,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { CheckIcon } from '@100mslive/react-icons';
-import { Box, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../../';
-import { ParticipantSearch } from '../Footer/ParticipantList';
-import { useFilteredRoles } from '../../common/hooks';
-
-const ChatDotIcon = () => {
-  return <Box css={{ size: '$6', bg: '$primary_default', mx: '$2', r: '$round' }} />;
-};
-
-const SelectorItem = ({ value, active, onClick, unreadCount }) => {
-  return (
-    <Dropdown.Item
-      data-testid="chat_members"
-      css={{ align: 'center', px: '$10', bg: '$surface_default' }}
-      onClick={onClick}
-    >
-      <Text variant="sm">{value}</Text>
-      <Flex align="center" css={{ ml: 'auto', color: '$on_primary_high' }}>
-        {unreadCount > 0 && (
-          <Tooltip title={`${unreadCount} unread`}>
-            <Box css={{ mr: active ? '$3' : 0 }}>
-              <ChatDotIcon />
-            </Box>
-          </Tooltip>
-        )}
-        {active && <CheckIcon width={16} height={16} />}
-      </Flex>
-    </Dropdown.Item>
-  );
-};
-
-const SelectorHeader = React.memo(({ children }) => {
-  return (
-    <Box css={{ flexShrink: 0 }}>
-      <HorizontalDivider space={4} />
-      <Text variant="md" css={{ p: '$4 $10', fontWeight: '$semiBold' }}>
-        {children}
-      </Text>
-    </Box>
-  );
-});
-
-const Everyone = React.memo(({ onSelect, active }) => {
-  const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);
-  return (
-    <SelectorItem
-      value="Everyone"
-      active={active}
-      unreadCount={unreadCount}
-      onClick={() => {
-        onSelect({ role: '', peerId: '', selection: 'Everyone' });
-      }}
-    />
-  );
-});
-
-const RoleItem = React.memo(({ onSelect, role, active }) => {
-  const unreadCount = useHMSStore(selectMessagesUnreadCountByRole(role));
-  return (
-    <SelectorItem
-      value={role}
-      active={active}
-      unreadCount={unreadCount}
-      onClick={() => {
-        onSelect({ role: role, selection: role });
-      }}
-    />
-  );
-});
-
-const PeerItem = ({ onSelect, peerId, name, active }) => {
-  const unreadCount = useHMSStore(selectMessagesUnreadCountByPeerID(peerId));
-  return (
-    <SelectorItem
-      value={name}
-      active={active}
-      unreadCount={unreadCount}
-      onClick={() => {
-        onSelect({ role: '', peerId, selection: name });
-      }}
-    />
-  );
-};
-
-const VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, searchValue, onSelect }) => {
-  const roles = useFilteredRoles();
-  const filteredPeers = useMemo(
-    () =>
-      peers.filter(
-        // search should be empty or search phrase should be included in name
-        peer => !searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase()),
-      ),
-    [peers, searchValue],
-  );
-
-  const listItems = useMemo(() => {
-    const selectItems = [<Everyone onSelect={onSelect} active={!selectedRole && !selectedPeerId} />];
-
-    roles.length > 0 && selectItems.push(<SelectorHeader>Roles</SelectorHeader>);
-    roles.forEach(userRole =>
-      selectItems.push(
-        <RoleItem key={userRole} active={selectedRole === userRole} role={userRole} onSelect={onSelect} />,
-      ),
-    );
-
-    filteredPeers.length > 0 && selectItems.push(<SelectorHeader>Participants</SelectorHeader>);
-    filteredPeers.forEach(peer =>
-      selectItems.push(
-        <PeerItem
-          key={peer.id}
-          name={peer.name}
-          peerId={peer.id}
-          active={peer.id === selectedPeerId}
-          onSelect={onSelect}
-        />,
-      ),
-    );
-
-    return selectItems;
-  }, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]);
-
-  return (
-    <Dropdown.Group css={{ overflowY: 'auto', maxHeight: '$64', bg: '$surface_default' }}>
-      <Box>
-        {listItems.map((item, index) => (
-          <Box key={index}>{item}</Box>
-        ))}
-      </Box>
-    </Dropdown.Group>
-  );
-};
-
-export const ChatSelector = ({ role, peerId, onSelect }) => {
-  const peers = useHMSStore(selectRemotePeers);
-  const [search, setSearch] = useState('');
-
-  return (
-    <>
-      {peers.length > 0 && (
-        <Box css={{ px: '$4' }}>
-          <ParticipantSearch onSearch={setSearch} placeholder="Search for participants" />
-        </Box>
-      )}
-      <VirtualizedSelectItemList
-        selectedRole={role}
-        selectedPeerId={peerId}
-        onSelect={onSelect}
-        peers={peers}
-        searchValue={search}
-      />
-    </>
-  );
-};

package/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx

@@ -1,81 +0,0 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';
-import { Dropdown } from '../../../Dropdown';
-import { Flex } from '../../../Layout';
-import { Sheet } from '../../../Sheet';
-import { Text } from '../../../Text';
-import { config as cssConfig } from '../../../Theme';
-import { ChatSelector } from './ChatSelector';
-import { textEllipsis } from '../../../utils';
-
-export const ChatSelectorContainer = ({ onSelect, role, peerId, selection }) => {
-  const [open, setOpen] = useState(false);
-  const isMobile = useMedia(cssConfig.media.md);
-
-  return (
-    <Flex align="center" css={{ mb: '$8' }}>
-      <Text variant="tiny" css={{ color: '$on_surface_medium', textTransform: 'uppercase' }}>
-        Send To
-      </Text>
-
-      <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
-        <Dropdown.Trigger
-          asChild
-          data-testid="participant_list_filter"
-          css={{
-            border: '1px solid $border_bright',
-            r: '$0',
-            p: '$1 $2',
-            ml: '$8',
-          }}
-          tabIndex={0}
-        >
-          <Flex align="center" css={{ c: '$on_surface_medium' }}>
-            <Text variant="tiny" css={{ ...textEllipsis(80), textTransform: 'uppercase', c: '$on_surface_high' }}>
-              {selection}
-            </Text>
-            {open ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
-          </Flex>
-        </Dropdown.Trigger>
-
-        <Dropdown.Content
-          css={{
-            w: '$64',
-            overflow: 'hidden',
-            maxHeight: 'unset',
-            bg: '$surface_default',
-          }}
-          align="start"
-          sideOffset={8}
-        >
-          {isMobile ? (
-            <Sheet.Root open={open} onOpenChange={value => setOpen(value)}>
-              <Sheet.Content css={{ pt: '$8' }}>
-                <Sheet.Title
-                  css={{
-                    display: 'flex',
-                    w: '100%',
-                    justifyContent: 'space-between',
-                    px: '$10',
-                    pb: '$4',
-                    mb: '$8',
-                    borderBottom: '1px solid $border_bright',
-                  }}
-                >
-                  <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>Send message to</Text>
-                  <Sheet.Close css={{ color: '$on_surface_medium' }}>
-                    <CrossIcon />
-                  </Sheet.Close>
-                </Sheet.Title>
-                <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
-              </Sheet.Content>
-            </Sheet.Root>
-          ) : (
-            <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
-          )}
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </Flex>
-  );
-};

package/src/Prebuilt/components/Chat/useUnreadCount.js

@@ -1,17 +0,0 @@
-import {
-  selectMessagesUnreadCountByPeerID,
-  selectMessagesUnreadCountByRole,
-  selectUnreadHMSMessagesCount,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-
-export const useUnreadCount = ({ role, peerId }) => {
-  const unreadCountSelector = role
-    ? selectMessagesUnreadCountByRole(role)
-    : peerId
-    ? selectMessagesUnreadCountByPeerID(peerId)
-    : selectUnreadHMSMessagesCount;
-
-  const unreadCount = useHMSStore(unreadCountSelector);
-  return unreadCount;
-};