y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added profile component

Browse Source
This commit is contained in:
maciekglowacki 2020-06-10 21:40:33 +02:00
parent 19f75f2253
commit a4ada5fb79
3 changed files with 97 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/Profile/index.scss Normal file
View File

27
src/components/Profile/index.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Menu, MenuItem } from "@material-ui/core";
import React, { FC } from "react";
interface ProfileProps {
anchorEl: HTMLElement | null;
handleClose: () => void
}
export const Profile : FC<ProfileProps> = ({anchorEl, handleClose, ...restProps}) => {
return (
<Menu
className="top-bar__menu"
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>Logout</MenuItem>
</Menu>
);
};

169
src/components/TopBar/index.tsx
View File

@ -9,117 +9,88 @@ import User from "./user.png";
import CloseIcon from "./close.svg"; import CloseIcon from "./close.svg";
import Menu from "@material-ui/core/Menu"; import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@material-ui/core/MenuItem";
import { Profile } from "../Profile";
interface TopBarProps { interface TopBarProps {
handleTransfer: (e: React.MouseEvent) => void; handleTransfer: (e: React.MouseEvent) => void;
onLangChange: (lang:boolean) => void; onLangChange: (lang: boolean) => void;
textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void; textChangeHandler: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
} }
interface TopBarState { interface TopBarState {
isOpenProfile: boolean; isPolish: boolean;
anchorEl: HTMLElement | null; anchorEl: HTMLElement | null;
isPolish: boolean;
} }
export default class TopBar extends React.Component<TopBarProps, TopBarState> { export default class TopBar extends React.Component<TopBarProps, TopBarState> {
constructor(props: TopBarProps) { constructor(props: TopBarProps) {
super(props); super(props);
this.handleProfile = this.handleProfile.bind(this); this.handleProfile = this.handleProfile.bind(this);
this.handleClose = this.handleClose.bind(this); this.handleClose = this.handleClose.bind(this);
this.onLangChange = this.onLangChange.bind(this); this.onLangChange = this.onLangChange.bind(this);
this.handleTransfer = this.handleTransfer.bind(this); this.handleTransfer = this.handleTransfer.bind(this);
this.state = { this.state = {
isOpenProfile: false, isPolish: true,
anchorEl:null, anchorEl: null,
isPolish:true, };
}; }
}
handleChange(e: React.ChangeEvent<HTMLInputElement>) { handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
this.props.textChangeHandler(e); this.props.textChangeHandler(e);
} }
handleTransfer(e: React.MouseEvent) { handleTransfer(e: React.MouseEvent) {
this.props.handleTransfer(e); this.props.handleTransfer(e);
} }
onLangChange(e: React.MouseEvent) { onLangChange(e: React.MouseEvent) {
this.setState({ this.setState({
isPolish:!this.state.isPolish, isPolish: !this.state.isPolish,
}) });
this.props.onLangChange(this.state.isPolish); this.props.onLangChange(this.state.isPolish);
} }
handleProfile(e: React.MouseEvent) { handleProfile(event: React.MouseEvent<HTMLImageElement>) {
this.setState({ this.setState({
isOpenProfile: !this.state.isOpenProfile, anchorEl: event.currentTarget,
anchorEl:e.currentTarget as HTMLElement, });
}); }
}
handleClose(e: React.MouseEvent) { handleClose() {
this.setState({ this.setState({
isOpenProfile: !this.state.isOpenProfile, anchorEl: null,
}); });
} }
render() { render() {
return ( return (
<div className="top-bar"> <div className="top-bar">
<div className="top-bar__logo"> <div className="top-bar__logo">
<img <img className="top-bar__logo-image" alt="logo" src="https://plannaplan.pl/img/logo.svg" />
className="top-bar__logo-image" <div className="top-bar__tekst"> plan na plan </div>
alt="logo" </div>
src="https://plannaplan.pl/img/logo.svg" <div className="top-bar__input-div">
/> <img className="top-bar__input-icon" alt="search" src={Search} />
<div className="top-bar__tekst"> plan na plan </div> <Input
</div> placeholder="Wyszukaj..."
<div className="top-bar__input-div"> inputProps={{ "aria-label": "description" }}
<img className="top-bar__input-icon" alt="search" src={Search} /> className="top-bar__input-field"
<Input onChange={(e) => this.handleChange(e)}
placeholder="Wyszukaj..." />
inputProps={{ "aria-label": "description" }} <img className="top-bar__input-icon" alt="close" src={CloseIcon} />
className="top-bar__input-field" </div>
onChange={(e) => <div className="top-bar__icon-box">
this.handleChange(e as ChangeEvent<HTMLInputElement>) <img className="top-bar__icon" alt="transfer" src={Transfer} onClick={this.handleTransfer} />
} <img
/> className="top-bar__icon"
<img className="top-bar__input-icon" alt="close" src={CloseIcon} /> alt="change_language"
</div> src={this.state.isPolish ? UK : PL}
<div className="top-bar__icon-box"> onClick={this.onLangChange}
<img />
className="top-bar__icon" <img className="top-bar__icon" alt="profile" src={User} onClick={this.handleProfile} />
alt="transfer" <Profile anchorEl={this.state.anchorEl} handleClose={this.handleClose} />
src={Transfer} </div>
onClick={this.handleTransfer} </div>
/> );
<img }
className="top-bar__icon"
alt="change_language"
src={this.state.isPolish ? UK : PL}
onClick={this.onLangChange}
/>
<img
className="top-bar__icon"
alt="profile"
src={User}
onClick={this.handleProfile}
/>
<Menu
className="top-bar__menu"
id="simple-menu"
anchorEl={this.state.anchorEl}
keepMounted
open={this.state.isOpenProfile}
onClose={this.handleClose}
>
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>Logout</MenuItem>
</Menu>
</div>
</div>
);
}
} }