add avatar background

closes fangpenlin#12
dv336699 · Dec 8, 2018 · c08d223 · c08d223
1 parent eb2d572
commit c08d223
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,7 @@ export default class MyComponent extends React.Component {
         <Avatar
           style={{width: '100px', height: '100px'}}
           avatarStyle='Circle'
+          avatarBackground='#65C9FF'
           topType='LongHairMiaWallace'
           accessoriesType='Prescription02'
           hairColor='BrownDark'

diff --git a/src/avatar/index.tsx b/src/avatar/index.tsx
@@ -14,11 +14,12 @@ export enum AvatarStyle {
 export interface Props {
   avatarStyle: AvatarStyle
   style?: React.CSSProperties
+  avatarBackground?: string
 }
 
 export default class Avatar extends React.Component<Props> {
   render () {
-    const { avatarStyle } = this.props
+    const { avatarStyle, avatarBackground } = this.props
     const circle = avatarStyle === AvatarStyle.Circle
     return (
       <svg
@@ -68,7 +69,7 @@ export default class Avatar extends React.Component<Props> {
                   <g
                     id='Color/Palette/Blue-01'
                     mask='url(#mask-2)'
-                    fill='#65C9FF'>
+                    fill={avatarBackground ? avatarBackground : '#65C9FF'}>
                     <rect id='🖍Color' x='0' y='0' width='240' height='240' />
                   </g>
                 </g>

diff --git a/src/index.tsx b/src/index.tsx
@@ -7,7 +7,7 @@ import { OptionContext, allOptions } from './options'
 export { default as Avatar, AvatarStyle } from './avatar'
 export { Option, OptionContext, allOptions } from './options'
 
-import {default as PieceComponent} from './avatar/piece';
+import { default as PieceComponent } from './avatar/piece'
 
 export interface Props {
   avatarStyle: string
@@ -24,8 +24,9 @@ export interface Props {
   eyebrowType?: string
   mouthType?: string
   skinColor?: string
-  pieceType?:string
-  pieceSize?:string
+  pieceType?: string
+  pieceSize?: string
+  avatarBackground?: string
 }
 
 export default class AvatarComponent extends React.Component<Props> {
@@ -47,8 +48,8 @@ export default class AvatarComponent extends React.Component<Props> {
   }
 
   render () {
-    const { avatarStyle, style } = this.props
-    return <Avatar avatarStyle={avatarStyle as AvatarStyle} style={style} />
+    const { avatarStyle, style, avatarBackground } = this.props
+    return <Avatar avatarStyle={avatarStyle as AvatarStyle} style={style} avatarBackground={avatarBackground} />
   }
 
   private updateOptionContext (props: Props) {