From db31c526d95698ad88589481ddbe40090015716c Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Wed, 14 Oct 2020 17:57:38 +0800 Subject: [PATCH] refactor: cascader checkbox collapse comment description divider by ts --- components/calendar/Header.tsx | 2 +- components/cascader/index.tsx | 83 ++++++----- .../cascader/style/{index.js => index.ts} | 0 .../checkbox/{Checkbox.jsx => Checkbox.tsx} | 22 +-- components/checkbox/{Group.jsx => Group.tsx} | 27 ++-- components/checkbox/{index.js => index.ts} | 3 +- .../checkbox/style/{index.js => index.ts} | 0 .../collapse/{Collapse.jsx => Collapse.tsx} | 50 +++++-- .../{CollapsePanel.jsx => CollapsePanel.tsx} | 25 +++- .../collapse/style/{index.js => index.ts} | 0 components/comment/index.tsx | 139 +++++++++--------- .../comment/style/{index.js => index.ts} | 0 .../date-picker/style/{index.js => index.ts} | 0 components/descriptions/{Col.jsx => Col.tsx} | 17 ++- .../descriptions/{index.jsx => index.tsx} | 78 ++++++---- .../descriptions/style/{index.js => index.ts} | 0 components/divider/index.tsx | 4 +- components/vc-collapse/src/commonProps.js | 1 - 18 files changed, 266 insertions(+), 185 deletions(-) rename components/cascader/style/{index.js => index.ts} (100%) rename components/checkbox/{Checkbox.jsx => Checkbox.tsx} (89%) rename components/checkbox/{Group.jsx => Group.tsx} (81%) rename components/checkbox/{index.js => index.ts} (80%) rename components/checkbox/style/{index.js => index.ts} (100%) rename components/collapse/{Collapse.jsx => Collapse.tsx} (53%) rename components/collapse/{CollapsePanel.jsx => CollapsePanel.tsx} (57%) rename components/collapse/style/{index.js => index.ts} (100%) rename components/comment/style/{index.js => index.ts} (100%) rename components/date-picker/style/{index.js => index.ts} (100%) rename components/descriptions/{Col.jsx => Col.tsx} (77%) rename components/descriptions/{index.jsx => index.tsx} (81%) rename components/descriptions/style/{index.js => index.ts} (100%) diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index 6bc315c1f..c6a7dd651 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -3,7 +3,7 @@ import Select from '../select'; import { Group, Button } from '../radio'; import PropTypes from '../_util/vue-types'; import { defaultConfigProvider } from '../config-provider'; -import { VueNode } from 'components/_util/type'; +import { VueNode } from '../_util/type'; const { Option } = Select; diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index a3dc7e440..34a21e799 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -1,5 +1,5 @@ -import { App, defineComponent, inject, provide, PropType } from 'vue'; -import PropTypes, { withUndefined } from '../_util/vue-types'; +import { App, inject, provide, PropType, defineComponent, CSSProperties } from 'vue'; +import PropTypes from '../_util/vue-types'; import VcCascader from '../vc-cascader'; import arrayTreeFilter from 'array-tree-filter'; import classNames from '../_util/classNames'; @@ -23,7 +23,8 @@ import BaseMixin from '../_util/BaseMixin'; import { cloneElement } from '../_util/vnode'; import warning from '../_util/warning'; import { defaultConfigProvider } from '../config-provider'; -import { tuple, VueNode } from 'components/_util/type'; +import { tuple, VueNode } from '../_util/type'; +import { RenderEmptyHandler } from '../config-provider/renderEmpty'; export interface CascaderOptionType { value?: string | number; @@ -31,7 +32,7 @@ export interface CascaderOptionType { disabled?: boolean; isLeaf?: boolean; loading?: boolean; - children?: Array; + children?: CascaderOptionType[]; [key: string]: any; } @@ -90,7 +91,7 @@ function noop() {} const CascaderProps = { /** 可选项数据源 */ - options: { type: Array as PropType, default: [] }, + options: { type: Array as PropType, default: [] }, /** 默认的选中项 */ defaultValue: PropTypes.array, /** 指定选中项 */ @@ -116,8 +117,8 @@ const CascaderProps = { /** 是否支持清除*/ allowClear: PropTypes.looseBool.def(true), showSearch: { - type: [Boolean, Object] as PropType, - default: undefined, + type: [Boolean, Object] as PropType, + default: undefined as PropType, }, notFoundContent: PropTypes.VNodeChild, loadData: PropTypes.func, @@ -143,8 +144,6 @@ const CascaderProps = { 'onUpdate:value': PropTypes.func, }; -type CascaderPropsTypes = typeof CascaderProps; - // We limit the filtered item count by default const defaultLimit = 50; @@ -169,7 +168,7 @@ function defaultSortFilteredOption( return a.findIndex(callback) - b.findIndex(callback); } -function getFilledFieldNames(props: CascaderPropsTypes) { +function getFilledFieldNames(props: any) { const fieldNames = (props.fieldNames || {}) as FieldNamesType; const names: FilledFieldNamesType = { children: fieldNames.children || 'children', @@ -181,7 +180,7 @@ function getFilledFieldNames(props: CascaderPropsTypes) { function flattenTree( options: CascaderOptionType[], - props: CascaderPropsTypes, + props: any, ancestor: CascaderOptionType[] = [], ) { const names: FilledFieldNamesType = getFilledFieldNames(props); @@ -201,7 +200,7 @@ function flattenTree( const defaultDisplayRender = ({ labels }) => labels.join(' / '); -const Cascader = { +const Cascader = defineComponent({ inheritAttrs: false, name: 'ACascader', mixins: [BaseMixin], @@ -216,11 +215,13 @@ const Cascader = { setup() { return { configProvider: inject('configProvider', defaultConfigProvider), - localeData: inject('localeData', {}), + localeData: inject('localeData', {} as any), + cachedOptions: [], + popupRef: undefined, + input: undefined, }; }, data() { - this.cachedOptions = []; const { value, defaultValue, popupVisible, showSearch, options } = this.$props; return { sValue: value || defaultValue || [], @@ -246,15 +247,15 @@ const Cascader = { }, options(val) { if (this.showSearch) { - this.setState({ flattenOptions: flattenTree(val, this.$props) }); + this.setState({ flattenOptions: flattenTree(val, this.$props as any) }); } }, }, methods: { - savePopupRef(ref) { + savePopupRef(ref: any) { this.popupRef = ref; }, - highlightKeyword(str, keyword, prefixCls) { + highlightKeyword(str: string, keyword: string, prefixCls: string | undefined) { return str .split(keyword) .map((node, index) => @@ -264,7 +265,13 @@ const Cascader = { ); }, - defaultRenderFilteredOption({ inputValue, path, prefixCls, names }) { + defaultRenderFilteredOption(opt: { + inputValue: string, + path: CascaderOptionType[], + prefixCls: string | undefined, + names: FilledFieldNamesType, + }) { + const { inputValue, path, prefixCls, names } = opt return path.map((option, index) => { const label = option[names.label]; const node = @@ -274,10 +281,10 @@ const Cascader = { return index === 0 ? node : [' / ', node]; }); }, - saveInput(node) { + saveInput(node: any) { this.input = node; }, - handleChange(value, selectedOptions) { + handleChange(value: any, selectedOptions: CascaderOptionType[]) { this.setState({ inputValue: '' }); if (selectedOptions[0].__IS_FILTERED_OPTION) { const unwrappedValue = value[0]; @@ -288,9 +295,9 @@ const Cascader = { this.setValue(value, selectedOptions); }, - handlePopupVisibleChange(popupVisible) { + handlePopupVisibleChange(popupVisible: boolean) { if (!hasProp(this, 'popupVisible')) { - this.setState(state => ({ + this.setState((state: any) => ({ sPopupVisible: popupVisible, inputFocused: popupVisible, inputValue: popupVisible ? state.inputValue : '', @@ -298,18 +305,18 @@ const Cascader = { } this.$emit('popupVisibleChange', popupVisible); }, - handleInputFocus(e) { + handleInputFocus(e: InputEvent) { this.$emit('focus', e); }, - handleInputBlur(e) { + handleInputBlur(e: InputEvent) { this.setState({ inputFocused: false, }); this.$emit('blur', e); }, - handleInputClick(e) { + handleInputClick(e: MouseEvent & {nativeEvent?: any}) { const { inputFocused, sPopupVisible } = this; // Prevent `Trigger` behaviour. if (inputFocused || sPopupVisible) { @@ -320,19 +327,19 @@ const Cascader = { } }, - handleKeyDown(e) { + handleKeyDown(e: KeyboardEvent) { if (e.keyCode === KeyCode.BACKSPACE || e.keyCode === KeyCode.SPACE) { e.stopPropagation(); } }, - handleInputChange(e) { - const inputValue = e.target.value; + handleInputChange(e: Event) { + const inputValue = (e.target as any).value; this.setState({ inputValue }); this.$emit('search', inputValue); }, - setValue(value, selectedOptions) { + setValue(value: string[] | number[], selectedOptions: CascaderOptionType[] = []) { if (!hasProp(this, 'value')) { this.setState({ sValue: value }); } @@ -355,7 +362,7 @@ const Cascader = { return displayRender({ labels, selectedOptions }); }, - clearSelection(e) { + clearSelection(e: MouseEvent) { e.preventDefault(); e.stopPropagation(); if (!this.inputValue) { @@ -366,23 +373,23 @@ const Cascader = { } }, - generateFilteredOptions(prefixCls, renderEmpty) { + generateFilteredOptions(prefixCls: string | undefined, renderEmpty: RenderEmptyHandler) { const { showSearch, notFoundContent } = this; - const names = getFilledFieldNames(this.$props); + const names: FilledFieldNamesType = getFilledFieldNames(this.$props); const { filter = defaultFilterOption, // render = this.defaultRenderFilteredOption, sort = defaultSortFilteredOption, limit = defaultLimit, - } = showSearch; + } = showSearch as ShowSearchType; const render = - showSearch.render || + (showSearch as ShowSearchType).render || getComponent(this, 'showSearchRender') || this.defaultRenderFilteredOption; const { flattenOptions = [], inputValue } = this.$data; // Limit the filter if needed - let filtered; + let filtered: Array if (limit > 0) { filtered = []; let matchCount = 0; @@ -453,7 +460,7 @@ const Cascader = { showSearch = false, notFoundContent, ...otherProps - } = props; + } = props as any; const { onEvents, extraAttrs } = splitAttrs(this.$attrs); const { class: className, style, ...restAttrs } = extraAttrs; const getPrefixCls = this.configProvider.getPrefixCls; @@ -536,7 +543,7 @@ const Cascader = { this.cachedOptions = options; } - const dropdownMenuColumnStyle = {}; + const dropdownMenuColumnStyle: CSSProperties = {}; const isNotFound = (options || []).length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND'; if (isNotFound) { @@ -609,7 +616,7 @@ const Cascader = { }; return {input}; }, -}; +}); Cascader.install = function(app: App) { app.component(Cascader.name, Cascader); diff --git a/components/cascader/style/index.js b/components/cascader/style/index.ts similarity index 100% rename from components/cascader/style/index.js rename to components/cascader/style/index.ts diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.tsx similarity index 89% rename from components/checkbox/Checkbox.jsx rename to components/checkbox/Checkbox.tsx index 1ba166961..b90cc3df2 100644 --- a/components/checkbox/Checkbox.jsx +++ b/components/checkbox/Checkbox.tsx @@ -1,4 +1,4 @@ -import { inject } from 'vue'; +import { defineComponent, inject } from 'vue'; import PropTypes from '../_util/vue-types'; import classNames from '../_util/classNames'; import VcCheckbox from '../vc-checkbox'; @@ -7,7 +7,7 @@ import { defaultConfigProvider } from '../config-provider'; import warning from '../_util/warning'; function noop() {} -export default { +export default defineComponent({ name: 'ACheckbox', inheritAttrs: false, __ANT_CHECKBOX: true, @@ -65,17 +65,17 @@ export default { } }, methods: { - handleChange(event) { - const targetChecked = event.target.checked; + handleChange(event: Event) { + const targetChecked = (event.target as any).checked; this.$emit('update:checked', targetChecked); // this.$emit('input', targetChecked); this.$emit('change', event); }, focus() { - this.$refs.vcCheckbox.focus(); + (this.$refs.vcCheckbox as any).focus(); }, blur() { - this.$refs.vcCheckbox.blur(); + (this.$refs.vcCheckbox as any).blur(); }, }, @@ -93,8 +93,8 @@ export default { class: className, style, ...restAttrs - } = $attrs; - const checkboxProps = { + } = $attrs as any; + const checkboxProps: any = { ...restProps, prefixCls, ...restAttrs, @@ -126,12 +126,12 @@ export default { ); }, -}; +}); diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.tsx similarity index 81% rename from components/checkbox/Group.jsx rename to components/checkbox/Group.tsx index 267c5f062..1cfe27638 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.tsx @@ -1,18 +1,27 @@ -import { inject, provide } from 'vue'; +import { defineComponent, inject, PropType, provide } from 'vue'; import PropTypes from '../_util/vue-types'; import Checkbox from './Checkbox'; import hasProp, { getSlot } from '../_util/props-util'; import { defaultConfigProvider } from '../config-provider'; +import { VueNode } from '../_util/type'; +export type CheckboxValueType = string | number | boolean; +export interface CheckboxOptionType { + label: VueNode; + value: CheckboxValueType; + disabled?: boolean; + indeterminate?: boolean; + onChange?: (e: Event) => void; +} function noop() {} -export default { +export default defineComponent({ name: 'ACheckboxGroup', props: { name: PropTypes.string, prefixCls: PropTypes.string, - defaultValue: PropTypes.array, - value: PropTypes.array, - options: PropTypes.array.def([]), + defaultValue: { type: Array as PropType>}, + value: { type: Array as PropType>}, + options: {type: Array as PropType>}, disabled: PropTypes.looseBool, onChange: PropTypes.func, }, @@ -54,14 +63,14 @@ export default { return { ...option, label }; }); }, - cancelValue(value) { + cancelValue(value: CheckboxValueType) { this.registeredValues = this.registeredValues.filter(val => val !== value); }, - registerValue(value) { + registerValue(value: CheckboxValueType) { this.registeredValues = [...this.registeredValues, value]; }, - toggleOption(option) { + toggleOption(option: CheckboxOptionType) { const { registeredValues } = this; const optionIndex = this.sValue.indexOf(option.value); const value = [...this.sValue]; @@ -111,4 +120,4 @@ export default { } return
{children}
; }, -}; +}); diff --git a/components/checkbox/index.js b/components/checkbox/index.ts similarity index 80% rename from components/checkbox/index.js rename to components/checkbox/index.ts index 50747f7fe..307ec994e 100644 --- a/components/checkbox/index.js +++ b/components/checkbox/index.ts @@ -1,10 +1,11 @@ +import { App } from 'vue'; import Checkbox from './Checkbox'; import CheckboxGroup from './Group'; Checkbox.Group = CheckboxGroup; /* istanbul ignore next */ -Checkbox.install = function(app) { +Checkbox.install = function(app: App) { app.component(Checkbox.name, Checkbox); app.component(CheckboxGroup.name, CheckboxGroup); return app; diff --git a/components/checkbox/style/index.js b/components/checkbox/style/index.ts similarity index 100% rename from components/checkbox/style/index.js rename to components/checkbox/style/index.ts diff --git a/components/collapse/Collapse.jsx b/components/collapse/Collapse.tsx similarity index 53% rename from components/collapse/Collapse.jsx rename to components/collapse/Collapse.tsx index 3464e6f8b..3e79a9c2e 100644 --- a/components/collapse/Collapse.jsx +++ b/components/collapse/Collapse.tsx @@ -1,32 +1,53 @@ -import { inject } from 'vue'; +import { CSSProperties, defineComponent, inject, PropType } from 'vue'; import animation from '../_util/openAnimation'; import { getOptionProps, - initDefaultProps, getComponent, isValidElement, getSlot, } from '../_util/props-util'; import { cloneElement } from '../_util/vnode'; -import VcCollapse, { collapseProps } from '../vc-collapse'; +import VcCollapse from '../vc-collapse'; import RightOutlined from '@ant-design/icons-vue/RightOutlined'; import { defaultConfigProvider } from '../config-provider'; +import PropTypes from '../_util/vue-types'; +import { tuple, VueNode } from '../_util/type'; -export default { +interface PanelProps { + isActive?: boolean; + header?: VueNode; + className?: string; + class?: string; + style?: CSSProperties; + showArrow?: boolean; + forceRender?: boolean; + disabled?: boolean; + extra?: VueNode; +} +type ActiveKeyType = Array | string | number; +export default defineComponent({ name: 'ACollapse', inheritAttrs: false, - props: initDefaultProps(collapseProps(), { - bordered: true, - openAnimation: animation, - expandIconPosition: 'left', - }), + props: { + prefixCls: PropTypes.string, + activeKey: {type: [Array, Number, String] as PropType}, + defaultActiveKey: {type: [Array, Number, String] as PropType}, + accordion: PropTypes.looseBool, + destroyInactivePanel: PropTypes.looseBool, + bordered: PropTypes.looseBool.def(true), + expandIcon: PropTypes.func, + openAnimation: PropTypes.object.def(animation), + expandIconPosition: PropTypes.oneOf(tuple('left', 'right')).def('left'), + 'onUpdate:activeKey': PropTypes.func, + onChange: PropTypes.func, + }, setup() { return { configProvider: inject('configProvider', defaultConfigProvider), }; }, methods: { - renderExpandIcon(panelProps, prefixCls) { + renderExpandIcon(panelProps: PanelProps={}, prefixCls: string) { const expandIcon = getComponent(this, 'expandIcon', panelProps); const icon = expandIcon || ; return isValidElement(Array.isArray(expandIcon) ? icon[0] : icon) @@ -35,7 +56,7 @@ export default { }) : icon; }, - handleChange(activeKey) { + handleChange(activeKey: ActiveKeyType) { this.$emit('update:activeKey', activeKey); this.$emit('change', activeKey); }, @@ -44,7 +65,7 @@ export default { const { prefixCls: customizePrefixCls, bordered, expandIconPosition } = this; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('collapse', customizePrefixCls); - const { class: className, ...restAttrs } = this.$attrs; + const { class: className, ...restAttrs } = this.$attrs as any; const collapseClassName = { [className]: className, [`${prefixCls}-borderless`]: !bordered, @@ -53,13 +74,12 @@ export default { const rcCollapeProps = { ...getOptionProps(this), prefixCls, - expandIcon: panelProps => this.renderExpandIcon(panelProps, prefixCls), + expandIcon: (panelProps: PanelProps) => this.renderExpandIcon(panelProps, prefixCls), class: collapseClassName, ...restAttrs, onChange: this.handleChange, - 'onUpdate:change': undefined, }; return {getSlot(this)}; }, -}; +}); diff --git a/components/collapse/CollapsePanel.jsx b/components/collapse/CollapsePanel.tsx similarity index 57% rename from components/collapse/CollapsePanel.jsx rename to components/collapse/CollapsePanel.tsx index 381f87d1b..2624d4ec5 100644 --- a/components/collapse/CollapsePanel.jsx +++ b/components/collapse/CollapsePanel.tsx @@ -1,13 +1,26 @@ -import { inject } from 'vue'; +import { defineComponent, inject } from 'vue'; import { getOptionProps, getComponent, getSlot } from '../_util/props-util'; -import VcCollapse, { panelProps } from '../vc-collapse'; +import VcCollapse from '../vc-collapse'; import { defaultConfigProvider } from '../config-provider'; +import PropTypes from '../_util/vue-types'; -export default { +export default defineComponent({ name: 'ACollapsePanel', inheritAttrs: false, props: { - ...panelProps(), + openAnimation: PropTypes.object, + prefixCls: PropTypes.string, + header: PropTypes.VNodeChild, + headerClass: PropTypes.string, + showArrow: PropTypes.looseBool, + isActive: PropTypes.looseBool, + destroyInactivePanel: PropTypes.looseBool, + disabled: PropTypes.looseBool, + accordion: PropTypes.looseBool, + forceRender: PropTypes.looseBool, + expandIcon: PropTypes.func, + extra: PropTypes.VNodeChild, + panelKey: PropTypes.VNodeChild, }, setup() { return { @@ -18,7 +31,7 @@ export default { const { prefixCls: customizePrefixCls, showArrow = true } = this; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('collapse', customizePrefixCls); - const { class: className, ...restAttrs } = this.$attrs; + const { class: className, ...restAttrs } = this.$attrs as any; const collapsePanelClassName = { [className]: className, [`${prefixCls}-no-arrow`]: !showArrow, @@ -34,4 +47,4 @@ export default { }; return {getSlot(this)}; }, -}; +}); diff --git a/components/collapse/style/index.js b/components/collapse/style/index.ts similarity index 100% rename from components/collapse/style/index.js rename to components/collapse/style/index.ts diff --git a/components/comment/index.tsx b/components/comment/index.tsx index 9a4018130..bb2ea6f24 100644 --- a/components/comment/index.tsx +++ b/components/comment/index.tsx @@ -1,94 +1,101 @@ -import { inject, VNodeTypes, CSSProperties, App, SetupContext } from 'vue'; -import classNames from '../_util/classNames'; +import { App, defineComponent, inject } from 'vue'; +import PropsTypes from '../_util/vue-types'; +import { getComponent, getSlot } from '../_util/props-util'; import { defaultConfigProvider } from '../config-provider'; - -export interface CommentProps { - /** List of action items rendered below the comment content */ - actions?: Array; +import { VueNode } from '../_util/type'; +export const CommentProps = { + actions: PropsTypes.array, /** The element to display as the comment author. */ - author?: VNodeTypes; + author: PropsTypes.VNodeChild, /** The element to display as the comment avatar - generally an antd Avatar */ - avatar?: VNodeTypes; + avatar: PropsTypes.VNodeChild, /** The main content of the comment */ - content: VNodeTypes; + content: PropsTypes.VNodeChild, /** Comment prefix defaults to '.ant-comment' */ - prefixCls?: string; - /** Additional style for the comment */ - style?: CSSProperties; + prefixCls: PropsTypes.string, /** A datetime element containing the time to be displayed */ - datetime?: VNodeTypes; -} + datetime: PropsTypes.VNodeChild, +}; -const Comment = ( - { - actions, - author, - avatar, - content, - prefixCls: customizePrefixCls, - datetime, - ...otherProps - }: CommentProps, - { slots }: SetupContext, -) => { - const { getPrefixCls } = inject('configProvider', defaultConfigProvider); +const Comment = defineComponent({ + name: 'AComment', + props: CommentProps, + setup() { + return { + configProvider: inject('configProvider', defaultConfigProvider), + }; + }, + methods: { + getAction(actions: VueNode[]) { + if (!actions || !actions.length) { + return null; + } + const actionList = actions.map((action, index) =>
  • {action}
    • ); + return actionList; + }, + renderNested(prefixCls: string, children: VueNode) { + return
    {children}
    ; + }, + }, - const renderNested = (prefixCls: string, nestedChildren: any) => { - return
    {nestedChildren}
    ; - }; + render() { + const { prefixCls: customizePrefixCls } = this.$props; - const prefixCls = getPrefixCls('comment', customizePrefixCls); + const getPrefixCls = this.configProvider.getPrefixCls; + const prefixCls = getPrefixCls('comment', customizePrefixCls); - const avatarDom = avatar ? ( -
    - {typeof avatar === 'string' ? comment-avatar : avatar} -
    - ) : null; + const actions = getComponent(this, 'actions'); + const author = getComponent(this, 'author'); + const avatar = getComponent(this, 'avatar'); + const content = getComponent(this, 'content'); + const datetime = getComponent(this, 'datetime'); - const actionDom = - actions && actions.length ? ( + const avatarDom = ( +
    + {typeof avatar === 'string' ? comment-avatar : avatar} +
    + ); + + const actionDom = actions ? (
      - {actions.map((action, index) => ( -
    • {action}
      • - ))} + {this.getAction(Array.isArray(actions) ? actions : [actions])}
    ) : null; - const authorContent = (author || datetime) && ( -
    - {author && {author}} - {datetime && {datetime}} -
    - ); + const authorContent = ( +
    + {author && {author}} + {datetime && {datetime}} +
    + ); - const contentDom = ( -
    - {authorContent} -
    {content}
    - {actionDom} -
    - ); - const cls = classNames(prefixCls); + const contentDom = ( +
    + {authorContent} +
    {content}
    + {actionDom} +
    + ); - const children = slots.default?.(); - - return ( -
    + const comment = (
    {avatarDom} {contentDom}
    - {children ? renderNested(prefixCls, children) : null} -
    - ); -}; - -Comment.displayName = 'AComment'; + ); + const children = getSlot(this); + return ( +
    + {comment} + {children && children.length ? this.renderNested(prefixCls, children) : null} +
    + ); + }, +}); /* istanbul ignore next */ Comment.install = function(app: App) { app.component(Comment.name, Comment); return app; }; - export default Comment; diff --git a/components/comment/style/index.js b/components/comment/style/index.ts similarity index 100% rename from components/comment/style/index.js rename to components/comment/style/index.ts diff --git a/components/date-picker/style/index.js b/components/date-picker/style/index.ts similarity index 100% rename from components/date-picker/style/index.js rename to components/date-picker/style/index.ts diff --git a/components/descriptions/Col.jsx b/components/descriptions/Col.tsx similarity index 77% rename from components/descriptions/Col.jsx rename to components/descriptions/Col.tsx index a3ce36fe0..c06ad1204 100644 --- a/components/descriptions/Col.jsx +++ b/components/descriptions/Col.tsx @@ -1,13 +1,22 @@ +import { SetupContext, VNode } from 'vue'; import { getOptionProps } from '../_util/props-util'; -const Col = (_, { attrs }) => { - const { child = {}, bordered, colon, type, layout, colKey: key } = attrs; +interface ColProps { + child: VNode; + bordered: boolean; + colon: boolean; + type?: 'label' | 'content'; + layout?: 'horizontal' | 'vertical'; + colKey?: string +} +const Col = (_props: ColProps, { attrs }: SetupContext) => { + const { child = {} as VNode, bordered, colon, type, layout, colKey: key } = attrs as unknown as ColProps; const { prefixCls, span = 1 } = getOptionProps(child); - const { children = {}, props = {} } = child; + const { children = {} as any, props = {} } = child; const label = props.label || (children.label && children.label()); const defaultSlot = children.default && children.default(); - const labelProps = { + const labelProps: any = { class: [ `${prefixCls}-item-label`, { diff --git a/components/descriptions/index.jsx b/components/descriptions/index.tsx similarity index 81% rename from components/descriptions/index.jsx rename to components/descriptions/index.tsx index 9dd7ad04f..9d93d67ef 100644 --- a/components/descriptions/index.jsx +++ b/components/descriptions/index.tsx @@ -1,17 +1,17 @@ -import { inject, cloneVNode } from 'vue'; +import { inject, cloneVNode, App, defineComponent, PropType, VNode } from 'vue'; import warning from '../_util/warning'; -import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve'; +import ResponsiveObserve, { Breakpoint, responsiveArray } from '../_util/responsiveObserve'; import { defaultConfigProvider } from '../config-provider'; import Col from './Col'; import PropTypes from '../_util/vue-types'; import { - initDefaultProps, getOptionProps, getComponent, isValidElement, getSlot, } from '../_util/props-util'; import BaseMixin from '../_util/BaseMixin'; +import { tuple, VueNode } from '../_util/type'; export const DescriptionsItemProps = { prefixCls: PropTypes.string, @@ -19,7 +19,7 @@ export const DescriptionsItemProps = { span: PropTypes.number, }; -function toArray(value) { +function toArray(value: any) { let ret = value; if (value === undefined) { ret = []; @@ -31,19 +31,35 @@ function toArray(value) { export const DescriptionsItem = { name: 'ADescriptionsItem', - props: initDefaultProps(DescriptionsItemProps, { span: 1 }), + props: { + prefixCls: PropTypes.string, + label: PropTypes.VNodeChild, + span: PropTypes.number.def(1), + }, render() { return null; }, }; +const defaultColumnMap = { + xxl: 3, + xl: 3, + lg: 3, + md: 3, + sm: 2, + xs: 1, +}; + export const DescriptionsProps = { prefixCls: PropTypes.string, bordered: PropTypes.looseBool, - size: PropTypes.oneOf(['default', 'middle', 'small']).def('default'), - title: PropTypes.any, - column: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), - layout: PropTypes.oneOf(['horizontal', 'vertical']), + size: PropTypes.oneOf(tuple('default', 'middle', 'small')).def('default'), + title: PropTypes.VNodeChild, + column: { + type: [Number, Object] as PropType>>, + default: () => defaultColumnMap + }, + layout: PropTypes.oneOf(tuple('horizontal', 'vertical')), colon: PropTypes.looseBool, }; @@ -52,13 +68,13 @@ export const DescriptionsProps = { * @param children: DescriptionsItem * @param column: number */ -const generateChildrenRows = (children, column) => { +const generateChildrenRows = (children: VueNode, column: number) => { const rows = []; let columns = null; - let leftSpans; + let leftSpans: number; const itemNodes = toArray(children); - itemNodes.forEach((node, index) => { + itemNodes.forEach((node: VNode, index: number) => { const itemProps = getOptionProps(node); let itemNode = node; @@ -97,22 +113,11 @@ const generateChildrenRows = (children, column) => { return rows; }; -const defaultColumnMap = { - xxl: 3, - xl: 3, - lg: 3, - md: 3, - sm: 2, - xs: 1, -}; - -const Descriptions = { +const Descriptions = defineComponent({ name: 'ADescriptions', Item: DescriptionsItem, mixins: [BaseMixin], - props: initDefaultProps(DescriptionsProps, { - column: defaultColumnMap, - }), + props: DescriptionsProps, setup() { return { configProvider: inject('configProvider', defaultConfigProvider), @@ -143,8 +148,19 @@ const Descriptions = { // Maybe there are some strange environments return 3; }, - renderRow(children, index, { prefixCls }, bordered, layout, colon) { - const renderCol = (colItem, type, idx) => { + renderRow( + children: VNode[], + index: number, + { prefixCls }: { prefixCls: string }, + bordered: boolean, + layout: 'horizontal' | 'vertical', + colon: boolean + ) { + const renderCol = ( + colItem: VNode, + type: 'label' | 'content', + idx: number + ) => { return ( { + toArray(children).forEach((childrenItem: VNode, idx: number) => { cloneChildren.push(renderCol(childrenItem, 'label', idx)); if (layout === 'vertical') { cloneContentChildren.push(renderCol(childrenItem, 'content', idx)); @@ -216,7 +232,7 @@ const Descriptions = { const column = this.getColumn(); const children = getSlot(this); const cloneChildren = toArray(children) - .map(child => { + .map((child: VNode) => { if (isValidElement(child)) { return cloneVNode(child, { prefixCls, @@ -259,9 +275,9 @@ const Descriptions = { ); }, -}; +}); -Descriptions.install = function(app) { +Descriptions.install = function(app: App) { app.component(Descriptions.name, Descriptions); app.component(Descriptions.Item.name, Descriptions.Item); return app; diff --git a/components/descriptions/style/index.js b/components/descriptions/style/index.ts similarity index 100% rename from components/descriptions/style/index.js rename to components/descriptions/style/index.ts diff --git a/components/divider/index.tsx b/components/divider/index.tsx index 8b56e6ad2..a45795c69 100644 --- a/components/divider/index.tsx +++ b/components/divider/index.tsx @@ -1,4 +1,4 @@ -import { App, computed, defineComponent, inject, PropType, unref } from 'vue'; +import { App, computed, defineComponent, inject, PropType } from 'vue'; import { defaultConfigProvider } from '../config-provider'; const Divider = defineComponent({ @@ -25,7 +25,7 @@ const Divider = defineComponent({ const classString = computed(() => { const { type, dashed, orientation } = props; const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation; - const prefixClsRef = unref(prefixCls); + const prefixClsRef = prefixCls.value; return { [prefixClsRef]: true, [`${prefixClsRef}-${type}`]: true, diff --git a/components/vc-collapse/src/commonProps.js b/components/vc-collapse/src/commonProps.js index ed77a3654..13d816de2 100644 --- a/components/vc-collapse/src/commonProps.js +++ b/components/vc-collapse/src/commonProps.js @@ -18,7 +18,6 @@ const collapseProps = () => ({ expandIcon: PropTypes.func, openAnimation: PropTypes.object, expandIconPosition: PropTypes.oneOf(['left', 'right']), - 'onUpdate:change': PropTypes.func, onChange: PropTypes.func, });