@televet/kibble-ui 1.19.0 → 1.20.0-beta.2nbq04d.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/MediaAndIcons/Avatar/avatar.argTypes.d.ts +155 -0
- package/build/components/MediaAndIcons/Avatar/avatar.component.d.ts +9 -2
- package/build/components/MediaAndIcons/Avatar/avatar.config.d.ts +2 -2
- package/build/components/MediaAndIcons/Avatar/components/AvatarBadge/avatarBadge.component.d.ts +20 -0
- package/build/components/MediaAndIcons/Avatar/index.d.ts +1 -0
- package/build/index.js +150 -53
- package/build/index.js.map +1 -1
- package/build/shared/types.d.ts +27 -0
- package/build/utils/index.d.ts +1 -0
- package/build/utils/sizes.d.ts +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
export declare const avatarArgTypes: {
|
|
2
|
+
name: {
|
|
3
|
+
type: {
|
|
4
|
+
name: string;
|
|
5
|
+
required: boolean;
|
|
6
|
+
};
|
|
7
|
+
control: string;
|
|
8
|
+
description: string;
|
|
9
|
+
table: {
|
|
10
|
+
type: {
|
|
11
|
+
summary: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
src: {
|
|
16
|
+
type: string;
|
|
17
|
+
control: string;
|
|
18
|
+
description: string;
|
|
19
|
+
table: {
|
|
20
|
+
type: {
|
|
21
|
+
summary: string;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
iconName: {
|
|
26
|
+
control: {
|
|
27
|
+
type: string;
|
|
28
|
+
};
|
|
29
|
+
options: string[];
|
|
30
|
+
description: string;
|
|
31
|
+
};
|
|
32
|
+
size: {
|
|
33
|
+
type: string;
|
|
34
|
+
control: string;
|
|
35
|
+
description: string;
|
|
36
|
+
defaultValue: string;
|
|
37
|
+
options: string[];
|
|
38
|
+
table: {
|
|
39
|
+
type: {
|
|
40
|
+
summary: string;
|
|
41
|
+
};
|
|
42
|
+
defaultValue: {
|
|
43
|
+
summary: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
isClinic: {
|
|
48
|
+
type: string;
|
|
49
|
+
description: string;
|
|
50
|
+
defaultValue: boolean;
|
|
51
|
+
table: {
|
|
52
|
+
type: {
|
|
53
|
+
summary: string;
|
|
54
|
+
};
|
|
55
|
+
defaultValue: {
|
|
56
|
+
summary: string;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
isNotClickable: {
|
|
61
|
+
type: string;
|
|
62
|
+
description: string;
|
|
63
|
+
defaultValue: boolean;
|
|
64
|
+
table: {
|
|
65
|
+
type: {
|
|
66
|
+
summary: string;
|
|
67
|
+
};
|
|
68
|
+
defaultValue: {
|
|
69
|
+
summary: string;
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
showTooltip: {
|
|
74
|
+
type: string;
|
|
75
|
+
defaultValue: boolean;
|
|
76
|
+
description: string;
|
|
77
|
+
table: {
|
|
78
|
+
type: {
|
|
79
|
+
summary: string;
|
|
80
|
+
};
|
|
81
|
+
defaultValue: {
|
|
82
|
+
summary: string;
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
tooltipPlacement: {
|
|
87
|
+
control: string;
|
|
88
|
+
options: import("@popperjs/core").Placement[];
|
|
89
|
+
defaultValue: string;
|
|
90
|
+
description: string;
|
|
91
|
+
table: {
|
|
92
|
+
type: {
|
|
93
|
+
summary: string;
|
|
94
|
+
};
|
|
95
|
+
defaultValue: {
|
|
96
|
+
summary: string;
|
|
97
|
+
};
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
tooltipText: {
|
|
101
|
+
type: string;
|
|
102
|
+
description: string;
|
|
103
|
+
table: {
|
|
104
|
+
type: {
|
|
105
|
+
summary: string;
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
loading: {
|
|
110
|
+
type: string;
|
|
111
|
+
control: string;
|
|
112
|
+
description: string;
|
|
113
|
+
options: string[];
|
|
114
|
+
table: {
|
|
115
|
+
type: {
|
|
116
|
+
summary: string;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
handleClick: {
|
|
121
|
+
type: string;
|
|
122
|
+
description: string;
|
|
123
|
+
table: {
|
|
124
|
+
type: {
|
|
125
|
+
summary: string;
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
backgroundColor: {
|
|
130
|
+
description: string;
|
|
131
|
+
control: string;
|
|
132
|
+
};
|
|
133
|
+
color: {
|
|
134
|
+
description: string;
|
|
135
|
+
control: string;
|
|
136
|
+
};
|
|
137
|
+
showBadge: {
|
|
138
|
+
type: string;
|
|
139
|
+
description: string;
|
|
140
|
+
table: {
|
|
141
|
+
type: {
|
|
142
|
+
summary: string;
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
};
|
|
146
|
+
badgeProps: {
|
|
147
|
+
type: string;
|
|
148
|
+
description: string;
|
|
149
|
+
};
|
|
150
|
+
badgeIconName: any;
|
|
151
|
+
badgePosition: any;
|
|
152
|
+
badgeIconColor: any;
|
|
153
|
+
badgeBorderColor: any;
|
|
154
|
+
badgeBackgroundColor: any;
|
|
155
|
+
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { AvatarProps as CAvatarProps, Placement } from '@chakra-ui/react';
|
|
2
|
+
import { IconName } from 'components/MediaAndIcons/Icon';
|
|
2
3
|
import React, { CSSProperties } from 'react';
|
|
3
4
|
import { AvatarSize } from './avatar.types';
|
|
5
|
+
import { AvatarBadgeProps } from './components/AvatarBadge/avatarBadge.component';
|
|
4
6
|
export declare enum AvatarVariant {
|
|
5
7
|
Green = "green",
|
|
6
8
|
Red = "red",
|
|
@@ -8,7 +10,8 @@ export declare enum AvatarVariant {
|
|
|
8
10
|
Comet = "comet",
|
|
9
11
|
Number = "number",
|
|
10
12
|
Dashed = "dashed",
|
|
11
|
-
Image = "image"
|
|
13
|
+
Image = "image",
|
|
14
|
+
Icon = "icon"
|
|
12
15
|
}
|
|
13
16
|
export interface AvatarProps extends CAvatarProps {
|
|
14
17
|
name: string;
|
|
@@ -21,6 +24,10 @@ export interface AvatarProps extends CAvatarProps {
|
|
|
21
24
|
showRemoveButton?: boolean;
|
|
22
25
|
handleRemoveButtonClick?: React.MouseEventHandler<HTMLDivElement>;
|
|
23
26
|
variant?: AvatarVariant;
|
|
27
|
+
iconName?: IconName;
|
|
24
28
|
tooltipText?: string;
|
|
29
|
+
showBadge?: boolean;
|
|
30
|
+
badgeProps?: AvatarBadgeProps;
|
|
31
|
+
isNotClickable?: boolean;
|
|
25
32
|
}
|
|
26
|
-
export declare const Avatar: ({ name, src, isClinic, size, showTooltip, tooltipPlacement, style, handleClick, showRemoveButton, handleRemoveButtonClick, variant, tooltipText, ...rest }: AvatarProps) => JSX.Element;
|
|
33
|
+
export declare const Avatar: ({ name, src, isClinic, size, showTooltip, tooltipPlacement, style, handleClick, showRemoveButton, handleRemoveButtonClick, variant, iconName, tooltipText, showBadge, badgeProps, isNotClickable, ...rest }: AvatarProps) => JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const AvatarConfig:
|
|
1
|
+
import { CustomStyleConfig } from 'shared/types';
|
|
2
|
+
export declare const AvatarConfig: CustomStyleConfig;
|
package/build/components/MediaAndIcons/Avatar/components/AvatarBadge/avatarBadge.component.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { IconName } from 'components/MediaAndIcons/Icon';
|
|
2
|
+
import { AvatarSize } from '../../avatar.types';
|
|
3
|
+
export declare enum AvatarBadgePosition {
|
|
4
|
+
TopLeft = "topLeft",
|
|
5
|
+
TopRight = "topRight",
|
|
6
|
+
BottomLeft = "bottomLeft",
|
|
7
|
+
BottomRight = "bottomRight"
|
|
8
|
+
}
|
|
9
|
+
export interface AvatarBadgeProps {
|
|
10
|
+
badgeIconName?: IconName;
|
|
11
|
+
badgeBackgroundColor?: string;
|
|
12
|
+
badgeBorderColor?: string;
|
|
13
|
+
badgeIconColor?: string;
|
|
14
|
+
badgePosition?: AvatarBadgePosition;
|
|
15
|
+
}
|
|
16
|
+
interface AvatarBadgeComponentProps extends AvatarBadgeProps {
|
|
17
|
+
avatarSize: AvatarSize;
|
|
18
|
+
}
|
|
19
|
+
declare const AvatarBadge: ({ avatarSize, badgeIconName, badgeBackgroundColor, badgeBorderColor, badgeIconColor, badgePosition, }: AvatarBadgeComponentProps) => JSX.Element;
|
|
20
|
+
export default AvatarBadge;
|
package/build/index.js
CHANGED
|
@@ -6614,6 +6614,39 @@ var toTitleCase = function (s) {
|
|
|
6614
6614
|
.join('');
|
|
6615
6615
|
};
|
|
6616
6616
|
|
|
6617
|
+
var getNextIconSize = function (size, larger, count) {
|
|
6618
|
+
if (larger === void 0) { larger = true; }
|
|
6619
|
+
if (count === void 0) { count = 1; }
|
|
6620
|
+
var nextSize;
|
|
6621
|
+
switch (size) {
|
|
6622
|
+
case 'xs':
|
|
6623
|
+
nextSize = larger ? 'sm' : 'xs';
|
|
6624
|
+
break;
|
|
6625
|
+
case 'sm':
|
|
6626
|
+
nextSize = larger ? 'md' : 'xs';
|
|
6627
|
+
break;
|
|
6628
|
+
case 'md':
|
|
6629
|
+
nextSize = larger ? 'lg' : 'sm';
|
|
6630
|
+
break;
|
|
6631
|
+
case 'lg':
|
|
6632
|
+
nextSize = larger ? 'xl' : 'md';
|
|
6633
|
+
break;
|
|
6634
|
+
case 'xl':
|
|
6635
|
+
nextSize = larger ? '2xl' : 'lg';
|
|
6636
|
+
break;
|
|
6637
|
+
case '2xl':
|
|
6638
|
+
nextSize = larger ? '2xl' : 'xl';
|
|
6639
|
+
break;
|
|
6640
|
+
default:
|
|
6641
|
+
nextSize = size;
|
|
6642
|
+
break;
|
|
6643
|
+
}
|
|
6644
|
+
if (count > 1) {
|
|
6645
|
+
nextSize = getNextIconSize(nextSize, larger, count - 1);
|
|
6646
|
+
}
|
|
6647
|
+
return nextSize;
|
|
6648
|
+
};
|
|
6649
|
+
|
|
6617
6650
|
var Tooltip = function (_a) {
|
|
6618
6651
|
var children = _a.children, label = _a.label, _b = _a.openDelay, openDelay = _b === void 0 ? 350 : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.titleCaseLabel, titleCaseLabel = _d === void 0 ? true : _d, rest = __rest(_a, ["children", "label", "openDelay", "placement", "titleCaseLabel"]);
|
|
6619
6652
|
var components = useTheme().components;
|
|
@@ -6635,59 +6668,6 @@ var TooltipConfig = {
|
|
|
6635
6668
|
},
|
|
6636
6669
|
};
|
|
6637
6670
|
|
|
6638
|
-
exports.AvatarVariant = void 0;
|
|
6639
|
-
(function (AvatarVariant) {
|
|
6640
|
-
AvatarVariant["Green"] = "green";
|
|
6641
|
-
AvatarVariant["Red"] = "red";
|
|
6642
|
-
AvatarVariant["Blue"] = "blue";
|
|
6643
|
-
AvatarVariant["Comet"] = "comet";
|
|
6644
|
-
AvatarVariant["Number"] = "number";
|
|
6645
|
-
AvatarVariant["Dashed"] = "dashed";
|
|
6646
|
-
AvatarVariant["Image"] = "image";
|
|
6647
|
-
})(exports.AvatarVariant || (exports.AvatarVariant = {}));
|
|
6648
|
-
var getAvatarVariant = function (charCode) {
|
|
6649
|
-
if (charCode >= 65 && charCode <= 71) {
|
|
6650
|
-
return exports.AvatarVariant.Blue;
|
|
6651
|
-
}
|
|
6652
|
-
else if (charCode >= 72 && charCode <= 77) {
|
|
6653
|
-
return exports.AvatarVariant.Red;
|
|
6654
|
-
}
|
|
6655
|
-
else if (charCode >= 78 && charCode <= 84) {
|
|
6656
|
-
return exports.AvatarVariant.Green;
|
|
6657
|
-
}
|
|
6658
|
-
else {
|
|
6659
|
-
return exports.AvatarVariant.Comet;
|
|
6660
|
-
}
|
|
6661
|
-
};
|
|
6662
|
-
var Avatar = function (_a) {
|
|
6663
|
-
var name = _a.name, src = _a.src, _b = _a.isClinic, isClinic = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.showTooltip, showTooltip = _d === void 0 ? true : _d, _e = _a.tooltipPlacement, tooltipPlacement = _e === void 0 ? 'bottom' : _e, style = _a.style, handleClick = _a.handleClick, showRemoveButton = _a.showRemoveButton, handleRemoveButtonClick = _a.handleRemoveButtonClick, variant = _a.variant, tooltipText = _a.tooltipText, rest = __rest(_a, ["name", "src", "isClinic", "size", "showTooltip", "tooltipPlacement", "style", "handleClick", "showRemoveButton", "handleRemoveButtonClick", "variant", "tooltipText"]);
|
|
6664
|
-
var theme = useTheme();
|
|
6665
|
-
var _f = __read(React.useState(!!src), 2), isSrcValid = _f[0], setIsSrcValid = _f[1];
|
|
6666
|
-
var _g = __read(React.useState(false), 2), isHoveringAvatar = _g[0], setIsHoveringAvatar = _g[1];
|
|
6667
|
-
var _h = __read(React.useState(false), 2), isHoveringRemoveButton = _h[0], setIsHoveringRemoveButton = _h[1];
|
|
6668
|
-
var shouldHideRemoveButton = size === 'xs' || variant === exports.AvatarVariant.Dashed || variant === exports.AvatarVariant.Number;
|
|
6669
|
-
var _variant = isClinic ? 'comet' : getAvatarVariant(name.charCodeAt(0));
|
|
6670
|
-
if (isSrcValid) {
|
|
6671
|
-
_variant = 'image';
|
|
6672
|
-
}
|
|
6673
|
-
var avatarDynamicStyles = __assign({ cursor: handleClick ? 'pointer' : 'auto' }, style);
|
|
6674
|
-
var avatarMarkup = (React__default["default"].createElement(react.Avatar, __assign({}, rest, { name: name, src: src, size: size, style: avatarDynamicStyles, variant: variant || _variant, onClick: handleClick, onError: function () { return setIsSrcValid(false); }, onMouseEnter: function () { return setIsHoveringAvatar(true); }, onMouseLeave: function () { return setIsHoveringAvatar(false); } }), showRemoveButton && isHoveringAvatar && !shouldHideRemoveButton && (React__default["default"].createElement(react.Box, { backgroundColor: theme.colors.white, borderRadius: "9999px", cursor: "pointer", position: "absolute", top: "-4px", right: "-4px", onClick: handleRemoveButtonClick, onMouseEnter: function () { return setIsHoveringRemoveButton(true); }, onMouseLeave: function () { return setIsHoveringRemoveButton(false); } },
|
|
6675
|
-
React__default["default"].createElement(Icon, { name: "closeCircle", size: isHoveringRemoveButton ? 'sm' : 'xs', colorToken: "default" })))));
|
|
6676
|
-
if (showTooltip) {
|
|
6677
|
-
return (React__default["default"].createElement(Tooltip, { label: tooltipText || name, placement: tooltipPlacement }, avatarMarkup));
|
|
6678
|
-
}
|
|
6679
|
-
return avatarMarkup;
|
|
6680
|
-
};
|
|
6681
|
-
|
|
6682
|
-
var AvatarGroup = function (_a) {
|
|
6683
|
-
var avatars = _a.avatars, _b = _a.max, max = _b === void 0 ? 3 : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, handleAddButtonClick = _a.handleAddButtonClick, _d = _a.showAddButton, showAddButton = _d === void 0 ? true : _d, addButtonTooltipText = _a.addButtonTooltipText, _e = _a.showRemoveAvatarButton, showRemoveAvatarButton = _e === void 0 ? false : _e, handleRemoveButtonClick = _a.handleRemoveButtonClick;
|
|
6684
|
-
var mergedNames = React.useMemo(function () { return avatars.map(function (avatar) { return avatar.name; }).join(', '); }, [avatars]);
|
|
6685
|
-
var spacing = size === 'lg' || size === 'md' ? -2 : -1;
|
|
6686
|
-
return (React__default["default"].createElement(react.AvatarGroup, { size: size, spacing: spacing },
|
|
6687
|
-
avatars.length > max ? (React__default["default"].createElement(Avatar, { name: "".concat(avatars.length), size: size, variant: exports.AvatarVariant.Number, tooltipText: mergedNames })) : (avatars.map(function (avatar) { return (React__default["default"].createElement(Avatar, __assign({}, avatar, { key: avatar.name, size: size, showRemoveButton: showRemoveAvatarButton, handleRemoveButtonClick: handleRemoveButtonClick }))); })),
|
|
6688
|
-
showAddButton && (React__default["default"].createElement(Avatar, { name: "", variant: exports.AvatarVariant.Dashed, icon: React__default["default"].createElement(Icon, { name: "plus", colorToken: "subtle", size: size }), onClick: handleAddButtonClick, tooltipText: addButtonTooltipText, size: size }))));
|
|
6689
|
-
};
|
|
6690
|
-
|
|
6691
6671
|
var AvatarConfig = {
|
|
6692
6672
|
baseStyle: {
|
|
6693
6673
|
container: {
|
|
@@ -6839,9 +6819,126 @@ var AvatarConfig = {
|
|
|
6839
6819
|
},
|
|
6840
6820
|
},
|
|
6841
6821
|
},
|
|
6822
|
+
icon: {
|
|
6823
|
+
container: {
|
|
6824
|
+
border: 0,
|
|
6825
|
+
color: adaptiveColors.icon.light.default,
|
|
6826
|
+
backgroundColor: coreColors.comet[50],
|
|
6827
|
+
opacity: 1,
|
|
6828
|
+
_hover: {
|
|
6829
|
+
backgroundColor: coreColors.comet[100],
|
|
6830
|
+
},
|
|
6831
|
+
_active: {
|
|
6832
|
+
backgroundColor: coreColors.comet[200],
|
|
6833
|
+
},
|
|
6834
|
+
},
|
|
6835
|
+
},
|
|
6842
6836
|
},
|
|
6843
6837
|
};
|
|
6844
6838
|
|
|
6839
|
+
exports.AvatarBadgePosition = void 0;
|
|
6840
|
+
(function (AvatarBadgePosition) {
|
|
6841
|
+
AvatarBadgePosition["TopLeft"] = "topLeft";
|
|
6842
|
+
AvatarBadgePosition["TopRight"] = "topRight";
|
|
6843
|
+
AvatarBadgePosition["BottomLeft"] = "bottomLeft";
|
|
6844
|
+
AvatarBadgePosition["BottomRight"] = "bottomRight";
|
|
6845
|
+
})(exports.AvatarBadgePosition || (exports.AvatarBadgePosition = {}));
|
|
6846
|
+
var AvatarBadge = function (_a) {
|
|
6847
|
+
var avatarSize = _a.avatarSize, badgeIconName = _a.badgeIconName, badgeBackgroundColor = _a.badgeBackgroundColor, badgeBorderColor = _a.badgeBorderColor, badgeIconColor = _a.badgeIconColor, badgePosition = _a.badgePosition;
|
|
6848
|
+
var useSmallBadge = React.useMemo(function () { return avatarSize === 'xs' || !badgeIconName; }, [badgeIconName, avatarSize]);
|
|
6849
|
+
var getBadgeTransform = function (position) {
|
|
6850
|
+
var _a, _b, _c, _d;
|
|
6851
|
+
var parentSizeString = (_d = (_c = (_b = (_a = AvatarConfig.sizes) === null || _a === void 0 ? void 0 : _a[avatarSize]) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.height) === null || _d === void 0 ? void 0 : _d.toString();
|
|
6852
|
+
var parentSize = Number(parentSizeString === null || parentSizeString === void 0 ? void 0 : parentSizeString.replace('px', ''));
|
|
6853
|
+
var translation = parentSize / 2;
|
|
6854
|
+
switch (position) {
|
|
6855
|
+
case exports.AvatarBadgePosition.TopLeft:
|
|
6856
|
+
return useSmallBadge && avatarSize !== 'xs'
|
|
6857
|
+
? "translate(".concat(translation * -1.35, "px, ").concat(translation * -1.35, "px)")
|
|
6858
|
+
: "translate(".concat(translation * -1.2, "px, ").concat(translation * -1.2, "px)");
|
|
6859
|
+
case exports.AvatarBadgePosition.TopRight:
|
|
6860
|
+
return useSmallBadge && avatarSize !== 'xs'
|
|
6861
|
+
? "translate(".concat(translation / 10, "px, ").concat(translation * -1.35, "px)")
|
|
6862
|
+
: "translate(".concat(translation / 5, "px, ").concat(translation * -1.2, "px)");
|
|
6863
|
+
case exports.AvatarBadgePosition.BottomLeft:
|
|
6864
|
+
return useSmallBadge && avatarSize !== 'xs'
|
|
6865
|
+
? "translate(".concat(translation * -1.35, "px, ").concat(translation / 10, "px)")
|
|
6866
|
+
: "translate(".concat(translation * -1.2, "px, ").concat(translation / 5, "px)");
|
|
6867
|
+
default:
|
|
6868
|
+
return useSmallBadge && avatarSize !== 'xs'
|
|
6869
|
+
? "translate(".concat(translation / 10, "px, ").concat(translation / 10, "px)")
|
|
6870
|
+
: "translate(".concat(translation / 3, "px, ").concat(translation / 3, "px)");
|
|
6871
|
+
}
|
|
6872
|
+
};
|
|
6873
|
+
return (React__default["default"].createElement(react.AvatarBadge, { color: badgeIconColor || adaptiveColors.icon.light.active, borderColor: badgeBorderColor || coreColors.white, borderWidth: "1px", bg: badgeBackgroundColor || semanticColors.background.info, boxSize: useSmallBadge ? '10px' : '18px', transform: getBadgeTransform(badgePosition || exports.AvatarBadgePosition.BottomRight) }, !useSmallBadge && badgeIconName && React__default["default"].createElement(Icon, { name: badgeIconName, size: 'xs' })));
|
|
6874
|
+
};
|
|
6875
|
+
|
|
6876
|
+
exports.AvatarVariant = void 0;
|
|
6877
|
+
(function (AvatarVariant) {
|
|
6878
|
+
AvatarVariant["Green"] = "green";
|
|
6879
|
+
AvatarVariant["Red"] = "red";
|
|
6880
|
+
AvatarVariant["Blue"] = "blue";
|
|
6881
|
+
AvatarVariant["Comet"] = "comet";
|
|
6882
|
+
AvatarVariant["Number"] = "number";
|
|
6883
|
+
AvatarVariant["Dashed"] = "dashed";
|
|
6884
|
+
AvatarVariant["Image"] = "image";
|
|
6885
|
+
AvatarVariant["Icon"] = "icon";
|
|
6886
|
+
})(exports.AvatarVariant || (exports.AvatarVariant = {}));
|
|
6887
|
+
var getAvatarVariant = function (charCode) {
|
|
6888
|
+
if (charCode >= 65 && charCode <= 71) {
|
|
6889
|
+
return exports.AvatarVariant.Blue;
|
|
6890
|
+
}
|
|
6891
|
+
else if (charCode >= 72 && charCode <= 77) {
|
|
6892
|
+
return exports.AvatarVariant.Red;
|
|
6893
|
+
}
|
|
6894
|
+
else if (charCode >= 78 && charCode <= 84) {
|
|
6895
|
+
return exports.AvatarVariant.Green;
|
|
6896
|
+
}
|
|
6897
|
+
else {
|
|
6898
|
+
return exports.AvatarVariant.Comet;
|
|
6899
|
+
}
|
|
6900
|
+
};
|
|
6901
|
+
var Avatar = function (_a) {
|
|
6902
|
+
var name = _a.name, src = _a.src, _b = _a.isClinic, isClinic = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.showTooltip, showTooltip = _d === void 0 ? true : _d, _e = _a.tooltipPlacement, tooltipPlacement = _e === void 0 ? 'bottom' : _e, style = _a.style, handleClick = _a.handleClick, showRemoveButton = _a.showRemoveButton, handleRemoveButtonClick = _a.handleRemoveButtonClick, variant = _a.variant, iconName = _a.iconName, tooltipText = _a.tooltipText, showBadge = _a.showBadge, badgeProps = _a.badgeProps, _f = _a.isNotClickable, isNotClickable = _f === void 0 ? false : _f, rest = __rest(_a, ["name", "src", "isClinic", "size", "showTooltip", "tooltipPlacement", "style", "handleClick", "showRemoveButton", "handleRemoveButtonClick", "variant", "iconName", "tooltipText", "showBadge", "badgeProps", "isNotClickable"]);
|
|
6903
|
+
var colors = useTheme().colors;
|
|
6904
|
+
var _g = __read(React.useState(!!src), 2), isSrcValid = _g[0], setIsSrcValid = _g[1];
|
|
6905
|
+
var _h = __read(React.useState(false), 2), isHoveringAvatar = _h[0], setIsHoveringAvatar = _h[1];
|
|
6906
|
+
var _j = __read(React.useState(false), 2), isHoveringRemoveButton = _j[0], setIsHoveringRemoveButton = _j[1];
|
|
6907
|
+
var shouldHideRemoveButton = size === 'xs' || variant === exports.AvatarVariant.Dashed || variant === exports.AvatarVariant.Number;
|
|
6908
|
+
var _variant = isClinic ? 'comet' : getAvatarVariant(name.charCodeAt(0));
|
|
6909
|
+
if (isSrcValid) {
|
|
6910
|
+
_variant = exports.AvatarVariant.Image;
|
|
6911
|
+
}
|
|
6912
|
+
if (iconName) {
|
|
6913
|
+
_variant = exports.AvatarVariant.Icon;
|
|
6914
|
+
}
|
|
6915
|
+
var avatarDynamicStyles = __assign({ cursor: handleClick ? 'pointer' : 'auto' }, style);
|
|
6916
|
+
var avatarMarkup = (React__default["default"].createElement(react.Avatar, __assign({}, rest, { name: iconName ? '' : name, src: src, size: size, style: isNotClickable ? style : avatarDynamicStyles, variant: variant || _variant }, (iconName && {
|
|
6917
|
+
icon: React__default["default"].createElement(Icon, { name: iconName, size: getNextIconSize(size, true, size === 'sm' || size === 'xs' ? 2 : 1) }),
|
|
6918
|
+
}), { icon: iconName && React__default["default"].createElement(Icon, { name: iconName, size: getNextIconSize(size, true, size === 'sm' || size === 'xs' ? 2 : 1) }), _hover: isNotClickable
|
|
6919
|
+
? {}
|
|
6920
|
+
: {
|
|
6921
|
+
backgroundColor: colors.gray[50],
|
|
6922
|
+
zIndex: 2,
|
|
6923
|
+
}, onClick: handleClick, onError: function () { return setIsSrcValid(false); }, onMouseEnter: function () { return setIsHoveringAvatar(true); }, onMouseLeave: function () { return setIsHoveringAvatar(false); } }),
|
|
6924
|
+
showRemoveButton && isHoveringAvatar && !shouldHideRemoveButton && (React__default["default"].createElement(react.Box, { backgroundColor: colors.white, borderRadius: "9999px", cursor: "pointer", position: "absolute", top: "-4px", right: "-4px", onClick: handleRemoveButtonClick, onMouseEnter: function () { return setIsHoveringRemoveButton(true); }, onMouseLeave: function () { return setIsHoveringRemoveButton(false); } },
|
|
6925
|
+
React__default["default"].createElement(Icon, { name: "closeCircle", size: isHoveringRemoveButton ? 'sm' : 'xs', colorToken: "default" }))),
|
|
6926
|
+
showBadge && React__default["default"].createElement(AvatarBadge, __assign({ avatarSize: size }, badgeProps))));
|
|
6927
|
+
if (showTooltip) {
|
|
6928
|
+
return (React__default["default"].createElement(Tooltip, { label: tooltipText || name, placement: tooltipPlacement }, avatarMarkup));
|
|
6929
|
+
}
|
|
6930
|
+
return avatarMarkup;
|
|
6931
|
+
};
|
|
6932
|
+
|
|
6933
|
+
var AvatarGroup = function (_a) {
|
|
6934
|
+
var avatars = _a.avatars, _b = _a.max, max = _b === void 0 ? 3 : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, handleAddButtonClick = _a.handleAddButtonClick, _d = _a.showAddButton, showAddButton = _d === void 0 ? true : _d, addButtonTooltipText = _a.addButtonTooltipText, _e = _a.showRemoveAvatarButton, showRemoveAvatarButton = _e === void 0 ? false : _e, handleRemoveButtonClick = _a.handleRemoveButtonClick;
|
|
6935
|
+
var mergedNames = React.useMemo(function () { return avatars.map(function (avatar) { return avatar.name; }).join(', '); }, [avatars]);
|
|
6936
|
+
var spacing = size === 'lg' || size === 'md' ? -2 : -1;
|
|
6937
|
+
return (React__default["default"].createElement(react.AvatarGroup, { size: size, spacing: spacing },
|
|
6938
|
+
avatars.length > max ? (React__default["default"].createElement(Avatar, { name: "".concat(avatars.length), size: size, variant: exports.AvatarVariant.Number, tooltipText: mergedNames })) : (avatars.map(function (avatar) { return (React__default["default"].createElement(Avatar, __assign({}, avatar, { key: avatar.name, size: size, showRemoveButton: showRemoveAvatarButton, handleRemoveButtonClick: handleRemoveButtonClick }))); })),
|
|
6939
|
+
showAddButton && (React__default["default"].createElement(Avatar, { name: "", variant: exports.AvatarVariant.Dashed, icon: React__default["default"].createElement(Icon, { name: "plus", colorToken: "subtle", size: size }), onClick: handleAddButtonClick, tooltipText: addButtonTooltipText, size: size }))));
|
|
6940
|
+
};
|
|
6941
|
+
|
|
6845
6942
|
var _path$5, _path2;
|
|
6846
6943
|
|
|
6847
6944
|
function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
|