Avatar custom size (#11419)

* add avatar support custom size

* me added to author list and sorting alphabetically

* fix avatar sizeChildrenStyle preference

* fix authors

* fix snapshots

.jest.js

@@ -6,6 +6,8 @@ const transformIgnorePatterns = [
 ];
 
 module.exports = {
+  verbose: true,
+  testURL: "http://localhost/",
   setupFiles: [
     './tests/setup.js',
   ],

AUTHORS.txt

@@ -67,6 +67,7 @@ Eden Wang <Eden.Wang@Akmii.com>
 Eden Wang <yociduo@vip.qq.com>
 Egor Yurtaev <yurtaev.egor@gmail.com>
 Eli White <github@eli-white.com>
+Emerson Laurentino <emersonlaurentino@hotmail.com>
 Emma <sima.zhang1990@gmail.com>
 Eric <84263800@qq.com>
 Erwann Mest <m+github@kud.io>
@@ -453,4 +454,4 @@ zuiidea <zuiiidea@gmail.com>
 超能刚哥 <margox@foxmail.com>
 马金花儿 <o.o@mug.dog>
 रोहन मल्होत्रा <rohan.malhotra@adwyze.com>
-白羊座小葛 <abeyuhang@gmail.com>
+白羊座小葛 <abeyuhang@gmail.com>

components/avatar/__tests__/__snapshots__/demo.test.js.snap

@@ -201,6 +201,14 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
 exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
 <div>
   <div>
+    <span
+      class="ant-avatar ant-avatar-circle ant-avatar-icon"
+      style="width:64px;height:64px;line-height:64px;font-size:32px"
+    >
+      <i
+        class="anticon anticon-user"
+      />
+    </span>
     <span
       class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
     >
@@ -224,6 +232,14 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
     </span>
   </div>
   <div>
+    <span
+      class="ant-avatar ant-avatar-square ant-avatar-icon"
+      style="width:64px;height:64px;line-height:64px;font-size:32px"
+    >
+      <i
+        class="anticon anticon-user"
+      />
+    </span>
     <span
       class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"
     >

components/avatar/demo/basic.md

@@ -19,11 +19,13 @@ import { Avatar } from 'antd';
 ReactDOM.render(
   <div>
     <div>
+      <Avatar size={64} icon="user" />
       <Avatar size="large" icon="user" />
       <Avatar icon="user" />
       <Avatar size="small" icon="user" />
     </div>
     <div>
+      <Avatar shape="square" size={64} icon="user" />
       <Avatar shape="square" size="large" icon="user" />
       <Avatar shape="square" icon="user" />
       <Avatar shape="square" size="small" icon="user" />

components/avatar/index.en-US.md

@@ -12,7 +12,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | -------- | ----------- | ---- | ------- |
 | icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
 | shape | the shape of avatar | `circle` \| `square` | `circle` |
-| size | the size of the avatar | `large` \| `small` \| `default` | `default` |
+| size | the size of the avatar | number \| string: `large` `small` `default` | `default` |
 | src | the address of the image for an image avatar | string | - |
 | alt | This attribute defines the alternative text describing the image | string | - |
 | onError | handler when img load error，return false to prevent default fallback behavior | () => boolean | - |

components/avatar/index.tsx

@@ -6,8 +6,11 @@ import classNames from 'classnames';
 export interface AvatarProps {
   /** Shape of avatar, options:`circle`, `square` */
   shape?: 'circle' | 'square';
-  /** Size of avatar, options:`large`, `small`, `default` */
-  size?: 'large' | 'small' | 'default';
+  /*
+   * Size of avatar, options: `large`, `small`, `default`
+   * or a custom number size
+   * */
+  size?: 'large' | 'small' | 'default' | number;
   /** Src of image avatar */
   src?: string;
   /** Type of the Icon to be used in avatar */
@@ -88,6 +91,8 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
       prefixCls, shape, size, src, icon, className, alt, ...others
     } = this.props;
 
+    const { isImgExist, scale } = this.state;
+
     const sizeCls = classNames({
       [`${prefixCls}-lg`]: size === 'large',
       [`${prefixCls}-sm`]: size === 'small',
@@ -95,12 +100,19 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
 
     const classString = classNames(prefixCls, className, sizeCls, {
       [`${prefixCls}-${shape}`]: shape,
-      [`${prefixCls}-image`]: src && this.state.isImgExist,
+      [`${prefixCls}-image`]: src && isImgExist,
       [`${prefixCls}-icon`]: icon,
     });
 
+    const sizeStyle: React.CSSProperties = typeof size === 'number' ? {
+      width: size,
+      height: size,
+      lineHeight: `${size}px`,
+      fontSize: icon ? size / 2 : 18,
+    } : {};
+
     let children = this.props.children;
-    if (src && this.state.isImgExist) {
+    if (src && isImgExist) {
       children = (
         <img
           src={src}
@@ -112,20 +124,24 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
       children = <Icon type={icon} />;
     } else {
       const childrenNode = this.avatarChildren;
-      if (childrenNode || this.state.scale !== 1) {
+      if (childrenNode || scale !== 1) {
         const childrenStyle: React.CSSProperties = {
-          msTransform: `scale(${this.state.scale})`,
-          WebkitTransform: `scale(${this.state.scale})`,
-          transform: `scale(${this.state.scale})`,
+          msTransform: `scale(${scale})`,
+          WebkitTransform: `scale(${scale})`,
+          transform: `scale(${scale})`,
           position: 'absolute',
           display: 'inline-block',
           left: `calc(50% - ${Math.round(childrenNode.offsetWidth / 2)}px)`,
         };
+        const sizeChildrenStyle: React.CSSProperties =
+          typeof size === 'number' ? {
+            lineHeight: `${size}px`,
+          } : {};
         children = (
           <span
             className={`${prefixCls}-string`}
             ref={span => this.avatarChildren = span}
-            style={childrenStyle}
+            style={{ ...sizeChildrenStyle, ...childrenStyle }}
           >
             {children}
           </span>
@@ -142,7 +158,11 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
       }
     }
     return (
-      <span {...others} className={classString}>
+      <span
+        {...others}
+        style={{ ...sizeStyle, ...others.style }}
+        className={classString}
+      >
         {children}
       </span>
     );