Spaces:
Running
Running
File size: 4,678 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
/*
NOTE: this file only temporarily resides in scratch-gui.
Nearly identical code appears in scratch-www, and the two should
eventually be consolidated.
*/
import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
import MenuBarMenu from './menu-bar-menu.jsx';
import {MenuSection} from '../menu/menu.jsx';
import MenuItemContainer from '../../containers/menu-item.jsx';
import UserAvatar from './user-avatar.jsx';
import dropdownCaret from './dropdown-caret.svg';
import styles from './account-nav.css';
const AccountNavComponent = ({
className,
classroomId,
isEducator,
isOpen,
isRtl,
isStudent,
menuBarMenuClassName,
onClick,
onClose,
onLogOut,
profileUrl,
thumbnailUrl,
username
}) => (
<React.Fragment>
<div
className={classNames(
styles.userInfo,
className
)}
onMouseUp={onClick}
>
{thumbnailUrl ? (
<UserAvatar
className={styles.avatar}
imageUrl={thumbnailUrl}
/>
) : null}
<span className={styles.profileName}>
{username}
</span>
<div className={styles.dropdownCaretPosition}>
<img
className={styles.dropdownCaretIcon}
src={dropdownCaret}
/>
</div>
</div>
<MenuBarMenu
className={menuBarMenuClassName}
open={isOpen}
// note: the Rtl styles are switched here, because this menu is justified
// opposite all the others
place={isRtl ? 'right' : 'left'}
onRequestClose={onClose}
>
<MenuItemContainer href={profileUrl}>
<FormattedMessage
defaultMessage="Profile"
description="Text to link to my user profile, in the account navigation menu"
id="gui.accountMenu.profile"
/>
</MenuItemContainer>
<MenuItemContainer href="/mystuff/">
<FormattedMessage
defaultMessage="My Stuff"
description="Text to link to list of my projects, in the account navigation menu"
id="gui.accountMenu.myStuff"
/>
</MenuItemContainer>
{isEducator ? (
<MenuItemContainer href="/educators/classes/">
<FormattedMessage
defaultMessage="My Classes"
description="Text to link to my classes (if I am a teacher), in the account navigation menu"
id="gui.accountMenu.myClasses"
/>
</MenuItemContainer>
) : null}
{isStudent ? (
<MenuItemContainer href={`/classes/${classroomId}/`}>
<FormattedMessage
defaultMessage="My Class"
description="Text to link to my class (if I am a student), in the account navigation menu"
id="gui.accountMenu.myClass"
/>
</MenuItemContainer>
) : null}
<MenuItemContainer href="/accounts/settings/">
<FormattedMessage
defaultMessage="Account settings"
description="Text to link to my account settings, in the account navigation menu"
id="gui.accountMenu.accountSettings"
/>
</MenuItemContainer>
<MenuSection>
<MenuItemContainer onClick={onLogOut}>
<FormattedMessage
defaultMessage="Sign out"
description="Text to link to sign out, in the account navigation menu"
id="gui.accountMenu.signOut"
/>
</MenuItemContainer>
</MenuSection>
</MenuBarMenu>
</React.Fragment>
);
AccountNavComponent.propTypes = {
className: PropTypes.string,
classroomId: PropTypes.string,
isEducator: PropTypes.bool,
isOpen: PropTypes.bool,
isRtl: PropTypes.bool,
isStudent: PropTypes.bool,
menuBarMenuClassName: PropTypes.string,
onClick: PropTypes.func,
onClose: PropTypes.func,
onLogOut: PropTypes.func,
profileUrl: PropTypes.string,
thumbnailUrl: PropTypes.string,
username: PropTypes.string
};
export default AccountNavComponent;
|