@nodeject/ui-components
Version:
UI library for non-trivial components
137 lines (136 loc) • 7 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { Button, Avatar as AntdAvatar } from 'antd';
import cc from 'classcat';
import * as React from 'react';
import { Avatar, AvatarButton } from '../avatar';
import * as styles from './AvatarList.module.less';
import { Icons } from '../icons';
var defaultMaxAvatarCount = 6;
var defaultSmallWhiteBorder = 2;
var defaultMediumAndLargeWhiteBorder = 3;
export var AvatarList = function (props) {
var _a, _b;
var AddUserBtn = props.AddUserBtn, avatarList = props.avatarList, propsFirstAvatar = props.firstAvatar, firstAvatarId = props.firstAvatarId, onAvatarCountClick = props.onAvatarCountClick, onAddUserClick = props.onAddUserClick, size = props.size, whiteBorder = props.whiteBorder;
var _c = useGetBackgroundStyle(), ref = _c.ref, backgroundStyle = _c.backgroundStyle;
if (!avatarList) {
return React.createElement(React.Fragment, null);
}
var maxAvatarCount = props.maxAvatarCount || defaultMaxAvatarCount;
var avatarCount = avatarList.length;
var badgeCount = avatarCount - maxAvatarCount;
var showBadgeCount = avatarCount > maxAvatarCount;
var defaultWhiteBorder = whiteBorder || size === 'small'
? defaultSmallWhiteBorder
: defaultMediumAndLargeWhiteBorder;
var style = React.useMemo(function () {
return { border: defaultWhiteBorder + "px solid " + backgroundStyle };
}, [whiteBorder, backgroundStyle]);
var addUserButton = null;
if (AddUserBtn) {
addUserButton = AddUserBtn;
}
else if (onAddUserClick) {
addUserButton = (React.createElement(AddUserButton, { className: "items-center", onClick: onAddUserClick, size: size }));
}
var firstAvatarProps = avatarList.find(function (avatar) { return (avatar === null || avatar === void 0 ? void 0 : avatar.id) === firstAvatarId; });
var avatarListWrapperClassName = cc((_a = {},
_a[styles.avatarListWrapper] = true,
_a));
var avatarListClassName = cc((_b = {},
_b[styles.avatarList] = avatarCount > 0,
_b['items-center'] = true,
_b));
var avatarCountClassName = cc({
'ml-3': avatarCount > 0,
'items-center': true,
'cursor-pointer': Boolean(onAvatarCountClick)
});
var firstAvatar = propsFirstAvatar
? React.cloneElement(propsFirstAvatar, {
style: style
})
: null;
var addAvatarBtnClassName = cc({
'items-center flex': true.valueOf,
'ml-3': avatarCount > 0
});
return (React.createElement("div", { className: avatarListWrapperClassName, ref: ref },
React.createElement("div", { className: avatarListClassName },
avatarList
.filter(function (avatar) {
return (avatar === null || avatar === void 0 ? void 0 : avatar.id) !== firstAvatarId;
})
.slice(0, maxAvatarCount)
.reverse() // we reverse the list because CSS will use flex-direction: row-reverse
.map(function (avatarProps) {
var avatar = avatarProps.onAvatarClick ? (React.createElement(AvatarButton, __assign({ key: avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.id, className: "items-center", size: size, style: style }, avatarProps))) : (React.createElement(Avatar, __assign({ key: avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.id }, avatarProps, { style: style })));
return avatar;
}),
firstAvatarId
? firstAvatar ||
(firstAvatarProps.onAvatarClick ? (React.createElement(AvatarButton, __assign({ key: firstAvatarProps === null || firstAvatarProps === void 0 ? void 0 : firstAvatarProps.id, className: "items-center", size: 'large', style: style }, firstAvatarProps))) : (React.createElement(Avatar, __assign({ key: firstAvatarProps === null || firstAvatarProps === void 0 ? void 0 : firstAvatarProps.id }, firstAvatarProps, { size: "large", style: style }))))
: null),
showBadgeCount ? (React.createElement(AvatarCount, { key: 'avatar-count', className: avatarCountClassName, size: size, whiteBorder: props.whiteBorder, onClick: onAvatarCountClick },
React.createElement("div", { style: { fontWeight: 'bold' } },
"+",
badgeCount))) : null,
React.createElement("div", { className: addAvatarBtnClassName, style: {
paddingLeft: (avatarCount > 0 ? defaultWhiteBorder : 0) + "px"
} }, addUserButton)));
};
var useGetBackgroundStyle = function () {
var ref = React.useRef();
var _a = React.useState('white'), backgroundStyle = _a[0], setBackgroundStyle = _a[1];
React.useEffect(function () {
if (ref === null || ref === void 0 ? void 0 : ref.current) {
setBackgroundStyle(window.getComputedStyle(ref === null || ref === void 0 ? void 0 : ref.current).backgroundColor);
}
}, [ref]);
return {
ref: ref,
backgroundStyle: backgroundStyle
};
};
var AvatarCount = function (props) {
var _a;
var children = props.children, className = props.className, onClick = props.onClick, size = props.size, whiteBorder = props.whiteBorder;
var avatarCountClassName = cc((_a = {
avatarCount: true
},
_a[className] = Boolean(className),
_a.flex = true,
_a));
return (React.createElement("span", { className: avatarCountClassName, onClick: onClick, style: { border: whiteBorder + "px solid white" } },
React.createElement(AntdAvatar, { size: size }, children)));
};
export var AddUserButton = function (_a) {
var _b;
var className = _a.className, onClick = _a.onClick, propsSize = _a.size;
var onAddUserClick = function () {
if (onClick) {
onClick();
}
else {
console.warn('Please provide a onAddUserClick method to AvatarList');
}
};
var size = ((propsSize === null || propsSize === void 0 ? void 0 : propsSize.toString().replace('default', 'middle')) ||
'middle');
var addUserButtonClassName = cc((_b = {
addUserButton: true
},
_b[className] = Boolean(className),
_b));
return (React.createElement("span", { className: addUserButtonClassName, onClick: onAddUserClick },
React.createElement(Button, { icon: React.createElement(Icons.User.AddTeamIcon, null), shape: "circle", size: size })));
};