Page MenuHomePhabricator
Files F3486431

D3379.diff
No OneTemporary
Actions

D3379.diff
View Options

diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/members/member.react.js
@@ -0,0 +1,79 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { memberIsAdmin, memberHasAdminPowers } from 'lib/shared/thread-utils';
+import { stringForUser } from 'lib/shared/user-utils';
+import type { SetState } from 'lib/types/hook-types';
+import {
+ type RelativeMemberInfo,
+ type ThreadInfo,
+} from 'lib/types/thread-types';
+
+import Label from '../../../components/label.react';
+import Menu from '../../../components/menu.react';
+import SWMansionIcon from '../../../SWMansionIcon.react';
+import css from './members-modal.css';
+
+type Props = {
+ +memberInfo: RelativeMemberInfo,
+ +threadInfo: ThreadInfo,
+ +setOpenMenu: SetState<?string>,
+ +isMenuOpen: boolean,
+};
+
+function ThreadMember(props: Props): React.Node {
+ const { memberInfo, threadInfo, setOpenMenu, isMenuOpen } = props;
+ const userName = stringForUser(memberInfo);
+
+ const onMenuChange = React.useCallback(
+ menuOpen => {
+ if (menuOpen) {
+ setOpenMenu(() => memberInfo.id);
+ } else {
+ setOpenMenu(menu => (menu === memberInfo.id ? null : menu));
+ }
+ },
+ [memberInfo.id, setOpenMenu],
+ );
+
+ const menuItems = [];
+
+ const userSettingsIcon = React.useMemo(
+ () => <SWMansionIcon icon="edit" size={17} />,
+ [],
+ );
+
+ const label = React.useMemo(() => {
+ if (memberIsAdmin(memberInfo, threadInfo)) {
+ return <Label>Admin</Label>;
+ } else if (memberHasAdminPowers(memberInfo)) {
+ return <Label>Parent admin</Label>;
+ }
+ return null;
+ }, [memberInfo, threadInfo]);
+
+ const memberContainerClasses = classNames(css.memberContainer, {
+ [css.memberContainerWithMenuOpen]: isMenuOpen,
+ });
+
+ return (
+ <div className={memberContainerClasses}>
+ <div className={css.memberInfo}>
+ {userName} {label}
+ </div>
+ <div className={css.memberAction}>
+ <Menu
+ icon={userSettingsIcon}
+ variant="member-actions"
+ onChange={onMenuChange}
+ >
+ {menuItems}
+ </Menu>
+ </div>
+ </div>
+ );
+}
+
+export default ThreadMember;
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/members/members-modal.css
@@ -0,0 +1,25 @@
+div.memberContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 8px 16px;
+}
+
+div.memberContainer:hover {
+ color: var(--members-modal-member-text-hover);
+}
+
+div.memberContainerWithMenuOpen {
+ color: var(--members-modal-member-text-hover);
+}
+
+div.memberInfo {
+ font-size: var(--l-font-18);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+div.memberAction {
+ position: relative;
+}

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 19, 4:57 AM (21 h, 3 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2675368
Default Alt Text
D3379.diff (2 KB)

Event Timeline