From ce30cfa3a982f2469bbb6dae35d13fddcc652328 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 2 Nov 2019 20:53:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(Grid):=20info=E3=80=81dot=20prop=20not=20wo?=
 =?UTF-8?q?rk=20when=20use=20icon=20slot=20(#4902)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/grid-item/index.js                        | 41 +++++++++++++------
 src/grid-item/index.less                      |  4 ++
 .../test/__snapshots__/index.spec.js.snap     | 13 ++++++
 src/grid/test/index.spec.js                   | 14 +++++++
 4 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/grid-item/index.js b/src/grid-item/index.js
index 5dad92519..4a0de1011 100644
--- a/src/grid-item/index.js
+++ b/src/grid-item/index.js
@@ -2,6 +2,7 @@ import { createNamespace, addUnit } from '../utils';
 import { BORDER } from '../utils/constant';
 import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
+import Info from '../info';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('grid-item');
@@ -61,7 +62,32 @@ export default createComponent({
       route(this.$router, this);
     },
 
-    renderContent() {
+    genIcon() {
+      const iconSlot = this.slots('icon');
+
+      if (iconSlot) {
+        return (
+          <div class={bem('icon-wrapper')}>
+            {iconSlot}
+            <Info dot={this.dot} info={this.info} />
+          </div>
+        );
+      }
+
+      if (this.icon) {
+        return (
+          <Icon
+            name={this.icon}
+            dot={this.dot}
+            info={this.info}
+            size={this.parent.iconSize}
+            class={bem('icon')}
+          />
+        );
+      }
+    },
+
+    genContent() {
       const slot = this.slots();
 
       if (slot) {
@@ -69,16 +95,7 @@ export default createComponent({
       }
 
       return [
-        this.slots('icon') ||
-          (this.icon && (
-            <Icon
-              name={this.icon}
-              dot={this.dot}
-              info={this.info}
-              size={this.parent.iconSize}
-              class={bem('icon')}
-            />
-          )),
+        this.genIcon(),
         this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>)
       ];
     }
@@ -104,7 +121,7 @@ export default createComponent({
           ]}
           onClick={this.onClick}
         >
-          {this.renderContent()}
+          {this.genContent()}
         </div>
       </div>
     );
diff --git a/src/grid-item/index.less b/src/grid-item/index.less
index a4879e96e..7cea0b221 100644
--- a/src/grid-item/index.less
+++ b/src/grid-item/index.less
@@ -48,6 +48,10 @@
     font-size: @grid-item-icon-size;
   }
 
+  &__icon-wrapper {
+    position: relative;
+  }
+
   &__text {
     color: @grid-item-text-color;
     font-size: @grid-item-text-font-size;
diff --git a/src/grid/test/__snapshots__/index.spec.js.snap b/src/grid/test/__snapshots__/index.spec.js.snap
index a66e337fb..e7d763ddc 100644
--- a/src/grid/test/__snapshots__/index.spec.js.snap
+++ b/src/grid/test/__snapshots__/index.spec.js.snap
@@ -9,6 +9,19 @@ exports[`icon-size prop 1`] = `
 </div>
 `;
 
+exports[`render icon-slot 1`] = `
+<div class="van-grid van-hairline--top">
+  <div class="van-grid-item" style="flex-basis: 25%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-hairline">
+      <div class="van-grid-item__icon-wrapper">
+        <div></div>
+        <div class="van-info">1</div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`sqaure and set gutter 1`] = `
 <div class="van-grid" style="padding-left: 10rem;">
   <div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
diff --git a/src/grid/test/index.spec.js b/src/grid/test/index.spec.js
index e277c5e24..00375db15 100644
--- a/src/grid/test/index.spec.js
+++ b/src/grid/test/index.spec.js
@@ -50,3 +50,17 @@ test('icon-size prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('render icon-slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-grid icon-size="10">
+        <van-grid-item info="1">
+          <div slot="icon" />
+        </van-grid-item>
+      </van-grid>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});