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
| import chroma from "chroma-js";
| import React, { useMemo } from "react";
| import { cn } from "../../utils/bem";
| import { asVars } from "../../utils/styles";
|
| import "./Label.scss";
|
| export const Label = React.forwardRef(
| (
| {
| className,
| style,
| color,
| empty = false,
| hidden = false,
| selected = false,
| margins = false,
| onClick,
| children,
| hotkey,
| ...rest
| },
| ref,
| ) => {
| const styles = useMemo(() => {
| if (!color) return null;
| const background = chroma(color).alpha(0.15);
|
| return {
| ...(style ?? {}),
| ...asVars({
| color,
| background,
| }),
| };
| }, [color]);
|
| return (
| <span
| ref={ref}
| className={cn("label")
| .mod({ empty, hidden, selected, clickable: !!onClick, margins })
| .mix(className)
| .toClassName()}
| style={styles}
| onClick={onClick}
| {...rest}
| >
| <span className={cn("label").elem("text").toClassName()}>{children}</span>
| {hotkey ? <span className={cn("label").elem("hotkey").toClassName()}>{hotkey}</span> : null}
| </span>
| );
| },
| );
|
|
