diff --git a/web/chat/member-list-sidebar/member-list-sidebar.css b/web/chat/member-list-sidebar/member-list-sidebar.css new file mode 100644 --- /dev/null +++ b/web/chat/member-list-sidebar/member-list-sidebar.css @@ -0,0 +1,15 @@ +.container { + padding: 0 8px 16px; + overflow-y: scroll; +} + +.roleNameText { + color: var(--text-background-tertiary-default); + font-size: var(--m-font-16); + font-weight: var(--semi-bold); + margin: 16px 0 8px 8px; +} + +div.noScroll { + overflow: hidden; +} diff --git a/web/chat/member-list-sidebar/member-list-sidebar.react.js b/web/chat/member-list-sidebar/member-list-sidebar.react.js new file mode 100644 --- /dev/null +++ b/web/chat/member-list-sidebar/member-list-sidebar.react.js @@ -0,0 +1,48 @@ +// @flow + +import classNames from 'classnames'; +import * as React from 'react'; + +import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; +import { useMembersGroupedByRole } from 'lib/utils/role-utils.js'; + +import css from './member-list-sidebar.css'; +import SortedMemberListGroup from './sorted-member-list-group.react.js'; +import { useSelector } from '../../redux/redux-utils.js'; + +type Props = { + +threadID: string, +}; + +function MembersListSidebar(props: Props): React.Node { + const { threadID } = props; + + const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); + + const membersGroupedByRole = useMembersGroupedByRole(threadInfo); + + const [openMenu, setOpenMenu] = React.useState(null); + + const groupedMemberList = membersGroupedByRole.map(groupedRoleInfo => { + const { roleName, memberInfos } = groupedRoleInfo; + + return ( + <> +
{roleName}
+ + + ); + }); + + const containerClassName = classNames(css.container, { + [css.noScroll]: !!openMenu, + }); + + return
{groupedMemberList}
; +} + +export default MembersListSidebar;