79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import "./index.scss";
|
|
import Collapse from "@material-ui/core/Collapse";
|
|
import ExpandIcon from "./expand.png";
|
|
|
|
type ClassType = {
|
|
group_id: string;
|
|
day: string;
|
|
time: string;
|
|
lecturer: string;
|
|
room: string;
|
|
};
|
|
|
|
export type Group = {
|
|
classname: string;
|
|
classgroups: Array<ClassType>;
|
|
};
|
|
|
|
interface ClassProps {
|
|
onClassHover: (group_id: String, class_id: String) => void;
|
|
onClassClick: (group_id: String, class_id: String) => void;
|
|
data: Group;
|
|
}
|
|
|
|
interface ClassState {
|
|
open: boolean;
|
|
}
|
|
|
|
export default class Class extends React.Component<ClassProps, ClassState> {
|
|
constructor(props: ClassProps) {
|
|
super(props);
|
|
|
|
this.Open = this.Open.bind(this);
|
|
this.state = {
|
|
open: false,
|
|
};
|
|
}
|
|
|
|
Open(e: React.MouseEvent) {
|
|
this.setState({
|
|
open: !this.state.open,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="class" >
|
|
<div className="class__name" onClick={this.Open}>{this.props.data.classname}</div>
|
|
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
|
|
{this.props.data.classgroups.map((classgroup, index) => (
|
|
<div className="class__group">
|
|
<p
|
|
onMouseOver={() =>
|
|
this.props.onClassHover(
|
|
this.props.data.classname,
|
|
this.props.data.classgroups[index].group_id
|
|
)
|
|
}
|
|
onClick={() =>
|
|
this.props.onClassClick(
|
|
this.props.data.classname,
|
|
this.props.data.classgroups[index].group_id
|
|
)
|
|
}
|
|
>
|
|
{classgroup.group_id} {classgroup.day} {classgroup.time}{" "}
|
|
{classgroup.room} <br></br> {classgroup.lecturer}
|
|
</p>{" "}
|
|
</div>
|
|
))}
|
|
</Collapse>
|
|
<div onClick={this.Open}>
|
|
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${this.state.open?"Rotate":""}`} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|