This repository has been archived by the owner on Mar 24, 2024. It is now read-only.
/
Icon.tsx
112 lines (102 loc) · 2.6 KB
/
Icon.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/
//
// This file incorporates work covered by the following copyright and
// permission notice:
//
// Copyright 2018-2021 Cruise LLC
//
// This source code is licensed under the Apache License, Version 2.0,
// found at http://www.apache.org/licenses/LICENSE-2.0
// You may not use this file except in compliance with the License.
import cx from "classnames";
import * as React from "react";
import styles from "./icon.module.scss";
import Tooltip from "@foxglove-studio/app/components/Tooltip";
type Props = {
children: React.ReactNode;
xlarge?: boolean;
large?: boolean;
medium?: boolean;
small?: boolean;
xsmall?: boolean;
xxsmall?: boolean;
active?: boolean;
fade?: boolean;
onClick?: (e: React.MouseEvent<HTMLElement>) => void;
clickable?: boolean;
className?: string;
style?: {
[key: string]: any;
};
tooltip?: React.ReactNode;
tooltipProps?: React.ComponentProps<typeof Tooltip>;
dataTest?: string;
};
const Icon = (props: Props) => {
const {
children,
xlarge,
large,
medium,
small,
xsmall,
xxsmall,
onClick,
clickable,
active,
fade,
className,
style,
tooltip,
tooltipProps,
dataTest,
} = props;
const classNames = cx("icon", styles.icon, className, {
[styles.fade]: fade,
[styles.clickable]: !!onClick || clickable == null || clickable,
[styles.active]: active,
[styles.xlarge]: xlarge,
[styles.large]: large,
[styles.medium]: medium,
[styles.small]: small,
[styles.xsmall]: xsmall,
[styles.xxsmall]: xxsmall,
});
// if we have a click handler
// cancel the bubbling on the event and process it
// in our click handler callback; otherwise, let it bubble
const clickHandler = (e: any) => {
if (onClick) {
e.preventDefault();
e.stopPropagation();
onClick(e);
}
};
return (
<Tooltip contents={tooltip || null} {...tooltipProps}>
<span className={classNames} onClick={clickHandler} style={style} data-test={dataTest}>
{children}
</span>
</Tooltip>
);
};
Icon.displayName = "Icon";
export const WrappedIcon = (props: Props) => {
return (
<Icon
{...props}
style={{
display: "block",
padding: "10px",
minHeight: "40px",
minWidth: "40px",
...props.style,
}}
className={styles.wrappedIcon}
/>
);
};
WrappedIcon.displayName = "Icon";
export default Icon;