[improvement] GoodsAction: subComponents functional (#2730)

packages/cell/index.js

@@ -1,7 +1,7 @@
 import { use, isDef } from '../utils';
 import { cellProps } from './shared';
 import { emit, inherit, unifySlots } from '../utils/functional';
-import { routeProps, functionalRoute } from '../mixins/router-link';
+import { routeProps, functionalRoute } from '../mixins/router';
 import Icon from '../icon';
 
 const [sfc, bem] = use('cell');

packages/goods-action-big-btn/index.js

@@ -1,10 +1,13 @@
 import { use } from '../utils';
 import Button from '../button';
-import { route, routeProps } from '../mixins/router-link';
+import { emit, inherit, unifySlots } from '../utils/functional';
+import { functionalRoute, routeProps } from '../mixins/router';
 
 const [sfc, bem] = use('goods-action-big-btn');
 
 export default sfc({
+  functional: true,
+
   props: {
     ...routeProps,
     text: String,
@@ -13,25 +16,27 @@ export default sfc({
     disabled: Boolean
   },
 
-  methods: {
-    onClick(event) {
-      this.$emit('click', event);
-      route(this.$router, this);
-    }
-  },
+  render(h, context) {
+    const { props } = context;
+    const slots = unifySlots(context);
+
+    const onClick = event => {
+      emit(context, 'click', event);
+      functionalRoute(context);
+    };
 
-  render(h) {
     return (
       <Button
         square
         class={bem()}
         size="large"
-        loading={this.loading}
-        disabled={this.disabled}
-        type={this.primary ? 'danger' : 'warning'}
-        onClick={this.onClick}
+        loading={props.loading}
+        disabled={props.disabled}
+        type={props.primary ? 'danger' : 'warning'}
+        onClick={onClick}
+        {...inherit(context)}
       >
-        {this.slots() || this.text}
+        {slots.default ? slots.default() : props.text}
       </Button>
     );
   }

packages/goods-action-mini-btn/index.js

@@ -1,30 +1,42 @@
 import { use } from '../utils';
 import Icon from '../icon';
-import { route, routeProps } from '../mixins/router-link';
+import { emit, inherit, unifySlots } from '../utils/functional';
+import { functionalRoute, routeProps } from '../mixins/router';
 
 const [sfc, bem] = use('goods-action-mini-btn');
 
 export default sfc({
+  functional: true,
+
   props: {
     ...routeProps,
     text: String,
-    info: [String, Number],
     icon: String,
+    info: [String, Number],
     iconClass: String
   },
 
-  methods: {
-    onClick(event) {
-      this.$emit('click', event);
-      route(this.$router, this);
-    }
-  },
+  render(h, context) {
+    const { props } = context;
+    const slots = unifySlots(context);
+
+    const onClick = event => {
+      emit(context, 'click', event);
+      functionalRoute(context);
+    };
 
-  render(h) {
     return (
-      <div class={[bem(), 'van-hairline']} onClick={this.onClick}>
-        <Icon class={[bem('icon'), this.iconClass]} info={this.info} name={this.icon} />
-        {this.slots() || this.text}
+      <div
+        class={[bem(), 'van-hairline']}
+        onClick={onClick}
+        {...inherit(context)}
+      >
+        <Icon
+          class={[bem('icon'), props.iconClass]}
+          info={props.info}
+          name={props.icon}
+        />
+        {slots.default ? slots.default() : props.text}
       </div>
     );
   }

packages/goods-action/test/index.spec.js

@@ -1,17 +1,31 @@
 import BigBtn from '../../goods-action-big-btn';
-import SmallBtn from '../../goods-action-mini-btn';
+import MiniBtn from '../../goods-action-mini-btn';
 import { mount } from '../../../test/utils';
 
-test('big btn click event', () => {
-  const wrapper = mount(BigBtn);
+test('BigBtn click event', () => {
+  const click = jest.fn();
+  const wrapper = mount(BigBtn, {
+    context: {
+      on: {
+        click
+      }
+    }
+  });
 
   wrapper.trigger('click');
-  expect(wrapper.emitted('click')).toBeTruthy();
+  expect(click.mock.calls.length).toEqual(1);
 });
 
-test('small btn click event', () => {
-  const wrapper = mount(SmallBtn);
+test('MiniBtn click event', () => {
+  const click = jest.fn();
+  const wrapper = mount(MiniBtn, {
+    context: {
+      on: {
+        click
+      }
+    }
+  });
 
   wrapper.trigger('click');
-  expect(wrapper.emitted('click')).toBeTruthy();
+  expect(click.mock.calls.length).toEqual(1);
 });

packages/mixins/router.ts

@@ -1,8 +1,8 @@
 /**
- * add Vue-Router support
+ * Vue Router support
  */
 
-import { RenderContext } from 'vue';
+import { RenderContext } from 'vue/types';
 import VueRouter, { RawLocation } from 'vue-router/types';
 
 export type RouteConfig = {

packages/tabbar-item/index.js

@@ -1,7 +1,7 @@
 import { use } from '../utils';
 import Icon from '../icon';
 import Info from '../info';
-import { route, routeProps } from '../mixins/router-link';
+import { route, routeProps } from '../mixins/router';
 
 const [sfc, bem] = use('tabbar-item');