Page MenuHomePhorge
Files F32404962

D3383.1765342595.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D3383.1765342595.diff
View Options

diff --git a/web/modals/threads/members/members-list.react.js b/web/modals/threads/members/members-list.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/members/members-list.react.js
@@ -0,0 +1,78 @@
+// @flow
+
+import classNames from 'classnames';
+import _ from 'lodash';
+import * as React from 'react';
+
+import { stringForUser } from 'lib/shared/user-utils';
+import {
+ type ThreadInfo,
+ type RelativeMemberInfo,
+} from 'lib/types/thread-types';
+
+import ThreadMember from './member.react';
+import css from './members-modal.css';
+
+type Props = {
+ +threadInfo: ThreadInfo,
+ +threadMembers: $ReadOnlyArray<RelativeMemberInfo>,
+};
+
+function ThreadMembersList(props: Props): React.Node {
+ const { threadMembers, threadInfo } = props;
+ const [openMenus, setOpenMenus] = React.useState([]);
+ const userExists = threadMembers.length > 0;
+
+ const groupedByFirstLetterMembers = React.useMemo(
+ () => _.groupBy(threadMembers, member => stringForUser(member)[0]),
+ [threadMembers],
+ );
+
+ const groupedMembersList = React.useMemo(
+ () =>
+ _.toPairs(groupedByFirstLetterMembers)
+ .sort((a, b) => a[0].localeCompare(b[0]))
+ .map(([letter, users]) => {
+ const userList = users.map((user: RelativeMemberInfo) => (
+ <ThreadMember
+ key={user.id}
+ memberInfo={user}
+ threadInfo={threadInfo}
+ onMenuChange={menuOpen => {
+ if (menuOpen) {
+ setOpenMenus(menus => [...menus, user.id]);
+ } else {
+ setOpenMenus(menus => menus.filter(id => id !== user.id));
+ }
+ }}
+ />
+ ));
+ const letterHeader = (
+ <div className={css.memberletterHeader} key={letter}>
+ {letter.toUpperCase()}
+ </div>
+ );
+ return (
+ <React.Fragment key={letter}>
+ {letterHeader}
+ {userList}
+ </React.Fragment>
+ );
+ }),
+ [groupedByFirstLetterMembers, threadInfo],
+ );
+ let content = groupedMembersList;
+ if (!userExists) {
+ content = (
+ <div className={css.noUsers}>
+ No matching users were found in the thread!
+ </div>
+ );
+ }
+ const membersListClasses = classNames(css.membersList, {
+ [css.noScroll]: !!openMenus.length,
+ });
+ return <div className={membersListClasses}>{content}</div>;
+}
+
+export default ThreadMembersList;
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -1,3 +1,13 @@
+div.membersList {
+ overflow: scroll;
+ padding: 8px 0;
+ color: var(--members-modal-member-text);
+}
+
+div.noScroll {
+ overflow: hidden;
+}
+
div.memberContainer {
display: flex;
flex-direction: row;
@@ -23,3 +33,14 @@
div.memberAction {
position: relative;
}
+
+div.memberletterHeader {
+ margin: 16px;
+ color: var(--members-modal-member-text);
+ font-size: var(--s-font-14);
+}
+
+div.noUsers {
+ padding-top: 16px;
+ text-align: center;
+}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -122,6 +122,8 @@
--tabs-header-background-border: var(--shades-black-80);
--tabs-header-background-color-hover: var(--shades-white-80);
--tabs-header-background-border-hover: var(--shades-black-70);
+ --members-modal-member-text: var(--shades-black-60);
+ --members-modal-member-text-hover: var(--shades-white-100);
--label-default-bg: var(--violet-dark-80);
--label-default-color: var(--shades-white-80);
}

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 10, 4:56 AM (15 h, 9 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5861127
Default Alt Text
D3383.1765342595.diff (3 KB)

Event Timeline