From 0f9da43522aa5433f25fb9cfbbb347529aaa86f4 Mon Sep 17 00:00:00 2001 From: Emerson Laurentino Date: Thu, 2 Aug 2018 09:25:14 -0300 Subject: [PATCH] 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 | 2 + AUTHORS.txt | 3 +- .../__tests__/__snapshots__/demo.test.js.snap | 16 ++++++++ components/avatar/demo/basic.md | 2 + components/avatar/index.en-US.md | 2 +- components/avatar/index.tsx | 40 ++++++++++++++----- 6 files changed, 53 insertions(+), 12 deletions(-) diff --git a/.jest.js b/.jest.js index ed2c101e41..662503bb6c 100644 --- a/.jest.js +++ b/.jest.js @@ -6,6 +6,8 @@ const transformIgnorePatterns = [ ]; module.exports = { + verbose: true, + testURL: "http://localhost/", setupFiles: [ './tests/setup.js', ], diff --git a/AUTHORS.txt b/AUTHORS.txt index c98de2986d..ad9fefafbc 100644 --- a/AUTHORS.txt +++ b/AUTHORS.txt @@ -67,6 +67,7 @@ Eden Wang Eden Wang Egor Yurtaev Eli White +Emerson Laurentino Emma Eric <84263800@qq.com> Erwann Mest @@ -453,4 +454,4 @@ zuiidea 超能刚哥 马金花儿 रोहन मल्होत्रा -白羊座小葛 +白羊座小葛 \ No newline at end of file diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap index 9aa2ba4e52..882c70858b 100644 --- a/components/avatar/__tests__/__snapshots__/demo.test.js.snap +++ b/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`] = `
+ + + @@ -224,6 +232,14 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
+ + + diff --git a/components/avatar/demo/basic.md b/components/avatar/demo/basic.md index 1c3894422e..7a1f2651a2 100644 --- a/components/avatar/demo/basic.md +++ b/components/avatar/demo/basic.md @@ -19,11 +19,13 @@ import { Avatar } from 'antd'; ReactDOM.render(
+
+ diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md index 4e231e4c8b..b561ee4689 100644 --- a/components/avatar/index.en-US.md +++ b/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 | - | diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx index 3da00b8bf2..ec8a115f76 100644 --- a/components/avatar/index.tsx +++ b/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 { 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 { 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 = ( { children = ; } 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 = ( this.avatarChildren = span} - style={childrenStyle} + style={{ ...sizeChildrenStyle, ...childrenStyle }} > {children} @@ -142,7 +158,11 @@ export default class Avatar extends React.Component { } } return ( - + {children} );