Added profile component
This commit is contained in:
maciekglowacki
parent
19f75f2253
commit
a4ada5fb79
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue