@tra-tech/react-native-kitra
Version:
UI kit for React Native
56 lines • 2.52 kB
JavaScript
import { View, Text } from 'react-native';
import { applyDefaults } from '../../core/KitraProvider';
import Avatar from './Avatar';
const AvatarGroup = _ref => {
var _avatarsType$slice;
let {
theme,
typography,
limitContainerStyle,
avatarsType,
avatarLimit = 10
} = _ref;
const limit = ((avatarsType === null || avatarsType === void 0 ? void 0 : avatarsType.length) || 0) - avatarLimit;
const avatarIcon = /*#__PURE__*/React.createElement(Text, {
style: [{
fontSize: typography === null || typography === void 0 ? void 0 : typography.body.smedium.fontSize,
lineHeight: typography === null || typography === void 0 ? void 0 : typography.body.smedium.lineHeight,
color: '#fff',
fontWeight: '500'
}, limitContainerStyle === null || limitContainerStyle === void 0 ? void 0 : limitContainerStyle.style]
}, "+", limit);
return /*#__PURE__*/React.createElement(View, {
style: {
flexDirection: 'row'
}
}, avatarsType === null || avatarsType === void 0 ? void 0 : (_avatarsType$slice = avatarsType.slice(0, avatarLimit)) === null || _avatarsType$slice === void 0 ? void 0 : _avatarsType$slice.map((item, index) => /*#__PURE__*/React.createElement(View, {
key: index,
style: {
marginRight: -7
}
}, /*#__PURE__*/React.createElement(Avatar, {
theme: theme,
typography: typography,
key: index,
source: item === null || item === void 0 ? void 0 : item.source,
borderStyle: item === null || item === void 0 ? void 0 : item.borderStyle,
avatarIcon: item === null || item === void 0 ? void 0 : item.avatarIcon,
containerStyle: item === null || item === void 0 ? void 0 : item.containerStyle,
size: "small",
label: item === null || item === void 0 ? void 0 : item.label,
badgePosition: item === null || item === void 0 ? void 0 : item.badgePosition,
badgeStyle: item === null || item === void 0 ? void 0 : item.badgeStyle,
badgeContent: item === null || item === void 0 ? void 0 : item.badgeContent
}))), (avatarsType.length || 0) > avatarLimit ? /*#__PURE__*/React.createElement(Avatar, {
theme: theme,
typography: typography,
borderStyle: "circular",
size: "small",
containerStyle: {
backgroundColor: (limitContainerStyle === null || limitContainerStyle === void 0 ? void 0 : limitContainerStyle.backgroundColor) || '#82B98E'
},
avatarIcon: avatarIcon
}) : null);
};
export default applyDefaults(AvatarGroup);
//# sourceMappingURL=AvatarGroup.js.map