wix-style-react
Version:
wix-style-react
238 lines (236 loc) • 7.18 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 _propTypes = _interopRequireDefault(require("prop-types"));
var _AvatarGroupSt = require("./AvatarGroup.st.css");
var _Avatar = _interopRequireDefault(require("../Avatar"));
var _Text = _interopRequireDefault(require("../Text"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/AvatarGroup/AvatarGroup.js";
var 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 = _ref => {
var {
index,
color
} = _ref;
var colorIndex = index;
if (color) {
return color;
}
while (colorIndex > 5) {
colorIndex = colorIndex - 6;
}
return myPatternColors[colorIndex];
};
var 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((item, index) => {
var {
ariaLabel,
color,
imgProps,
name,
text,
placeholder,
title
} = item;
var size = avatarSize === 'small' ? 'size24' : 'size30';
var shape = 'circle';
var avatarColor = getAvatarColor({
index,
color
});
return {
size,
shape,
ariaLabel,
color: avatarColor,
imgProps,
name,
text,
placeholder,
title
};
});
var avatars = avatarItemsLenghtHandler(avatarItems, avatarItems.length, itemsMaxLength, avatarSize);
return avatars;
};
var avatarItemsLenghtHandler = (items, itemsLength, maxItems, avatarSize) => {
var moreItemAvatar = {
text: "".concat(itemsLength - maxItems + 1, "+"),
size: avatarSize === 'small' ? 'size24' : 'size30',
isMoreItem: true
};
if (itemsLength > maxItems && maxItems >= 2) {
items.length = maxItems;
items[maxItems - 1] = moreItemAvatar;
}
return items;
};
var MoreIndicator = _ref2 => {
var {
text,
size
} = _ref2;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.avatarGroupMoreItem,
className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.moreIndicatorCircle, {
size
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 3
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
secondary: true,
weight: "normal",
className: _AvatarGroupSt.classes.moreIndicatorText,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 5
}
}, text));
};
/** AvatarGroup */
var AvatarGroup = _ref3 => {
var {
dataHook,
className,
type = 'stretched',
items = [],
maxItems = 5,
size = 'medium',
showDivider = false
} = _ref3;
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,
type
}, className),
"data-hook": dataHook,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 5
}
}, avatarCompArr.map((item, index) => {
var key = "".concat(Object.values(item));
if (item.isMoreItem) {
return /*#__PURE__*/_react.default.createElement("div", {
key: key,
className: _AvatarGroupSt.classes.avatarContainer,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(MoreIndicator, {
text: item.text,
size: size,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 15
}
}));
}
var shouldIncludeDivider = index === 0 && showDivider && avatarCompArr.length > 1;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
key: key,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _AvatarGroupSt.classes.avatarContainer,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_Avatar.default, (0, _extends2.default)({}, item, {
dataHook: _constants.dataHooks.avatarGroupItem,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 15
}
}))), shouldIncludeDivider && /*#__PURE__*/_react.default.createElement(_Divider.default, {
direction: "vertical",
className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.divider, {
size,
type
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 15
}
}));
}));
};
AvatarGroup.displayName = 'AvatarGroup';
AvatarGroup.propTypes = {
/**
* Applies a data-hook HTML attribute that can be used in the tests
*/
dataHook: _propTypes.default.string,
/**
* Allows to apply a CSS class to the component’s root element
*/
className: _propTypes.default.string,
/**
* Changes the way avatars are displayed inside the group.
*/
type: _propTypes.default.oneOf(['stretched', 'condensed']),
/**
* Changes the size of avatars in the group
*/
size: _propTypes.default.oneOf(['medium', 'small']),
/**
* Separates the first avatar with a divider from the rest of the group
*/
showDivider: _propTypes.default.bool,
/**
* Sets the maximum number of avatars to be displayed. Number which exceeds this limit will be hidden under the “N+” item.
*/
maxItems: _propTypes.default.number,
/**
* Use to pass an array of avatars
*/
items: _propTypes.default.arrayOf(_propTypes.default.shape({
ariaLabel: _propTypes.default.string,
color: _propTypes.default.oneOf(['A1', 'A2', 'A3', 'A4', 'A5', 'A6']),
imgProp: _propTypes.default.object,
name: _propTypes.default.string,
text: _propTypes.default.string,
placeholder: _propTypes.default.node,
title: _propTypes.default.string
})).isRequired
};
var _default = exports.default = AvatarGroup;
//# sourceMappingURL=AvatarGroup.js.map