blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] optimize sfc type definitions (#2778)

Browse Source
This commit is contained in:
neverland 2019-02-18 17:34:32 +08:00 committed by GitHub
parent 0013185d38
commit 78174e4550
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 131 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/button/index.tsx
View File

@ -4,15 +4,32 @@ import { routeProps, RouteProps, functionalRoute } from '../mixins/router';
import Loading from '../loading';
// Types
import { FunctionalComponent } from '../utils/use/sfc';
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc';
export type ButtonProps = RouteProps & {
tag?: string;
type?: string;
size?: string;
text?: string;
block?: boolean;
plain?: boolean;
round?: boolean;
square?: boolean;
loading?: boolean;
disabled?: boolean;
nativeType?: string;
loadingText?: string;
bottomAction?: boolean;
};
const [sfc, bem] = use('button');
const Button: FunctionalComponent<ButtonProps> = function (
h,
props,
slots,
ctx
function Button(
h: CreateElement,
props: ButtonProps,
slots: DefaultSlots,
ctx: RenderContext<ButtonProps>
) {
const { tag, type, disabled, loading, loadingText } = props;
@ -55,23 +72,7 @@ const Button: FunctionalComponent<ButtonProps> = function (
)}
</tag>
);
};
export type ButtonProps = RouteProps & {
tag?: string;
type?: string;
size?: string;
text?: string;
block?: boolean;
plain?: boolean;
round?: boolean;
square?: boolean;
loading?: boolean;
disabled?: boolean;
nativeType?: string;
loadingText?: string;
bottomAction?: boolean;
};
}
Button.props = {
...routeProps,

23
packages/cell-group/index.tsx
View File

@ -2,15 +2,20 @@ import { use } from '../utils';
import { inherit } from '../utils/functional';
// Types
import { FunctionalComponent } from '../utils/use/sfc';
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc';
export type CellGroupProps = {
border?: boolean
};
const [sfc, bem] = use('cell-group');
const CellGroup: FunctionalComponent<CellGroupProps> = function (
h,
props,
slots,
ctx
function CellGroup(
h: CreateElement,
props: CellGroupProps,
slots: DefaultSlots,
ctx: RenderContext<CellGroupProps>
) {
return (
<div
@ -20,11 +25,7 @@ const CellGroup: FunctionalComponent<CellGroupProps> = function (
{slots.default && slots.default()}
</div>
);
};
export type CellGroupProps = {
border?: boolean
};
}
CellGroup.props = {
border: {

35
packages/cell/index.tsx
View File

@ -5,12 +5,31 @@ import { routeProps, functionalRoute } from '../mixins/router';
import Icon from '../icon';
// Types
import { FunctionalComponent } from '../utils/use/sfc';
import { CreateElement, RenderContext } from 'vue/types';
import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
import { Mods } from '../utils/use/bem';
export type CellProps = SharedCellProps & {
size?: string;
clickable?: boolean;
arrowDirection?: string;
};
export type CellSlots = DefaultSlots & {
icon?: ScopedSlot;
title?: ScopedSlot;
extra?: ScopedSlot;
'right-icon'?: ScopedSlot;
};
const [sfc, bem] = use('cell');
const Cell: FunctionalComponent<CellProps> = function (h, props, slots, ctx) {
function Cell(
h: CreateElement,
props: CellProps,
slots: CellSlots,
ctx: RenderContext<CellProps>
) {
const { icon, size, title, label, value, isLink, arrowDirection } = props;
const showTitle = slots.title || isDef(title);
@ -65,11 +84,7 @@ const Cell: FunctionalComponent<CellProps> = function (h, props, slots, ctx) {
}
return (
<div
class={bem(classes)}
onClick={onClick}
{...inherit(ctx)}
>
<div class={bem(classes)} onClick={onClick} {...inherit(ctx)}>
{LeftIcon}
{Title}
{Value}
@ -77,12 +92,6 @@ const Cell: FunctionalComponent<CellProps> = function (h, props, slots, ctx) {
{slots.extra && slots.extra()}
</div>
);
};
export type CellProps = SharedCellProps & {
size?: string;
clickable?: boolean;
arrowDirection?: string;
}
Cell.props = {

28
packages/icon/index.tsx
View File

@ -4,11 +4,25 @@ import Info from '../info';
import isSrc from '../utils/validate/src';
// Types
import { FunctionalComponent } from '../utils/use/sfc';
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc';
export type IconProps = {
name: string;
size?: string;
color?: string;
info?: string | number;
classPrefix?: string;
};
const [sfc] = use('icon');
const Icon: FunctionalComponent<IconProps> = function (h, props, slots, ctx) {
function Icon(
h: CreateElement,
props: IconProps,
slots: DefaultSlots,
ctx: RenderContext<IconProps>
) {
const urlIcon = isSrc(props.name);
return (
@ -28,15 +42,7 @@ const Icon: FunctionalComponent<IconProps> = function (h, props, slots, ctx) {
<Info info={props.info} />
</i>
);
};
export type IconProps = {
name: string;
size?: string;
color?: string;
info?: string | number;
classPrefix?: string;
};
}
Icon.props = {
name: String,

20
packages/info/index.tsx
View File

@ -2,11 +2,21 @@ import { use, isDef } from '../utils';
import { inherit } from '../utils/functional';
// Types
import { FunctionalComponent } from '../utils/use/sfc';
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc';
export type InfoProps = {
info?: string | number;
};
const [sfc, bem] = use('info');
const Info: FunctionalComponent<InfoProps> = function (h, props, slots, ctx) {
function Info(
h: CreateElement,
props: InfoProps,
slots: DefaultSlots,
ctx: RenderContext<InfoProps>
) {
if (!isDef(props.info)) {
return;
}
@ -16,11 +26,7 @@ const Info: FunctionalComponent<InfoProps> = function (h, props, slots, ctx) {
{props.info}
</div>
);
};
export type InfoProps = {
info?: string | number;
};
}
Info.props = {
info: [String, Number]

27
packages/loading/index.tsx
View File

@ -2,16 +2,23 @@ import { use } from '../utils';
import { inherit } from '../utils/functional';
// Types
import { FunctionalComponent } from '../utils/use/sfc';
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc';
export type LoadingProps = {
size?: string;
type?: string;
color?: string;
};
const [sfc, bem] = use('loading');
const DEFAULT_COLOR = '#c9c9c9';
const Loading: FunctionalComponent<LoadingProps> = function (
h,
props,
slots,
ctx
function Loading(
h: CreateElement,
props: LoadingProps,
slots: DefaultSlots,
ctx: RenderContext<LoadingProps>
) {
const { color, size, type } = props;
@ -44,13 +51,7 @@ const Loading: FunctionalComponent<LoadingProps> = function (
</span>
</div>
);
};
export type LoadingProps = {
size?: string;
type?: string;
color?: string;
};
}
Loading.props = {
size: String,

34
packages/tag/index.tsx
View File

@ -3,7 +3,18 @@ import { inherit } from '../utils/functional';
import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
// Types
import { FunctionalComponent } from '../utils/use/sfc';
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc';
export type TagProps = {
size?: string;
type?: string;
mark?: boolean;
color?: string;
plain?: boolean;
round?: boolean;
textColor?: string;
};
const [sfc, bem] = use('tag');
@ -13,8 +24,13 @@ const COLOR_MAP: { [key: string]: string } = {
success: GREEN
};
const Tag: FunctionalComponent<TagProps> = function (h, props, slots, ctx) {
const { type, mark, plain, round, size } = ctx.props;
function Tag(
h: CreateElement,
props: TagProps,
slots: DefaultSlots,
ctx: RenderContext<TagProps>
) {
const { type, mark, plain, round, size } = props;
const color = props.color || (type && COLOR_MAP[type]) || GRAY_DARK;
const key = plain ? 'color' : 'backgroundColor';
@ -43,17 +59,7 @@ const Tag: FunctionalComponent<TagProps> = function (h, props, slots, ctx) {
{slots.default && slots.default()}
</span>
);
};
export type TagProps = {
size?: string;
type?: string;
mark?: boolean;
color?: string;
plain?: boolean;
round?: boolean;
textColor?: string;
};
}
Tag.props = {
size: String,

14
packages/utils/use/sfc.ts
View File

@ -13,13 +13,16 @@ import Vue, {
import { VNode } from 'vue/types/vnode';
import { InjectOptions, PropsDefinition } from 'vue/types/options';
export type ScopedSlot = (props?: any) => VNode[] | undefined;
export type ScopedSlot<Props = any> = (props?: Props) => VNode[] | undefined;
export type ScopedSlots = {
[key: string]: ScopedSlot | undefined;
export type DefaultSlots = {
default?: ScopedSlot;
};
export type ScopedSlots = DefaultSlots & {
[key: string]: ScopedSlot | undefined;
};
export type ModelOptions = {
prop?: string;
event?: string;
@ -50,7 +53,7 @@ export type FunctionalComponent<
export type TsxBaseProps = {
class?: any;
style?: any;
}
};
export type TsxComponent<T> = (props: T & TsxBaseProps) => VNode;
const arrayProp = {
@ -102,7 +105,8 @@ function transformFunctionalComponent(
functional: true,
props: pure.props,
model: pure.model,
render: (h, context): any => pure(h, context.props, unifySlots(context), context)
render: (h, context): any =>
pure(h, context.props, unifySlots(context), context)
};
}