ant-design-vue/components/avatar/Avatar.tsx
tangjinzhou 00dc2add94
chore: update ts type (#5408)
* feat: update prop type

* feat: update ts type

* feat: update ts type

* feat: update ts type

* feat: update ts type

* test: update snap

* feat: update ts type
2022-03-26 22:52:54 +08:00

220 lines
6.4 KiB
Vue

import type { VueNode } from '../_util/type';
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
import { getPropsSlot } from '../_util/props-util';
import PropTypes from '../_util/vue-types';
import useBreakpoint from '../_util/hooks/useBreakpoint';
import type { Breakpoint, ScreenSizeMap } from '../_util/responsiveObserve';
import { responsiveArray } from '../_util/responsiveObserve';
import useConfigInject from '../_util/hooks/useConfigInject';
import ResizeObserver from '../vc-resize-observer';
import { useInjectSize } from '../_util/hooks/useSize';
import eagerComputed from '../_util/eagerComputed';
export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
export const avatarProps = () => ({
prefixCls: String,
shape: { type: String as PropType<'circle' | 'square'>, default: 'circle' },
size: {
type: [Number, String, Object] as PropType<AvatarSize>,
default: (): AvatarSize => 'default',
},
src: String,
/** Srcset of image avatar */
srcset: String,
icon: PropTypes.any,
alt: String,
gap: Number,
draggable: { type: Boolean, default: undefined },
crossOrigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,
loadError: {
type: Function as PropType<() => boolean>,
},
});
export type AvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>;
const Avatar = defineComponent({
name: 'AAvatar',
inheritAttrs: false,
props: avatarProps(),
slots: ['icon'],
setup(props, { slots, attrs }) {
const isImgExist = ref(true);
const isMounted = ref(false);
const scale = ref(1);
const avatarChildrenRef = ref<HTMLElement>(null);
const avatarNodeRef = ref<HTMLElement>(null);
const { prefixCls } = useConfigInject('avatar', props);
const groupSize = useInjectSize();
const size = computed(() => {
return props.size === 'default' ? groupSize.value : props.size;
});
const screens = useBreakpoint();
const responsiveSize = eagerComputed(() => {
if (typeof props.size !== 'object') {
return undefined;
}
const currentBreakpoint: Breakpoint = responsiveArray.find(screen => screens.value[screen])!;
const currentSize = props.size[currentBreakpoint];
return currentSize;
});
const responsiveSizeStyle = (hasIcon: boolean) => {
if (responsiveSize.value) {
return {
width: `${responsiveSize.value}px`,
height: `${responsiveSize.value}px`,
lineHeight: `${responsiveSize.value}px`,
fontSize: `${hasIcon ? responsiveSize.value / 2 : 18}px`,
};
}
return {};
};
const setScaleParam = () => {
if (!avatarChildrenRef.value || !avatarNodeRef.value) {
return;
}
const childrenWidth = avatarChildrenRef.value.offsetWidth; // offsetWidth avoid affecting be transform scale
const nodeWidth = avatarNodeRef.value.offsetWidth;
// denominator is 0 is no meaning
if (childrenWidth !== 0 && nodeWidth !== 0) {
const { gap = 4 } = props;
if (gap * 2 < nodeWidth) {
scale.value =
nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1;
}
}
};
const handleImgLoadError = () => {
const { loadError } = props;
const errorFlag = loadError?.();
if (errorFlag !== false) {
isImgExist.value = false;
}
};
watch(
() => props.src,
() => {
nextTick(() => {
isImgExist.value = true;
scale.value = 1;
});
},
);
watch(
() => props.gap,
() => {
nextTick(() => {
setScaleParam();
});
},
);
onMounted(() => {
nextTick(() => {
setScaleParam();
isMounted.value = true;
});
});
return () => {
const { shape, src, alt, srcset, draggable, crossOrigin } = props;
const icon = getPropsSlot(slots, props, 'icon');
const pre = prefixCls.value;
const classString = {
[`${attrs.class}`]: !!attrs.class,
[pre]: true,
[`${pre}-lg`]: size.value === 'large',
[`${pre}-sm`]: size.value === 'small',
[`${pre}-${shape}`]: shape,
[`${pre}-image`]: src && isImgExist.value,
[`${pre}-icon`]: icon,
};
const sizeStyle: CSSProperties =
typeof size.value === 'number'
? {
width: `${size.value}px`,
height: `${size.value}px`,
lineHeight: `${size.value}px`,
fontSize: icon ? `${size.value / 2}px` : '18px',
}
: {};
const children: VueNode = slots.default?.();
let childrenToRender;
if (src && isImgExist.value) {
childrenToRender = (
<img
draggable={draggable}
src={src}
srcset={srcset}
onError={handleImgLoadError}
alt={alt}
crossorigin={crossOrigin}
/>
);
} else if (icon) {
childrenToRender = icon;
} else if (isMounted.value || scale.value !== 1) {
const transformString = `scale(${scale.value}) translateX(-50%)`;
const childrenStyle: CSSProperties = {
msTransform: transformString,
WebkitTransform: transformString,
transform: transformString,
};
const sizeChildrenStyle =
typeof size.value === 'number'
? {
lineHeight: `${size.value}px`,
}
: {};
childrenToRender = (
<ResizeObserver onResize={setScaleParam}>
<span
class={`${pre}-string`}
ref={avatarChildrenRef}
style={{ ...sizeChildrenStyle, ...childrenStyle }}
>
{children}
</span>
</ResizeObserver>
);
} else {
childrenToRender = (
<span class={`${pre}-string`} ref={avatarChildrenRef} style={{ opacity: 0 }}>
{children}
</span>
);
}
return (
<span
{...attrs}
ref={avatarNodeRef}
class={classString}
style={{
...sizeStyle,
...responsiveSizeStyle(!!icon),
...(attrs.style as CSSProperties),
}}
>
{childrenToRender}
</span>
);
};
},
});
export default Avatar;