From 699f67aa75323eba3799fa8eaa9baacc7fe26254 Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Thu, 3 Mar 2022 18:36:09 +0530 Subject: [PATCH] Add rooms category component Signed-off-by: Ajay Bura --- .../organisms/navigation/RoomsCategory.jsx | 92 +++++++++++++++++++ .../organisms/navigation/RoomsCategory.scss | 54 +++++++++++ 2 files changed, 146 insertions(+) create mode 100644 src/app/organisms/navigation/RoomsCategory.jsx create mode 100644 src/app/organisms/navigation/RoomsCategory.scss diff --git a/src/app/organisms/navigation/RoomsCategory.jsx b/src/app/organisms/navigation/RoomsCategory.jsx new file mode 100644 index 0000000..f31e72f --- /dev/null +++ b/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) => , + ); + }; + + const openHomeSpaceOptions = (e) => { + e.preventDefault(); + openReusableContextMenu( + 'right', + getEventCords(e, '.ic-btn'), + (closeMenu) => , + ); + }; + + const renderSelector = (roomId) => { + const isSpace = spaces.has(roomId); + const isDM = directs.has(roomId); + + return ( + (isSpace ? selectSpace(roomId) : selectRoom(roomId))} + /> + ); + }; + + return ( +
+ {!hideHeader && ( +
+ + {spaceId && } + {spaceId && } +
+ )} + {(isOpen || hideHeader) && ( +
+ {roomIds.map(renderSelector)} +
+ )} +
+ ); +} +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; diff --git a/src/app/organisms/navigation/RoomsCategory.scss b/src/app/organisms/navigation/RoomsCategory.scss new file mode 100644 index 0000000..841290c --- /dev/null +++ b/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); + } +} \ No newline at end of file