mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-02 23:37:04 +00:00
149 lines
4.9 KiB
JavaScript
149 lines
4.9 KiB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
|
|
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
|
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
|
import _inherits from 'babel-runtime/helpers/inherits';
|
|
|
|
var _class, _temp2;
|
|
|
|
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import ConfigProvider from '../config-provider';
|
|
import Icon from '../icon';
|
|
import { obj } from '../util';
|
|
|
|
/**
|
|
* Avatar
|
|
*/
|
|
var Avatar = (_temp2 = _class = function (_Component) {
|
|
_inherits(Avatar, _Component);
|
|
|
|
function Avatar() {
|
|
var _temp, _this, _ret;
|
|
|
|
_classCallCheck(this, Avatar);
|
|
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
|
|
isImgExist: true
|
|
}, _this.handleImgLoadError = function () {
|
|
var onError = _this.props.onError;
|
|
|
|
var errorFlag = onError ? onError() : undefined;
|
|
if (errorFlag !== false) {
|
|
_this.setState({ isImgExist: false });
|
|
}
|
|
}, _this.getIconSize = function (avatarSize) {
|
|
return typeof avatarSize === 'number' ? avatarSize / 2 : avatarSize;
|
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
|
}
|
|
|
|
Avatar.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
|
if (prevProps.src !== this.props.src) {
|
|
// eslint-disable-next-line react/no-did-update-set-state
|
|
this.setState({ isImgExist: true });
|
|
}
|
|
};
|
|
|
|
Avatar.prototype.render = function render() {
|
|
var _classNames;
|
|
|
|
var _props = this.props,
|
|
prefix = _props.prefix,
|
|
className = _props.className,
|
|
style = _props.style,
|
|
size = _props.size,
|
|
icon = _props.icon,
|
|
alt = _props.alt,
|
|
srcSet = _props.srcSet,
|
|
shape = _props.shape,
|
|
src = _props.src;
|
|
var isImgExist = this.state.isImgExist;
|
|
var children = this.props.children;
|
|
|
|
|
|
var others = obj.pickOthers(Avatar.propTypes, this.props);
|
|
|
|
var cls = classNames((_classNames = {}, _classNames[prefix + 'avatar'] = true, _classNames[prefix + 'avatar-' + shape] = !!shape, _classNames[prefix + 'avatar-image'] = src && isImgExist, _classNames[prefix + 'avatar-' + size] = typeof size === 'string', _classNames), className);
|
|
|
|
var sizeStyle = typeof size === 'number' ? {
|
|
width: size,
|
|
height: size,
|
|
lineHeight: size + 'px',
|
|
fontSize: icon ? size / 2 : 18
|
|
} : {};
|
|
|
|
var iconSize = this.getIconSize(size);
|
|
if (src) {
|
|
if (isImgExist) {
|
|
children = React.createElement('img', {
|
|
src: src,
|
|
srcSet: srcSet,
|
|
onError: this.handleImgLoadError,
|
|
alt: alt
|
|
});
|
|
} else {
|
|
children = React.createElement(Icon, { type: 'picture', size: iconSize });
|
|
}
|
|
} else if (typeof icon === 'string') {
|
|
children = React.createElement(Icon, { type: icon, size: iconSize });
|
|
} else if (icon) {
|
|
var newIconSize = 'size' in icon.props ? icon.props.size : iconSize;
|
|
children = React.cloneElement(icon, { size: newIconSize });
|
|
}
|
|
|
|
return React.createElement(
|
|
'span',
|
|
_extends({
|
|
className: cls,
|
|
style: _extends({}, sizeStyle, style)
|
|
}, others),
|
|
children
|
|
);
|
|
};
|
|
|
|
return Avatar;
|
|
}(Component), _class.propTypes = {
|
|
prefix: PropTypes.string,
|
|
children: PropTypes.any,
|
|
className: PropTypes.string,
|
|
/**
|
|
* 头像的大小
|
|
*/
|
|
size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.number]),
|
|
/**
|
|
* 头像的形状
|
|
*/
|
|
shape: PropTypes.oneOf(['circle', 'square']),
|
|
/**
|
|
* icon 类头像的图标类型,可设为 Icon 的 `type` 或 `ReactNode`
|
|
*/
|
|
icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
|
|
/**
|
|
* 图片类头像的资源地址
|
|
*/
|
|
src: PropTypes.string,
|
|
/**
|
|
* 图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为
|
|
*/
|
|
onError: PropTypes.func,
|
|
/**
|
|
* 图像无法显示时的 alt 替代文本
|
|
*/
|
|
alt: PropTypes.string,
|
|
/**
|
|
* 图片类头像响应式资源地址
|
|
*/
|
|
srcSet: PropTypes.string
|
|
}, _class.defaultProps = {
|
|
prefix: 'next-',
|
|
size: 'medium',
|
|
shape: 'circle'
|
|
}, _temp2);
|
|
Avatar.displayName = 'Avatar';
|
|
|
|
|
|
export default ConfigProvider.config(Avatar); |