tdesign-react
Version:
TDesign Component for React
198 lines (190 loc) • 9.9 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
;
var defineProperty = require('./dep-0006fcfa.js');
var slicedToArray = require('./dep-8e4d656d.js');
var objectWithoutProperties = require('./dep-8fa3a4c2.js');
var React = require('react');
var classNames = require('classnames');
var hooks_useConfig = require('../hooks/useConfig.js');
var _util_forwardRefWithStatics = require('../_util/forwardRefWithStatics.js');
var hooks_useCommonClassName = require('../hooks/useCommonClassName.js');
var _util_composeRefs = require('../_util/composeRefs.js');
var avatar_AvatarContext = require('../avatar/AvatarContext.js');
var avatar_defaultProps = require('../avatar/defaultProps.js');
var hooks_useResizeObserver = require('../hooks/useResizeObserver.js');
var image_index = require('../image/index.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var _util_parseTNode = require('../_util/parseTNode.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
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._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 = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var preClass = "".concat(classPrefix, "-avatar");
var _useDefaultProps = hooks_useDefaultProps["default"](props, avatar_defaultProps.avatarGroupDefaultProps),
className = _useDefaultProps.className,
cascading = _useDefaultProps.cascading,
collapseAvatar = _useDefaultProps.collapseAvatar,
max = _useDefaultProps.max,
size = _useDefaultProps.size,
children = _useDefaultProps.children,
avatarGroupProps = objectWithoutProperties._objectWithoutProperties(_useDefaultProps, _excluded$1);
var childrenList = React__default["default"].Children.toArray(children);
var allChildrenList;
if (childrenList.length > 0) {
allChildrenList = childrenList.map(function (child, index) {
return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread$1({
key: "avatar-group-item-".concat(index)
}, child.props));
});
}
var groupClass = classNames__default["default"]("".concat(preClass, "-group"), className, defineProperty._defineProperty(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__default["default"].createElement(Avatar, {
className: "".concat(preClass, "__collapse")
}, _util_parseTNode["default"](collapseAvatar) || "+".concat(childrenCount - max));
showList.push(/* @__PURE__ */React__default["default"].createElement(React.Fragment, {
key: "t-avatar__collapse"
}, ellipsisAvatar));
return /* @__PURE__ */React__default["default"].createElement(avatar_AvatarContext.AvatarContextProvider, {
size: size
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: groupClass
}, showList));
}
return /* @__PURE__ */React__default["default"].createElement(avatar_AvatarContext.AvatarContextProvider, {
size: size
}, /* @__PURE__ */React__default["default"].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._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 = _util_forwardRefWithStatics["default"](function (props, ref) {
var _useDefaultProps = hooks_useDefaultProps["default"](props, avatar_defaultProps.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._objectWithoutProperties(_useDefaultProps, _excluded);
var groupSize = React.useContext(avatar_AvatarContext["default"]);
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var _useState = React.useState(1),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
scale = _useState2[0],
setScale = _useState2[1];
var _useState3 = React.useState(true),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
isImgExist = _useState4[0],
setIsImgExist = _useState4[1];
var avatarRef = React.useRef(null);
var avatarChildrenRef = React.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);
}
}
};
hooks_useResizeObserver["default"](avatarChildrenRef, handleScale);
var handleImgLoadError = function handleImgLoadError(ctx) {
onError === null || onError === void 0 || onError(ctx);
!hideOnLoadFailed && setIsImgExist(false);
};
React.useEffect(function () {
setIsImgExist(true);
setScale(1);
}, [image]);
React.useEffect(function () {
handleScale();
}, []);
var _useCommonClassName = hooks_useCommonClassName["default"](),
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__default["default"](preClass, className, defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty({}, SIZE[size], !!SIZE[size]), "".concat(preClass, "--").concat(shape), !!shape), "".concat(preClass, "__icon"), !!icon));
var renderChildren;
if (image && isImgExist) {
renderChildren = /* @__PURE__ */React__default["default"].createElement(image_index.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__default["default"].createElement("span", {
ref: _util_composeRefs["default"](ref, avatarChildrenRef),
style: childrenStyle
}, children || content);
}
return /* @__PURE__ */React__default["default"].createElement("div", _objectSpread({
ref: _util_composeRefs["default"](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";
exports.Avatar = Avatar;
exports.AvatarGroup = AvatarGroup;
//# sourceMappingURL=dep-ea5a3f20.js.map