github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: declare components type (#3145) 

* fix: update alert code

* chore: declare link type

* chore: declare auto-complete type

* chore: declare Badge type

* chore: declare Breadcrumb type

* chore: declare Calendar type

* chore: declare Card type

* chore: declare Checkbox type

* chore: declare Descriptions type

* chore: declare Dropdown

* chore: declare Form type

* chore: declare Mentions type

* chore: declare Menu type

* chore: declare popconfirm type

* chore: update Radio typescript

* chore: declare Rate type

* chore: declare Transfer type

* fix: update Transfer type

* fix: update type

* fix: update type
pull/3165/head
ajuner 2020-11-13 10:51:12 +08:00 committed by GitHub
parent ba971c4f2c
commit 4ab7a681a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 101 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/alert/index.tsx
View File

@ -34,7 +34,7 @@ const iconMapOutlined = {
export const AlertProps = { export const AlertProps = {
/** /**
* Type of Alert styles, options:`success`, `info`, `warning`, `error` * Type of Alert styles, options: `success`, `info`, `warning`, `error`
*/ */
type: PropTypes.oneOf(tuple('success', 'info', 'warning', 'error')), type: PropTypes.oneOf(tuple('success', 'info', 'warning', 'error')),
/** Whether Alert can be closed */ /** Whether Alert can be closed */

2
components/anchor/Anchor.tsx
View File

@ -183,7 +183,7 @@ export default defineComponent({
return ''; return '';
}, },
handleScrollTo(link) { handleScrollTo(link: string) {
const { offsetTop, getContainer, targetOffset } = this; const { offsetTop, getContainer, targetOffset } = this;
this.setCurrentActiveLink(link); this.setCurrentActiveLink(link);

8
components/auto-complete/index.tsx
View File

@ -1,4 +1,4 @@
import { App, defineComponent, inject, provide, Plugin } from 'vue'; import { App, defineComponent, inject, provide, Plugin, VNode } from 'vue';
import Select, { SelectProps } from '../select'; import Select, { SelectProps } from '../select';
import Input from '../input'; import Input from '../input';
import InputElement from './InputElement'; import InputElement from './InputElement';
@ -56,10 +56,10 @@ const AutoComplete = defineComponent({
provide('savePopupRef', this.savePopupRef); provide('savePopupRef', this.savePopupRef);
}, },
methods: { methods: {
savePopupRef(ref: any) { savePopupRef(ref: VNode) {
this.popupRef = ref; this.popupRef = ref;
}, },
saveSelect(node: any) { saveSelect(node: VNode) {
this.select = node; this.select = node;
}, },
getInputElement() { getInputElement() {
@ -125,7 +125,7 @@ const AutoComplete = defineComponent({
: []; : [];
} }
const selectProps = { const selectProps = {
...Omit(getOptionProps(this), ['dataSource', 'optionLabelProp'] as any), ...Omit(getOptionProps(this), ['dataSource', 'optionLabelProp']),
...this.$attrs, ...this.$attrs,
mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE, mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
// optionLabelProp, // optionLabelProp,

6
components/badge/Badge.tsx
View File

@ -7,7 +7,7 @@ import { cloneElement } from '../_util/vnode';
import { getTransitionProps, Transition } from '../_util/transition'; import { getTransitionProps, Transition } from '../_util/transition';
import isNumeric from '../_util/isNumeric'; import isNumeric from '../_util/isNumeric';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
import { inject, defineComponent, CSSProperties } from 'vue'; import { inject, defineComponent, CSSProperties, VNode } from 'vue';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
const BadgeProps = { const BadgeProps = {
@ -28,7 +28,7 @@ const BadgeProps = {
title: PropTypes.string, title: PropTypes.string,
}; };
function isPresetColor(color?: string): boolean { function isPresetColor(color?: string): boolean {
return (PresetColorTypes as any[]).indexOf(color) !== -1; return (PresetColorTypes as string[]).indexOf(color) !== -1;
} }
export default defineComponent({ export default defineComponent({
name: 'ABadge', name: 'ABadge',
@ -79,7 +79,7 @@ export default defineComponent({
} }
: { ...numberStyle }; : { ...numberStyle };
}, },
getBadgeClassName(prefixCls: string, children: any[]) { getBadgeClassName(prefixCls: string, children: VNode[]) {
const hasStatus = this.hasStatus(); const hasStatus = this.hasStatus();
return classNames(prefixCls, { return classNames(prefixCls, {
[`${prefixCls}-status`]: hasStatus, [`${prefixCls}-status`]: hasStatus,

10
components/breadcrumb/Breadcrumb.tsx
View File

@ -20,12 +20,12 @@ const BreadcrumbProps = {
separator: PropTypes.VNodeChild, separator: PropTypes.VNodeChild,
itemRender: { itemRender: {
type: Function as PropType< type: Function as PropType<
(opt: { route: Route; params: any; routes: Route[]; paths: string[] }) => VueNode (opt: { route: Route; params: unknown; routes: Route[]; paths: string[] }) => VueNode
>, >,
}, },
}; };
function getBreadcrumbName(route: Route, params: any) { function getBreadcrumbName(route: Route, params: unknown) {
if (!route.breadcrumbName) { if (!route.breadcrumbName) {
return null; return null;
} }
@ -38,7 +38,7 @@ function getBreadcrumbName(route: Route, params: any) {
} }
function defaultItemRender(opt: { function defaultItemRender(opt: {
route: Route; route: Route;
params: any; params: unknown;
routes: Route[]; routes: Route[];
paths: string[]; paths: string[];
}): VueNode { }): VueNode {
@ -57,7 +57,7 @@ export default defineComponent({
}; };
}, },
methods: { methods: {
getPath(path: string, params: any) { getPath(path: string, params: unknown) {
path = (path || '').replace(/^\//, ''); path = (path || '').replace(/^\//, '');
Object.keys(params).forEach(key => { Object.keys(params).forEach(key => {
path = path.replace(`:${key}`, params[key]); path = path.replace(`:${key}`, params[key]);
@ -65,7 +65,7 @@ export default defineComponent({
return path; return path;
}, },
addChildPath(paths: string[], childPath = '', params: any) { addChildPath(paths: string[], childPath = '', params: unknown) {
const originalPaths = [...paths]; const originalPaths = [...paths];
const path = this.getPath(childPath, params); const path = this.getPath(childPath, params);
if (path) { if (path) {

6
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -1,4 +1,4 @@
import { defineComponent, inject } from 'vue'; import { defineComponent, HTMLAttributes, inject } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { hasProp, getComponent, getSlot } from '../_util/props-util'; import { hasProp, getComponent, getSlot } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
@ -24,7 +24,7 @@ export default defineComponent({
* if overlay is have * if overlay is have
* Wrap a DropDown * Wrap a DropDown
*/ */
renderBreadcrumbNode(breadcrumbItem: any, prefixCls: string) { renderBreadcrumbNode(breadcrumbItem: HTMLAttributes, prefixCls: string) {
const overlay = getComponent(this, 'overlay'); const overlay = getComponent(this, 'overlay');
if (overlay) { if (overlay) {
return ( return (
@ -45,7 +45,7 @@ export default defineComponent({
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
const separator = getComponent(this, 'separator'); const separator = getComponent(this, 'separator');
const children = getSlot(this); const children = getSlot(this);
let link; let link: HTMLAttributes;
if (hasProp(this, 'href')) { if (hasProp(this, 'href')) {
link = <a class={`${prefixCls}-link`}>{children}</a>; link = <a class={`${prefixCls}-link`}>{children}</a>;
} else { } else {

5
components/calendar/Header.tsx
View File

@ -5,6 +5,7 @@ import PropTypes from '../_util/vue-types';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
import { VueNode } from '../_util/type'; import { VueNode } from '../_util/type';
import moment from 'moment'; import moment from 'moment';
import { RadioChangeEvent } from '../radio/interface';
function getMonthsLocale(value: moment.Moment): string[] { function getMonthsLocale(value: moment.Moment): string[] {
const current = value.clone(); const current = value.clone();
@ -141,8 +142,8 @@ export default defineComponent({
this.$emit('valueChange', newValue); this.$emit('valueChange', newValue);
}, },
onInternalTypeChange(e: Event) { onInternalTypeChange(e: RadioChangeEvent) {
this.triggerTypeChange((e.target as any).value); this.triggerTypeChange(e.target.value);
}, },
triggerTypeChange(val: string) { triggerTypeChange(val: string) {

2
components/card/Card.tsx
View File

@ -71,7 +71,7 @@ const Card = defineComponent({
this.$emit('tabChange', key); this.$emit('tabChange', key);
}, },
isContainGrid(obj: VNode[] = []) { isContainGrid(obj: VNode[] = []) {
let containGrid; let containGrid: boolean;
obj.forEach(element => { obj.forEach(element => {
if (element && isPlainObject(element.type) && (element.type as any).__ANT_CARD_GRID) { if (element && isPlainObject(element.type) && (element.type as any).__ANT_CARD_GRID) {
containGrid = true; containGrid = true;

11
components/checkbox/Checkbox.tsx
View File

@ -5,6 +5,7 @@ import VcCheckbox from '../vc-checkbox';
import hasProp, { getOptionProps, getSlot } from '../_util/props-util'; import hasProp, { getOptionProps, getSlot } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
import warning from '../_util/warning'; import warning from '../_util/warning';
import { RadioChangeEvent } from '../radio/interface';
function noop() {} function noop() {}
export default defineComponent({ export default defineComponent({
@ -65,17 +66,17 @@ export default defineComponent({
} }
}, },
methods: { methods: {
handleChange(event: Event) { handleChange(event: RadioChangeEvent) {
const targetChecked = (event.target as any).checked; const targetChecked = event.target.checked;
this.$emit('update:checked', targetChecked); this.$emit('update:checked', targetChecked);
// this.$emit('input', targetChecked); // this.$emit('input', targetChecked);
this.$emit('change', event); this.$emit('change', event);
}, },
focus() { focus() {
(this.$refs.vcCheckbox as any).focus(); (this.$refs.vcCheckbox as HTMLInputElement).focus();
}, },
blur() { blur() {
(this.$refs.vcCheckbox as any).blur(); (this.$refs.vcCheckbox as HTMLInputElement).blur();
}, },
}, },
@ -93,7 +94,7 @@ export default defineComponent({
class: className, class: className,
style, style,
...restAttrs ...restAttrs
} = $attrs as any; } = $attrs;
const checkboxProps: any = { const checkboxProps: any = {
...restProps, ...restProps,
prefixCls, prefixCls,

4
components/descriptions/Row.tsx
View File

@ -1,6 +1,6 @@
import Cell from './Cell'; import Cell from './Cell';
import { getOptionProps, getSlot, getClass, getStyle, getComponent } from '../_util/props-util'; import { getOptionProps, getSlot, getClass, getStyle, getComponent } from '../_util/props-util';
import { FunctionalComponent } from 'vue'; import { FunctionalComponent, VNode } from 'vue';
interface CellConfig { interface CellConfig {
component: string | [string, string]; component: string | [string, string];
@ -20,7 +20,7 @@ export interface RowProps {
const Row: FunctionalComponent<RowProps> = props => { const Row: FunctionalComponent<RowProps> = props => {
const renderCells = ( const renderCells = (
items, items: VNode[],
{ colon, prefixCls, bordered }, { colon, prefixCls, bordered },
{ component, type, showLabel, showContent }: CellConfig, { component, type, showLabel, showContent }: CellConfig,
) => { ) => {

8
components/dropdown/dropdown-button.tsx
View File

@ -1,4 +1,4 @@
import { provide, inject, defineComponent } from 'vue'; import { provide, inject, defineComponent, VNode } from 'vue';
import Button from '../button'; import Button from '../button';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import buttonTypes from '../button/buttonTypes'; import buttonTypes from '../button/buttonTypes';
@ -45,13 +45,13 @@ export default defineComponent({
provide('savePopupRef', this.savePopupRef); provide('savePopupRef', this.savePopupRef);
}, },
methods: { methods: {
savePopupRef(ref: any) { savePopupRef(ref: VNode) {
this.popupRef = ref; this.popupRef = ref;
}, },
handleClick(e) { handleClick(e: Event) {
this.$emit('click', e); this.$emit('click', e);
}, },
handleVisibleChange(val) { handleVisibleChange(val: boolean) {
this.$emit('update:visible', val); this.$emit('update:visible', val);
this.$emit('visibleChange', val); this.$emit('visibleChange', val);
}, },

4
components/dropdown/dropdown.tsx
View File

@ -1,4 +1,4 @@
import { provide, inject, cloneVNode, defineComponent } from 'vue'; import { provide, inject, cloneVNode, defineComponent, VNode } from 'vue';
import RcDropdown from '../vc-dropdown/src/index'; import RcDropdown from '../vc-dropdown/src/index';
import DropdownButton from './dropdown-button'; import DropdownButton from './dropdown-button';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
@ -37,7 +37,7 @@ const Dropdown = defineComponent({
provide('savePopupRef', this.savePopupRef); provide('savePopupRef', this.savePopupRef);
}, },
methods: { methods: {
savePopupRef(ref: any) { savePopupRef(ref: VNode) {
this.popupRef = ref; this.popupRef = ref;
}, },
getTransitionName() { getTransitionName() {

12
components/form/Form.tsx
View File

@ -14,7 +14,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
import initDefaultProps from '../_util/props-util/initDefaultProps'; import initDefaultProps from '../_util/props-util/initDefaultProps';
import { tuple, VueNode } from '../_util/type'; import { tuple, VueNode } from '../_util/type';
import { ColProps } from '../grid/Col'; import { ColProps } from '../grid/Col';
import { InternalNamePath, NamePath, ValidateOptions } from './interface'; import { InternalNamePath, NamePath, ValidateErrorEntity, ValidateOptions } from './interface';
export type ValidationRule = { export type ValidationRule = {
/** validation error message */ /** validation error message */
@ -119,7 +119,7 @@ const Form = defineComponent({
this.handleFinishFailed(errors); this.handleFinishFailed(errors);
}); });
}, },
getFieldsByNameList(nameList) { getFieldsByNameList(nameList: NamePath) {
const provideNameList = !!nameList; const provideNameList = !!nameList;
const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : []; const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
if (!provideNameList) { if (!provideNameList) {
@ -139,12 +139,12 @@ const Form = defineComponent({
field.resetField(); field.resetField();
}); });
}, },
clearValidate(name) { clearValidate(name: NamePath) {
this.getFieldsByNameList(name).forEach(field => { this.getFieldsByNameList(name).forEach(field => {
field.clearValidate(); field.clearValidate();
}); });
}, },
handleFinishFailed(errorInfo) { handleFinishFailed(errorInfo: ValidateErrorEntity) {
const { scrollToFirstError } = this; const { scrollToFirstError } = this;
this.$emit('finishFailed', errorInfo); this.$emit('finishFailed', errorInfo);
if (scrollToFirstError && errorInfo.errorFields.length) { if (scrollToFirstError && errorInfo.errorFields.length) {
@ -154,8 +154,8 @@ const Form = defineComponent({
validate(...args: any[]) { validate(...args: any[]) {
return this.validateField(...args); return this.validateField(...args);
}, },
scrollToField(name: string | number, options = {}) { scrollToField(name: NamePath, options = {}) {
const fields = this.getFieldsByNameList([name]); const fields = this.getFieldsByNameList(name);
if (fields.length) { if (fields.length) {
const fieldId = fields[0].fieldId; const fieldId = fields[0].fieldId;
const node = fieldId ? document.getElementById(fieldId) : null; const node = fieldId ? document.getElementById(fieldId) : null;

4
components/mentions/index.tsx
View File

@ -151,10 +151,10 @@ const Mentions = defineComponent({
return filterOption; return filterOption;
}, },
focus() { focus() {
(this.$refs.vcMentions as any).focus(); (this.$refs.vcMentions as HTMLTextAreaElement).focus();
}, },
blur() { blur() {
(this.$refs.vcMentions as any).blur(); (this.$refs.vcMentions as HTMLTextAreaElement).blur();
}, },
}, },
render() { render() {

2
components/menu/SubMenu.tsx
View File

@ -24,7 +24,7 @@ export default defineComponent({
}; };
}, },
methods: { methods: {
onKeyDown(e) { onKeyDown(e: Event) {
(this.$refs.subMenu as any).onKeyDown(e); (this.$refs.subMenu as any).onKeyDown(e);
}, },
}, },

20
components/menu/index.tsx
View File

@ -29,8 +29,8 @@ export const menuProps = {
selectable: PropTypes.looseBool, selectable: PropTypes.looseBool,
selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
defaultSelectedKeys: PropTypes.array, defaultSelectedKeys: PropTypes.array,
openKeys: PropTypes.array, openKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
defaultOpenKeys: PropTypes.array, defaultOpenKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
openTransitionName: PropTypes.string, openTransitionName: PropTypes.string,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
@ -88,7 +88,7 @@ const Menu = defineComponent({
'Menu', 'Menu',
"`inlineCollapsed` should only be used when Menu's `mode` is inline.", "`inlineCollapsed` should only be used when Menu's `mode` is inline.",
); );
let sOpenKeys; let sOpenKeys: (number | string)[];
if ('openKeys' in props) { if ('openKeys' in props) {
sOpenKeys = props.openKeys; sOpenKeys = props.openKeys;
@ -126,7 +126,7 @@ const Menu = defineComponent({
this.propsUpdating = false; this.propsUpdating = false;
}, },
methods: { methods: {
collapsedChange(val) { collapsedChange(val: unknown) {
if (this.propsUpdating) { if (this.propsUpdating) {
return; return;
} }
@ -154,7 +154,7 @@ const Menu = defineComponent({
// Restore vertical mode when menu is collapsed responsively when mounted // Restore vertical mode when menu is collapsed responsively when mounted
// https://github.com/ant-design/ant-design/issues/13104 // https://github.com/ant-design/ant-design/issues/13104
// TODO: not a perfect solution, looking a new way to avoid setting switchingModeFromInline in this situation // TODO: not a perfect solution, looking a new way to avoid setting switchingModeFromInline in this situation
handleMouseEnter(e) { handleMouseEnter(e: Event) {
this.restoreModeVerticalFromInline(); this.restoreModeVerticalFromInline();
this.$emit('mouseenter', e); this.$emit('mouseenter', e);
}, },
@ -180,7 +180,7 @@ const Menu = defineComponent({
this.restoreModeVerticalFromInline(); this.restoreModeVerticalFromInline();
} }
}, },
handleClick(e) { handleClick(e: Event) {
this.handleOpenChange([]); this.handleOpenChange([]);
this.$emit('click', e); this.$emit('click', e);
}, },
@ -194,12 +194,12 @@ const Menu = defineComponent({
this.$emit('deselect', info); this.$emit('deselect', info);
this.$emit('selectChange', info.selectedKeys); this.$emit('selectChange', info.selectedKeys);
}, },
handleOpenChange(openKeys) { handleOpenChange(openKeys: (number | string)[]) {
this.setOpenKeys(openKeys); this.setOpenKeys(openKeys);
this.$emit('update:openKeys', openKeys); this.$emit('update:openKeys', openKeys);
this.$emit('openChange', openKeys); this.$emit('openChange', openKeys);
}, },
setOpenKeys(openKeys) { setOpenKeys(openKeys: (number | string)[]) {
if (!hasProp(this, 'openKeys')) { if (!hasProp(this, 'openKeys')) {
this.setState({ sOpenKeys: openKeys }); this.setState({ sOpenKeys: openKeys });
} }
@ -219,7 +219,7 @@ const Menu = defineComponent({
} }
return inlineCollapsed; return inlineCollapsed;
}, },
getMenuOpenAnimation(menuMode) { getMenuOpenAnimation(menuMode: string) {
const { openAnimation, openTransitionName } = this.$props; const { openAnimation, openTransitionName } = this.$props;
let menuOpenAnimation = openAnimation || openTransitionName; let menuOpenAnimation = openAnimation || openTransitionName;
if (openAnimation === undefined && openTransitionName === undefined) { if (openAnimation === undefined && openTransitionName === undefined) {
@ -287,7 +287,7 @@ const Menu = defineComponent({
menuProps.onClick = this.handleClick; menuProps.onClick = this.handleClick;
menuProps.openTransitionName = menuOpenAnimation; menuProps.openTransitionName = menuOpenAnimation;
} else { } else {
menuProps.onClick = e => { menuProps.onClick = (e: Event) => {
this.$emit('click', e); this.$emit('click', e);
}; };
menuProps.openAnimation = menuOpenAnimation; menuProps.openAnimation = menuOpenAnimation;

6
components/popconfirm/index.tsx
View File

@ -60,17 +60,17 @@ const Popconfirm = defineComponent({
}, },
}, },
methods: { methods: {
onConfirmHandle(e) { onConfirmHandle(e: Event) {
this.setVisible(false, e); this.setVisible(false, e);
this.$emit('confirm', e); this.$emit('confirm', e);
}, },
onCancelHandle(e) { onCancelHandle(e: Event) {
this.setVisible(false, e); this.setVisible(false, e);
this.$emit('cancel', e); this.$emit('cancel', e);
}, },
onVisibleChangeHandle(sVisible) { onVisibleChangeHandle(sVisible: boolean) {
const { disabled } = this.$props; const { disabled } = this.$props;
if (disabled) { if (disabled) {
return; return;

4
components/radio/Radio.tsx
View File

@ -36,10 +36,10 @@ export default defineComponent({
}, },
methods: { methods: {
focus() { focus() {
(this.$refs.vcCheckbox as any).focus(); (this.$refs.vcCheckbox as HTMLInputElement).focus();
}, },
blur() { blur() {
(this.$refs.vcCheckbox as any).blur(); (this.$refs.vcCheckbox as HTMLInputElement).blur();
}, },
handleChange(event: RadioChangeEvent) { handleChange(event: RadioChangeEvent) {
const targetChecked = event.target.checked; const targetChecked = event.target.checked;

8
components/rate/index.tsx
View File

@ -1,4 +1,4 @@
import { inject, defineComponent } from 'vue'; import { inject, defineComponent, VNode } from 'vue';
import omit from 'omit.js'; import omit from 'omit.js';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getOptionProps, getComponent } from '../_util/props-util'; import { getOptionProps, getComponent } from '../_util/props-util';
@ -30,16 +30,16 @@ const Rate = defineComponent({
}; };
}, },
methods: { methods: {
characterRender(node, { index }) { characterRender(node: VNode, { index }) {
const { tooltips } = this.$props; const { tooltips } = this.$props;
if (!tooltips) return node; if (!tooltips) return node;
return <Tooltip title={tooltips[index]}>{node}</Tooltip>; return <Tooltip title={tooltips[index]}>{node}</Tooltip>;
}, },
focus() { focus() {
(this.$refs.refRate as any).focus(); (this.$refs.refRate as HTMLUListElement).focus();
}, },
blur() { blur() {
(this.$refs.refRate as any).blur(); (this.$refs.refRate as HTMLUListElement).blur();
}, },
}, },
render() { render() {

58
components/transfer/list.tsx
View File

@ -7,7 +7,8 @@ import Checkbox from '../checkbox';
import Search from './search'; import Search from './search';
import defaultRenderList from './renderListBody'; import defaultRenderList from './renderListBody';
import triggerEvent from '../_util/triggerEvent'; import triggerEvent from '../_util/triggerEvent';
import { defineComponent, nextTick } from 'vue'; import { defineComponent, HTMLAttributes, nextTick, VNode } from 'vue';
import { RadioChangeEvent } from '../radio/interface';
const defaultRender = () => null; const defaultRender = () => null;
@ -18,7 +19,14 @@ const TransferItem = {
disabled: PropTypes.looseBool, disabled: PropTypes.looseBool,
}; };
function isRenderResultPlainObject(result) { export interface DataSourceItem {
key: string;
title: string;
description?: string;
disabled?: boolean;
}
function isRenderResultPlainObject(result: VNode) {
return ( return (
result && result &&
!isValidElement(result) && !isValidElement(result) &&
@ -55,7 +63,7 @@ export const TransferListProps = {
onScroll: PropTypes.func, onScroll: PropTypes.func,
}; };
function renderListNode(renderList, props) { function renderListNode(renderList: Function, props: any) {
let bodyContent = renderList ? renderList(props) : null; let bodyContent = renderList ? renderList(props) : null;
const customize = !!bodyContent && filterEmpty(bodyContent).length > 0; const customize = !!bodyContent && filterEmpty(bodyContent).length > 0;
if (!customize) { if (!customize) {
@ -103,10 +111,10 @@ export default defineComponent({
}); });
}, },
methods: { methods: {
handleScroll(e) { handleScroll(e: Event) {
this.$emit('scroll', e); this.$emit('scroll', e);
}, },
getCheckStatus(filteredItems) { getCheckStatus(filteredItems: DataSourceItem[]) {
const { checkedKeys } = this.$props; const { checkedKeys } = this.$props;
if (checkedKeys.length === 0) { if (checkedKeys.length === 0) {
return 'none'; return 'none';
@ -117,7 +125,7 @@ export default defineComponent({
return 'part'; return 'part';
}, },
getFilteredItems(dataSource, filterValue) { getFilteredItems(dataSource: DataSourceItem[], filterValue: string) {
const filteredItems = []; const filteredItems = [];
const filteredRenderItems = []; const filteredRenderItems = [];
@ -138,17 +146,17 @@ export default defineComponent({
}, },
getListBody( getListBody(
prefixCls, prefixCls: string,
searchPlaceholder, searchPlaceholder: string,
filterValue, filterValue: string,
filteredItems, filteredItems: DataSourceItem[],
notFoundContent, notFoundContent: unknown,
bodyDom, bodyDom: unknown,
filteredRenderItems, filteredRenderItems: unknown,
checkedKeys, checkedKeys: string[],
renderList, renderList: Function,
showSearch, showSearch: boolean,
disabled, disabled: boolean,
) { ) {
const search = showSearch ? ( const search = showSearch ? (
<div class={`${prefixCls}-body-search-wrapper`}> <div class={`${prefixCls}-body-search-wrapper`}>
@ -165,7 +173,7 @@ export default defineComponent({
let listBody = bodyDom; let listBody = bodyDom;
if (!listBody) { if (!listBody) {
let bodyNode; let bodyNode: HTMLAttributes;
const { onEvents } = splitAttrs(this.$attrs); const { onEvents } = splitAttrs(this.$attrs);
const { bodyContent, customize } = renderListNode(renderList, { const { bodyContent, customize } = renderListNode(renderList, {
...this.$props, ...this.$props,
@ -200,7 +208,7 @@ export default defineComponent({
return listBody; return listBody;
}, },
getCheckBox(filteredItems, showSelectAll, disabled) { getCheckBox(filteredItems: DataSourceItem[], showSelectAll: boolean, disabled: boolean) {
const checkStatus = this.getCheckStatus(filteredItems); const checkStatus = this.getCheckStatus(filteredItems);
const checkedAll = checkStatus === 'all'; const checkedAll = checkStatus === 'all';
const checkAllCheckbox = showSelectAll !== false && ( const checkAllCheckbox = showSelectAll !== false && (
@ -222,12 +230,12 @@ export default defineComponent({
return checkAllCheckbox; return checkAllCheckbox;
}, },
_handleSelect(selectedItem) { _handleSelect(selectedItem: DataSourceItem) {
const { checkedKeys } = this.$props; const { checkedKeys } = this.$props;
const result = checkedKeys.some(key => key === selectedItem.key); const result = checkedKeys.some(key => key === selectedItem.key);
this.handleSelect(selectedItem, !result); this.handleSelect(selectedItem, !result);
}, },
_handleFilter(e) { _handleFilter(e: RadioChangeEvent) {
const { handleFilter } = this.$props; const { handleFilter } = this.$props;
const { const {
target: { value: filterValue }, target: { value: filterValue },
@ -247,11 +255,11 @@ export default defineComponent({
} }
}, 0); }, 0);
}, },
_handleClear(e) { _handleClear(e: Event) {
this.setState({ filterValue: '' }); this.setState({ filterValue: '' });
this.handleClear(e); this.handleClear(e);
}, },
matchFilter(text, item) { matchFilter(text: string, item: DataSourceItem) {
const { filterValue } = this.$data; const { filterValue } = this.$data;
const { filterOption } = this.$props; const { filterOption } = this.$props;
if (filterOption) { if (filterOption) {
@ -259,7 +267,7 @@ export default defineComponent({
} }
return text.indexOf(filterValue) >= 0; return text.indexOf(filterValue) >= 0;
}, },
renderItemHtml(item) { renderItemHtml(item: DataSourceItem) {
const { renderItem = defaultRender } = this.$props; const { renderItem = defaultRender } = this.$props;
const renderResult = renderItem(item); const renderResult = renderItem(item);
const isRenderResultPlain = isRenderResultPlainObject(renderResult); const isRenderResultPlain = isRenderResultPlainObject(renderResult);
@ -269,7 +277,7 @@ export default defineComponent({
item, item,
}; };
}, },
filterNull(arr) { filterNull(arr: unknown[]) {
return arr.filter(item => { return arr.filter(item => {
return item !== null; return item !== null;
}); });

5
components/transfer/renderListBody.tsx
View File

@ -4,6 +4,7 @@ import ListItem from './ListItem';
import PropTypes, { withUndefined } from '../_util/vue-types'; import PropTypes, { withUndefined } from '../_util/vue-types';
import { findDOMNode } from '../_util/props-util'; import { findDOMNode } from '../_util/props-util';
import { getTransitionGroupProps, TransitionGroup } from '../_util/transition'; import { getTransitionGroupProps, TransitionGroup } from '../_util/transition';
import { DataSourceItem } from './list';
const ListBody = defineComponent({ const ListBody = defineComponent({
name: 'ListBody', name: 'ListBody',
inheritAttrs: false, inheritAttrs: false,
@ -61,12 +62,12 @@ const ListBody = defineComponent({
raf.cancel(this.lazyId); raf.cancel(this.lazyId);
}, },
methods: { methods: {
handleItemSelect(item) { handleItemSelect(item: DataSourceItem) {
const { selectedKeys } = this.$props; const { selectedKeys } = this.$props;
const checked = selectedKeys.indexOf(item.key) >= 0; const checked = selectedKeys.indexOf(item.key) >= 0;
this.$emit('itemSelect', item.key, !checked); this.$emit('itemSelect', item.key, !checked);
}, },
handleScroll(e) { handleScroll(e: Event) {
this.$emit('scroll', e); this.$emit('scroll', e);
}, },
}, },

4
components/transfer/search.tsx
View File

@ -22,10 +22,10 @@ export default defineComponent({
placeholder: '', placeholder: '',
}), }),
methods: { methods: {
handleChange(e) { handleChange(e: Event) {
this.$emit('change', e); this.$emit('change', e);
}, },
handleClear2(e) { handleClear2(e: Event) {
e.preventDefault(); e.preventDefault();
const { handleClear, disabled } = this.$props; const { handleClear, disabled } = this.$props;
if (!disabled && handleClear) { if (!disabled && handleClear) {