@tra-tech/react-native-kitra
Version:
UI kit for React Native
64 lines (63 loc) • 2.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _KitraProvider = require("../../core/KitraProvider");
var _Avatar = _interopRequireDefault(require("./Avatar"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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(_reactNative.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(_reactNative.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(_reactNative.View, {
key: index,
style: {
marginRight: -7
}
}, /*#__PURE__*/React.createElement(_Avatar.default, {
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.default, {
theme: theme,
typography: typography,
borderStyle: "circular",
size: "small",
containerStyle: {
backgroundColor: (limitContainerStyle === null || limitContainerStyle === void 0 ? void 0 : limitContainerStyle.backgroundColor) || '#82B98E'
},
avatarIcon: avatarIcon
}) : null);
};
var _default = (0, _KitraProvider.applyDefaults)(AvatarGroup);
exports.default = _default;
//# sourceMappingURL=AvatarGroup.js.map