From 079b344ff149f00e549c9f0905f450e469b1e8a8 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Tue, 26 Jan 2021 17:53:46 +0800
Subject: [PATCH] feat(radio): add new prop direction (#4007)

fix #3780
---
 example/pages/radio/index.wxml  | 50 ++++++++++++++++++++-------------
 packages/radio-group/index.less |  7 ++++-
 packages/radio-group/index.ts   | 11 ++++----
 packages/radio-group/index.wxml |  6 +++-
 packages/radio/README.md        | 47 +++++++++++++++++++++----------
 packages/radio/index.less       |  4 +++
 packages/radio/index.wxml       |  2 +-
 7 files changed, 84 insertions(+), 43 deletions(-)

diff --git a/example/pages/radio/index.wxml b/example/pages/radio/index.wxml
index d73c2833..225e5087 100644
--- a/example/pages/radio/index.wxml
+++ b/example/pages/radio/index.wxml
@@ -9,6 +9,18 @@
   </van-radio-group>
 </demo-block>
 
+<demo-block title="水平排列" padding>
+  <van-radio-group
+    value="{{ radio1 }}"
+    data-key="radio1"
+    bind:change="onChange"
+    direction="horizontal"
+  >
+    <van-radio name="1">单选框 1</van-radio>
+    <van-radio name="2">单选框 2</van-radio>
+  </van-radio-group>
+</demo-block>
+
 <demo-block title="禁用状态" padding>
   <van-radio-group
     disabled
@@ -27,7 +39,9 @@
     data-key="radioShape"
     bind:change="onChange"
   >
-    <van-radio name="1" shape="square" custom-class="demo-radio">单选框</van-radio>
+    <van-radio name="1" shape="square" custom-class="demo-radio"
+      >单选框</van-radio
+    >
     <van-radio name="2" shape="square">单选框</van-radio>
   </van-radio-group>
 </demo-block>
@@ -38,7 +52,9 @@
     data-key="radio3"
     bind:change="onChange"
   >
-    <van-radio name="1" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
+    <van-radio name="1" custom-class="demo-radio" checked-color="#07c160"
+      >单选框</van-radio
+    >
     <van-radio name="2" checked-color="#07c160">单选框</van-radio>
   </van-radio-group>
 </demo-block>
@@ -49,7 +65,9 @@
     data-key="radioSize"
     bind:change="onChange"
   >
-    <van-radio name="1" icon-size="24px" custom-class="demo-radio">单选框</van-radio>
+    <van-radio name="1" icon-size="24px" custom-class="demo-radio"
+      >单选框</van-radio
+    >
     <van-radio name="2" icon-size="24px">单选框</van-radio>
   </van-radio-group>
 </demo-block>
@@ -67,7 +85,7 @@
         src="{{ radio4 === '1' ? icon.active : icon.normal }}"
         class="icon"
         mode="widthFix"
-      />
+      ></image>
     </van-radio>
     <van-radio use-icon-slot name="2">
       自定义图标
@@ -76,7 +94,7 @@
         src="{{ radio4 === '2' ? icon.active : icon.normal }}"
         class="icon"
         mode="widthFix"
-      />
+      ></image>
     </van-radio>
   </van-radio-group>
 </demo-block>
@@ -87,7 +105,9 @@
     data-key="radioLabel"
     bind:change="onChange"
   >
-    <van-radio label-disabled name="1" custom-class="demo-radio">单选框 1</van-radio>
+    <van-radio label-disabled name="1" custom-class="demo-radio"
+      >单选框 1</van-radio
+    >
     <van-radio label-disabled name="2">单选框 2</van-radio>
   </van-radio-group>
 </demo-block>
@@ -95,21 +115,11 @@
 <demo-block title="与 Cell 组件一起使用">
   <van-radio-group value="{{ radio5 }}">
     <van-cell-group>
-      <van-cell
-        title="单选框 1"
-        clickable
-        data-name="1"
-        bind:click="onClick"
-      >
-        <van-radio slot="right-icon" name="1" />
+      <van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">
+        <van-radio slot="right-icon" name="1"></van-radio>
       </van-cell>
-      <van-cell
-        title="单选框 2"
-        clickable
-        data-name="2"
-        bind:click="onClick"
-      >
-        <van-radio slot="right-icon" name="2" />
+      <van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">
+        <van-radio slot="right-icon" name="2"></van-radio>
       </van-cell>
     </van-cell-group>
   </van-radio-group>
diff --git a/packages/radio-group/index.less b/packages/radio-group/index.less
index 8b1a3937..fe02eb7e 100644
--- a/packages/radio-group/index.less
+++ b/packages/radio-group/index.less
@@ -1 +1,6 @@
-// empty
+.van-radio-group {
+  &--horizontal {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
diff --git a/packages/radio-group/index.ts b/packages/radio-group/index.ts
index 9fa1aa38..6c290069 100644
--- a/packages/radio-group/index.ts
+++ b/packages/radio-group/index.ts
@@ -13,6 +13,7 @@ VantComponent({
       type: null,
       observer: 'updateChildren',
     },
+    direction: String,
     disabled: {
       type: Boolean,
       observer: 'updateChildren',
@@ -21,17 +22,17 @@ VantComponent({
 
   methods: {
     updateChildren() {
-      (
-        this.children || []
-      ).forEach((child: WechatMiniprogram.Component.TrivialInstance) =>
-        this.updateChild(child)
+      this.children.forEach(
+        (child: WechatMiniprogram.Component.TrivialInstance) =>
+          this.updateChild(child)
       );
     },
 
     updateChild(child: WechatMiniprogram.Component.TrivialInstance) {
-      const { value, disabled } = this.data;
+      const { value, disabled, direction } = this.data;
       child.setData({
         value,
+        direction,
         disabled: disabled || child.data.disabled,
       });
     },
diff --git a/packages/radio-group/index.wxml b/packages/radio-group/index.wxml
index 4fa864ce..0ab17afc 100644
--- a/packages/radio-group/index.wxml
+++ b/packages/radio-group/index.wxml
@@ -1 +1,5 @@
-<slot />
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('radio-group', [direction]) }}">
+  <slot></slot>
+</view>
diff --git a/packages/radio/README.md b/packages/radio/README.md
index 592cb954..70ea5017 100644
--- a/packages/radio/README.md
+++ b/packages/radio/README.md
@@ -29,6 +29,7 @@ Page({
   data: {
     radio: '1',
   },
+
   onChange(event) {
     this.setData({
       radio: event.detail,
@@ -37,6 +38,21 @@ Page({
 });
 ```
 
+### 水平排列
+
+将`direction`属性设置为`horizontal`后，单选框组会变成水平排列。
+
+```html
+<van-radio-group
+  value="{{ radio }}"
+  bind:change="onChange"
+  direction="horizontal"
+>
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2">单选框 2</van-radio>
+</van-radio-group>
+```
+
 ### 禁用状态
 
 通过`disabled`属性禁止选项切换，在`Radio`上设置`diabled`可以禁用单个选项
@@ -168,24 +184,25 @@ Page({
 
 ### RadioGroup Props
 
-| 参数     | 说明                   | 类型      | 默认值  | 版本 |
-| -------- | ---------------------- | --------- | ------- | ---- |
-| name     | 在表单内提交时的标识符 | _string_  | -       | -    |
-| value    | 当前选中项的标识符     | _any_     | -       | -    |
-| disabled | 是否禁用所有单选框     | _boolean_ | `false` | -    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 在表单内提交时的标识符 | _string_ | - |
+| value | 当前选中项的标识符 | _any_ | - |
+| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
+| direction `v1.6.7` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
 
 ### Radio Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| name | 标识符 | _string_ | - | - |
-| shape | 形状，可选值为 `square` | _string_ | `round` | - |
-| disabled | 是否为禁用状态 | _boolean_ | `false` | - |
-| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` | - |
-| label-position | 文本位置，可选值为 `left` | _string_ | `right` | - |
-| icon-size | 图标大小，默认单位为`px` | _string \| number_ | `20px` | - |
-| checked-color | 选中状态颜色 | _string_ | `#1989fa` | - |
-| use-icon-slot | 是否使用 icon 插槽 | _boolean_ | `false` | - |
+| 参数           | 说明                      | 类型               | 默认值    |
+| -------------- | ------------------------- | ------------------ | --------- |
+| name           | 标识符                    | _string_           | -         |
+| shape          | 形状，可选值为 `square`   | _string_           | `round`   |
+| disabled       | 是否为禁用状态            | _boolean_          | `false`   |
+| label-disabled | 是否禁用文本内容点击      | _boolean_          | `false`   |
+| label-position | 文本位置，可选值为 `left` | _string_           | `right`   |
+| icon-size      | 图标大小，默认单位为`px`  | _string \| number_ | `20px`    |
+| checked-color  | 选中状态颜色              | _string_           | `#1989fa` |
+| use-icon-slot  | 是否使用 icon 插槽        | _boolean_          | `false`   |
 
 ### Radio Event
 
diff --git a/packages/radio/index.less b/packages/radio/index.less
index 21375abb..a0fbcf91 100644
--- a/packages/radio/index.less
+++ b/packages/radio/index.less
@@ -11,6 +11,10 @@
     flex: none;
   }
 
+  &--horizontal {
+    .theme(margin-right, '@padding-sm');
+  }
+
   &__icon {
     display: flex;
     align-items: center;
diff --git a/packages/radio/index.wxml b/packages/radio/index.wxml
index 0b748eff..4601c068 100644
--- a/packages/radio/index.wxml
+++ b/packages/radio/index.wxml
@@ -1,6 +1,6 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
-<view class="van-radio custom-class">
+<view class="{{ utils.bem('radio', [direction]) }} custom-class">
   <view
     wx:if="{{ labelPosition === 'left' }}"
     class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}"