From dc4f2b2dcbd76f7144ee0ba335bde81011dda788 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Tue, 13 Oct 2020 17:46:31 +0800 Subject: [PATCH] refactor: tabs to ts --- components/tabs/{TabBar.jsx => TabBar.tsx} | 27 ++++++++++------- components/tabs/index.ts | 3 +- components/tabs/tabs.tsx | 35 ++++++++++++++-------- 3 files changed, 41 insertions(+), 24 deletions(-) rename components/tabs/{TabBar.jsx => TabBar.tsx} (74%) diff --git a/components/tabs/TabBar.jsx b/components/tabs/TabBar.tsx similarity index 74% rename from components/tabs/TabBar.jsx rename to components/tabs/TabBar.tsx index eb9612f04..d2184d10b 100644 --- a/components/tabs/TabBar.jsx +++ b/components/tabs/TabBar.tsx @@ -1,22 +1,27 @@ +import { defineComponent, PropType } from 'vue'; +import { tuple } from '../_util/type'; import UpOutlined from '@ant-design/icons-vue/UpOutlined'; import DownOutlined from '@ant-design/icons-vue/DownOutlined'; import LeftOutlined from '@ant-design/icons-vue/LeftOutlined'; import RightOutlined from '@ant-design/icons-vue/RightOutlined'; import ScrollableInkTabBar from '../vc-tabs/src/ScrollableInkTabBar'; -import PropTypes, { withUndefined } from '../_util/vue-types'; +import PropTypes from '../_util/vue-types'; -const TabBar = { +const TabBar = defineComponent({ name: 'TabBar', inheritAttrs: false, props: { prefixCls: PropTypes.string, - tabBarStyle: PropTypes.object, - tabBarExtraContent: PropTypes.any, - type: PropTypes.oneOf(['line', 'card', 'editable-card']), - tabPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'), - tabBarPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), - size: PropTypes.oneOf(['default', 'small', 'large']), - animated: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])), + tabBarStyle: PropTypes.style, + tabBarExtraContent: PropTypes.VNodeChild, + type: PropTypes.oneOf(tuple('line', 'card', 'editable-card')), + tabPosition: PropTypes.oneOf(tuple('top', 'right', 'bottom', 'left')).def('top'), + tabBarPosition: PropTypes.oneOf(tuple('top', 'right', 'bottom', 'left')), + size: PropTypes.oneOf(tuple('default', 'small', 'large')), + animated: { + type: [Boolean, Object] as PropType, + default: undefined, + }, renderTabBar: PropTypes.func, panels: PropTypes.array.def([]), activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -56,7 +61,7 @@ const TabBar = { ); // Additional className for style usage const cls = { - [this.$attrs.class]: this.$attrs.class, + [this.$attrs.class as string]: this.$attrs.class, [`${prefixCls}-${tabPosition}-bar`]: true, [`${prefixCls}-${size}-bar`]: !!size, [`${prefixCls}-card-bar`]: type && type.indexOf('card') >= 0, @@ -80,6 +85,6 @@ const TabBar = { return ; } }, -}; +}); export default TabBar; diff --git a/components/tabs/index.ts b/components/tabs/index.ts index 1cc9df23f..393bac6de 100644 --- a/components/tabs/index.ts +++ b/components/tabs/index.ts @@ -1,3 +1,4 @@ +import { App } from 'vue'; import Tabs from './tabs'; import TabPane from '../vc-tabs/src/TabPane'; import TabContent from '../vc-tabs/src/TabContent'; @@ -6,7 +7,7 @@ Tabs.TabPane = { ...TabPane, name: 'ATabPane', __ANT_TAB_PANE: true }; Tabs.TabContent = { ...TabContent, name: 'ATabContent' }; /* istanbul ignore next */ -Tabs.install = function(app) { +Tabs.install = function(app: App) { app.component(Tabs.name, Tabs); app.component(Tabs.TabPane.name, Tabs.TabPane); app.component(Tabs.TabContent.name, Tabs.TabContent); diff --git a/components/tabs/tabs.tsx b/components/tabs/tabs.tsx index 2a97151e0..109b38b7c 100644 --- a/components/tabs/tabs.tsx +++ b/components/tabs/tabs.tsx @@ -1,4 +1,5 @@ -import { defineComponent, inject } from 'vue'; +import { defineComponent, inject, PropType } from 'vue'; +import { tuple } from '../_util/type'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import PlusOutlined from '@ant-design/icons-vue/PlusOutlined'; import VcTabs, { TabPane } from '../vc-tabs/src'; @@ -30,19 +31,29 @@ export default defineComponent({ tabBarStyle: PropTypes.object, tabBarExtraContent: PropTypes.any, destroyInactiveTabPane: PropTypes.looseBool.def(false), - type: PropTypes.oneOf(['line', 'card', 'editable-card']), + type: PropTypes.oneOf(tuple('line', 'card', 'editable-card')), tabPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'), size: PropTypes.oneOf(['default', 'small', 'large']), animated: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])), tabBarGutter: PropTypes.number, renderTabBar: PropTypes.func, - onChange: PropTypes.func, + onChange: { + type: Function as PropType<(activeKey: string) => void>, + }, onTabClick: PropTypes.func, - onPrevClick: PropTypes.func, - onNextClick: PropTypes.func, - onEdit: PropTypes.func, - 'onUpdate:activeKey': PropTypes.func, + onPrevClick: { + type: Function as PropType<(e: MouseEvent) => void>, + }, + onNextClick: { + type: Function as PropType<(e: MouseEvent) => void>, + }, + onEdit: { + type: Function as PropType< + (targetKey: string | MouseEvent, action: 'add' | 'remove') => void + >, + }, }, + emits: ['update:activeKey', 'edit', 'change'], setup() { return { configProvider: inject('configProvider', defaultConfigProvider), @@ -56,17 +67,17 @@ export default defineComponent({ } }, methods: { - removeTab(targetKey, e) { + removeTab(targetKey: string, e: MouseEvent) { e.stopPropagation(); if (isValid(targetKey)) { this.$emit('edit', targetKey, 'remove'); } }, - handleChange(activeKey) { + handleChange(activeKey: string) { this.$emit('update:activeKey', activeKey); this.$emit('change', activeKey); }, - createNewTab(targetKey) { + createNewTab(targetKey: MouseEvent) { this.$emit('edit', targetKey, 'add'); }, }, @@ -95,7 +106,7 @@ export default defineComponent({ tabPaneAnimated = 'animated' in props ? tabPaneAnimated : false; } const cls = { - [className]: className, + [className as string]: className, [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right', [`${prefixCls}-${size}`]: !!size, [`${prefixCls}-card`]: type.indexOf('card') >= 0, @@ -107,7 +118,7 @@ export default defineComponent({ if (type === 'editable-card') { childrenWithClose = []; children.forEach((child, index) => { - const props = getPropsData(child); + const props = getPropsData(child) as any; let closable = props.closable; closable = typeof closable === 'undefined' ? true : closable; const closeIcon = closable ? (