[improvement] TreeSelect: jsx (#2638)

packages/tree-select/index.js

@@ -0,0 +1,100 @@
+import { use } from '../utils';
+import Icon from '../icon';
+
+const [sfc, bem] = use('tree-select');
+
+export default sfc({
+  props: {
+    items: Array,
+    mainActiveIndex: Number,
+    activeId: {
+      type: [Number, String],
+      default: 0
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+
+  computed: {
+    subItems() {
+      const selectedItem = this.items[this.mainActiveIndex] || {};
+      return selectedItem.children || [];
+    }
+  },
+
+  methods: {
+    onClickNav(data, index) {
+      if (!data.disabled) {
+        this.$emit('navclick', index);
+      }
+    },
+
+    onItemSelect(data) {
+      if (!data.disabled) {
+        this.$emit('itemclick', data);
+      }
+    }
+  },
+
+  render(h) {
+    const {
+      height,
+      items,
+      mainActiveIndex,
+      activeId,
+      subItems
+    } = this;
+
+    return (
+      <div class={bem()} style={{ height: height + 'px' }}>
+        <div class={bem('nav')}>
+          {items.map((item, index) => (
+            <div
+              key={index}
+              class={[
+                'van-ellipsis',
+                bem('nitem', {
+                  active: mainActiveIndex === index,
+                  disabled: item.disabled
+                })
+              ]}
+              onClick={() => {
+                this.onClickNav(item, index);
+              }}
+            >
+              { item.text }
+            </div>
+          ))}
+        </div>
+        <div class={bem('content')}>
+          {subItems.map(item => (
+            <div
+              key={item.id}
+              class={[
+                'van-ellipsis',
+                bem('item', {
+                  active: activeId === item.id,
+                  disabled: item.disabled
+                })
+              ]}
+              onClick={() => {
+                this.onItemSelect(item);
+              }}
+            >
+              { item.text }
+              {activeId === item.id && (
+                <Icon
+                  name="checked"
+                  size="16px"
+                  class={bem('selected')}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+});

packages/tree-select/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div
-    :class="b()"
-    :style="{ height: height + 'px' }"
-  >
-    <div :class="b('nav')">
-      <div
-        v-for="(item, index) in items"
-        v-text="item.text"
-        class="van-ellipsis"
-        :class="b('nitem', { active: mainActiveIndex === index, disabled: item.disabled })"
-        @click="onClickNav(item, index)"
-      />
-    </div>
-    <div :class="b('content')">
-      <div
-        v-for="item in subItems"
-        :key="item.id"
-        class="van-ellipsis"
-        :class="b('item', {
-          active: activeId === item.id,
-          disabled: item.disabled
-        })"
-        @click="onItemSelect(item)"
-      >
-        {{ item.text }}
-        <icon
-          v-if="activeId === item.id"
-          name="checked"
-          size="16px"
-          :class="b('selected')"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'tree-select',
-
-  props: {
-    items: Array,
-    mainActiveIndex: Number,
-    activeId: {
-      type: [Number, String],
-      default: 0
-    },
-    height: {
-      type: Number,
-      default: 300
-    }
-  },
-
-  computed: {
-    subItems() {
-      const selectedItem = this.items[this.mainActiveIndex] || {};
-      return selectedItem.children || [];
-    }
-  },
-
-  methods: {
-    onClickNav(data, index) {
-      if (!data.disabled) {
-        this.$emit('navclick', index);
-      }
-    },
-
-    onItemSelect(data) {
-      if (!data.disabled) {
-        this.$emit('itemclick', data);
-      }
-    }
-  }
-});
-</script>

packages/tree-select/test/__snapshots__/demo.spec.js.snap

@@ -11,38 +11,15 @@ exports[`renders demo correctly 1`] = `
         <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--disabled">福建</div>
       </div>
       <div class="van-tree-select__content">
-        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-icon van-icon-checked van-tree-select__selected" style="color:undefined;font-size:16px;">
-          杭州
-          <i class="van-icon van-icon-checked van-tree-select__selected" style="color:undefined;font-size:16px;">
             <!----></i></div>
-        <div class="van-ellipsis van-tree-select__item">
+        <div class="van-ellipsis van-tree-select__item">温州</div>
-          温州
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
-          <!---->
+        <div class="van-ellipsis van-tree-select__item">义乌</div>
-        </div>
+        <div class="van-ellipsis van-tree-select__item">南京</div>
-        <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">
+        <div class="van-ellipsis van-tree-select__item">无锡</div>
-          宁波
+        <div class="van-ellipsis van-tree-select__item">徐州</div>
-          <!---->
+        <div class="van-ellipsis van-tree-select__item">苏州</div>
-        </div>
-        <div class="van-ellipsis van-tree-select__item">
-          义乌
-          <!---->
-        </div>
-        <div class="van-ellipsis van-tree-select__item">
-          南京
-          <!---->
-        </div>
-        <div class="van-ellipsis van-tree-select__item">
-          无锡
-          <!---->
-        </div>
-        <div class="van-ellipsis van-tree-select__item">
-          徐州
-          <!---->
-        </div>
-        <div class="van-ellipsis van-tree-select__item">
-          苏州
-          <!---->
-        </div>
       </div>
     </div>
   </div>