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

Added types

This commit is contained in:
maciekglowacki 2020-06-10 21:04:22 +02:00
parent 4ebbfa53a0
commit 19f75f2253
6 changed files with 119 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@ -1101,6 +1101,11 @@
"resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.6.3.tgz",
"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": {
"version": "2.6.3",
"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"
}
},
"@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": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-2.6.3.tgz",

3
package.json
View File

@ -4,7 +4,10 @@
"private": true,
"dependencies": {
"-": "0.0.1",
"@devexpress/dx-grid-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-material-ui": "^2.6.3",
"@material-ui/core": "^4.10.0",

67
src/App.tsx
View File

@ -2,45 +2,42 @@ import React, { useState } from "react";
import TopBar from "./components/TopBar/";
import Transfer from "./components/Transfer/";
import "./App.scss";
import Schedule from "./components/Calendar/";
import Calendar from "./components/Calendar";
import { appointments } from "./components/Calendar/appointments";
import RightBar from "./components/RightBar";
function App() {
const [isOpenTransfer, setOpenTransfer] = useState(false);
const [text, setText] = useState("");
const [isOpenTransfer, setOpenTransfer] = useState(false);
const [text, setText] = useState("");
return (
<div className="App">
<TopBar
textChangeHandler={(e) => {
setText(e.target.value);
}}
handleTransfer={(e) => {
setOpenTransfer(!isOpenTransfer);
}}
onLangChange={(e) => {
console.log(e);
}}
/>
<Transfer
isOpen={isOpenTransfer}
handleClose={(e) => {
setOpenTransfer(!isOpenTransfer);
}}
/>
<div className="wraper">
<div className="wraper__calendar">
<Schedule data={appointments} />
</div>
<div className="wraper__rightbar">
<RightBar />
</div>
</div>
<h1>{text}</h1>
</div>
);
return (
<div className="App">
<TopBar
textChangeHandler={(e) => {
setText(e.target.value);
}}
handleTransfer={() => {
setOpenTransfer(!isOpenTransfer);
}}
onLangChange={() => {
console.log("Language has been changed");
}}
/>
<Transfer
isOpen={isOpenTransfer}
handleClose={() => {
setOpenTransfer(!isOpenTransfer);
}}
/>
<div className="wraper">
<div className="wraper__calendar">
<Calendar data={appointments} />
</div>
<div className="wraper__rightbar">
<RightBar />
</div>
</div>
</div>
);
}
export default App;

160
src/components/Calendar/index.tsx
View File

@ -1,127 +1,87 @@
import * as React from "react";
import { ViewState } from "@devexpress/dx-react-scheduler";
import { AppointmentModel } from "@devexpress/dx-react-scheduler";
import {
Scheduler,
WeekView,
Appointments,
AppointmentTooltip,
} from "@devexpress/dx-react-scheduler-material-ui";
import { Scheduler, WeekView, Appointments, AppointmentTooltip } from "@devexpress/dx-react-scheduler-material-ui";
import moment from "moment";
import "moment/locale/pl";
import "./index.scss";
import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
import { makeStyles, createStyles } from "@material-ui/core/styles";
interface CalendarProps {
data: Array<AppointmentModel>;
data: Array<AppointmentModel>;
}
interface CalendarState {
currentDate: Date;
currentDate: Date;
}
const formatDayScaleDate = (
date: moment.MomentInput,
options: { weekday: any }
) => {
const momentDate = moment(date).locale("pl");
const { weekday } = options;
return momentDate.format(weekday ? "dddd" : " ").toUpperCase();
const formatDayScaleDate = (date: moment.MomentInput, nextOptions: Intl.DateTimeFormatOptions): string => {
const momentDate = moment(date).locale("pl");
return momentDate.format(nextOptions.weekday ? "dddd" : " ").toUpperCase();
};
const useStyles = makeStyles((theme: Theme) =>
createStyles({
dayScaleCell: {
paddingTop: 10,
paddingBottom: 10,
},
timeTableLayout: {
border: "1px solid rgba(224, 224, 224, 1);",
borderCollapse: "separate",
},
timeTableCell: {
//borderRadius: 15,
},
appointmentLayer: {
borderRadius: 15,
marginLeft: 5,
textAlign: "center",
},
})
const useStyles = makeStyles(() =>
createStyles({
dayScaleCell: {
paddingTop: 10,
paddingBottom: 10,
},
timeTableLayout: {
border: "1px solid rgba(224, 224, 224, 1);",
borderCollapse: "separate",
},
appointmentLayer: {
borderRadius: 15,
marginLeft: 5,
textAlign: "center",
},
})
);
//don't know how to set proper type of function arguments
const DayScaleCell = ({ formatDate, ...restProps }: any) => {
const classes = useStyles();
return (
<WeekView.DayScaleCell
{...restProps}
formatDate={formatDayScaleDate}
today={false}
className={classes.dayScaleCell}
/>
);
const DayScaleCell = ({ formatDate, ...restProps }: WeekView.DayScaleCellProps) => {
const classes = useStyles();
return (
<WeekView.DayScaleCell {...restProps} formatDate={formatDayScaleDate} today={false} className={classes.dayScaleCell} />
);
};
const TimeTableCell = ({ ...restProps }: any) => {
const classes = useStyles();
return (
<WeekView.TimeTableCell {...restProps} className={classes.timeTableCell} />
);
const TimeTableLayout = ({ ...restProps }: WeekView.TimeTableLayoutProps) => {
const classes = useStyles();
return <WeekView.TimeTableLayout {...restProps} className={classes.timeTableLayout} />;
};
const TimeTableLayout = ({ ...restProps }: any) => {
const classes = useStyles();
return (
<WeekView.TimeTableLayout
{...restProps}
className={classes.timeTableLayout}
/>
);
const Appointment = ({ ...restProps }: Appointments.AppointmentProps) => {
const classes = useStyles();
return <Appointments.Appointment {...restProps} className={classes.appointmentLayer} />;
};
const Appointment = ({ ...restProps }: any) => {
const classes = useStyles();
return (
<Appointments.Appointment
{...restProps}
className={classes.appointmentLayer}
/>
);
};
export default class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
constructor(props: CalendarProps) {
super(props);
export default class Calendar extends React.PureComponent<
CalendarProps,
CalendarState
> {
this.state = {
currentDate: new Date("2020-06-01"),
};
}
constructor(props: CalendarProps) {
super(props);
render() {
const { data } = this.props;
const { currentDate } = this.state;
this.state = {
currentDate: new Date("2020-06-01"),
};
}
render() {
const { data } = this.props;
const { currentDate } = this.state;
return (
<Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
<ViewState defaultCurrentDate={currentDate} />
<WeekView
startDayHour={8}
endDayHour={20}
excludedDays={[0, 6]}
cellDuration={60}
dayScaleCellComponent={DayScaleCell}
timeTableLayoutComponent={TimeTableLayout}
timeTableCellComponent={TimeTableCell}
/>
<Appointments appointmentComponent={Appointment} />
<AppointmentTooltip />
</Scheduler>
);
}
return (
<Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
<ViewState defaultCurrentDate={currentDate} />
<WeekView
startDayHour={8}
endDayHour={20}
excludedDays={[0, 6]}
cellDuration={60}
dayScaleCellComponent={DayScaleCell}
timeTableLayoutComponent={TimeTableLayout}
/>
<Appointments appointmentComponent={Appointment} />
<AppointmentTooltip />
</Scheduler>
);
}
}

1
src/components/RightBar/index.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import "./index.scss";
import Paper from "@material-ui/core/Paper";
interface RightBarProps {}
interface RightBarState {}

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

@ -18,7 +18,7 @@ interface TopBarProps {
interface TopBarState {
isOpenProfile: boolean;
anchorEl: null | HTMLElement;
anchorEl: HTMLElement | null;
isPolish: boolean;
}