From 97ba11b92c0d25b36c80ba3291b101f1229bbc25 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Sat, 5 Sep 2020 04:46:29 +0100
Subject: [PATCH] Pass style directly into ModuleHeading
---
.../pages/Timeline/components/ModuleHeading/index.tsx | 11 ++++++++---
src/components/pages/Timeline/index.tsx | 11 +++++------
2 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/src/components/pages/Timeline/components/ModuleHeading/index.tsx b/src/components/pages/Timeline/components/ModuleHeading/index.tsx
index 313f7e3b1..9ed67a759 100644
--- a/src/components/pages/Timeline/components/ModuleHeading/index.tsx
+++ b/src/components/pages/Timeline/components/ModuleHeading/index.tsx
@@ -1,15 +1,20 @@
-import React from "react";
+import React, { CSSProperties } from "react";
import Card from "react-bootstrap/Card";
import styles from "./style.module.scss";
export interface ModuleHeadingprops {
moduleCode: string;
title: string;
+ style?: CSSProperties;
}
-const ModuleHeading: React.FC<ModuleHeadingprops> = ({ moduleCode, title }) => {
+const ModuleHeading: React.FC<ModuleHeadingprops> = ({
+ moduleCode,
+ title,
+ style,
+}) => {
return (
- <Card className={styles.moduleCard}>
+ <Card style={style} className={styles.moduleCard}>
<Card.Header>
<span>{moduleCode}</span>
</Card.Header>
diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx
index 6b91494d4..f32a92029 100644
--- a/src/components/pages/Timeline/index.tsx
+++ b/src/components/pages/Timeline/index.tsx
@@ -33,7 +33,7 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
this.props.initSideBar();
let moduleTracks: ModuleTracks = {};
modulesList.forEach(({ code }) => {
- moduleTracks[code] = [[], []];
+ moduleTracks[code] = [[], []];
});
this.setState({ moduleTracks: moduleTracks });
}
@@ -62,13 +62,12 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
const tracks = this.state.moduleTracks[code];
if (tracks) {
moduleHeadings.push(
- <div
+ <ModuleHeading
key={code}
- className={styles.moduleHeading}
style={{ height: `${tracks.length * trackHeight}rem` }}
- >
- <ModuleHeading moduleCode={code} title={modulesList[i].title} />
- </div>
+ moduleCode={code}
+ title={modulesList[i].title}
+ />
);
const timelineBackgroundsClass = classNames(
i % 2 === 0
--
GitLab