From 1dd0d42b5fa8a22c6b4ab15464ee01abc1977882 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Mon, 16 Dec 2019 12:01:57 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20improve=20Collapse=E3=80=81ContactCard?=
 =?UTF-8?q?=20jsx=20segment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cell-group/index.tsx   |   2 +-
 src/circle/index.js        |   1 +
 src/collapse-item/index.js | 101 +++++++++++++++++++++----------------
 src/contact-card/index.tsx |  18 ++++---
 4 files changed, 71 insertions(+), 51 deletions(-)

diff --git a/src/cell-group/index.tsx b/src/cell-group/index.tsx
index 6284790d6..7fcaeef32 100644
--- a/src/cell-group/index.tsx
+++ b/src/cell-group/index.tsx
@@ -25,7 +25,7 @@ function CellGroup(
 ) {
   const Group = (
     <div class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]} {...inherit(ctx, true)}>
-      {slots.default && slots.default()}
+      {slots.default?.()}
     </div>
   );
 
diff --git a/src/circle/index.js b/src/circle/index.js
index 4a481b871..2c1d2adfa 100644
--- a/src/circle/index.js
+++ b/src/circle/index.js
@@ -152,6 +152,7 @@ export default createComponent({
       const now = Date.now();
       const progress = Math.min((now - this.startTime) / this.duration, 1);
       const rate = progress * (this.endRate - this.startRate) + this.startRate;
+
       this.$emit('input', format(parseFloat(rate.toFixed(1))));
 
       if (this.increase ? rate < this.endRate : rate > this.endRate) {
diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
index e8282affb..a601edbb8 100644
--- a/src/collapse-item/index.js
+++ b/src/collapse-item/index.js
@@ -6,6 +6,7 @@ import { cellProps } from '../cell/shared';
 import { ChildrenMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('collapse-item');
+
 const CELL_SLOTS = ['title', 'icon', 'right-icon'];
 
 export default createComponent({
@@ -40,7 +41,11 @@ export default createComponent({
 
       const { value, accordion } = this.parent;
 
-      if (process.env.NODE_ENV !== 'production' && !accordion && !Array.isArray(value)) {
+      if (
+        process.env.NODE_ENV !== 'production' &&
+        !accordion &&
+        !Array.isArray(value)
+      ) {
         console.error('[Vant] Collapse: type of prop "value" should be Array');
         return;
       }
@@ -73,6 +78,7 @@ export default createComponent({
 
       nextTick(() => {
         const { content, wrapper } = this.$refs;
+
         if (!content || !wrapper) {
           return;
         }
@@ -99,9 +105,9 @@ export default createComponent({
         return;
       }
 
-      const { parent } = this;
-      const name =
-        parent.accordion && this.currentName === parent.value ? '' : this.currentName;
+      const { parent, currentName } = this;
+      const name = parent.accordion && currentName === parent.value ? '' : currentName;
+
       this.parent.switch(name, !this.expanded);
     },
 
@@ -111,52 +117,59 @@ export default createComponent({
       } else {
         this.$refs.wrapper.style.height = '';
       }
+    },
+
+    genTitle() {
+      const { disabled, expanded } = this;
+
+      const titleSlots = CELL_SLOTS.reduce((slots, name) => {
+        if (this.slots(name)) {
+          slots[name] = () => this.slots(name);
+        }
+
+        return slots;
+      }, {});
+
+      if (this.slots('value')) {
+        titleSlots.default = () => this.slots('value');
+      }
+
+      return (
+        <Cell
+          role="button"
+          class={bem('title', { disabled, expanded })}
+          onClick={this.onClick}
+          scopedSlots={titleSlots}
+          tabindex={disabled ? -1 : 0}
+          aria-expanded={String(expanded)}
+          {...{ props: this.$props }}
+        />
+      );
+    },
+
+    genContent() {
+      if (this.inited) {
+        return (
+          <div
+            vShow={this.show}
+            ref="wrapper"
+            class={bem('wrapper')}
+            onTransitionend={this.onTransitionEnd}
+          >
+            <div ref="content" class={bem('content')}>
+              {this.slots()}
+            </div>
+          </div>
+        );
+      }
     }
   },
 
   render() {
-    const { disabled, expanded } = this;
-
-    const titleSlots = CELL_SLOTS.reduce((slots, name) => {
-      if (this.slots(name)) {
-        slots[name] = () => this.slots(name);
-      }
-      return slots;
-    }, {});
-
-    if (this.slots('value')) {
-      titleSlots.default = () => this.slots('value');
-    }
-
-    const Title = (
-      <Cell
-        role="button"
-        class={bem('title', { disabled, expanded })}
-        onClick={this.onClick}
-        scopedSlots={titleSlots}
-        tabindex={disabled ? -1 : 0}
-        aria-expanded={String(expanded)}
-        {...{ props: this.$props }}
-      />
-    );
-
-    const Content = this.inited && (
-      <div
-        vShow={this.show}
-        ref="wrapper"
-        class={bem('wrapper')}
-        onTransitionend={this.onTransitionEnd}
-      >
-        <div ref="content" class={bem('content')}>
-          {this.slots()}
-        </div>
-      </div>
-    );
-
     return (
       <div class={[bem(), { [BORDER_TOP]: this.index }]}>
-        {Title}
-        {Content}
+        {this.genTitle()}
+        {this.genContent()}
       </div>
     );
   }
diff --git a/src/contact-card/index.tsx b/src/contact-card/index.tsx
index faf71fe18..c5c90d105 100644
--- a/src/contact-card/index.tsx
+++ b/src/contact-card/index.tsx
@@ -30,6 +30,17 @@ function ContactCard(
     }
   }
 
+  function Content() {
+    if (type === 'add') {
+      return props.addText || t('addText');
+    }
+
+    return [
+      <div>{`${t('name')}：${props.name}`}</div>,
+      <div>{`${t('tel')}：${props.tel}`}</div>
+    ];
+  }
+
   return (
     <Cell
       center
@@ -41,12 +52,7 @@ function ContactCard(
       onClick={onClick}
       {...inherit(ctx)}
     >
-      {type === 'add'
-        ? props.addText || t('addText')
-        : [
-            <div>{`${t('name')}：${props.name}`}</div>,
-            <div>{`${t('tel')}：${props.tel}`}</div>
-        ]}
+      {Content()}
     </Cell>
   );
 }