Add rooms category component

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/navigation/RoomsCategory.jsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './RoomsCategory.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { selectSpace, selectRoom,openReusableContextMenu } from '../../../client/action/navigation';
+import { getEventCords } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+import IconButton from '../../atoms/button/IconButton';
+import Selector from './Selector';
+import SpaceOptions from '../../molecules/space-options/SpaceOptions';
+import { HomeSpaceOptions } from './DrawerHeader';
+
+import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import HorizontalMenuIC from '../../../../public/res/ic/outlined/horizontal-menu.svg';
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
+
+function RoomsCategory({
+  spaceId, name, hideHeader, roomIds, drawerPostie,
+}) {
+  const { spaces, directs } = initMatrix.roomList;
+  const [isOpen, setIsOpen] = useState(true);
+
+  const openSpaceOptions = (e) => {
+    e.preventDefault();
+    openReusableContextMenu(
+      'bottom',
+      getEventCords(e, '.header'),
+      (closeMenu) => <SpaceOptions roomId={spaceId} afterOptionSelect={closeMenu} />,
+    );
+  };
+
+  const openHomeSpaceOptions = (e) => {
+    e.preventDefault();
+    openReusableContextMenu(
+      'right',
+      getEventCords(e, '.ic-btn'),
+      (closeMenu) => <HomeSpaceOptions spaceId={spaceId} afterOptionSelect={closeMenu} />,
+    );
+  };
+
+  const renderSelector = (roomId) => {
+    const isSpace = spaces.has(roomId);
+    const isDM = directs.has(roomId);
+
+    return (
+      <Selector
+        key={roomId}
+        roomId={roomId}
+        isDM={isDM}
+        drawerPostie={drawerPostie}
+        onClick={() => (isSpace ? selectSpace(roomId) : selectRoom(roomId))}
+      />
+    );
+  };
+
+  return (
+    <div className="room-category">
+      {!hideHeader && (
+        <div className="room-category__header">
+          <button className="room-category__toggle" onClick={() => setIsOpen(!isOpen)} type="button">
+            <RawIcon src={isOpen ? ChevronBottomIC : ChevronRightIC} size="extra-small" />
+            <Text className="cat-header" variant="b3" weight="medium">{name}</Text>
+          </button>
+          {spaceId && <IconButton onClick={openSpaceOptions} tooltip="Space options" src={HorizontalMenuIC} size="extra-small" />}
+          {spaceId && <IconButton onClick={openHomeSpaceOptions} tooltip="Add rooms/spaces" src={PlusIC} size="extra-small" />}
+        </div>
+      )}
+      {(isOpen || hideHeader) && (
+        <div className="room-category__content">
+          {roomIds.map(renderSelector)}
+        </div>
+      )}
+    </div>
+  );
+}
+RoomsCategory.defaultProps = {
+  spaceId: null,
+  hideHeader: false,
+};
+RoomsCategory.propTypes = {
+  spaceId: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  hideHeader: PropTypes.bool,
+  roomIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  drawerPostie: PropTypes.shape({}).isRequired,
+};
+
+export default RoomsCategory;

src/app/organisms/navigation/RoomsCategory.scss

@@ -0,0 +1,54 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+@use '../../partials/text';
+
+.room-category {
+  &__header,
+  &__toggle {
+    display: flex;
+    align-items: center;
+  }
+  &__header {
+    margin-top: var(--sp-extra-tight);
+
+    & .ic-btn {
+      padding: var(--sp-ultra-tight);
+      border-radius: 4px;
+      @include dir.side(margin, 0, 5px);
+      & .ic-raw {
+        width: 16px;
+        height: 16px;
+        background-color: var(--ic-surface-low);
+      }
+    }
+  }
+  &__toggle {
+    @extend .cp-fx__item-one;
+    padding: var(--sp-extra-tight) var(--sp-tight);
+    cursor: pointer;
+    
+    & .ic-raw {
+      flex-shrink: 0;
+      width: 12px;
+      height: 12px;
+      background-color: var(--ic-surface-low);
+      @include dir.side(margin, 0, var(--sp-ultra-tight));
+    }
+    & .text {
+      text-transform: uppercase;
+      @extend .cp-txt__ellipsis;
+    }
+    &:hover .text {
+      color: var(--tc-surface-normal);
+    }
+  }
+
+  &__content:first-child {
+    margin-top: var(--sp-extra-tight);
+  }
+  
+  & .room-selector {
+    width: calc(100% - var(--sp-extra-tight));
+    @include dir.side(margin, auto, 0);
+  }
+}