[improvement] GoodsAction: tsx (#2786)

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

@@ -1,38 +0,0 @@
-import { use } from '../utils';
-import Button from '../button';
-import { emit, inherit } from '../utils/functional';
-import { functionalRoute, routeProps } from '../mixins/router';
-
-const [sfc, bem] = use('goods-action-big-btn');
-
-function GoodsActionBigBtn(h, props, slots, ctx) {
-  const onClick = event => {
-    emit(ctx, 'click', event);
-    functionalRoute(ctx);
-  };
-
-  return (
-    <Button
-      square
-      class={bem()}
-      size="large"
-      loading={props.loading}
-      disabled={props.disabled}
-      type={props.primary ? 'danger' : 'warning'}
-      onClick={onClick}
-      {...inherit(ctx)}
-    >
-      {slots.default ? slots.default() : props.text}
-    </Button>
-  );
-}
-
-GoodsActionBigBtn.props = {
-  ...routeProps,
-  text: String,
-  primary: Boolean,
-  loading: Boolean,
-  disabled: Boolean
-};
-
-export default sfc(GoodsActionBigBtn);

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

@@ -0,0 +1,54 @@
+import { use } from '../utils';
+import Button, { ButtonEvents } from '../button';
+import { emit, inherit } from '../utils/functional';
+import { functionalRoute, routeProps, RouteProps } from '../mixins/router';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type GoodsActionBigBtnProps = RouteProps & {
+  text?: string;
+  primary?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+const [sfc, bem] = use('goods-action-big-btn');
+
+function GoodsActionBigBtn(
+  h: CreateElement,
+  props: GoodsActionBigBtnProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<GoodsActionBigBtnProps>
+) {
+  const onClick = (event: Event) => {
+    emit(ctx, 'click', event);
+    functionalRoute(ctx);
+  };
+
+  return (
+    <Button
+      square
+      class={bem()}
+      size="large"
+      loading={props.loading}
+      disabled={props.disabled}
+      type={props.primary ? 'danger' : 'warning'}
+      onClick={onClick}
+      {...inherit(ctx)}
+    >
+      {slots.default ? slots.default() : props.text}
+    </Button>
+  );
+}
+
+GoodsActionBigBtn.props = {
+  ...routeProps,
+  text: String,
+  primary: Boolean,
+  loading: Boolean,
+  disabled: Boolean
+};
+
+export default sfc<GoodsActionBigBtnProps, ButtonEvents>(GoodsActionBigBtn);

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

@@ -1,38 +0,0 @@
-import { use } from '../utils';
-import Icon from '../icon';
-import { emit, inherit } from '../utils/functional';
-import { functionalRoute, routeProps } from '../mixins/router';
-
-const [sfc, bem] = use('goods-action-mini-btn');
-
-function GoodsActionMiniBtn(h, props, slots, ctx) {
-  const onClick = event => {
-    emit(ctx, 'click', event);
-    functionalRoute(ctx);
-  };
-
-  return (
-    <div
-      class={[bem(), 'van-hairline']}
-      onClick={onClick}
-      {...inherit(ctx)}
-    >
-      <Icon
-        class={[bem('icon'), props.iconClass]}
-        info={props.info}
-        name={props.icon}
-      />
-      {slots.default ? slots.default() : props.text}
-    </div>
-  );
-}
-
-GoodsActionMiniBtn.props = {
-  ...routeProps,
-  text: String,
-  icon: String,
-  info: [String, Number],
-  iconClass: String
-};
-
-export default sfc(GoodsActionMiniBtn);

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

@@ -0,0 +1,50 @@
+import { use } from '../utils';
+import Icon, { IconEvents } from '../icon';
+import { emit, inherit } from '../utils/functional';
+import { functionalRoute, routeProps, RouteProps } from '../mixins/router';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type GoodsActionMiniBtnProps = RouteProps & {
+  icon: string;
+  text?: string;
+  info?: string | number;
+  iconClass?: any;
+};
+
+const [sfc, bem] = use('goods-action-mini-btn');
+
+function GoodsActionMiniBtn(
+  h: CreateElement,
+  props: GoodsActionMiniBtnProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<GoodsActionMiniBtnProps>
+) {
+  const onClick = (event: Event) => {
+    emit(ctx, 'click', event);
+    functionalRoute(ctx);
+  };
+
+  return (
+    <div class={[bem(), 'van-hairline']} onClick={onClick} {...inherit(ctx)}>
+      <Icon
+        class={[bem('icon'), props.iconClass]}
+        info={props.info}
+        name={props.icon}
+      />
+      {slots.default ? slots.default() : props.text}
+    </div>
+  );
+}
+
+GoodsActionMiniBtn.props = {
+  ...routeProps,
+  text: String,
+  icon: String,
+  info: [String, Number],
+  iconClass: null as any
+};
+
+export default sfc<GoodsActionMiniBtnProps, IconEvents>(GoodsActionMiniBtn);

packages/goods-action/en-US.md

@@ -89,13 +89,12 @@ Use `info` prop to show messages in upper right corner of icon
 |------|------|------|------|
 | text | Button text | `String` | - |
 | icon | Icon | `String` | - |
-| icon-class | Icon class name | `String` | `''` |
+| icon-class | Icon class name | `any` | `''` |
 | info | Info message | `String | Number` | - |
 | url | Link | `String` | - |
 | to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
 | replace | If true, the navigation will not leave a history record | `String` | `false` |
 
-
 #### GoodsActionBigBtn
 
 | Attribute | Description | Type | Default |

packages/goods-action/index.tsx

@@ -1,9 +1,18 @@
 import { use } from '../utils';
 import { inherit } from '../utils/functional';
 
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultProps, DefaultSlots } from '../utils/use/sfc';
+
 const [sfc, bem] = use('goods-action');
 
-function GoodsAction(h, props, slots, ctx) {
+function GoodsAction(
+  h: CreateElement,
+  props: DefaultProps,
+  slots: DefaultSlots,
+  ctx: RenderContext
+) {
   return (
     <div class={bem()} {...inherit(ctx, true)}>
       {slots.default && slots.default()}

packages/goods-action/zh-CN.md

@@ -88,7 +88,7 @@ export default {
 |------|------|------|------|------|
 | text | 按钮文字 | `String` | - | - |
 | icon | 图标 | `String` | - | - |
-| icon-class | 图标额外类名 | `String` | - | - |
+| icon-class | 图标额外类名 | `any` | - | - |
 | info | 图标右上角提示信息 | `String | Number` | - | - |
 | url | 跳转链接 | `String` | - | - |
 | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |