/
Swatch.tsx
108 lines (96 loc) · 2.71 KB
/
Swatch.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
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module LineWeight
*/
import "./Swatch.scss";
import classnames from "classnames";
import * as React from "react";
import type { ColorDef } from "@itwin/core-common";
import type { CommonProps } from "@itwin/core-react";
import { getCSSColorFromDef } from "../color/getCSSColorFromDef";
/** Properties for the [[LineWeightSwatch]] React component
* @public
*/
export interface LineWeightSwatchProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
CommonProps {
/** color specification */
weight: number;
/** color specification */
colorDef?: ColorDef;
/** hide the weight label */
hideLabel?: boolean;
/** Disabled or not */
disabled?: boolean;
/** Readonly or not */
readonly?: boolean;
/** function to run when user selects a line weight swatch */
onClick?: () => void;
}
/** LineWeightSwatch Functional component
* @public
*/
export class LineWeightSwatch extends React.PureComponent<LineWeightSwatchProps> {
/** @internal */
constructor(props: LineWeightSwatchProps) {
super(props);
}
public override componentDidMount() {}
public override render() {
const {
onClick,
colorDef,
weight,
hideLabel,
className, // do not pass on color swatch specific props
disabled,
readonly,
...otherProps // pass-through props
} = this.props;
let rgbaString = "";
if (colorDef) {
rgbaString = getCSSColorFromDef(colorDef);
}
const buttonStyle: React.CSSProperties = colorDef
? {
...this.props.style,
color: rgbaString,
}
: {
...this.props.style,
};
const svgStyle: React.CSSProperties = colorDef
? {
height: `${weight}px`,
background: rgbaString,
}
: {
height: `${weight}px`,
};
const handleClick = (_e: React.MouseEvent) => {
// istanbul ignore else
if (onClick) onClick();
};
const classes = classnames(
"components-lineweight-swatch",
hideLabel && "hide-label",
readonly && "readonly",
className
);
return (
<button
{...otherProps}
style={buttonStyle}
className={classes}
onClick={handleClick}
disabled={disabled}
>
{!hideLabel && <span>{weight.toFixed(0)}</span>}
<div style={svgStyle} />
</button>
);
}
}