Merge pull request 'ProfileComponent' (#6) from ProfileComponent into master
Reviewed-by: Maciej <glowackimaciej97@gmail.com>
This commit is contained in:
commit
52b6953f64
22
package-lock.json
generated
22
package-lock.json
generated
@ -1101,6 +1101,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.6.3.tgz",
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.6.3.tgz",
|
||||||
"integrity": "sha512-MMOPm+UQdxliq0IidfsgOryYCJsFVRHtILZeMyHMs9I8IFbV8DuDwkhzNNr2/RjRZ3GVm4ZuxnWjbeOSUdft8A=="
|
"integrity": "sha512-MMOPm+UQdxliq0IidfsgOryYCJsFVRHtILZeMyHMs9I8IFbV8DuDwkhzNNr2/RjRZ3GVm4ZuxnWjbeOSUdft8A=="
|
||||||
},
|
},
|
||||||
|
"@devexpress/dx-grid-core": {
|
||||||
|
"version": "2.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-grid-core/-/dx-grid-core-2.6.3.tgz",
|
||||||
|
"integrity": "sha512-hYgBM/vv70gjIpuHzS80CagzDenoT20ddIcFOLJQinsAk3mdFJr/fkJAMB819wop225S0Rtb+Z157EGNgMCAXA=="
|
||||||
|
},
|
||||||
"@devexpress/dx-react-core": {
|
"@devexpress/dx-react-core": {
|
||||||
"version": "2.6.3",
|
"version": "2.6.3",
|
||||||
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-2.6.3.tgz",
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-2.6.3.tgz",
|
||||||
@ -1110,6 +1115,23 @@
|
|||||||
"prop-types": "^15.7.2"
|
"prop-types": "^15.7.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@devexpress/dx-react-grid": {
|
||||||
|
"version": "2.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-grid/-/dx-react-grid-2.6.3.tgz",
|
||||||
|
"integrity": "sha512-s2RMhn6Ctbe/Tp066sWgscC2eZVTTQfKs2VOR/p9gD1vMIQFPGUkSS/XyDwMPb5MD7DRvFYJ2U8oQryobB2yoQ==",
|
||||||
|
"requires": {
|
||||||
|
"@devexpress/dx-grid-core": "2.6.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@devexpress/dx-react-grid-material-ui": {
|
||||||
|
"version": "2.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-grid-material-ui/-/dx-react-grid-material-ui-2.6.3.tgz",
|
||||||
|
"integrity": "sha512-7tVQVrbGQNrkbOOF/xd8mTk7vAsDwQ8URRvRJGILthcnewPCJZqzmjsMV4GRQ1bEAQKAiCnRDbPunvR4vW0GEw==",
|
||||||
|
"requires": {
|
||||||
|
"clsx": "^1.0.4",
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@devexpress/dx-react-scheduler": {
|
"@devexpress/dx-react-scheduler": {
|
||||||
"version": "2.6.3",
|
"version": "2.6.3",
|
||||||
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-2.6.3.tgz",
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-2.6.3.tgz",
|
||||||
|
@ -4,7 +4,10 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"-": "0.0.1",
|
"-": "0.0.1",
|
||||||
|
"@devexpress/dx-grid-core": "^2.6.3",
|
||||||
"@devexpress/dx-react-core": "^2.6.3",
|
"@devexpress/dx-react-core": "^2.6.3",
|
||||||
|
"@devexpress/dx-react-grid": "^2.6.3",
|
||||||
|
"@devexpress/dx-react-grid-material-ui": "^2.6.3",
|
||||||
"@devexpress/dx-react-scheduler": "^2.6.3",
|
"@devexpress/dx-react-scheduler": "^2.6.3",
|
||||||
"@devexpress/dx-react-scheduler-material-ui": "^2.6.3",
|
"@devexpress/dx-react-scheduler-material-ui": "^2.6.3",
|
||||||
"@material-ui/core": "^4.10.0",
|
"@material-ui/core": "^4.10.0",
|
||||||
|
14
src/App.tsx
14
src/App.tsx
@ -2,10 +2,9 @@ import React, { useState } from "react";
|
|||||||
import TopBar from "./components/TopBar/";
|
import TopBar from "./components/TopBar/";
|
||||||
import Transfer from "./components/Transfer/";
|
import Transfer from "./components/Transfer/";
|
||||||
import "./App.scss";
|
import "./App.scss";
|
||||||
import Schedule from "./components/Calendar/";
|
import Calendar from "./components/Calendar";
|
||||||
import { appointments } from "./components/Calendar/appointments";
|
import { appointments } from "./components/Calendar/appointments";
|
||||||
import RightBar from "./components/RightBar";
|
import RightBar from "./components/RightBar";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [isOpenTransfer, setOpenTransfer] = useState(false);
|
const [isOpenTransfer, setOpenTransfer] = useState(false);
|
||||||
const [text, setText] = useState("");
|
const [text, setText] = useState("");
|
||||||
@ -16,28 +15,27 @@ function App() {
|
|||||||
textChangeHandler={(e) => {
|
textChangeHandler={(e) => {
|
||||||
setText(e.target.value);
|
setText(e.target.value);
|
||||||
}}
|
}}
|
||||||
handleTransfer={(e) => {
|
handleTransfer={() => {
|
||||||
setOpenTransfer(!isOpenTransfer);
|
setOpenTransfer(!isOpenTransfer);
|
||||||
}}
|
}}
|
||||||
onLangChange={(e) => {
|
onLangChange={() => {
|
||||||
console.log(e);
|
console.log("Language has been changed");
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Transfer
|
<Transfer
|
||||||
isOpen={isOpenTransfer}
|
isOpen={isOpenTransfer}
|
||||||
handleClose={(e) => {
|
handleClose={() => {
|
||||||
setOpenTransfer(!isOpenTransfer);
|
setOpenTransfer(!isOpenTransfer);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="wraper">
|
<div className="wraper">
|
||||||
<div className="wraper__calendar">
|
<div className="wraper__calendar">
|
||||||
<Schedule data={appointments} />
|
<Calendar data={appointments} />
|
||||||
</div>
|
</div>
|
||||||
<div className="wraper__rightbar">
|
<div className="wraper__rightbar">
|
||||||
<RightBar />
|
<RightBar />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1>{text}</h1>
|
<h1>{text}</h1>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,16 +1,11 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { ViewState } from "@devexpress/dx-react-scheduler";
|
import { ViewState } from "@devexpress/dx-react-scheduler";
|
||||||
import { AppointmentModel } from "@devexpress/dx-react-scheduler";
|
import { AppointmentModel } from "@devexpress/dx-react-scheduler";
|
||||||
import {
|
import { Scheduler, WeekView, Appointments, AppointmentTooltip } from "@devexpress/dx-react-scheduler-material-ui";
|
||||||
Scheduler,
|
|
||||||
WeekView,
|
|
||||||
Appointments,
|
|
||||||
AppointmentTooltip,
|
|
||||||
} from "@devexpress/dx-react-scheduler-material-ui";
|
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import "moment/locale/pl";
|
import "moment/locale/pl";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
|
import { makeStyles, createStyles } from "@material-ui/core/styles";
|
||||||
|
|
||||||
interface CalendarProps {
|
interface CalendarProps {
|
||||||
data: Array<AppointmentModel>;
|
data: Array<AppointmentModel>;
|
||||||
@ -20,16 +15,12 @@ interface CalendarState {
|
|||||||
currentDate: Date;
|
currentDate: Date;
|
||||||
}
|
}
|
||||||
|
|
||||||
const formatDayScaleDate = (
|
const formatDayScaleDate = (date: moment.MomentInput, nextOptions: Intl.DateTimeFormatOptions): string => {
|
||||||
date: moment.MomentInput,
|
|
||||||
options: { weekday: any }
|
|
||||||
) => {
|
|
||||||
const momentDate = moment(date).locale("pl");
|
const momentDate = moment(date).locale("pl");
|
||||||
const { weekday } = options;
|
return momentDate.format(nextOptions.weekday ? "dddd" : " ").toUpperCase();
|
||||||
return momentDate.format(weekday ? "dddd" : " ").toUpperCase();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles(() =>
|
||||||
createStyles({
|
createStyles({
|
||||||
dayScaleCell: {
|
dayScaleCell: {
|
||||||
paddingTop: 10,
|
paddingTop: 10,
|
||||||
@ -39,9 +30,6 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
border: "1px solid rgba(224, 224, 224, 1);",
|
border: "1px solid rgba(224, 224, 224, 1);",
|
||||||
borderCollapse: "separate",
|
borderCollapse: "separate",
|
||||||
},
|
},
|
||||||
timeTableCell: {
|
|
||||||
//borderRadius: 15,
|
|
||||||
},
|
|
||||||
appointmentLayer: {
|
appointmentLayer: {
|
||||||
borderRadius: 15,
|
borderRadius: 15,
|
||||||
marginLeft: 5,
|
marginLeft: 5,
|
||||||
@ -50,51 +38,24 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
//don't know how to set proper type of function arguments
|
const DayScaleCell = ({ formatDate, ...restProps }: WeekView.DayScaleCellProps) => {
|
||||||
const DayScaleCell = ({ formatDate, ...restProps }: any) => {
|
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
return (
|
return (
|
||||||
<WeekView.DayScaleCell
|
<WeekView.DayScaleCell {...restProps} formatDate={formatDayScaleDate} today={false} className={classes.dayScaleCell} />
|
||||||
{...restProps}
|
|
||||||
formatDate={formatDayScaleDate}
|
|
||||||
today={false}
|
|
||||||
className={classes.dayScaleCell}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const TimeTableCell = ({ ...restProps }: any) => {
|
const TimeTableLayout = ({ ...restProps }: WeekView.TimeTableLayoutProps) => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
return (
|
return <WeekView.TimeTableLayout {...restProps} className={classes.timeTableLayout} />;
|
||||||
<WeekView.TimeTableCell {...restProps} className={classes.timeTableCell} />
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const TimeTableLayout = ({ ...restProps }: any) => {
|
const Appointment = ({ ...restProps }: Appointments.AppointmentProps) => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
return (
|
return <Appointments.Appointment {...restProps} className={classes.appointmentLayer} />;
|
||||||
<WeekView.TimeTableLayout
|
|
||||||
{...restProps}
|
|
||||||
className={classes.timeTableLayout}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const Appointment = ({ ...restProps }: any) => {
|
export default class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
|
||||||
const classes = useStyles();
|
|
||||||
return (
|
|
||||||
<Appointments.Appointment
|
|
||||||
{...restProps}
|
|
||||||
className={classes.appointmentLayer}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class Calendar extends React.PureComponent<
|
|
||||||
CalendarProps,
|
|
||||||
CalendarState
|
|
||||||
> {
|
|
||||||
|
|
||||||
constructor(props: CalendarProps) {
|
constructor(props: CalendarProps) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
@ -117,7 +78,6 @@ export default class Calendar extends React.PureComponent<
|
|||||||
cellDuration={60}
|
cellDuration={60}
|
||||||
dayScaleCellComponent={DayScaleCell}
|
dayScaleCellComponent={DayScaleCell}
|
||||||
timeTableLayoutComponent={TimeTableLayout}
|
timeTableLayoutComponent={TimeTableLayout}
|
||||||
timeTableCellComponent={TimeTableCell}
|
|
||||||
/>
|
/>
|
||||||
<Appointments appointmentComponent={Appointment} />
|
<Appointments appointmentComponent={Appointment} />
|
||||||
<AppointmentTooltip />
|
<AppointmentTooltip />
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import Paper from "@material-ui/core/Paper";
|
import Paper from "@material-ui/core/Paper";
|
||||||
|
|
||||||
interface RightBarProps {}
|
interface RightBarProps {}
|
||||||
|
|
||||||
interface RightBarState {}
|
interface RightBarState {}
|
||||||
|
27
src/components/TopBar/Profile.tsx
Normal file
27
src/components/TopBar/Profile.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
@ -7,19 +7,17 @@ import UK from "./UK.png";
|
|||||||
import PL from "./PL.png";
|
import PL from "./PL.png";
|
||||||
import User from "./user.png";
|
import User from "./user.png";
|
||||||
import CloseIcon from "./close.svg";
|
import CloseIcon from "./close.svg";
|
||||||
import Menu from "@material-ui/core/Menu";
|
import { Profile } from "./Profile";
|
||||||
import MenuItem from "@material-ui/core/MenuItem";
|
|
||||||
|
|
||||||
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;
|
|
||||||
anchorEl: null | HTMLElement;
|
|
||||||
isPolish: boolean;
|
isPolish: boolean;
|
||||||
|
anchorEl: HTMLElement | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
||||||
@ -30,13 +28,12 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
|||||||
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,
|
|
||||||
anchorEl:null,
|
|
||||||
isPolish: true,
|
isPolish: true,
|
||||||
|
anchorEl: null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
|
||||||
this.props.textChangeHandler(e);
|
this.props.textChangeHandler(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,20 +44,19 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
|||||||
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,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -68,11 +64,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
|||||||
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"
|
|
||||||
alt="logo"
|
|
||||||
src="https://plannaplan.pl/img/logo.svg"
|
|
||||||
/>
|
|
||||||
<div className="top-bar__tekst"> plan na plan </div>
|
<div className="top-bar__tekst"> plan na plan </div>
|
||||||
</div>
|
</div>
|
||||||
<div className="top-bar__input-div">
|
<div className="top-bar__input-div">
|
||||||
@ -81,43 +73,20 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
|||||||
placeholder="Wyszukaj..."
|
placeholder="Wyszukaj..."
|
||||||
inputProps={{ "aria-label": "description" }}
|
inputProps={{ "aria-label": "description" }}
|
||||||
className="top-bar__input-field"
|
className="top-bar__input-field"
|
||||||
onChange={(e) =>
|
onChange={(e) => this.handleChange(e)}
|
||||||
this.handleChange(e as ChangeEvent<HTMLInputElement>)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<img className="top-bar__input-icon" alt="close" src={CloseIcon} />
|
<img className="top-bar__input-icon" alt="close" src={CloseIcon} />
|
||||||
</div>
|
</div>
|
||||||
<div className="top-bar__icon-box">
|
<div className="top-bar__icon-box">
|
||||||
<img
|
<img className="top-bar__icon" alt="transfer" src={Transfer} onClick={this.handleTransfer} />
|
||||||
className="top-bar__icon"
|
|
||||||
alt="transfer"
|
|
||||||
src={Transfer}
|
|
||||||
onClick={this.handleTransfer}
|
|
||||||
/>
|
|
||||||
<img
|
<img
|
||||||
className="top-bar__icon"
|
className="top-bar__icon"
|
||||||
alt="change_language"
|
alt="change_language"
|
||||||
src={this.state.isPolish ? UK : PL}
|
src={this.state.isPolish ? UK : PL}
|
||||||
onClick={this.onLangChange}
|
onClick={this.onLangChange}
|
||||||
/>
|
/>
|
||||||
<img
|
<img className="top-bar__icon" alt="profile" src={User} onClick={this.handleProfile} />
|
||||||
className="top-bar__icon"
|
<Profile anchorEl={this.state.anchorEl} handleClose={this.handleClose} />
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user