@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
120 lines (119 loc) • 7.44 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Avatar", {
enumerable: true,
get: function() {
return Avatar;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _components = require("@tarojs/components");
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreacttaro = require("@nutui/icons-react-taro");
var _context = require("../avatargroup/context");
var _typings = require("../../utils/typings");
var _platform = require("../../utils/taro/platform");
var _index = /*#__PURE__*/ _interop_require_default._(require("../avatargroup/index"));
var _pxtransform = require("../../utils/taro/px-transform");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
size: (0, _platform.harmony)() || (0, _platform.td)() ? '40' : '',
shape: 'round',
icon: '',
background: '#eee',
color: '#666',
fit: 'cover',
src: '',
alt: '',
avatarIndex: 0
});
var classPrefix = "nut-avatar";
var Avatar = function Avatar(props) {
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, size = _$_object_spread.size, shape = _$_object_spread.shape, background = _$_object_spread.background, color = _$_object_spread.color, src = _$_object_spread.src, icon = _$_object_spread.icon, fit = _$_object_spread.fit, avatarIndex = _$_object_spread.avatarIndex, className = _$_object_spread.className, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onError = _$_object_spread.onError;
var _useState // 是否显示的最大头像个数
= (0, _sliced_to_array._)((0, _react.useState)(false), 2), showMax = _useState[0], setShowMax = _useState[1];
var avatarRef = (0, _react.useRef)(null);
var parent = (0, _react.useContext)(_context.AvatarContext);
var sizeValue = [
'large',
'normal',
'small'
];
var propAvatarGroup = parent.propAvatarGroup;
var groupSize = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size;
var groupShape = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape;
var groupCount = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.avatarCount;
var groupMax = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max;
var _obj;
var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "nut-avatar-".concat(groupSize || size || 'normal'), true), (0, _define_property._)(_obj, "nut-avatar-".concat(groupShape || shape), true), (0, _define_property._)(_obj, "nut-avatar-".concat(groupSize || size || 'normal', "-round"), shape === 'round' && true), _obj));
var nativeClasses = (0, _classnames.default)((0, _define_property._)({}, "nut-avatar-first-child", avatarIndex === 1));
var cls = (0, _classnames.default)(classPrefix, classes, className, nativeClasses);
var _obj1;
var styles = (0, _object_spread._)((_obj1 = {
width: sizeValue.indexOf(size) > -1 ? '' : (0, _pxtransform.pxTransform)(parseInt(size)),
height: sizeValue.indexOf(size) > -1 ? '' : (0, _pxtransform.pxTransform)(parseInt(size)),
backgroundColor: "".concat(background),
color: color
}, (0, _define_property._)(_obj1, (0, _platform.harmony)() ? 'marginRight' : 'marginLeft', avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : ''), (0, _define_property._)(_obj1, "zIndex", (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === 'right' ? Math.abs(groupCount - avatarIndex) : ''), _obj1), style);
var maxStyles = {
backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)
};
(0, _react.useEffect)(function() {
var maxCount = groupMax || groupCount;
if (avatarIndex === groupCount && avatarIndex !== maxCount && groupCount > maxCount) {
setShowMax(true);
}
}, [
avatarIndex,
groupCount
]);
var errorEvent = function errorEvent() {
onError && onError();
};
var clickAvatar = function clickAvatar(e) {
onClick && onClick(e);
};
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ _react.default.createElement(_components.View, {
className: cls,
style: !showMax ? styles : maxStyles,
onClick: clickAvatar,
ref: avatarRef
}, (!groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, src && /*#__PURE__*/ _react.default.createElement(_components.Image, {
className: "nut-avatar-img nut-avatar-".concat(groupSize || size || 'normal', "-img"),
src: src,
style: {
objectFit: fit
},
onError: errorEvent
}), /*#__PURE__*/ _react.default.isValidElement(icon) ? /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-avatar-text"
}, /*#__PURE__*/ _react.default.cloneElement(icon, (0, _object_spread_props._)((0, _object_spread._)({}, icon.props), {
color: color,
className: "".concat(icon.props.className || '', " nut-avatar-icon nut-avatar-").concat(groupSize || size || 'normal', "-icon")
}))) : null, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
style: {
color: color
},
className: "nut-avatar-text nut-avatar-".concat(groupSize || size || 'normal', "-text")
}, children), !src && !icon && !children && /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-avatar-text"
}, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.User, {
style: {
color: color
},
className: "nut-avatar-icon nut-avatar-".concat(groupSize || size || 'normal', "-icon")
}))), showMax && /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-avatar-text nut-avatar-".concat(groupSize || 'normal', "-text"),
style: (0, _object_spread._)({}, maxStyles)
}, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number(groupMax || 0)))));
};
Avatar.displayName = 'NutAvatar';
Avatar.Group = _index.default;