zent
Version:
一套前端设计语言和基于React的实现
118 lines (117 loc) • 4.7 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import cx from 'classnames';
import Icon from '../icon';
var NO_STYLE = {};
var HIDDEN_STYLE = {
opacity: 0,
};
var Avatar = (function (_super) {
__extends(Avatar, _super);
function Avatar() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.textNodeRef = createRef();
_this.avatarNodeRef = createRef();
_this.state = {
textScale: 1,
textReady: false,
};
return _this;
}
Avatar.prototype.render = function () {
var _a = this.props, size = _a.size, shape = _a.shape, src = _a.src, icon = _a.icon, children = _a.children, bordered = _a.bordered, style = _a.style, className = _a.className;
var useImage = !!src;
var useString = !!children;
var cls = cx('zent-avatar', className, {
'zent-avatar--size-large': size === 'large',
'zent-avatar--size-default': size === 'default',
'zent-avatar--size-small': size === 'small',
'zent-avatar--shape-circle': shape === 'circle',
'zent-avatar--shape-square': shape === 'square',
'zent-avatar--type-icon': !!icon,
'zent-avatar--type-image': useImage,
'zent-avatar--type-string': useString,
'zent-avatar--bordered': bordered,
});
if (useImage) {
return (_jsx("span", __assign({ style: style, className: cls, "data-zv": '10.0.17' }, { children: _jsx("img", { className: "zent-avatar-image", src: src, alt: "avatar", "data-zv": '10.0.17' }, void 0) }), void 0));
}
if (icon) {
return (_jsx("span", __assign({ style: style, className: cls, "data-zv": '10.0.17' }, { children: _jsx(Icon, { type: icon }, void 0) }), void 0));
}
var _b = this.state, textScale = _b.textScale, textReady = _b.textReady;
var textNode = this.textNodeRef.current;
var textStyle = NO_STYLE;
if (!textReady || !textNode) {
textStyle = HIDDEN_STYLE;
}
else if (textScale === 1) {
textStyle = NO_STYLE;
}
else {
var textTransformString = "scale(" + textScale + ")";
textStyle = {
msTransform: textTransformString,
WebkitTransform: textTransformString,
MozTransform: textTransformString,
transform: textTransformString,
position: 'absolute',
display: 'inline-block',
left: "calc(50% - " + Math.floor(textNode.offsetWidth / 2) + "px)",
};
}
var avatarStyle = typeof size === 'number'
? __assign({ width: size + "px", height: size + "px", lineHeight: size + "px" }, style) : style;
return (_jsx("span", __assign({ style: avatarStyle, className: cls, ref: this.avatarNodeRef, "data-zv": '10.0.17' }, { children: _jsx("span", __assign({ className: "zent-avatar-string", style: textStyle, ref: this.textNodeRef, "data-zv": '10.0.17' }, { children: children }), void 0) }), void 0));
};
Avatar.prototype.componentDidMount = function () {
this.updateTextScale();
};
Avatar.getDerivedStateFromProps = function (_a, _b) {
var children = _a.children;
var prevChildren = _b.prevChildren;
if (children !== prevChildren) {
return {
textReady: false,
prevChildren: children,
};
}
return null;
};
Avatar.prototype.componentDidUpdate = function (prevProps) {
if (prevProps.children !== this.props.children) {
this.updateTextScale();
}
};
Avatar.prototype.updateTextScale = function () {
var children = this.props.children;
if (children) {
var scale = fitText(this.avatarNodeRef.current, this.textNodeRef.current);
this.setState({
textScale: scale,
textReady: true,
});
}
};
Avatar.defaultProps = {
shape: 'circle',
size: 'default',
bordered: false,
};
return Avatar;
}(Component));
export { Avatar };
function fitText(containerNode, textNode) {
if (!containerNode || !textNode) {
return 1;
}
var containerWidth = containerNode.getBoundingClientRect().width;
var textWidth = textNode.offsetWidth;
var visualWidth = containerWidth - 6;
if (visualWidth > textWidth) {
return 1;
}
return visualWidth / textWidth;
}
export default Avatar;