@tra-tech/react-native-kitra
Version:
UI kit for React Native
105 lines (104 loc) • 3.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.sizes = exports.default = void 0;
var _reactNative = require("react-native");
var _KitraProvider = require("../../core/KitraProvider");
var _Octicons = _interopRequireDefault(require("../Icons/Octicons"));
var _Badge = _interopRequireDefault(require("../Badge/Badge"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const Avatar = _ref => {
let {
typography,
theme,
source,
size = 'medium',
borderStyle,
containerStyle,
badgeContent = 'circular',
avatarIcon = /*#__PURE__*/React.createElement(_Octicons.default, {
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(_reactNative.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(_reactNative.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(_reactNative.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(_reactNative.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.default, {
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
})));
};
var _default = (0, _KitraProvider.applyDefaults)(Avatar);
exports.default = _default;
const sizes = {
medium: {
width: 100,
height: 100,
iconSize: 30,
borderRadius: 100,
fontSize: 28
},
small: {
width: 30,
height: 30,
iconSize: 10,
borderRadius: 15,
fontSize: 12
}
};
exports.sizes = sizes;
//# sourceMappingURL=Avatar.js.map