-
-
Notifications
You must be signed in to change notification settings - Fork 300
/
getListItemHeight.ts
115 lines (102 loc) · 3.21 KB
/
getListItemHeight.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
111
112
113
114
115
import { HTMLAttributes } from "react";
import { ListItemChildrenProps } from "./ListItemChildren";
export type ListItemHeight =
| "auto"
| "normal"
| "medium"
| "large"
| "extra-large";
export interface SimpleListItemProps
extends ListItemChildrenProps,
HTMLAttributes<HTMLLIElement> {
/**
* This prop shouldn't really be used other than a pass-down value from the
* ListItem component.
*/
disabled?: boolean;
/**
* Boolean if the list item should apply an opacity value while disabled
* instead of overriding the primary and secondary text colors. Enabling this
* will allow for the list item addons to also be dimmed.
*
* This is configured by the `$rmd-list-item-disabled-opacity` variable.
*
* Note: This does nothing if the `disabled` prop is not enabled.
*/
disabledOpacity?: boolean;
/**
* Boolean if the list item should be updated to use the clickable styles to
* the item. This is really just a pass-down value for the main `ListItem`
* component and shouldn't really be used unless you are implementing your own
* clickable `ListItem` component.
*/
clickable?: boolean;
/**
* Boolean if the list item should be considered "three-lines" in height. This
* will update the `secondaryText` to span 2 lines instead of one, but it will
* not correctly applied the trailing ellipsis overflow due to browser
* compatibility of `line-clamp`. If you would still like the ellipsis to
* show, it is recommended to use javascript to add them yourself.
*/
threeLines?: boolean;
/**
* The height to apply to the list item.
*
* Conversions:
*
* - height !== "auto" -> height
* - secondaryText or left/right addon is media/media-large -> "extra-large"
* - left/right addon is avatar -> "large"
* - left/right addon is icon -> "medium"
* - no addons and no secondary text -> "normal"
*/
height?: ListItemHeight;
}
/**
* Gets the expected height for the `ListItem` or `SimpleListItem` based on the
* addons and `secondaryText` props.
*
* Conversions:
*
* - height !== "auto" -> height
* - secondaryText or left/right addon is media/media-large -> "extra-large"
* - left/right addon is avatar -> "large"
* - left/right addon is icon -> "medium"
* - no addons and no secondary text -> "normal"
*
* @private
*/
export function getListItemHeight({
height = "auto",
leftAddon,
leftAddonType = "icon",
rightAddon,
rightAddonType = "icon",
secondaryText,
}: SimpleListItemProps): ListItemHeight {
if (height !== "auto") {
return height;
}
const isIcon =
(leftAddon && leftAddonType === "icon") ||
(rightAddon && rightAddonType === "icon");
const isAvatar =
(leftAddon && leftAddonType === "avatar") ||
(rightAddon && rightAddonType === "avatar");
const isGraphic =
(leftAddon &&
(leftAddonType === "media" || leftAddonType === "large-media")) ||
(rightAddon &&
(rightAddonType === "media" || rightAddonType === "large-media"));
// secondary text will always be extra large due to the default `line-height`
if (isGraphic || secondaryText) {
return "extra-large";
}
if (isAvatar) {
return "large";
}
if (isIcon) {
return "medium";
}
return "normal";
}