diff options
| author | crupest <crupest@outlook.com> | 2020-05-30 16:23:25 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2020-05-30 16:23:25 +0800 |
| commit | 232a19d7dfe0e3847b3a9a9a9be83485ffb9031c (patch) | |
| tree | 2c7463f15cf30b8cbc703cb57bef357796bcd8b9 /Timeline/ClientApp/src/common/CollapseButton.tsx | |
| parent | fc0521d81aa2293b94ea40b79ec0df80966c0278 (diff) | |
| download | timeline-232a19d7dfe0e3847b3a9a9a9be83485ffb9031c.tar.gz timeline-232a19d7dfe0e3847b3a9a9a9be83485ffb9031c.tar.bz2 timeline-232a19d7dfe0e3847b3a9a9a9be83485ffb9031c.zip | |
Merge front end to this repo. But I need to wait for aspnet core support for custom port and package manager for dev server.
Diffstat (limited to 'Timeline/ClientApp/src/common/CollapseButton.tsx')
| -rw-r--r-- | Timeline/ClientApp/src/common/CollapseButton.tsx | 105 |
1 files changed, 105 insertions, 0 deletions
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;
|