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