tdesign-react
Version:
TDesign Component for React
190 lines (185 loc) • 8.88 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from './dep-cb0a3966.js';
import { _ as _slicedToArray } from './dep-48805ab8.js';
import { _ as _objectWithoutProperties } from './dep-6b660ef0.js';
import React, { Fragment, useContext, useState, useRef, useEffect } from 'react';
import classNames from 'classnames';
import useConfig from '../hooks/useConfig.js';
import forwardRefWithStatics from '../_util/forwardRefWithStatics.js';
import useCommonClassName from '../hooks/useCommonClassName.js';
import composeRefs from '../_util/composeRefs.js';
import AvatarContext, { AvatarContextProvider } from '../avatar/AvatarContext.js';
import { avatarGroupDefaultProps, avatarDefaultProps } from '../avatar/defaultProps.js';
import useResizeObserver from '../hooks/useResizeObserver.js';
import { Image } from '../image/index.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import parseTNode from '../_util/parseTNode.js';
var _excluded$1 = ["className", "cascading", "collapseAvatar", "max", "size", "children"];
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AvatarGroup = function AvatarGroup(props) {
var _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var preClass = "".concat(classPrefix, "-avatar");
var _useDefaultProps = useDefaultProps(props, avatarGroupDefaultProps),
className = _useDefaultProps.className,
cascading = _useDefaultProps.cascading,
collapseAvatar = _useDefaultProps.collapseAvatar,
max = _useDefaultProps.max,
size = _useDefaultProps.size,
children = _useDefaultProps.children,
avatarGroupProps = _objectWithoutProperties(_useDefaultProps, _excluded$1);
var childrenList = React.Children.toArray(children);
var allChildrenList;
if (childrenList.length > 0) {
allChildrenList = childrenList.map(function (child, index) {
return /*#__PURE__*/React.cloneElement(child, _objectSpread$1({
key: "avatar-group-item-".concat(index)
}, child.props));
});
}
var groupClass = classNames("".concat(preClass, "-group"), className, _defineProperty(_defineProperty({}, "".concat(preClass, "--offset-right"), cascading === "right-up"), "".concat(preClass, "--offset-left"), cascading === "left-up"));
var childrenCount = childrenList.length;
if (max && childrenCount > max) {
var showList = allChildrenList.slice(0, max);
var ellipsisAvatar = /* @__PURE__ */React.createElement(Avatar, {
className: "".concat(preClass, "__collapse")
}, parseTNode(collapseAvatar) || "+".concat(childrenCount - max));
showList.push(/* @__PURE__ */React.createElement(Fragment, {
key: "t-avatar__collapse"
}, ellipsisAvatar));
return /* @__PURE__ */React.createElement(AvatarContextProvider, {
size: size
}, /* @__PURE__ */React.createElement("div", {
className: groupClass
}, showList));
}
return /* @__PURE__ */React.createElement(AvatarContextProvider, {
size: size
}, /* @__PURE__ */React.createElement("div", _objectSpread$1({
className: groupClass
}, avatarGroupProps), allChildrenList));
};
AvatarGroup.displayName = "AvatarGroup";
var _excluded = ["alt", "hideOnLoadFailed", "icon", "image", "shape", "size", "onError", "onClick", "onHover", "onContextmenu", "children", "content", "style", "imageProps", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Avatar = forwardRefWithStatics(function (props, ref) {
var _useDefaultProps = useDefaultProps(props, avatarDefaultProps),
alt = _useDefaultProps.alt,
hideOnLoadFailed = _useDefaultProps.hideOnLoadFailed,
icon = _useDefaultProps.icon,
image = _useDefaultProps.image,
shape = _useDefaultProps.shape,
avatarSize = _useDefaultProps.size,
onError = _useDefaultProps.onError,
_onClick = _useDefaultProps.onClick,
onHover = _useDefaultProps.onHover,
onContextmenu = _useDefaultProps.onContextmenu,
children = _useDefaultProps.children,
content = _useDefaultProps.content,
style = _useDefaultProps.style,
imageProps = _useDefaultProps.imageProps,
className = _useDefaultProps.className,
avatarProps = _objectWithoutProperties(_useDefaultProps, _excluded);
var groupSize = useContext(AvatarContext);
var _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var _useState = useState(1),
_useState2 = _slicedToArray(_useState, 2),
scale = _useState2[0],
setScale = _useState2[1];
var _useState3 = useState(true),
_useState4 = _slicedToArray(_useState3, 2),
isImgExist = _useState4[0],
setIsImgExist = _useState4[1];
var avatarRef = useRef(null);
var avatarChildrenRef = useRef(null);
var size = avatarSize === void 0 ? groupSize : avatarSize;
var gap = 4;
var handleScale = function handleScale() {
if (!avatarChildrenRef.current || !avatarRef.current) {
return;
}
var childrenWidth = avatarChildrenRef.current.offsetWidth;
var avatarWidth = avatarRef.current.offsetWidth;
if (childrenWidth !== 0 && avatarWidth !== 0) {
if (gap * 2 < avatarWidth) {
setScale(avatarWidth - gap * 2 < childrenWidth ? (avatarWidth - gap * 2) / childrenWidth : 1);
}
}
};
useResizeObserver(avatarChildrenRef, handleScale);
var handleImgLoadError = function handleImgLoadError(ctx) {
onError === null || onError === void 0 || onError(ctx);
!hideOnLoadFailed && setIsImgExist(false);
};
useEffect(function () {
setIsImgExist(true);
setScale(1);
}, [image]);
useEffect(function () {
handleScale();
}, []);
var _useCommonClassName = useCommonClassName(),
SIZE = _useCommonClassName.SIZE;
var numSizeStyle = size && !SIZE[size] ? {
width: size,
height: size,
fontSize: "".concat(Number.parseInt(size, 10) / 2, "px")
} : {};
var imageStyle = size && !SIZE[size] ? {
width: size,
height: size
} : {};
var preClass = "".concat(classPrefix, "-avatar");
var avatarClass = classNames(preClass, className, _defineProperty(_defineProperty(_defineProperty({}, SIZE[size], !!SIZE[size]), "".concat(preClass, "--").concat(shape), !!shape), "".concat(preClass, "__icon"), !!icon));
var renderChildren;
if (image && isImgExist) {
renderChildren = /* @__PURE__ */React.createElement(Image, _objectSpread({
src: image,
alt: alt,
style: imageStyle,
onError: handleImgLoadError
}, imageProps));
} else if (icon) {
renderChildren = icon;
} else {
var childrenStyle = {
transform: "scale(".concat(scale, ")")
};
renderChildren = /* @__PURE__ */React.createElement("span", {
ref: composeRefs(ref, avatarChildrenRef),
style: childrenStyle
}, children || content);
}
return /* @__PURE__ */React.createElement("div", _objectSpread({
ref: composeRefs(ref, avatarRef),
className: avatarClass,
style: _objectSpread(_objectSpread({}, numSizeStyle), style),
onClick: function onClick(e) {
return _onClick === null || _onClick === void 0 ? void 0 : _onClick({
e: e
});
},
onMouseEnter: function onMouseEnter(e) {
return onHover === null || onHover === void 0 ? void 0 : onHover({
e: e
});
},
onContextMenu: function onContextMenu(e) {
return onContextmenu === null || onContextmenu === void 0 ? void 0 : onContextmenu({
e: e
});
}
}, avatarProps), renderChildren);
}, {
Group: AvatarGroup
});
Avatar.displayName = "Avatar";
export { AvatarGroup as A, Avatar as a };
//# sourceMappingURL=dep-64ed7c12.js.map