From ea129825f1886dd614ca4c3024f4805297a949dd Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 5 Oct 2018 20:14:27 +0800
Subject: [PATCH] [improvement] Collapse: add disabled prop (#1892)

---
 packages/collapse-item/index.vue              | 18 ++++++----
 packages/collapse/demo/index.vue              |  2 +-
 packages/collapse/en-US.md                    |  3 +-
 .../test/__snapshots__/demo.spec.js.snap      | 10 +++---
 packages/collapse/zh-CN.md                    |  3 +-
 packages/vant-css/src/collapse.css            | 35 ++++++++++++-------
 6 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/packages/collapse-item/index.vue b/packages/collapse-item/index.vue
index 1d71cc012..401cc6bab 100644
--- a/packages/collapse-item/index.vue
+++ b/packages/collapse-item/index.vue
@@ -1,11 +1,10 @@
 <template>
-  <div
-    :class="[
-      b({ expanded }),
-      { 'van-hairline--top': index }
-    ]"
-  >
-    <cell :class="b('title')" @click="onClick" v-bind="$props">
+  <div :class="[b(), { 'van-hairline--top': index }]">
+    <cell
+      v-bind="$props"
+      :class="b('title', { disabled, expanded })"
+      @click="onClick"
+    >
       <slot name="title" slot="title" />
       <slot name="icon" slot="icon" />
       <slot name="value" />
@@ -35,6 +34,7 @@ export default create({
     label: String,
     title: [String, Number],
     value: [String, Number],
+    disabled: Boolean,
     border: {
       type: Boolean,
       default: true
@@ -116,6 +116,10 @@ export default create({
 
   methods: {
     onClick() {
+      if (this.disabled) {
+        return;
+      }
+
       const { parent } = this;
       const name = parent.accordion && this.currentName === parent.value ? '' : this.currentName;
       const expanded = !this.expanded;
diff --git a/packages/collapse/demo/index.vue b/packages/collapse/demo/index.vue
index 850a1fb27..c3929245a 100644
--- a/packages/collapse/demo/index.vue
+++ b/packages/collapse/demo/index.vue
@@ -4,7 +4,7 @@
       <van-collapse v-model="active1">
         <van-collapse-item :title="$t('title1')">{{ $t('content1') }}</van-collapse-item>
         <van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
-        <van-collapse-item :title="$t('title3')">{{ $t('content3') }}</van-collapse-item>
+        <van-collapse-item :title="$t('title3')" disabled>{{ $t('content3') }}</van-collapse-item>
       </van-collapse>
     </demo-block>
 
diff --git a/packages/collapse/en-US.md b/packages/collapse/en-US.md
index 6e4a176bf..bd55236da 100644
--- a/packages/collapse/en-US.md
+++ b/packages/collapse/en-US.md
@@ -16,7 +16,7 @@ Use `v-model` to control the name of active panels
 <van-collapse v-model="activeNames">
   <van-collapse-item title="Title1" name="1">Content</van-collapse-item>
   <van-collapse-item title="Title2" name="2">Content</van-collapse-item>
-  <van-collapse-item title="Title3" name="3">Content</van-collapse-item>
+  <van-collapse-item title="Title3" name="3" disabled>Content</van-collapse-item>
 </van-collapse>
 ```
 
@@ -90,6 +90,7 @@ export default {
 | value | Right text | `String | Number` | - |
 | label | Description below the title | `String` | - |
 | border | Whether to show inner border | `Boolean` | `true` |
+| disabled | Whether to disabled collapse | `Boolean` | `false` |
 | is-link | Whether to show link icon | `Boolean` | `true` |
 
 ### CollapseItem Slot
diff --git a/packages/collapse/test/__snapshots__/demo.spec.js.snap b/packages/collapse/test/__snapshots__/demo.spec.js.snap
index 891f25655..4fe18e2be 100644
--- a/packages/collapse/test/__snapshots__/demo.spec.js.snap
+++ b/packages/collapse/test/__snapshots__/demo.spec.js.snap
@@ -4,8 +4,8 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-hairline--top-bottom van-collapse">
-      <div class="van-collapse-item van-collapse-item--expanded">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+      <div class="van-collapse-item">
+        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--expanded">
           <!---->
           <div class="van-cell__title"><span>有赞微商城</span>
             <!---->
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
         <!---->
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+        <div disabled="disabled" class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--disabled">
           <!---->
           <div class="van-cell__title"><span>有赞美业</span>
             <!---->
@@ -49,8 +49,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-hairline--top-bottom van-collapse">
-      <div class="van-collapse-item van-collapse-item--expanded">
-        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
+      <div class="van-collapse-item">
+        <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title van-collapse-item__title--expanded">
           <!---->
           <div class="van-cell__title"><span>有赞微商城</span>
             <!---->
diff --git a/packages/collapse/zh-CN.md b/packages/collapse/zh-CN.md
index 2ebfbf7e1..9d98beca6 100644
--- a/packages/collapse/zh-CN.md
+++ b/packages/collapse/zh-CN.md
@@ -20,7 +20,7 @@ Vue.use(Collapse).use(CollapseItem);
   <van-collapse-item title="有赞零售" name="2">
     网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
   </van-collapse-item>
-  <van-collapse-item title="有赞美业" name="3">
+  <van-collapse-item title="有赞美业" name="3" disabled>
     线上拓客，随时预约，贴心顺手的开单收银
   </van-collapse-item>
 </van-collapse>
@@ -102,6 +102,7 @@ export default {
 | value | 标题栏右侧内容 | `String | Number` | - |
 | label | 标题栏描述信息 | `String` | - |
 | border | 是否显示内边框 | `Boolean` | `true` |
+| disabled | 是否禁用面板 | `Boolean` | `false` |
 | is-link | 标题栏是否展示右侧箭头并开启点击反馈 | `Boolean` | `true` |
 
 ### CollapseItem Slot
diff --git a/packages/vant-css/src/collapse.css b/packages/vant-css/src/collapse.css
index 2be6e3701..079fbd58f 100644
--- a/packages/vant-css/src/collapse.css
+++ b/packages/vant-css/src/collapse.css
@@ -10,6 +10,27 @@
     &::after {
       visibility: hidden;
     }
+
+    &--expanded {
+      .van-cell__right-icon::before {
+        transform: rotate(-90deg);
+      }
+
+      &::after {
+        visibility: visible;
+      }
+    }
+
+    &--disabled {
+      &,
+      & .van-cell__right-icon {
+        color: $gray;
+      }
+
+      &:active {
+        background-color: $white;
+      }
+    }
   }
 
   &__wrapper {
@@ -20,18 +41,6 @@
 
   &__content {
     padding: 15px;
-    background-color: #fff;
-  }
-
-  &--expanded {
-    .van-collapse-item__title {
-      .van-cell__right-icon::before {
-        transform: rotate(-90deg);
-      }
-
-      &::after {
-        visibility: visible;
-      }
-    }
+    background-color: $white;
   }
 }