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] Tag: tsx (#2770)

Browse Source
This commit is contained in:
neverland 2019-02-17 18:49:22 +08:00 committed by GitHub
parent 82b29267a2
commit 890bd72268
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,4 +33,4 @@ CellGroup.props = {
}
};
export default sfc(CellGroup);
export default sfc<CellGroupProps>(CellGroup);

2
packages/info/index.tsx
View File

@ -26,4 +26,4 @@ Info.props = {
info: [String, Number]
};
export default sfc(Info);
export default sfc<InfoProps>(Info);

32
packages/tag/index.js → packages/tag/index.tsx
View File

@ -2,18 +2,21 @@ import { use } from '../utils';
import { inherit } from '../utils/functional';
import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
// Types
import { FunctionalComponent } from '../utils/use/sfc';
const [sfc, bem] = use('tag');
const COLOR_MAP = {
const COLOR_MAP: { [key: string]: string } = {
danger: RED,
primary: BLUE,
success: GREEN
};
function Tag(h, props, slots, ctx) {
const { mark, plain, round, size } = ctx.props;
const Tag: FunctionalComponent<TagProps> = function(h, props, slots, ctx) {
const { type, mark, plain, round, size } = ctx.props;
const color = props.color || COLOR_MAP[props.type] || GRAY_DARK;
const color = props.color || (type && COLOR_MAP[type]) || GRAY_DARK;
const key = plain ? 'color' : 'backgroundColor';
const style = { [key]: color };
@ -21,11 +24,16 @@ function Tag(h, props, slots, ctx) {
style.color = props.textColor;
}
const classes: { [key: string]: any } = { mark, plain, round };
if (size) {
classes[size] = size;
}
return (
<span
style={style}
class={[
bem({ mark, plain, round, [size]: size }),
bem(classes),
{
'van-hairline--surround': plain
}
@ -35,7 +43,17 @@ function Tag(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,
@ -47,4 +65,4 @@ Tag.props = {
textColor: String
};
export default sfc(Tag);
export default sfc<TagProps>(Tag);