From 70351dc4f00a1570bd28ef7f185f6165b5f33bca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Tue, 30 Apr 2019 15:30:24 +0800
Subject: [PATCH] [new feature] SwitchCell: add cell-size prop

---
 docs/markdown/v2-progress-tracking.md                  |  1 +
 packages/style/var.less                                |  6 ++++--
 packages/switch-cell/en-US.md                          |  1 +
 packages/switch-cell/index.less                        |  5 +++++
 packages/switch-cell/index.tsx                         |  5 ++++-
 .../switch-cell/test/__snapshots__/index.spec.js.snap  | 10 ++++++++++
 packages/switch-cell/test/index.spec.js                | 10 ++++++++++
 packages/switch-cell/zh-CN.md                          |  1 +
 8 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index 7d596d569..2421b4530 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -59,6 +59,7 @@
 ## SwitchCell
 
 - 新增`border`属性
+- 新增`cell-size`属性
 
 ### Sku
 
diff --git a/packages/style/var.less b/packages/style/var.less
index 2369fdae7..fb812357e 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -267,8 +267,10 @@
 @switch-border: 1px solid rgba(0, 0, 0, .1);
 
 // SwitchCell
-@switch-cell-padding-top: 9px;
-@switch-cell-padding-bottom: 9px;
+@switch-cell-padding-top: @cell-vertical-padding - 1px;
+@switch-cell-padding-bottom: @cell-vertical-padding -1px;
+@switch-cell-large-padding-top: @cell-large-vertical-padding - 1px;
+@switch-cell-large-padding-bottom: @cell-large-vertical-padding - 1px;
 
 // Tab
 @tabs-line-height: 44px;
diff --git a/packages/switch-cell/en-US.md b/packages/switch-cell/en-US.md
index e40c56ff6..13fabcb49 100644
--- a/packages/switch-cell/en-US.md
+++ b/packages/switch-cell/en-US.md
@@ -57,6 +57,7 @@ use `loading` property to keep component in loading state
 | v-model | on-off state of the switch | `any` | `false` |
 | title | the left side title | `String` | `''` |
 | border | whether to show cell border | `Boolean` | `true` |
+| cell-size | Cell size，can be set to `large` | `String` | - |
 | loading | whether switch is loading | `Boolean` | `false` |
 | disabled | whether to disable switch | `Boolean` | `false` |
 | size | Size of switch | `String` | `24px` |
diff --git a/packages/switch-cell/index.less b/packages/switch-cell/index.less
index 469230586..df899d16c 100644
--- a/packages/switch-cell/index.less
+++ b/packages/switch-cell/index.less
@@ -4,6 +4,11 @@
   padding-top: @switch-cell-padding-top;
   padding-bottom: @switch-cell-padding-bottom;
 
+  &--large {
+    padding-top: @switch-cell-large-padding-top;
+    padding-bottom: @switch-cell-large-padding-bottom;
+  }
+
   .van-switch {
     float: right;
   }
diff --git a/packages/switch-cell/index.tsx b/packages/switch-cell/index.tsx
index 7fbf15658..332a34701 100644
--- a/packages/switch-cell/index.tsx
+++ b/packages/switch-cell/index.tsx
@@ -12,6 +12,7 @@ export type SwitchCellProps = SharedSwitchProps & {
   size: string;
   title?: string;
   border?: boolean;
+  cellSize?: string;
 };
 
 const [sfc, bem] = use('switch-cell');
@@ -25,9 +26,10 @@ function SwitchCell(
   return (
     <Cell
       center
+      size={props.cellSize}
       title={props.title}
       border={props.border}
-      class={bem()}
+      class={bem([props.cellSize])}
       {...inherit(ctx)}
     >
       <Switch {...{ props, on: ctx.listeners }} />
@@ -38,6 +40,7 @@ function SwitchCell(
 SwitchCell.props = {
   ...switchProps,
   title: String,
+  cellSize: String,
   border: {
     type: Boolean,
     default: true
diff --git a/packages/switch-cell/test/__snapshots__/index.spec.js.snap b/packages/switch-cell/test/__snapshots__/index.spec.js.snap
index 9bcd1042d..9d283bac4 100644
--- a/packages/switch-cell/test/__snapshots__/index.spec.js.snap
+++ b/packages/switch-cell/test/__snapshots__/index.spec.js.snap
@@ -9,3 +9,13 @@ exports[`border prop 1`] = `
   </div>
 </div>
 `;
+
+exports[`cell-size prop 1`] = `
+<div class="van-cell van-cell--center van-cell--large van-switch-cell van-switch-cell--large">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-switch" style="font-size: 24px;">
+      <div class="van-switch__node"></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/switch-cell/test/index.spec.js b/packages/switch-cell/test/index.spec.js
index 4682d09ab..9a066e0c0 100644
--- a/packages/switch-cell/test/index.spec.js
+++ b/packages/switch-cell/test/index.spec.js
@@ -25,3 +25,13 @@ test('border prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('cell-size prop', () => {
+  const wrapper = mount(SwitchCell, {
+    propsData: {
+      cellSize: 'large'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/switch-cell/zh-CN.md b/packages/switch-cell/zh-CN.md
index abc0fabcb..3599e8827 100644
--- a/packages/switch-cell/zh-CN.md
+++ b/packages/switch-cell/zh-CN.md
@@ -56,6 +56,7 @@ export default {
 | v-model | 开关状态 | `null` | `false` | - |
 | title | 左侧标题 |  `String` | `''` | - |
 | border | 是否展示单元格内边框 | `Boolean` | `true` | 2.0.0 |
+| cell-size | 单元格大小，可选值为 `large` | `String` | 2.0.0 |
 | loading | 是否为加载状态 |  `Boolean` | `false` | - |
 | disabled | 是否为禁用状态 |  `Boolean` | `false` | - |
 | size | 开关尺寸 | `String` | `24px` | 1.1.11 |