ant-design-vue/components/avatar/Avatar.tsx
2020-10-28 15:31:45 +08:00

171 lines
4.8 KiB
Vue

import { tuple, VueNode } from '../_util/type';
import { CSSProperties, defineComponent, inject, nextTick, PropType } from 'vue';
import { defaultConfigProvider } from '../config-provider';
import { getComponent } from '../_util/props-util';
import PropTypes from '../_util/vue-types';
export default defineComponent({
name: 'AAvatar',
props: {
prefixCls: PropTypes.string,
shape: PropTypes.oneOf(tuple('circle', 'square')),
size: {
type: [Number, String] as PropType<'large' | 'small' | 'default' | number>,
default: 'default',
},
src: PropTypes.string,
/** Srcset of image avatar */
srcset: PropTypes.string,
/** @deprecated please use `srcset` instead `srcSet` */
srcSet: PropTypes.string,
icon: PropTypes.VNodeChild,
alt: PropTypes.string,
loadError: {
type: Function as PropType<() => boolean>,
},
},
setup() {
return {
configProvider: inject('configProvider', defaultConfigProvider),
};
},
data() {
return {
isImgExist: true,
isMounted: false,
scale: 1,
lastChildrenWidth: undefined,
lastNodeWidth: undefined,
};
},
watch: {
src() {
nextTick(() => {
this.isImgExist = true;
this.scale = 1;
// force uodate for position
this.$forceUpdate();
});
},
},
mounted() {
nextTick(() => {
this.setScale();
this.isMounted = true;
});
},
updated() {
nextTick(() => {
this.setScale();
});
},
methods: {
setScale() {
if (!this.$refs.avatarChildren || !this.$refs.avatarNode) {
return;
}
const childrenWidth = (this.$refs.avatarChildren as HTMLElement).offsetWidth; // offsetWidth avoid affecting be transform scale
const nodeWidth = (this.$refs.avatarNode as HTMLElement).offsetWidth;
// denominator is 0 is no meaning
if (
childrenWidth === 0 ||
nodeWidth === 0 ||
(this.lastChildrenWidth === childrenWidth && this.lastNodeWidth === nodeWidth)
) {
return;
}
this.lastChildrenWidth = childrenWidth;
this.lastNodeWidth = nodeWidth;
// add 4px gap for each side to get better performance
this.scale = nodeWidth - 8 < childrenWidth ? (nodeWidth - 8) / childrenWidth : 1;
},
handleImgLoadError() {
const { loadError } = this.$props;
const errorFlag = loadError ? loadError() : undefined;
if (errorFlag !== false) {
this.isImgExist = false;
}
},
},
render() {
const { prefixCls: customizePrefixCls, shape, size, src, alt, srcset, srcSet } = this.$props;
const icon = getComponent(this, 'icon');
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('avatar', customizePrefixCls);
const { isImgExist, scale, isMounted } = this.$data;
const sizeCls = {
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
};
const classString = {
[prefixCls]: true,
...sizeCls,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-image`]: src && isImgExist,
[`${prefixCls}-icon`]: icon,
};
const sizeStyle: CSSProperties =
typeof size === 'number'
? {
width: `${size}px`,
height: `${size}px`,
lineHeight: `${size}px`,
fontSize: icon ? `${size / 2}px` : '18px',
}
: {};
let children: VueNode = this.$slots.default?.();
if (src && isImgExist) {
children = (
<img src={src} srcset={srcset || srcSet} onError={this.handleImgLoadError} alt={alt} />
);
} else if (icon) {
children = icon;
} else {
const childrenNode = this.$refs.avatarChildren;
if (childrenNode || scale !== 1) {
const transformString = `scale(${scale}) translateX(-50%)`;
const childrenStyle: CSSProperties = {
msTransform: transformString,
WebkitTransform: transformString,
transform: transformString,
};
const sizeChildrenStyle =
typeof size === 'number'
? {
lineHeight: `${size}px`,
}
: {};
children = (
<span
class={`${prefixCls}-string`}
ref="avatarChildren"
style={{ ...sizeChildrenStyle, ...childrenStyle }}
>
{children}
</span>
);
} else {
const childrenStyle: CSSProperties = {};
if (!isMounted) {
childrenStyle.opacity = 0;
}
children = (
<span class={`${prefixCls}-string`} ref="avatarChildren" style={{ opacity: 0 }}>
{children}
</span>
);
}
}
return (
<span ref="avatarNode" class={classString} style={sizeStyle}>
{children}
</span>
);
},
});