Added types
This commit is contained in:
parent
4ebbfa53a0
commit
19f75f2253
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",
|
||||
"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",
|
||||
|
@ -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
67
src/App.tsx
@ -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;
|
||||
|
@ -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,6 +1,7 @@
|
||||
import React from "react";
|
||||
import "./index.scss";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
|
||||
interface RightBarProps {}
|
||||
|
||||
interface RightBarState {}
|
||||
|
@ -18,7 +18,7 @@ interface TopBarProps {
|
||||
|
||||
interface TopBarState {
|
||||
isOpenProfile: boolean;
|
||||
anchorEl: null | HTMLElement;
|
||||
anchorEl: HTMLElement | null;
|
||||
isPolish: boolean;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user