[improvement] Cell: tsx (#2771)

packages/cell/index.tsx

@@ -4,9 +4,14 @@ import { emit, inherit } from '../utils/functional';
 import { routeProps, functionalRoute } from '../mixins/router';
 import Icon from '../icon';
 
+// Types
+import { SharedCellProps } from './shared';
+import { FunctionalComponent } from '../utils/use/sfc';
+import { Mods } from '../utils/use/bem';
+
 const [sfc, bem] = use('cell');
 
-function Cell(h, props, slots, ctx) {
+const Cell: FunctionalComponent<CellProps> = function(h, props, slots, ctx) {
   const { icon, size, title, label, value, isLink, arrowDirection } = props;
 
   const showTitle = slots.title || isDef(title);
@@ -34,8 +39,9 @@ function Cell(h, props, slots, ctx) {
     ? slots.icon()
     : icon && <Icon class={bem('left-icon')} name={icon} />;
 
-  const RightIcon = slots['right-icon']
-    ? slots['right-icon']()
+  const rightIconSlot = slots['right-icon'];
+  const RightIcon = rightIconSlot
+    ? rightIconSlot()
     : isLink && (
         <Icon
           class={bem('right-icon')}
@@ -43,20 +49,25 @@ function Cell(h, props, slots, ctx) {
         />
     );
 
-  const onClick = event => {
+  const onClick = (event: Event) => {
     emit(ctx, 'click', event);
     functionalRoute(ctx);
   };
 
+  const classes: Mods = {
+    center: props.center,
+    required: props.required,
+    borderless: !props.border,
+    clickable: isLink || props.clickable
+  };
+
+  if (size) {
+    classes[size] = size;
+  }
+
   return (
     <div
-      class={bem({
-        center: props.center,
-        required: props.required,
-        borderless: !props.border,
-        clickable: isLink || props.clickable,
-        [size]: size
-      })}
+      class={bem(classes)}
       onClick={onClick}
       {...inherit(ctx)}
     >
@@ -69,6 +80,12 @@ function Cell(h, props, slots, ctx) {
   );
 }
 
+export type CellProps = SharedCellProps & {
+  size?: string;
+  clickable?: boolean;
+  arrowDirection?: string;
+}
+
 Cell.props = {
   ...cellProps,
   ...routeProps,
@@ -77,4 +94,4 @@ Cell.props = {
   arrowDirection: String
 };
 
-export default sfc(Cell);
+export default sfc<CellProps>(Cell);

packages/cell/shared.ts

@@ -1,3 +1,17 @@
+export type SharedCellProps = {
+  icon?: string;
+  border?: boolean;
+  center?: boolean;
+  isLink?: boolean;
+  required?: boolean;
+  titleClass?: string;
+  valueClass?: string;
+  labelClass?: string;
+  title?: string | number;
+  value?: string | number;
+  label?: string | number;
+}
+
 export const cellProps = {
   icon: String,
   center: Boolean,

packages/utils/use/bem.ts

@@ -7,8 +7,8 @@
  * b(['disabled', 'primary']) // 'button button--disabled button--primary'
  */
 
-type Mod = string | { [key: string]: any };
-type Mods = Mod | Mod[];
+export type Mod = string | { [key: string]: any };
+export type Mods = Mod | Mod[];
 
 const ELEMENT = '__';
 const MODS = '--';

packages/utils/use/sfc.ts

@@ -47,7 +47,11 @@ export type FunctionalComponent<
   inject?: InjectOptions;
 };
 
-export type VantTsxComponent<T> = (props: T) => VNode;
+export type TsxBaseProps = {
+  class?: any;
+  style?: any;
+}
+export type TsxComponent<T> = (props: T & TsxBaseProps) => VNode;
 
 const arrayProp = {
   type: Array,
@@ -104,7 +108,7 @@ function transformFunctionalComponent(
 
 export default (name: string) => <T = DefaultProps>(
   sfc: VantComponentOptions | FunctionalComponent
-): VantTsxComponent<T> => {
+): TsxComponent<T> => {
   if (typeof sfc === 'function') {
     sfc = transformFunctionalComponent(sfc);
   }
@@ -121,5 +125,5 @@ export default (name: string) => <T = DefaultProps>(
   sfc.name = name;
   sfc.install = install;
 
-  return sfc as VantTsxComponent<T>;
+  return sfc as TsxComponent<T>;
 };