From e28ac7248498257f13fb5bccfbdc8638ba7cf195 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 17 Jun 2021 19:37:03 +0800
Subject: [PATCH] feat(GridItem): add reverse prop (#8878)

---
 src/grid-item/GridItem.tsx  | 11 +++--------
 src/grid-item/index.less    | 21 ++++++++++++++++++---
 src/grid/Grid.tsx           |  1 +
 src/grid/README.md          |  1 +
 src/grid/README.zh-CN.md    |  1 +
 src/grid/test/index.spec.js | 16 ++++++++++++++++
 6 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/grid-item/GridItem.tsx b/src/grid-item/GridItem.tsx
index fa8ed3d86..bdafb5364 100644
--- a/src/grid-item/GridItem.tsx
+++ b/src/grid-item/GridItem.tsx
@@ -113,14 +113,8 @@ export default defineComponent({
     };
 
     return () => {
-      const {
-        center,
-        border,
-        square,
-        gutter,
-        direction,
-        clickable,
-      } = parent.props;
+      const { center, border, square, gutter, reverse, direction, clickable } =
+        parent.props;
 
       const classes = [
         bem('content', [
@@ -128,6 +122,7 @@ export default defineComponent({
           {
             center,
             square,
+            reverse,
             clickable,
             surround: border && gutter,
           },
diff --git a/src/grid-item/index.less b/src/grid-item/index.less
index 181c480cf..b91877846 100644
--- a/src/grid-item/index.less
+++ b/src/grid-item/index.less
@@ -62,9 +62,24 @@
     &--horizontal {
       flex-direction: row;
 
-      .van-grid-item__icon + .van-grid-item__text {
-        margin-top: 0;
-        margin-left: var(--van-padding-xs);
+      .van-grid-item__text {
+        margin: 0 0 0 var(--van-padding-xs);
+      }
+    }
+
+    &--reverse {
+      flex-direction: column-reverse;
+
+      .van-grid-item__text {
+        margin: 0 0 var(--van-padding-xs);
+      }
+    }
+
+    &--horizontal&--reverse {
+      flex-direction: row-reverse;
+
+      .van-grid-item__text {
+        margin: 0 var(--van-padding-xs) 0 0;
       }
     }
 
diff --git a/src/grid/Grid.tsx b/src/grid/Grid.tsx
index 7612ed8de..fd0d95544 100644
--- a/src/grid/Grid.tsx
+++ b/src/grid/Grid.tsx
@@ -14,6 +14,7 @@ const props = {
   center: truthProp,
   border: truthProp,
   gutter: [Number, String],
+  reverse: Boolean,
   iconSize: [Number, String],
   direction: String as PropType<GridDirection>,
   clickable: Boolean,
diff --git a/src/grid/README.md b/src/grid/README.md
index 8b8069cb4..29d198c99 100644
--- a/src/grid/README.md
+++ b/src/grid/README.md
@@ -121,6 +121,7 @@ app.use(GridItem);
 | icon | Icon name or URL | _string_ | - |
 | icon-prefix | Icon className prefix | _string_ | `van-icon` |
 | icon-color | Icon color | _string_ | - |
+| reverse `v3.1.0` | Whether to reverse the position of icon and text | _boolean_ | `false` |
 | dot | Whether to show red dot | _boolean_ | `false` |
 | badge | Content of the badge | _number \| string_ | - |
 | url | Link URL | _string_ | - |
diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md
index a7c87d325..cd0e2ac34 100644
--- a/src/grid/README.zh-CN.md
+++ b/src/grid/README.zh-CN.md
@@ -137,6 +137,7 @@ app.use(GridItem);
 | icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | icon-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | icon-color | 图标颜色，同 Icon 组件的 [color 属性](#/zh-CN/icon#props) | _string_ | - |
+| reverse `v3.1.0` | 是否调换图标和文本的位置 | _boolean_ | `false` |
 | dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge | 图标右上角徽标的内容 | _number \| string_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
diff --git a/src/grid/test/index.spec.js b/src/grid/test/index.spec.js
index c477cbd7f..1372740f2 100644
--- a/src/grid/test/index.spec.js
+++ b/src/grid/test/index.spec.js
@@ -58,3 +58,19 @@ test('should render icon-slot correctly', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render ".van-grid-item__content--reverse" class when using reverse prop', () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Grid reverse>
+          <GridItem />
+        </Grid>
+      );
+    },
+  });
+
+  expect(wrapper.find('.van-grid-item__content').classes()).toContain(
+    'van-grid-item__content--reverse'
+  );
+});