@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
138 lines (137 loc) • 8.21 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 _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreact = require("@nutui/icons-react");
var _context = require("../avatargroup/context");
var _image = /*#__PURE__*/ _interop_require_default._(require("../image"));
var _typings = require("../../utils/typings");
var _avatargroup = /*#__PURE__*/ _interop_require_default._(require("../avatargroup"));
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
size: '',
shape: 'round',
icon: '',
background: '#eee',
color: '#666',
fit: 'cover',
src: '',
alt: ''
});
var classPrefix = "nut-avatar";
var Avatar = function Avatar(props) {
var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, size = _ref.size, shape = _ref.shape, background = _ref.background, color = _ref.color, src = _ref.src, alt = _ref.alt, icon = _ref.icon, fit = _ref.fit, className = _ref.className, style = _ref.style, onClick = _ref.onClick, onError = _ref.onError, rest = (0, _object_without_properties._)(_ref, [
"children",
"size",
"shape",
"background",
"color",
"src",
"alt",
"icon",
"fit",
"className",
"style",
"onClick",
"onError"
]);
var _useState // avatarGroup里的avatar的个数
= (0, _sliced_to_array._)((0, _react.useState)(0), 2), maxSum = _useState[0], setMaxSum = _useState[1];
var _useState1 // 是否显示的最大头像个数
= (0, _sliced_to_array._)((0, _react.useState)(false), 2), showMax = _useState1[0], setShowMax = _useState1[1];
var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(1), 2), avatarIndex = _useState2[0], setAvatarIndex = _useState2[1];
var avatarRef = (0, _react.useRef)(null);
var parent = (0, _react.useContext)(_context.AvatarContext);
var sizeValue = [
'large',
'normal',
'small'
];
var propAvatarGroup = parent.propAvatarGroup, avatarGroupRef = parent.avatarGroupRef;
var _obj;
var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || 'normal'), true), (0, _define_property._)(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape) || shape), true), (0, _define_property._)(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || 'normal', "-round"), shape === 'round' && true), _obj));
var cls = (0, _classnames.default)(classPrefix, classes, className);
var styles = (0, _object_spread._)({
width: sizeValue.indexOf(size) > -1 ? '' : "".concat(size, "px"),
height: sizeValue.indexOf(size) > -1 ? '' : "".concat(size, "px"),
backgroundColor: "".concat(background),
color: color,
marginLeft: avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : '',
zIndex: (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === 'right' ? "".concat(Math.abs(maxSum - avatarIndex)) : ''
}, 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)
};
var avatarLength = (0, _react.useCallback)(function(children) {
var _avatarRef_current_dataset, _avatarRef_current;
for(var i = 0; i < children.length; i++){
if (children[i] && children[i].classList && children[i].classList[0] === 'nut-avatar') {
children[i].setAttribute('data-index', i + 1);
}
}
var index = Number(avatarRef === null || avatarRef === void 0 ? void 0 : (_avatarRef_current = avatarRef.current) === null || _avatarRef_current === void 0 ? void 0 : (_avatarRef_current_dataset = _avatarRef_current.dataset) === null || _avatarRef_current_dataset === void 0 ? void 0 : _avatarRef_current_dataset.index);
var maxCount = (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || children.length;
setMaxSum(children.length);
setAvatarIndex(index);
if (index === children.length && index !== maxCount && children.length > maxCount) {
setShowMax(true);
}
}, [
propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max
]);
(0, _react.useEffect)(function() {
var avatarChildren = avatarGroupRef === null || avatarGroupRef === void 0 ? void 0 : avatarGroupRef.current.children;
if (avatarChildren) {
avatarLength(avatarChildren);
}
}, [
avatarLength,
avatarGroupRef
]);
var errorEvent = function errorEvent() {
onError && onError();
};
var clickAvatar = function clickAvatar(e) {
onClick && onClick(e);
};
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (showMax || !(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({
className: cls
}, rest), {
style: !showMax ? styles : maxStyles,
onClick: clickAvatar,
ref: avatarRef
}), (!(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, src && /*#__PURE__*/ _react.default.createElement(_image.default, {
className: "nut-avatar-img",
src: src,
alt: alt,
style: {
objectFit: fit
},
onError: errorEvent
}), /*#__PURE__*/ _react.default.isValidElement(icon) ? /*#__PURE__*/ _react.default.cloneElement(icon, (0, _object_spread_props._)((0, _object_spread._)({}, icon.props), {
className: "".concat(icon.props.className || '', " nut-avatar-icon")
})) : null, children && /*#__PURE__*/ _react.default.createElement("span", {
className: "nut-avatar-text"
}, children), !src && !icon && !children && /*#__PURE__*/ _react.default.createElement(_iconsreact.User, {
className: "nut-avatar-icon"
})), showMax && /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-avatar-text"
}, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || 0)))));
};
Avatar.displayName = 'NutAvatar';
Avatar.Group = _avatargroup.default;