From bb8b6b9889396d3d01221034a7c9f5e9f16914bd Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Sat, 8 Aug 2020 16:24:56 +0100
Subject: [PATCH] Add spinner on click
---
.../molecules/NavBarBrand/index.tsx | 82 ++++++++++++++-----
.../molecules/NavBarBrand/style.module.scss | 13 +++
2 files changed, 74 insertions(+), 21 deletions(-)
diff --git a/frontend/src/components/molecules/NavBarBrand/index.tsx b/frontend/src/components/molecules/NavBarBrand/index.tsx
index 9f728425f..cc81592b3 100644
--- a/frontend/src/components/molecules/NavBarBrand/index.tsx
+++ b/frontend/src/components/molecules/NavBarBrand/index.tsx
@@ -9,26 +9,66 @@ interface NavBarBrandProps {
onClick: (event: React.MouseEvent<HTMLImageElement>) => void;
}
-const NavBarBrand: React.FC<NavBarBrandProps> = ({
- onClick,
-}: NavBarBrandProps) => {
- return (
- <Navbar.Brand className={styles.brandContainer}>
- <img
- src={logo}
- width="30"
- height="30"
- className={cx(
- "d-inline-block",
- "align-center",
- styles.brandImage
- )}
- alt="React Bootstrap logo"
- onClick={(e) => onClick(e)}
- />
- <Link to="/">Scientia</Link>
- </Navbar.Brand>
- );
-};
+interface NavBarBrandState {
+ iconRotate: boolean;
+}
+
+class NavBarBrand extends React.Component<NavBarBrandProps, NavBarBrandState> {
+ brandIcon: HTMLImageElement | null;
+
+ constructor(props: NavBarBrandProps) {
+ super(props);
+ this.state = { iconRotate: false };
+ this.brandIcon = null;
+ }
+
+ componentDidMount() {
+ if (this.brandIcon) {
+ this.brandIcon.addEventListener("animationend", () =>
+ this.rotatingDone()
+ );
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.brandIcon) {
+ this.brandIcon.removeEventListener("animationend", () =>
+ this.rotatingDone()
+ );
+ }
+ }
+
+ rotatingDone() {
+ this.setState({
+ iconRotate: false,
+ });
+ }
+
+ render() {
+ return (
+ <Navbar.Brand className={styles.brandContainer}>
+ <img
+ src={logo}
+ width="30"
+ height="30"
+ className={cx("d-inline-block", "align-center", styles.brandImage, {
+ rotate: this.state.iconRotate,
+ })}
+ alt="Scientia logo"
+ onClick={(e) => {
+ this.setState({
+ iconRotate: true,
+ });
+ this.props.onClick(e);
+ }}
+ ref={(elm) => {
+ this.brandIcon = elm;
+ }}
+ />
+ <Link to="/">Scientia</Link>
+ </Navbar.Brand>
+ );
+ }
+}
export default NavBarBrand;
diff --git a/frontend/src/components/molecules/NavBarBrand/style.module.scss b/frontend/src/components/molecules/NavBarBrand/style.module.scss
index 2eb403de5..966e33b10 100644
--- a/frontend/src/components/molecules/NavBarBrand/style.module.scss
+++ b/frontend/src/components/molecules/NavBarBrand/style.module.scss
@@ -22,3 +22,16 @@
text-decoration: none !important;
}
+:global(.rotate) {
+ animation: rotate-keyframes 0.25s;
+ }
+
+ @keyframes rotate-keyframes {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(-90deg);
+ }
+ }
\ No newline at end of file
--
GitLab