feat: update auto-complete && avatar

components/auto-complete/index.jsx

@@ -3,6 +3,7 @@ import Select, { AbstractSelectProps, SelectValue } from '../select';
 import Input from '../input';
 import InputElement from './InputElement';
 import PropTypes from '../_util/vue-types';
+import { ConfigConsumerProps } from '../config-provider';
 import {
   getComponentFromProp,
   getOptionProps,
@@ -55,6 +56,9 @@ const AutoComplete = {
     prop: 'value',
     event: 'change',
   },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   methods: {
     getInputElement() {
       const { $slots } = this;
@@ -77,7 +81,10 @@ const AutoComplete = {
   },
 
   render() {
-    const { size, prefixCls, optionLabelProp, dataSource, $slots, $listeners } = this;
+    const { size, prefixCls: customizePrefixCls, optionLabelProp, dataSource, $slots, $listeners } = this;
+
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('select', customizePrefixCls);
 
     const cls = {
       [`${prefixCls}-lg`]: size === 'large',

components/avatar/Avatar.jsx

@@ -1,3 +1,4 @@
+import { ConfigConsumerProps } from '../config-provider';
 import Icon from '../icon';
 
 export default {
@@ -24,6 +25,9 @@ export default {
     alt: String,
     loadError: Function,
   },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   data() {
     return {
       isImgExist: true,
@@ -73,7 +77,10 @@ export default {
     },
   },
   render() {
-    const { prefixCls, shape, size, src, icon, alt, srcSet } = this.$props;
+    const { prefixCls: customizePrefixCls, shape, size, src, icon, alt, srcSet } = this.$props;
+
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('avatar', customizePrefixCls);
 
     const { isImgExist, scale } = this.$data;
 

components/avatar/__tests__/Avatar.test.js

@@ -76,4 +76,40 @@ describe('Avatar Render', () => {
     expect(wrapper.find({ name: 'AAvatar' }).vm.isImgExist).toBe(true);
     expect(global.document.body.querySelector('img').getAttribute('src')).toBe(LOAD_SUCCESS_SRC);
   });
+
+  it('should show image on success after a failure state', () => {
+    global.document.body.innerHTML = '';
+    const LOAD_FAILURE_SRC = 'http://error.url';
+    const LOAD_SUCCESS_SRC = 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png';
+
+    const Foo = {
+      data() {
+        return {
+          src: LOAD_FAILURE_SRC,
+        };
+      },
+      methods: {
+        handleImgError() {
+          this.src = LOAD_SUCCESS_SRC;
+          return false;
+        },
+      },
+
+      render() {
+        const { src } = this;
+        return <Avatar src={src} loadError={this.handleImgError}>Fallback</Avatar>;
+      },
+    };
+
+    const wrapper = mount(Foo, { attachToDocument: true });
+    wrapper.find('img').trigger('error');
+
+    expect(wrapper.find({ name: 'AAvatar' }).vm.isImgExist).toBe(false);
+    expect(wrapper.find('.ant-avatar-string').length).toBe(1);
+
+    wrapper.setProps({ src: LOAD_SUCCESS_SRC });
+
+    expect(wrapper.find({ name: 'AAvatar' }).vm.isImgExist).toBe(true);
+    expect(wrapper.find('.ant-avatar-image').length).toBe(1);
+  });
 });

components/avatar/index.en-US.md

@@ -8,5 +8,5 @@
 | src | the address of the image for an image avatar | string | - |
 | srcSet | a list of sources to use for different screen resolutions | string | - |
 | alt | This attribute defines the alternative text describing the image | string | - |
-| loadError | handler when img load error，return false to prevent default fallback behavior | () => boolean | - |
+| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |