@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
79 lines (78 loc) • 5.99 kB
JavaScript
import { _ as __rest } from "./tslib.es6.js";
import React__default, { useState, useRef, useContext, useEffect } from "react";
import classNames from "classnames";
import { User } from "@nutui/icons-react";
import { A as AvatarContext } from "./context2.js";
import Image__default from "./Image.js";
import { C as ComponentDefaults } from "./typings.js";
import AvatarGroup__default from "./AvatarGroup.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) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
const _q = Object.assign(Object.assign({}, defaultProps), props), { children, size, shape, background, color, src, alt, icon, fit, className, style, onClick, onError } = _q, rest = __rest(_q, ["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 classes = classNames({
[`nut-avatar-${((_a = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _a === void 0 ? void 0 : _a.size) || size || "normal"}`]: true,
[`nut-avatar-${((_b = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _b === void 0 ? void 0 : _b.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 && ((_c = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _c === void 0 ? void 0 : _c.gap) ? `${(_d = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _d === void 0 ? void 0 : _d.gap}px` : "", zIndex: ((_e = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _e === void 0 ? void 0 : _e.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "" }, style);
const maxStyles = {
backgroundColor: `${(_f = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _f === void 0 ? void 0 : _f.maxBackground}`,
color: `${(_g = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _g === void 0 ? void 0 : _g.maxColor}`
};
useEffect(() => {
var _a2;
const avatarChildren = (_a2 = parent === null || parent === void 0 ? void 0 : parent.avatarGroupRef) === null || _a2 === void 0 ? void 0 : _a2.current.children;
if (avatarChildren) {
avatarLength(avatarChildren);
}
}, []);
const avatarLength = (children2) => {
var _a2, _b2, _c2;
for (let i = 0; i < children2.length; i++) {
if (children2[i] && children2[i].classList && children2[i].classList[0] === "nut-avatar") {
children2[i].setAttribute("data-index", i + 1);
}
}
const index = Number((_b2 = (_a2 = avatarRef === null || avatarRef === void 0 ? void 0 : avatarRef.current) === null || _a2 === void 0 ? void 0 : _a2.dataset) === null || _b2 === void 0 ? void 0 : _b2.index);
const maxCount = (_c2 = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _c2 === void 0 ? void 0 : _c2.max;
setMaxSum(children2.length);
setAvatarIndex(index);
if (index === children2.length && index !== maxCount && children2.length > maxCount) {
setShowMax(true);
}
};
const errorEvent = () => {
if (onError) {
onError();
}
};
const clickAvatar = (e) => {
onClick && onClick(e);
};
return React__default.createElement(React__default.Fragment, null, (showMax || !((_h = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _h === void 0 ? void 0 : _h.max) || avatarIndex <= ((_j = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _j === void 0 ? void 0 : _j.max)) && React__default.createElement(
"div",
Object.assign({ className: cls }, rest, { style: !showMax ? styles : maxStyles, onClick: clickAvatar, ref: avatarRef }),
(!((_k = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _k === void 0 ? void 0 : _k.max) || avatarIndex <= ((_l = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _l === void 0 ? void 0 : _l.max)) && React__default.createElement(
React__default.Fragment,
null,
src && React__default.createElement(Image__default, { className: "avatar-img", src, alt, 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" }, ((_m = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _m === void 0 ? void 0 : _m.maxContent) ? (_o = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _o === void 0 ? void 0 : _o.maxContent : `+ ${avatarIndex - Number(((_p = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _p === void 0 ? void 0 : _p.max) || 0)}`)
));
};
Avatar.displayName = "NutAvatar";
Avatar.Group = AvatarGroup__default;
export {
Avatar as default
};