@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
83 lines (82 loc) • 5.99 kB
JavaScript
import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React__default, { useState, useRef, useContext, useCallback, useEffect } from "react";
import Taro, { getEnv } from "@tarojs/taro";
import classNames from "classnames";
import { User } from "@nutui/icons-react-taro";
import { a as AvatarContext, A as AvatarGroup } from "./avatargroup.taro-ScakjsY1.js";
import { I as Image } from "./image.taro-CyF6ujA7.js";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { size: "", shape: "round", icon: "", background: "#eee", color: "#666", fit: "cover", src: "", alt: "" });
const classPrefix = `nut-avatar`;
const Avatar = (props) => {
const _a = Object.assign(Object.assign({}, defaultProps), props), { children, size, shape, background, color, src, alt, icon, fit, className, style, onClick, onError } = _a, rest = __rest(_a, ["children", "size", "shape", "background", "color", "src", "alt", "icon", "fit", "className", "style", "onClick", "onError"]);
const [maxSum, setMaxSum] = useState(0);
const [showMax, setShowMax] = useState(false);
const [avatarIndex, setAvatarIndex] = useState(1);
const avatarRef = useRef(null);
const parent = useContext(AvatarContext);
const sizeValue = ["large", "normal", "small"];
const { propAvatarGroup, avatarGroupRef } = parent;
const classes = classNames({
[`nut-avatar-${(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal"}`]: true,
[`nut-avatar-${(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape) || shape}`]: true
});
const cls = classNames(classPrefix, classes, className);
const styles = Object.assign({ width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, backgroundColor: `${background}`, color, marginLeft: avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? `${propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap}px` : "", zIndex: (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "" }, style);
const maxStyles = {
backgroundColor: `${propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground}`,
color: `${propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor}`
};
const avatarLength = useCallback((children2) => {
var _a2, _b;
for (let i = 0; i < children2.length; i++) {
if (children2[i] && children2[i].classList && isAvatarInClassList(children2[i])) {
children2[i].setAttribute("data-index", i + 1);
}
}
const index = Number((_b = (_a2 = avatarRef === null || avatarRef === void 0 ? void 0 : avatarRef.current) === null || _a2 === void 0 ? void 0 : _a2.dataset) === null || _b === void 0 ? void 0 : _b.index);
const maxCount = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max;
setMaxSum(children2.length);
setAvatarIndex(index);
if (index === children2.length && index !== maxCount && children2.length > maxCount) {
setShowMax(true);
}
}, [propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max]);
useEffect(() => {
const avatarChildren = avatarGroupRef === null || avatarGroupRef === void 0 ? void 0 : avatarGroupRef.current.children;
if (avatarChildren) {
avatarLength(avatarChildren);
}
}, [avatarLength, avatarGroupRef]);
const isAvatarInClassList = (element) => {
var _a2, _b;
if (getEnv() === Taro.ENV_TYPE.WEB) {
return element.classList[0] === "nut-avatar" || element.classList.values().next().value === "nut-avatar";
}
return ((_a2 = element.classList) === null || _a2 === void 0 ? void 0 : _a2.tokenList[0]) === "nut-avatar" || ((_b = element.classList) === null || _b === void 0 ? void 0 : _b.tokenList.values().next().value) === "nut-avatar";
};
const errorEvent = () => {
onError && onError();
};
const clickAvatar = (e) => {
onClick && onClick(e);
};
return 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)) && React__default.createElement(
"div",
Object.assign({ 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)) && React__default.createElement(
React__default.Fragment,
null,
src && React__default.createElement(Image, { className: "avatar-img", src, style: { objectFit: fit }, onError: errorEvent }),
React__default.isValidElement(icon) ? React__default.cloneElement(icon, Object.assign(Object.assign({}, icon.props), { className: `${icon.props.className || ""} icon` })) : null,
children && React__default.createElement("span", { className: "text" }, children),
!src && !icon && !children && React__default.createElement(User, { className: "icon" })
),
showMax && React__default.createElement("div", { className: "text" }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : `+ ${avatarIndex - Number((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || 0)}`)
));
};
Avatar.displayName = "NutAvatar";
Avatar.Group = AvatarGroup;
export {
Avatar as A
};