From 3f31590ad4262ab4ef3a75893914ca0ac3ed4e83 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Mon, 12 Oct 2020 19:19:10 +0800 Subject: [PATCH] refactor: card to ts --- components/card/Card.tsx | 60 ++++++++++++++++++-------- components/card/{Grid.jsx => Grid.tsx} | 8 ++-- components/card/{Meta.jsx => Meta.tsx} | 20 ++++++--- components/card/index.ts | 4 +- components/tabs/{index.js => index.ts} | 0 components/tabs/{tabs.jsx => tabs.tsx} | 6 +-- 6 files changed, 64 insertions(+), 34 deletions(-) rename components/card/{Grid.jsx => Grid.tsx} (84%) rename components/card/{Meta.jsx => Meta.tsx} (78%) rename components/tabs/{index.js => index.ts} (100%) rename components/tabs/{tabs.jsx => tabs.tsx} (98%) diff --git a/components/card/Card.tsx b/components/card/Card.tsx index f42014ffa..2033baa4b 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -1,4 +1,5 @@ -import { inject, isVNode } from 'vue'; +import { inject, isVNode, defineComponent, VNodeTypes, PropType, VNode } from 'vue'; +import { tuple } from '../_util/type'; import Tabs from '../tabs'; import Row from '../row'; import Col from '../col'; @@ -8,28 +9,47 @@ import BaseMixin from '../_util/BaseMixin'; import { defaultConfigProvider } from '../config-provider'; import isPlainObject from 'lodash-es/isPlainObject'; +export interface CardTabListType { + key: string; + tab: VNodeTypes; + slots?: { tab: string }; + disabled?: boolean; +} + +export type CardType = 'inner'; +const CardSize = tuple('default', 'small'); +export type CardSizeType = typeof CardSize[number]; + const { TabPane } = Tabs; -export default { + +const Card = defineComponent({ name: 'ACard', mixins: [BaseMixin], props: { prefixCls: PropTypes.string, - title: PropTypes.any, - extra: PropTypes.any, + title: PropTypes.VNodeChild, + extra: PropTypes.VNodeChild, bordered: PropTypes.looseBool.def(true), - bodyStyle: PropTypes.object, - headStyle: PropTypes.object, + bodyStyle: PropTypes.style, + headStyle: PropTypes.style, loading: PropTypes.looseBool.def(false), hoverable: PropTypes.looseBool.def(false), type: PropTypes.string, - size: PropTypes.oneOf(['default', 'small']), - actions: PropTypes.any, - tabList: PropTypes.array, - tabBarExtraContent: PropTypes.any, + size: { + type: String as PropType, + validator: (val: CardSizeType) => CardSize.includes(val), + }, + actions: PropTypes.VNodeChild, + tabList: { + type: Array as PropType, + }, + tabBarExtraContent: PropTypes.VNodeChild, activeTabKey: PropTypes.string, defaultActiveTabKey: PropTypes.string, - cover: PropTypes.any, - onTabChange: PropTypes.func, + cover: PropTypes.VNodeChild, + onTabChange: { + type: Function as PropType<(key: string) => void>, + }, }, setup() { return { @@ -42,7 +62,7 @@ export default { }; }, methods: { - getAction(actions) { + getAction(actions: VNodeTypes[]) { const actionList = actions.map((action, index) => (isVNode(action) && !isEmptyElement(action)) || !isVNode(action) ? (
  • @@ -52,13 +72,13 @@ export default { ); return actionList; }, - triggerTabChange(key) { + triggerTabChange(key: string) { this.$emit('tabChange', key); }, - isContainGrid(obj = []) { + isContainGrid(obj: VNode[] = []) { let containGrid; obj.forEach(element => { - if (element && isPlainObject(element.type) && element.type.__ANT_CARD_GRID) { + if (element && isPlainObject(element.type) && (element.type as any).__ANT_CARD_GRID) { containGrid = true; } }); @@ -160,8 +180,8 @@ export default { tabList && tabList.length ? ( {tabList.map(item => { - const { tab: temp, scopedSlots = {}, slots = {} } = item; - const name = slots.tab || scopedSlots.tab; + const { tab: temp, slots } = item as CardTabListType; + const name = slots?.tab; const tab = temp !== undefined ? temp : $slots[name] ? $slots[name](item) : null; return ; })} @@ -203,4 +223,6 @@ export default { ); }, -}; +}); + +export default Card; diff --git a/components/card/Grid.jsx b/components/card/Grid.tsx similarity index 84% rename from components/card/Grid.jsx rename to components/card/Grid.tsx index ac09660ae..c5692703a 100644 --- a/components/card/Grid.jsx +++ b/components/card/Grid.tsx @@ -1,9 +1,9 @@ -import { inject } from 'vue'; +import { defineComponent, inject } from 'vue'; import PropTypes from '../_util/vue-types'; import { defaultConfigProvider } from '../config-provider'; import { getSlot } from '../_util/props-util'; -export default { +export default defineComponent({ name: 'ACardGrid', __ANT_CARD_GRID: true, props: { @@ -18,7 +18,7 @@ export default { render() { const { prefixCls: customizePrefixCls, hoverable = true } = this.$props; - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls } = this.configProvider; const prefixCls = getPrefixCls('card', customizePrefixCls); const classString = { @@ -27,4 +27,4 @@ export default { }; return
    {getSlot(this)}
    ; }, -}; +}); diff --git a/components/card/Meta.jsx b/components/card/Meta.tsx similarity index 78% rename from components/card/Meta.jsx rename to components/card/Meta.tsx index d1c290af9..04a888be3 100644 --- a/components/card/Meta.jsx +++ b/components/card/Meta.tsx @@ -1,15 +1,21 @@ -import { inject } from 'vue'; +import { defineComponent, inject, PropType, VNodeTypes } from 'vue'; import PropTypes from '../_util/vue-types'; import { getComponent } from '../_util/props-util'; import { defaultConfigProvider } from '../config-provider'; -export default { +export default defineComponent({ name: 'ACardMeta', props: { prefixCls: PropTypes.string, - title: PropTypes.any, - description: PropTypes.any, - avatar: PropTypes.any, + title: { + type: Object as PropType, + }, + description: { + type: Object as PropType, + }, + avatar: { + type: Object as PropType, + }, }, setup() { return { @@ -19,7 +25,7 @@ export default { render() { const { prefixCls: customizePrefixCls } = this.$props; - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls } = this.configProvider; const prefixCls = getPrefixCls('card', customizePrefixCls); const classString = { @@ -49,4 +55,4 @@ export default { ); }, -}; +}); diff --git a/components/card/index.ts b/components/card/index.ts index 7282dffe9..934463da7 100644 --- a/components/card/index.ts +++ b/components/card/index.ts @@ -1,11 +1,13 @@ +import { App } from 'vue'; import Card from './Card'; import Meta from './Meta'; import Grid from './Grid'; + Card.Meta = Meta; Card.Grid = Grid; /* istanbul ignore next */ -Card.install = function(app) { +Card.install = function(app: App) { app.component(Card.name, Card); app.component(Meta.name, Meta); app.component(Grid.name, Grid); diff --git a/components/tabs/index.js b/components/tabs/index.ts similarity index 100% rename from components/tabs/index.js rename to components/tabs/index.ts diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.tsx similarity index 98% rename from components/tabs/tabs.jsx rename to components/tabs/tabs.tsx index e16578a12..2a97151e0 100644 --- a/components/tabs/tabs.jsx +++ b/components/tabs/tabs.tsx @@ -1,4 +1,4 @@ -import { inject } from 'vue'; +import { defineComponent, inject } from 'vue'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import PlusOutlined from '@ant-design/icons-vue/PlusOutlined'; import VcTabs, { TabPane } from '../vc-tabs/src'; @@ -18,7 +18,7 @@ import isValid from '../_util/isValid'; import { defaultConfigProvider } from '../config-provider'; import TabBar from './TabBar'; -export default { +export default defineComponent({ TabPane, name: 'ATabs', inheritAttrs: false, @@ -174,4 +174,4 @@ export default { }; return ; }, -}; +});