@wix/design-system
Version:
@wix/design-system
203 lines (201 loc) • 6.88 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _AvatarGroupSt = require("./AvatarGroup.st.css.js");
var _Avatar = _interopRequireDefault(require("../Avatar"));
var _Text = _interopRequireDefault(require("../Text"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AvatarGroup/AvatarGroup.jsx",
_this = void 0;
var avatarSizeMap = {
medium: 'size30',
small: 'size24',
tiny: 'size18'
};
var tinySizeMaxIndicatorCount = 9;
var getRandomColorPattern = function getRandomColorPattern() {
var patternColor = ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6'];
var firstIndex = Math.floor(Math.random() * 6); // get random number between 0 to 5
var lastIndex = firstIndex + 6;
return patternColor.slice(firstIndex, lastIndex);
};
var myPatternColors = getRandomColorPattern();
var getAvatarColor = function getAvatarColor(_ref) {
var index = _ref.index,
color = _ref.color;
var colorIndex = index;
if (color) {
return color;
}
while (colorIndex > 5) {
colorIndex = colorIndex - 6;
}
return myPatternColors[colorIndex];
};
var setAvatarCompPropsArr = function setAvatarCompPropsArr(items, avatarSize, itemsMaxLength) {
// gets the items prop from avatarGroup component and set it with the proper prop for avatar component such as size, shape etc.
var avatarItems = items.map(function (item, index) {
var ariaLabel = item.ariaLabel,
color = item.color,
imgProps = item.imgProps,
name = item.name,
text = item.text,
placeholder = item.placeholder,
title = item.title;
var size = avatarSizeMap[avatarSize];
var shape = 'circle';
var avatarColor = getAvatarColor({
index: index,
color: color
});
return {
size: size,
shape: shape,
ariaLabel: ariaLabel,
color: avatarColor,
imgProps: imgProps,
name: name,
text: text,
placeholder: placeholder,
title: title
};
});
var avatars = avatarItemsLengthHandler(avatarItems, avatarItems.length, itemsMaxLength, avatarSize);
return avatars;
};
var avatarItemsLengthHandler = function avatarItemsLengthHandler(items, itemsLength, maxItems, avatarSize) {
var remainingAvatarsCount = itemsLength - maxItems + 1;
var moreItemAvatar = {
text: "".concat(avatarSize === 'tiny' && remainingAvatarsCount > tinySizeMaxIndicatorCount ? tinySizeMaxIndicatorCount : remainingAvatarsCount, "+"),
size: avatarSizeMap[avatarSize],
isMoreItem: true
};
if (itemsLength > maxItems && maxItems >= 2) {
items.length = maxItems;
items[maxItems - 1] = moreItemAvatar;
}
return items;
};
var MoreIndicator = function MoreIndicator(_ref2) {
var text = _ref2.text,
size = _ref2.size;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.avatarGroupMoreItem,
className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.moreIndicatorCircle, {
size: size
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 3
}
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
secondary: true,
weight: "normal",
className: _AvatarGroupSt.classes.moreIndicatorText,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 5
}
}, text));
};
/** AvatarGroup */
var AvatarGroup = function AvatarGroup(_ref3) {
var dataHook = _ref3.dataHook,
className = _ref3.className,
_ref3$type = _ref3.type,
type = _ref3$type === void 0 ? 'stretched' : _ref3$type,
_ref3$items = _ref3.items,
items = _ref3$items === void 0 ? [] : _ref3$items,
_ref3$maxItems = _ref3.maxItems,
maxItems = _ref3$maxItems === void 0 ? 5 : _ref3$maxItems,
_ref3$size = _ref3.size,
size = _ref3$size === void 0 ? 'medium' : _ref3$size,
_ref3$showDivider = _ref3.showDivider,
showDivider = _ref3$showDivider === void 0 ? false : _ref3$showDivider;
var itemsMaxLength = maxItems < 2 ? 2 : maxItems;
var avatarCompArr = setAvatarCompPropsArr(items, size, itemsMaxLength);
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.root, {
size: size,
type: type
}, className),
"data-hook": dataHook,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 5
}
}, avatarCompArr.map(function (item, index) {
var key = "".concat(Object.values(item));
if (item.isMoreItem) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: key,
className: _AvatarGroupSt.classes.avatarContainer,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(MoreIndicator, {
text: item.text,
size: size,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 15
}
}));
}
var shouldIncludeDivider = index === 0 && showDivider && avatarCompArr.length > 1;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
key: key,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _AvatarGroupSt.classes.avatarContainer,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, item, {
dataHook: _constants.dataHooks.avatarGroupItem,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 15
}
}))), shouldIncludeDivider && /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
direction: "vertical",
className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.divider, {
size: size,
type: type
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 15
}
}));
}));
};
AvatarGroup.displayName = 'AvatarGroup';
var _default = exports["default"] = AvatarGroup;