@tra-tech/react-native-kitra
Version:
UI kit for React Native
96 lines • 3.33 kB
JavaScript
import { Image, View, Text } from 'react-native';
import { applyDefaults } from '../../core/KitraProvider';
import OcticonsIcon from '../Icons/Octicons';
import Badge from '../Badge/Badge';
const Avatar = _ref => {
let {
typography,
theme,
source,
size = 'medium',
borderStyle,
containerStyle,
badgeContent = 'circular',
avatarIcon = /*#__PURE__*/React.createElement(OcticonsIcon, {
name: "person",
size: sizes[size].iconSize,
color: theme === null || theme === void 0 ? void 0 : theme.primary
}),
label,
labelStyle,
badgeStyle,
badgePosition
} = _ref;
const splitName = string => {
const avatarText = string.trim().replace(/ {1,9}/g, ' ').split(' ').reduce((accumulator, currentValue) => accumulator.concat(currentValue[0]), '');
return avatarText;
};
return /*#__PURE__*/React.createElement(View, {
style: [{
width: sizes[size].width,
height: sizes[size].height,
borderRadius: borderStyle === 'rounded' ? 10 : 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.primary15
}, containerStyle]
}, (() => {
if (source) {
return /*#__PURE__*/React.createElement(Image, {
source: source,
resizeMethod: "auto",
style: [{
width: sizes[size].width,
height: sizes[size].height,
borderRadius: borderStyle === 'rounded' ? 10 : 50
}]
});
}
if (label) {
return /*#__PURE__*/React.createElement(Text, {
style: [{
fontSize: size === 'medium' ? typography === null || typography === void 0 ? void 0 : typography.heading.h2.fontSize : typography === null || typography === void 0 ? void 0 : typography.body.smedium.fontSize,
lineHeight: size === 'medium' ? typography === null || typography === void 0 ? void 0 : typography.heading.h2.lineHeight : typography === null || typography === void 0 ? void 0 : typography.body.smedium.lineHeight,
color: theme === null || theme === void 0 ? void 0 : theme.primary
}, labelStyle]
}, splitName(label));
}
return avatarIcon;
})(), badgePosition && /*#__PURE__*/React.createElement(View, {
style: [{
position: 'absolute',
borderRadius: 50,
padding: size === 'small' ? 2 : 4,
right: size === 'small' ? -5 : borderStyle === 'circular' ? 0 : -10
}, badgePosition === 'bottom' ? {
bottom: size === 'small' ? -2 : borderStyle === 'circular' ? 0 : -10
} : {
top: size === 'small' ? -5 : borderStyle === 'circular' ? 0 : -10
}]
}, /*#__PURE__*/React.createElement(Badge, {
typography: typography,
theme: theme,
size: size === 'small' ? 'small' : 'medium',
textStyles: badgeStyle === null || badgeStyle === void 0 ? void 0 : badgeStyle.textStyle,
containerStyle: badgeStyle === null || badgeStyle === void 0 ? void 0 : badgeStyle.containerStyle,
icon: badgeContent
})));
};
export default applyDefaults(Avatar);
export const sizes = {
medium: {
width: 100,
height: 100,
iconSize: 30,
borderRadius: 100,
fontSize: 28
},
small: {
width: 30,
height: 30,
iconSize: 10,
borderRadius: 15,
fontSize: 12
}
};
//# sourceMappingURL=Avatar.js.map