github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(v3/avatar): refactor using composition api (#4052) 

* refactor(avatar): refactor using composition api

* refactor: update props define
pull/4060/head
John 2021-05-10 18:11:18 +08:00 committed by GitHub
parent 184957e3c7
commit 4d178debd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 160 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
components/avatar/Avatar.tsx
View File

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

26
components/avatar/__tests__/Avatar.test.js
View File

@ -41,16 +41,8 @@ describe('Avatar Render', () => {
props: { props: {
src: 'http://error.url', src: 'http://error.url',
}, },
sync: false,
attachTo: 'body', attachTo: 'body',
}); });
wrapper.vm.setScale = jest.fn(() => {
if (wrapper.vm.scale === 0.5) {
return;
}
wrapper.vm.scale = 0.5;
wrapper.vm.$forceUpdate();
});
await asyncExpect(() => { await asyncExpect(() => {
wrapper.find('img').trigger('error'); wrapper.find('img').trigger('error');
}, 0); }, 0);
@ -58,14 +50,7 @@ describe('Avatar Render', () => {
const children = wrapper.findAll('.ant-avatar-string'); const children = wrapper.findAll('.ant-avatar-string');
expect(children.length).toBe(1); expect(children.length).toBe(1);
expect(children[0].text()).toBe('Fallback'); expect(children[0].text()).toBe('Fallback');
expect(wrapper.vm.setScale).toHaveBeenCalled();
}); });
await asyncExpect(() => {
expect(global.document.body.querySelector('.ant-avatar-string').style.transform).toContain(
'scale(0.5)',
);
global.document.body.innerHTML = '';
}, 1000);
}); });
it('should handle onError correctly', async () => { it('should handle onError correctly', async () => {
global.document.body.innerHTML = ''; global.document.body.innerHTML = '';
@ -91,17 +76,17 @@ describe('Avatar Render', () => {
}, },
}; };
const wrapper = mount(Foo, { sync: false, attachTo: 'body' }); const wrapper = mount(Foo, { attachTo: 'body' });
await asyncExpect(() => { await asyncExpect(() => {
// mock img load Error, since jsdom do not load resource by default // mock img load Error, since jsdom do not load resource by default
// https://github.com/jsdom/jsdom/issues/1816 // https://github.com/jsdom/jsdom/issues/1816
wrapper.find('img').trigger('error'); wrapper.find('img').trigger('error');
}, 0); }, 0);
await asyncExpect(() => { await asyncExpect(() => {
expect(wrapper.findComponent({ name: 'AAvatar' }).vm.isImgExist).toBe(true); expect(wrapper.find('img')).not.toBeNull();
}, 0); }, 0);
await asyncExpect(() => { await asyncExpect(() => {
expect(global.document.body.querySelector('img').getAttribute('src')).toBe(LOAD_SUCCESS_SRC); expect(wrapper.find('img').attributes('src')).toBe(LOAD_SUCCESS_SRC);
}, 0); }, 0);
}); });
@ -126,9 +111,8 @@ describe('Avatar Render', () => {
await asyncExpect(() => { await asyncExpect(() => {
wrapper.find('img').trigger('error'); wrapper.find('img').trigger('error');
}, 0); }, 0);
await asyncExpect(() => { await asyncExpect(() => {
expect(wrapper.findComponent({ name: 'AAvatar' }).vm.isImgExist).toBe(false); expect(wrapper.findComponent({ name: 'AAvatar' }).findAll('img').length).toBe(0);
expect(wrapper.findAll('.ant-avatar-string').length).toBe(1); expect(wrapper.findAll('.ant-avatar-string').length).toBe(1);
}, 0); }, 0);
@ -136,7 +120,7 @@ describe('Avatar Render', () => {
wrapper.vm.src = LOAD_SUCCESS_SRC; wrapper.vm.src = LOAD_SUCCESS_SRC;
}); });
await asyncExpect(() => { await asyncExpect(() => {
expect(wrapper.findComponent({ name: 'AAvatar' }).vm.isImgExist).toBe(true); expect(wrapper.findComponent({ name: 'AAvatar' }).findAll('img').length).toBe(1);
expect(wrapper.findAll('.ant-avatar-image').length).toBe(1); expect(wrapper.findAll('.ant-avatar-image').length).toBe(1);
}, 0); }, 0);
}); });

2
components/avatar/index.ts
View File

@ -1,4 +1,6 @@
import Avatar from './Avatar'; import Avatar from './Avatar';
import { withInstall } from '../_util/type'; import { withInstall } from '../_util/type';
export { AvatarProps } from './Avatar';
export default withInstall(Avatar); export default withInstall(Avatar);