diff --git a/packages/cell/index.js b/packages/cell/index.tsx similarity index 67% rename from packages/cell/index.js rename to packages/cell/index.tsx index f302d5a67..985513674 100644 --- a/packages/cell/index.js +++ b/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 = 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 && ; - const RightIcon = slots['right-icon'] - ? slots['right-icon']() + const rightIconSlot = slots['right-icon']; + const RightIcon = rightIconSlot + ? rightIconSlot() : isLink && ( ); - 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 (
@@ -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(Cell); diff --git a/packages/cell/shared.ts b/packages/cell/shared.ts index bf2010717..d4525793e 100644 --- a/packages/cell/shared.ts +++ b/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, diff --git a/packages/utils/use/bem.ts b/packages/utils/use/bem.ts index 34ec1cd68..e5e4cc8cd 100644 --- a/packages/utils/use/bem.ts +++ b/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 = '--'; diff --git a/packages/utils/use/sfc.ts b/packages/utils/use/sfc.ts index 1f30c8afe..9abda939d 100644 --- a/packages/utils/use/sfc.ts +++ b/packages/utils/use/sfc.ts @@ -47,7 +47,11 @@ export type FunctionalComponent< inject?: InjectOptions; }; -export type VantTsxComponent = (props: T) => VNode; +export type TsxBaseProps = { + class?: any; + style?: any; +} +export type TsxComponent = (props: T & TsxBaseProps) => VNode; const arrayProp = { type: Array, @@ -104,7 +108,7 @@ function transformFunctionalComponent( export default (name: string) => ( sfc: VantComponentOptions | FunctionalComponent -): VantTsxComponent => { +): TsxComponent => { if (typeof sfc === 'function') { sfc = transformFunctionalComponent(sfc); } @@ -121,5 +125,5 @@ export default (name: string) => ( sfc.name = name; sfc.install = install; - return sfc as VantTsxComponent; + return sfc as TsxComponent; };