[improvement] Panel: jsx (#2587)

packages/panel/index.js

@@ -0,0 +1,34 @@
+import { use } from '../utils';
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+
+const [sfc, bem] = use('panel');
+
+export default sfc({
+  props: {
+    icon: String,
+    desc: String,
+    title: String,
+    status: String
+  },
+
+  render(h) {
+    const slots = this.$slots;
+
+    return (
+      <CellGroup class={bem()}>
+        {slots.header || (
+          <Cell
+            class={bem('header')}
+            icon={this.icon}
+            label={this.desc}
+            title={this.title}
+            value={this.status}
+          />
+        )}
+        <div class={bem('content')}>{slots.default}</div>
+        {slots.footer && <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer}</div>}
+      </CellGroup>
+    );
+  }
+});

packages/panel/index.vue

@@ -1,37 +0,0 @@
-<template>
-  <cell-group :class="b()">
-    <slot name="header">
-      <cell
-        :class="b('header')"
-        :icon="icon"
-        :label="desc"
-        :title="title"
-        :value="status"
-      />
-    </slot>
-    <div :class="b('content')">
-      <slot />
-    </div>
-    <div
-      v-if="$slots.footer"
-      :class="b('footer')"
-      class="van-hairline--top"
-    >
-      <slot name="footer" />
-    </div>
-  </cell-group>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'panel',
-  props: {
-    icon: String,
-    desc: String,
-    title: String,
-    status: String
-  }
-});
-</script>

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

@@ -13,7 +13,6 @@ exports[`renders demo correctly 1`] = `
       <div class="van-panel__content">
         <div>内容</div>
       </div>
-      <!---->
     </div>
   </div>
   <div>
@@ -27,7 +26,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-panel__content">
         <div>内容</div>
       </div>
-      <div class="van-hairline--top van-panel__footer">
+      <div class="van-panel__footer van-hairline--top">
         <div><button class="van-button van-button--default van-button--small"><span class="van-button__text">按钮</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">
           按钮
         </span></button></div>