From 7d379f94385728baa8fc277abf8d3d315c132f89 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Tue, 20 Oct 2020 13:02:18 +0800 Subject: [PATCH] refactor: timeline to ts --- .../timeline/{Timeline.jsx => Timeline.tsx} | 40 ++++++++----------- .../{TimelineItem.jsx => TimelineItem.tsx} | 23 ++++++----- components/timeline/{index.jsx => index.tsx} | 7 +++- .../timeline/style/{index.js => index.ts} | 0 4 files changed, 35 insertions(+), 35 deletions(-) rename components/timeline/{Timeline.jsx => Timeline.tsx} (75%) rename components/timeline/{TimelineItem.jsx => TimelineItem.tsx} (67%) rename components/timeline/{index.jsx => index.tsx} (68%) rename components/timeline/style/{index.js => index.ts} (100%) diff --git a/components/timeline/Timeline.jsx b/components/timeline/Timeline.tsx similarity index 75% rename from components/timeline/Timeline.jsx rename to components/timeline/Timeline.tsx index 9cbe82ad4..1d485227f 100644 --- a/components/timeline/Timeline.jsx +++ b/components/timeline/Timeline.tsx @@ -1,41 +1,38 @@ -import { inject, cloneVNode } from 'vue'; +import { inject, cloneVNode, defineComponent, ExtractPropTypes } from 'vue'; import classNames from '../_util/classNames'; import PropTypes from '../_util/vue-types'; -import { - getOptionProps, - getPropsData, - initDefaultProps, - filterEmpty, - getComponent, -} from '../_util/props-util'; -import TimelineItem from './TimelineItem'; +import { getOptionProps, getPropsData, filterEmpty, getComponent } from '../_util/props-util'; +import initDefaultProps from '../_util/props-util/initDefaultProps'; +import TimelineItem, { TimeLineItemProps } from './TimelineItem'; import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; import { defaultConfigProvider } from '../config-provider'; +import { tuple } from '../_util/type'; -export const TimelineProps = { +export const timelineProps = { prefixCls: PropTypes.string, /** 指定最后一个幽灵节点是否存在或内容 */ pending: PropTypes.any, pendingDot: PropTypes.string, reverse: PropTypes.looseBool, - mode: PropTypes.oneOf(['left', 'alternate', 'right', '']), + mode: PropTypes.oneOf(tuple('left', 'alternate', 'right', '')), }; -export default { +export type TimelineProps = Partial>; + +export default defineComponent({ name: 'ATimeline', - props: initDefaultProps(TimelineProps, { + props: initDefaultProps(timelineProps, { reverse: false, mode: '', }), setup() { - const configProvider = inject('configProvider', defaultConfigProvider); return { - configProvider, + configProvider: inject('configProvider', defaultConfigProvider), }; }, render() { const { prefixCls: customizePrefixCls, reverse, mode } = getOptionProps(this); - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls } = this.configProvider; const prefixCls = getPrefixCls('timeline', customizePrefixCls); const pendingDot = getComponent(this, 'pendingDot'); @@ -66,8 +63,8 @@ export default { ? [pendingItem, ...children.reverse()] : [...children, pendingItem]; - const getPositionCls = (ele, idx) => { - const eleProps = getPropsData(ele); + const getPositionCls = (ele, idx: number) => { + const eleProps = getPropsData(ele) as TimeLineItemProps; if (mode === 'alternate') { if (eleProps.position === 'right') return `${prefixCls}-item-right`; if (eleProps.position === 'left') return `${prefixCls}-item-left`; @@ -94,9 +91,6 @@ export default { }); }); - const timelineProps = { - class: classString, - }; - return ; + return ; }, -}; +}); diff --git a/components/timeline/TimelineItem.jsx b/components/timeline/TimelineItem.tsx similarity index 67% rename from components/timeline/TimelineItem.jsx rename to components/timeline/TimelineItem.tsx index cb2557140..a1f2cf31d 100644 --- a/components/timeline/TimelineItem.jsx +++ b/components/timeline/TimelineItem.tsx @@ -1,32 +1,35 @@ -import { inject } from 'vue'; +import { defineComponent, ExtractPropTypes, inject } from 'vue'; import classNames from '../_util/classNames'; import PropTypes from '../_util/vue-types'; -import { getOptionProps, initDefaultProps, getComponent } from '../_util/props-util'; +import { getOptionProps, getComponent } from '../_util/props-util'; +import initDefaultProps from '../_util/props-util/initDefaultProps'; import { defaultConfigProvider } from '../config-provider'; +import { tuple } from '../_util/type'; -export const TimeLineItemProps = { +export const timeLineItemProps = { prefixCls: PropTypes.string, color: PropTypes.string, dot: PropTypes.any, pending: PropTypes.looseBool, - position: PropTypes.oneOf(['left', 'right', '']).def(''), + position: PropTypes.oneOf(tuple('left', 'right', '')).def(''), }; -export default { +export type TimeLineItemProps = Partial>; + +export default defineComponent({ name: 'ATimelineItem', - props: initDefaultProps(TimeLineItemProps, { + props: initDefaultProps(timeLineItemProps, { color: 'blue', pending: false, }), setup() { - const configProvider = inject('configProvider', defaultConfigProvider); return { - configProvider, + configProvider: inject('configProvider', defaultConfigProvider), }; }, render() { const { prefixCls: customizePrefixCls, color = '', pending } = getOptionProps(this); - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls } = this.configProvider; const prefixCls = getPrefixCls('timeline', customizePrefixCls); const dot = getComponent(this, 'dot'); @@ -55,4 +58,4 @@ export default { ); }, -}; +}); diff --git a/components/timeline/index.jsx b/components/timeline/index.tsx similarity index 68% rename from components/timeline/index.jsx rename to components/timeline/index.tsx index 2afa84cfe..f777eee6f 100644 --- a/components/timeline/index.jsx +++ b/components/timeline/index.tsx @@ -1,3 +1,4 @@ +import { App } from 'vue'; import Timeline from './Timeline'; import TimelineItem from './TimelineItem'; @@ -7,10 +8,12 @@ export { TimeLineItemProps } from './TimelineItem'; Timeline.Item = TimelineItem; /* istanbul ignore next */ -Timeline.install = function(app) { +Timeline.install = function(app: App) { app.component(Timeline.name, Timeline); app.component(TimelineItem.name, TimelineItem); return app; }; -export default Timeline; +export default Timeline as typeof Timeline & { + readonly Item: typeof TimelineItem; +}; diff --git a/components/timeline/style/index.js b/components/timeline/style/index.ts similarity index 100% rename from components/timeline/style/index.js rename to components/timeline/style/index.ts