1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports["default"] = void 0;
|
7 |
|
8 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9 |
|
10 | var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
11 |
|
12 | var _core = require("@emotion/core");
|
13 |
|
14 | var _react = require("react");
|
15 |
|
16 | var _styles = require("../Avatar/styles");
|
17 |
|
18 | var _ColorModeProvider = require("../ColorModeProvider");
|
19 |
|
20 | var _Flex = _interopRequireDefault(require("../Flex"));
|
21 |
|
22 | var _ThemeProvider = require("../ThemeProvider");
|
23 |
|
24 | var _utils = require("../utils");
|
25 |
|
26 |
|
27 | var MoreAvatarLabel = function MoreAvatarLabel(_ref) {
|
28 | var size = _ref.size,
|
29 | label = _ref.label,
|
30 | props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["size", "label"]);
|
31 | var borderColor = {
|
32 | light: "#fff",
|
33 | dark: "gray.800"
|
34 | };
|
35 | var bg = {
|
36 | light: "gray.200",
|
37 | dark: "whiteAlpha.400"
|
38 | };
|
39 | var theme = (0, _ThemeProvider.useTheme)();
|
40 | var sizeKey = _styles.avatarSizes[size];
|
41 | var _size = theme.sizes[sizeKey];
|
42 | var fontSize = "calc(" + _size + " / 2.75)";
|
43 |
|
44 | var _useColorMode = (0, _ColorModeProvider.useColorMode)(),
|
45 | colorMode = _useColorMode.colorMode;
|
46 |
|
47 | return (0, _core.jsx)(_Flex["default"], (0, _extends2["default"])({
|
48 | bg: bg[colorMode],
|
49 | color: "inherit",
|
50 | rounded: "full",
|
51 | alignItems: "center",
|
52 | justifyContent: "center",
|
53 | border: "2px",
|
54 | borderColor: borderColor[colorMode],
|
55 | size: _styles.avatarSizes[size],
|
56 | fontSize: fontSize
|
57 | }, props), label);
|
58 | };
|
59 |
|
60 | var AvatarGroup = function AvatarGroup(_ref2) {
|
61 | var size = _ref2.size,
|
62 | children = _ref2.children,
|
63 | borderColor = _ref2.borderColor,
|
64 | max = _ref2.max,
|
65 | _ref2$spacing = _ref2.spacing,
|
66 | spacing = _ref2$spacing === void 0 ? -3 : _ref2$spacing,
|
67 | rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["size", "children", "borderColor", "max", "spacing"]);
|
68 | var validChildren = (0, _utils.cleanChildren)(children);
|
69 | var count = validChildren.length;
|
70 | var clones = validChildren.map(function (child, index) {
|
71 | if (max && index > max) {
|
72 | return null;
|
73 | }
|
74 |
|
75 | if (max == null || max && index < max) {
|
76 | var isFirstAvatar = index === 0;
|
77 | return (0, _react.cloneElement)(child, {
|
78 | ml: isFirstAvatar ? 0 : spacing,
|
79 | size: size,
|
80 | borderColor: borderColor || child.props.borderColor,
|
81 | showBorder: true,
|
82 | zIndex: count - index
|
83 | });
|
84 | }
|
85 |
|
86 | if (max && index === max) {
|
87 | return (0, _core.jsx)(MoreAvatarLabel, {
|
88 | key: index,
|
89 | size: size,
|
90 | ml: spacing,
|
91 | label: "+" + (count - max)
|
92 | });
|
93 | }
|
94 | });
|
95 | return (0, _core.jsx)(_Flex["default"], (0, _extends2["default"])({
|
96 | alignItems: "center"
|
97 | }, rest), clones);
|
98 | };
|
99 |
|
100 | var _default = AvatarGroup;
|
101 | exports["default"] = _default; |
\ | No newline at end of file |