diff options
| author | crupest <crupest@outlook.com> | 2020-05-30 23:41:31 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-05-30 23:41:31 +0800 |
| commit | c8d71a3b5e7aef4fcf75bad44b7be90b45aaaf0b (patch) | |
| tree | f76ecd77c99c4136d1ab4771b91a92f1e5ad4a35 /Timeline/ClientApp/src/common/CollapseButton.tsx | |
| parent | 7e393559d2883a37b1be0c82cccc06bc97c3d102 (diff) | |
| parent | 83de798e74323e96e81b8196b04e23ed2bd4efbf (diff) | |
| download | timeline-c8d71a3b5e7aef4fcf75bad44b7be90b45aaaf0b.tar.gz timeline-c8d71a3b5e7aef4fcf75bad44b7be90b45aaaf0b.tar.bz2 timeline-c8d71a3b5e7aef4fcf75bad44b7be90b45aaaf0b.zip | |
Merge pull request #72 from crupest/merge-frontend
Merge frontend repo into this repo.
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;
|