Changeset View
Changeset View
Standalone View
Standalone View
web/settings/relationship/block-list-row.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; | import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; | ||||
import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt.js'; | import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt.js'; | ||||
import css from './user-list-row.css'; | import css from './user-list-row.css'; | ||||
import type { UserRowProps } from './user-list.react.js'; | import type { UserRowProps } from './user-list.react.js'; | ||||
import MenuItem from '../../components/menu-item.react.js'; | import MenuItem from '../../components/menu-item.react.js'; | ||||
import Menu from '../../components/menu.react.js'; | import Menu from '../../components/menu.react.js'; | ||||
import UserAvatar from '../../components/user-avatar.react.js'; | |||||
function BlockListRow(props: UserRowProps): React.Node { | function BlockListRow(props: UserRowProps): React.Node { | ||||
const { userInfo, onMenuVisibilityChange } = props; | const { userInfo, onMenuVisibilityChange } = props; | ||||
const { unblockUser } = useRelationshipCallbacks(userInfo.id); | const { unblockUser } = useRelationshipCallbacks(userInfo.id); | ||||
const editIcon = <SWMansionIcon icon="edit-1" size={22} />; | const editIcon = <SWMansionIcon icon="edit-1" size={22} />; | ||||
return ( | return ( | ||||
<div className={css.container}> | <div className={css.container}> | ||||
<div className={css.userInfoContainer}> | |||||
<UserAvatar size="small" userID={userInfo.id} /> | |||||
<div className={css.usernameContainer}>{userInfo.username}</div> | <div className={css.usernameContainer}>{userInfo.username}</div> | ||||
</div> | |||||
<div className={css.buttons}> | <div className={css.buttons}> | ||||
<div className={css.edit_menu}> | <div className={css.edit_menu}> | ||||
<Menu | <Menu | ||||
onChange={onMenuVisibilityChange} | onChange={onMenuVisibilityChange} | ||||
icon={editIcon} | icon={editIcon} | ||||
variant="member-actions" | variant="member-actions" | ||||
> | > | ||||
<MenuItem text="Unblock" icon="user-plus" onClick={unblockUser} /> | <MenuItem text="Unblock" icon="user-plus" onClick={unblockUser} /> | ||||
</Menu> | </Menu> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
export default BlockListRow; | export default BlockListRow; |