From 232a19d7dfe0e3847b3a9a9a9be83485ffb9031c Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 30 May 2020 16:23:25 +0800
Subject: Merge front end to this repo. But I need to wait for aspnet core
 support for custom port and package manager for dev server.

---
 Timeline/ClientApp/src/common/CollapseButton.tsx | 105 +++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 Timeline/ClientApp/src/common/CollapseButton.tsx

(limited to 'Timeline/ClientApp/src/common/CollapseButton.tsx')

diff --git a/Timeline/ClientApp/src/common/CollapseButton.tsx b/Timeline/ClientApp/src/common/CollapseButton.tsx
new file mode 100644
index 00000000..03f42e73
--- /dev/null
+++ b/Timeline/ClientApp/src/common/CollapseButton.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+
+export interface CollapseButtonProps {
+  collapse: boolean;
+  toggle: (visibility: boolean) => void;
+  className?: string;
+}
+
+const CollapseButton: React.FC<CollapseButtonProps> = (props) => {
+  const { toggle, collapse, className } = props;
+
+  const onClick = React.useCallback(() => {
+    toggle(!collapse);
+  }, [toggle, collapse]);
+
+  return (
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 100 100"
+      className={className}
+      onClick={onClick}
+    >
+      {(() => {
+        if (collapse) {
+          return (
+            <>
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="50"
+                x2="90"
+                y1="17"
+                y2="17"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="10"
+                x2="50"
+                y1="83"
+                y2="83"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="17"
+                x2="17"
+                y1="50"
+                y2="90"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="83"
+                x2="83"
+                y1="10"
+                y2="50"
+              />
+            </>
+          );
+        } else {
+          return (
+            <>
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="55"
+                x2="95"
+                y1="38"
+                y2="38"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="5"
+                x2="45"
+                y1="62"
+                y2="62"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="38"
+                x2="38"
+                y1="55"
+                y2="95"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="62"
+                x2="62"
+                y1="5"
+                y2="45"
+              />
+            </>
+          );
+        }
+      })()}
+    </svg>
+  );
+};
+
+export default CollapseButton;
-- 
cgit v1.2.3