[improvement] TreeSelect: tsx (youzan#2803)

packages/tree-select/index.tsx

@@ -0,0 +1,105 @@
+import { use } from '../utils';
+import { emit, inherit } from '../utils/functional';
+import Icon from '../icon';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type TreeSelectItem = {
+  text: string;
+  disabled?: boolean;
+  children: TreeSelectChildren[];
+};
+
+export type TreeSelectChildren = {
+  id: number;
+  text: string;
+  disabled?: boolean;
+};
+
+export type TreeSelectProps = {
+  height: number;
+  items: TreeSelectItem[];
+  activeId: number | string;
+  mainActiveIndex: number;
+};
+
+const [sfc, bem] = use('tree-select');
+
+function TreeSelect(
+  h: CreateElement,
+  props: TreeSelectProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<TreeSelectProps>
+) {
+  const { height, items, mainActiveIndex, activeId } = props;
+
+  const selectedItem = items[mainActiveIndex] || {};
+  const subItems = selectedItem.children || [];
+
+  return (
+    <div class={bem()} style={{ height: `${height}px` }} {...inherit(ctx)}>
+      <div class={bem('nav')}>
+        {items.map((item, index) => (
+          <div
+            key={index}
+            class={[
+              'van-ellipsis',
+              bem('nitem', {
+                active: mainActiveIndex === index,
+                disabled: item.disabled
+              })
+            ]}
+            onClick={() => {
+              if (!item.disabled) {
+                emit(ctx, 'navclick', 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={() => {
+              if (!item.disabled) {
+                emit(ctx, 'itemclick', item);
+              }
+            }}
+          >
+            {item.text}
+            {activeId === item.id && (
+              <Icon name="checked" size="16px" class={bem('selected')} />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+TreeSelect.props = {
+  items: Array,
+  mainActiveIndex: Number,
+  activeId: {
+    type: [Number, String],
+    default: 0
+  },
+  height: {
+    type: Number,
+    default: 300
+  }
+};
+
+export default sfc<TreeSelectProps>(TreeSelect);

packages/tree-select/test/index.spec.js

@@ -6,10 +6,12 @@ test('empty list', () => {
 });
 
 test('select item', () => {
+  const onItemClick = jest.fn();
   const item = {
     text: 'city1',
     id: 1
   };
+
   const wrapper = mount(TreeSelect, {
     propsData: {
       items: [{
@@ -19,12 +21,17 @@ test('select item', () => {
           { ...item, disabled: true }
         ]
       }]
+    },
+    context: {
+      on: {
+        itemclick: onItemClick
+      }
     }
   });
 
   const items = wrapper.findAll('.van-tree-select__item');
   items.at(0).trigger('click');
-  expect(wrapper.emitted('itemclick')[0][0]).toEqual(item);
+  expect(onItemClick.mock.calls[0][0]).toEqual(item);
   items.at(1).trigger('click');
-  expect(wrapper.emitted('itemclick')[1]).toBeFalsy();
+  expect(onItemClick.mock.calls[1]).toBeFalsy();
 });