From 7cfea508978004446236e7e5ed887145bcabe92d Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Thu, 5 Mar 2020 20:36:07 +0800
Subject: [PATCH] =?UTF-8?q?card=20=E6=94=AF=E6=8C=81=20avtarText?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/_card.scss | 15 +++++++++++++++
 src/renderers/Card.tsx     | 18 +++++++++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index 68b8377e..fd2ad89a 100644
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -66,6 +66,21 @@
     }
   }
 
+  &-avtarText {
+    background-color: $primary;
+    color: $white;
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    vertical-align: middle;
+    border-radius: 500px;
+    float: left;
+    margin-right: $gap-base;
+    font-size: $fontSizeXl;
+    text-transform: uppercase();
+  }
+
   &-meta {
     display: block;
     height: 100%;
diff --git a/src/renderers/Card.tsx b/src/renderers/Card.tsx
index 703495fd..ca7774da 100644
--- a/src/renderers/Card.tsx
+++ b/src/renderers/Card.tsx
@@ -280,9 +280,12 @@ export class Card extends React.Component<CardProps> {
       subTitleClassName,
       descClassName,
       checkOnItemClick,
+      avatarClassName,
       checkable,
       classnames: cx,
-      classPrefix: ns
+      classPrefix: ns,
+      imageClassName,
+      avatarTextClassName
     } = this.props;
 
     let heading = null;
@@ -291,8 +294,7 @@ export class Card extends React.Component<CardProps> {
       const {
         highlight: highlightTpl,
         avatar: avatarTpl,
-        avatarClassName,
-        imageClassName,
+        avatarText: avatarTextTpl,
         title: titleTpl,
         subTitle: subTitleTpl,
         subTitlePlaceholder,
@@ -302,6 +304,7 @@ export class Card extends React.Component<CardProps> {
 
       const highlight = !!evalExpression(highlightTpl, data as object);
       const avatar = filter(avatarTpl, data);
+      const avatarText = filter(avatarTextTpl, data);
       const title = filter(titleTpl, data);
       const subTitle = filter(subTitleTpl, data);
       const desc = filter(descTpl, data);
@@ -323,6 +326,15 @@ export class Card extends React.Component<CardProps> {
                 src={avatar}
               />
             </span>
+          ) : avatarText ? (
+            <span
+              className={cx(
+                'Card-avtarText',
+                header.avatarTextClassName || avatarTextClassName
+              )}
+            >
+              {avatarText}
+            </span>
           ) : null}
           <div className={cx('Card-meta')}>
             {highlight ? (