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, + +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( + () => , + [], + ); + + const label = React.useMemo(() => { + if (memberIsAdmin(memberInfo, threadInfo)) { + return ; + } else if (memberHasAdminPowers(memberInfo)) { + return ; + } + return null; + }, [memberInfo, threadInfo]); + + const memberContainerClasses = classNames(css.memberContainer, { + [css.memberContainerWithMenuOpen]: isMenuOpen, + }); + + return ( +
+
+ {userName} {label} +
+
+ + {menuItems} + +
+
+ ); +} + +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; +}