[improvement] Collapse: jsx (#2501)

packages/collapse-item/index.js

@@ -1,50 +1,13 @@
-<template>
+import { use, isDef } from '../utils';
-  <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" />
-      <slot
-        name="right-icon"
-        slot="right-icon"
-      />
-    </cell>
-    <div
-      v-if="inited"
-      v-show="show"
-      ref="wrapper"
-      :class="b('wrapper')"
-      @transitionend="onTransitionEnd"
-    >
-      <div
-        ref="content"
-        :class="b('content')"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
 import { raf } from '../utils/raf';
-import create from '../utils/create';
+import Cell from '../cell';
 import CellMixin from '../mixins/cell';
 import FindParent from '../mixins/find-parent';
 
-export default create({
+const [sfc, bem] = use('collapse-item');
-  name: 'collapse-item',
+const CELL_SLOTS = ['title', 'icon', 'right-icon'];
 
+export default sfc({
   mixins: [CellMixin, FindParent],
 
   props: {
@@ -73,7 +36,7 @@ export default create({
     },
 
     currentName() {
-      return this.isDef(this.name) ? this.name : this.index;
+      return isDef(this.name) ? this.name : this.index;
     },
 
     expanded() {
@@ -144,6 +107,38 @@ export default create({
         this.$refs.wrapper.style.height = null;
       }
     }
+  },
+
+  render(h) {
+    const Title = (
+      <Cell
+        class={bem('title', { disabled: this.disabled, expanded: this.expanded })}
+        onClick={this.onClick}
+        {...{ props: this.$props }}
+      >
+        {this.$slots.value}
+        {CELL_SLOTS.map(slot => h('template', { slot }, this.$slots[slot]))}
+      </Cell>
+    );
+
+    const Content = this.inited && (
+      <div
+        v-show={this.show}
+        ref="wrapper"
+        class={bem('wrapper')}
+        onTransitionend={this.onTransitionEnd}
+      >
+        <div ref="content" class={bem('content')}>
+          {this.$slots.default}
+        </div>
+      </div>
+    );
+
+    return (
+      <div class={[bem(), { 'van-hairline--top': this.index }]}>
+        {Title}
+        {Content}
+      </div>
+    );
   }
 });
-</script>

packages/collapse/index.js

@@ -1,18 +1,8 @@
-<template>
+import { use } from '../utils';
-  <div
-    :class="b()"
-    class="van-hairline--top-bottom"
-  >
-    <slot />
-  </div>
-</template>
 
-<script>
+const [sfc, bem] = use('collapse');
-import create from '../utils/create';
-
-export default create({
-  name: 'collapse',
 
+export default sfc({
   props: {
     accordion: Boolean,
     value: [String, Number, Array]
@@ -34,6 +24,9 @@ export default create({
       this.$emit('change', name);
       this.$emit('input', name);
     }
+  },
+
+  render(h) {
+    return <div class={[bem(), 'van-hairline--top-bottom']}>{this.$slots.default}</div>;
   }
 });
-</script>

packages/collapse/test/__snapshots__/demo.spec.js.snap

@@ -3,12 +3,13 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-hairline--top-bottom van-collapse">
+    <div class="van-collapse van-hairline--top-bottom">
       <div class="van-collapse-item">
         <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
           <div class="van-cell__title"><span>有赞微商城</span>
           </div>
-          <div class="van-cell__value"> </div>
+          <div class="van-cell__value">
+          </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
@@ -21,33 +22,34 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>有赞零售</span>
           </div>
-          <div class="van-cell__value"> </div>
+          <div class="van-cell__value">
+          </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
         </div>
-        <!---->
       </div>
       <div class="van-collapse-item van-hairline--top">
-        <div disabled="disabled" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
+        <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
           <div class="van-cell__title"><span>有赞美业</span>
           </div>
-          <div class="van-cell__value"> </div>
+          <div class="van-cell__value">
+          </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
         </div>
-        <!---->
       </div>
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-collapse">
+    <div class="van-collapse van-hairline--top-bottom">
       <div class="van-collapse-item">
         <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
           <div class="van-cell__title"><span>有赞微商城</span>
           </div>
-          <div class="van-cell__value"> </div>
+          <div class="van-cell__value">
+          </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
@@ -60,28 +62,28 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>有赞零售</span>
           </div>
-          <div class="van-cell__value"> </div>
+          <div class="van-cell__value">
+          </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
         </div>
-        <!---->
       </div>
       <div class="van-collapse-item van-hairline--top">
         <div class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>有赞美业</span>
           </div>
-          <div class="van-cell__value"> </div>
+          <div class="van-cell__value">
+          </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
         </div>
-        <!---->
       </div>
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-collapse">
+    <div class="van-collapse van-hairline--top-bottom">
       <div class="van-collapse-item">
         <div class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title">
@@ -89,12 +91,12 @@ exports[`renders demo correctly 1`] = `
                 <!---->
                 <!----></i></div>
           </div>
-          <div class="van-cell__value"> </div>
+          <div class="van-cell__value">
+          </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
         </div>
-        <!---->
       </div>
       <div class="van-collapse-item van-hairline--top">
         <div class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon" style="color:undefined;font-size:undefined;">
@@ -102,12 +104,12 @@ exports[`renders demo correctly 1`] = `
             <!----></i>
           <div class="van-cell__title"><span>有赞零售</span>
           </div>
-          <div class="van-cell__value"> </div>
+          <div class="van-cell__value">
+          </div>
           <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
         </div>
-        <!---->
       </div>
     </div>
   </div>

packages/collapse/zh-CN.md

@@ -121,4 +121,3 @@ export default {
 | icon | 自定义`icon` |
 | title | 自定义`title` |
 | right-icon | 自定义右侧按钮，默认是`arrow` |
-