-
Notifications
You must be signed in to change notification settings - Fork 2
/
ItemStyle.ts
110 lines (96 loc) · 2.89 KB
/
ItemStyle.ts
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
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Properties
*/
import type { CSSProperties } from "react";
/** Converts a color value from a number to an HTML/CSS hex string */
const colorDecimalToHex = (decimal: number) =>
`#${decimal.toString(16).padStart(6, "0")}`;
/** Style properties for styled item like [[TreeNodeItem]]
* @public
*/
export interface ItemStyle {
/** Is text bolded */
isBold?: boolean;
/** Is text italic */
isItalic?: boolean;
/** Color overrides for styled item */
colorOverrides?: ItemColorOverrides;
}
/** Color overrides for styled item
* @public
*/
export interface ItemColorOverrides {
/** Text/foreground color */
color?: number;
/** Background color */
backgroundColor?: number;
/** Selected item text/foreground color */
colorSelected?: number;
/** Selected item background color */
backgroundColorSelected?: number;
}
function getBackgroundColor(
isSelected: boolean,
colorOverrides?: ItemColorOverrides
) {
if (!colorOverrides) return undefined;
if (isSelected)
return colorOverrides.backgroundColorSelected !== undefined
? colorDecimalToHex(colorOverrides.backgroundColorSelected)
: undefined;
if (colorOverrides.backgroundColor)
return colorDecimalToHex(colorOverrides.backgroundColor);
return undefined;
}
function getForegroundColor(
isSelected: boolean,
colorOverrides?: ItemColorOverrides
) {
if (!colorOverrides) return undefined;
if (isSelected)
return colorOverrides.colorSelected !== undefined
? colorDecimalToHex(colorOverrides.colorSelected)
: undefined;
if (colorOverrides.color) return colorDecimalToHex(colorOverrides.color);
return undefined;
}
/**
* Style provider for stylable items like [[TreeNodeItem]]
* @public
*/
export const ItemStyleProvider = {
/**
* Create CSS style from [[ItemStyle]]
*/
createStyle: (
{ colorOverrides, isBold, isItalic }: ItemStyle,
isSelected?: boolean
): CSSProperties => ({
color: getForegroundColor(!!isSelected, colorOverrides),
backgroundColor: getBackgroundColor(!!isSelected, colorOverrides),
fontWeight: isBold ? "bold" : undefined,
fontStyle: isItalic ? "italic" : undefined,
}),
};
/**
* Style provider for table rows
* @public
*/
export const TableRowStyleProvider = {
/**
* Create CSS style from [[ItemStyle]]
*/
createStyle: ({
color,
backgroundColor,
}: ItemColorOverrides): CSSProperties => ({
color: color ? colorDecimalToHex(color) : undefined,
backgroundColor: backgroundColor
? colorDecimalToHex(backgroundColor)
: undefined,
}),
};