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

perf: update listeners

pull/1741/head
tangjinzhou 2020-01-18 21:34:23 +08:00
parent 8b6b506110
commit 594dc07dff
24 changed files with 93 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/_util/props-util.js
View File

@ -201,7 +201,7 @@ export function getEvents(child) {
// use getListeners instead this.$listeners // use getListeners instead this.$listeners
// https://github.com/vueComponent/ant-design-vue/issues/1705 // https://github.com/vueComponent/ant-design-vue/issues/1705
export function getListeners(context) { export function getListeners(context) {
return context.$vnode ? context.$vnode.componentOptions.listeners || {} : context.$listeners; return (context.$vnode ? context.$vnode.componentOptions.listeners : context.$listeners) || {};
} }
export function getClass(ele) { export function getClass(ele) {
let data = {}; let data = {};

6
components/_util/proxyComponent.jsx
View File

@ -1,5 +1,5 @@
import PropTypes from './vue-types'; import PropTypes from './vue-types';
import { getOptionProps } from './props-util'; import { getOptionProps, getListeners } from './props-util';
function getDisplayName(WrappedComponent) { function getDisplayName(WrappedComponent) {
return WrappedComponent.name || 'Component'; return WrappedComponent.name || 'Component';
@ -23,7 +23,7 @@ export default function wrapWithConnect(WrappedComponent) {
}, },
}, },
render() { render() {
const { $listeners, $slots = {}, $scopedSlots } = this; const { $slots = {}, $scopedSlots } = this;
const props = getOptionProps(this); const props = getOptionProps(this);
const wrapProps = { const wrapProps = {
props: { props: {
@ -32,7 +32,7 @@ export default function wrapWithConnect(WrappedComponent) {
componentWillReceiveProps: { ...props }, componentWillReceiveProps: { ...props },
children: $slots.default || props.children || [], children: $slots.default || props.children || [],
}, },
on: $listeners, on: getListeners(this),
}; };
if (Object.keys($scopedSlots).length) { if (Object.keys($scopedSlots).length) {
wrapProps.scopedSlots = $scopedSlots; wrapProps.scopedSlots = $scopedSlots;

6
components/_util/store/connect.jsx
View File

@ -1,6 +1,6 @@
import shallowEqual from 'shallowequal'; import shallowEqual from 'shallowequal';
import omit from 'omit.js'; import omit from 'omit.js';
import { getOptionProps } from '../props-util'; import { getOptionProps, getListeners } from '../props-util';
import PropTypes from '../vue-types'; import PropTypes from '../vue-types';
import proxyComponent from '../proxyComponent'; import proxyComponent from '../proxyComponent';
@ -81,7 +81,7 @@ export default function connect(mapStateToProps) {
}, },
render() { render() {
this.preProps = { ...this.$props }; this.preProps = { ...this.$props };
const { $listeners, $slots = {}, $scopedSlots, subscribed, store } = this; const { $slots = {}, $scopedSlots, subscribed, store } = this;
const props = getOptionProps(this); const props = getOptionProps(this);
this.preProps = { ...omit(props, ['__propsSymbol__']) }; this.preProps = { ...omit(props, ['__propsSymbol__']) };
const wrapProps = { const wrapProps = {
@ -90,7 +90,7 @@ export default function connect(mapStateToProps) {
...subscribed, ...subscribed,
store, store,
}, },
on: $listeners, on: getListeners(this),
scopedSlots: $scopedSlots, scopedSlots: $scopedSlots,
}; };
return ( return (

14
components/auto-complete/InputElement.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import { getOptionProps } from '../_util/props-util'; import { getOptionProps, getListeners } from '../_util/props-util';
function chaining(...fns) { function chaining(...fns) {
return function(...args) { return function(...args) {
// eslint-disable-line // eslint-disable-line
@ -14,6 +14,7 @@ function chaining(...fns) {
} }
export default { export default {
name: 'InputElement', name: 'InputElement',
inheritAttrs: false,
props: { props: {
value: PropTypes.any, value: PropTypes.any,
disabled: PropTypes.bool, disabled: PropTypes.bool,
@ -30,16 +31,17 @@ export default {
}, },
render() { render() {
const { $slots = {}, $listeners = {}, $attrs = {} } = this; const { $slots = {}, $attrs = {} } = this;
const listeners = getListeners(this);
const props = getOptionProps(this); const props = getOptionProps(this);
const value = props.value === undefined ? '' : props.value; const value = props.value === undefined ? '' : props.value;
const children = $slots.default[0]; const children = $slots.default[0];
const { componentOptions = {} } = $slots.default[0]; const { componentOptions = {} } = $slots.default[0];
const { listeners = {} } = componentOptions; const { listeners: events = {} } = componentOptions;
const newEvent = { ...listeners }; const newEvent = { ...events };
for (const [eventName, event] of Object.entries($listeners)) { for (const [eventName, event] of Object.entries(listeners)) {
newEvent[eventName] = chaining(event, listeners[eventName]); newEvent[eventName] = chaining(event, events[eventName]);
} }
return cloneElement(children, { return cloneElement(children, {

4
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -23,7 +23,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div> <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
<ul> <ul>
<li class="ant-select-search ant-select-search--inline"> <li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><i slot="suffix" aria-label="icon: search" class="certain-category-icon anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div> <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><i slot="suffix" aria-label="icon: search" class="certain-category-icon anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li> </li>
</ul> </ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span> </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
@ -84,7 +84,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div> <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
<ul> <ul>
<li class="ant-select-search ant-select-search--inline"> <li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div> <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li> </li>
</ul> </ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span> </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>

12
components/auto-complete/index.jsx
View File

@ -9,6 +9,7 @@ import {
getOptionProps, getOptionProps,
filterEmpty, filterEmpty,
isValidElement, isValidElement,
getListeners,
} from '../_util/props-util'; } from '../_util/props-util';
import Base from '../base'; import Base from '../base';
@ -91,14 +92,7 @@ const AutoComplete = {
}, },
render() { render() {
const { const { size, prefixCls: customizePrefixCls, optionLabelProp, dataSource, $slots } = this;
size,
prefixCls: customizePrefixCls,
optionLabelProp,
dataSource,
$slots,
$listeners,
} = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('select', customizePrefixCls); const prefixCls = getPrefixCls('select', customizePrefixCls);
@ -143,7 +137,7 @@ const AutoComplete = {
}, },
class: cls, class: cls,
ref: 'select', ref: 'select',
on: $listeners, on: getListeners(this),
}; };
return <Select {...selectProps}>{options}</Select>; return <Select {...selectProps}>{options}</Select>;
}, },

3
components/avatar/Avatar.jsx
View File

@ -1,5 +1,6 @@
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import Icon from '../icon'; import Icon from '../icon';
import { getListeners } from '../_util/props-util';
export default { export default {
name: 'AAvatar', name: 'AAvatar',
@ -155,7 +156,7 @@ export default {
} }
} }
return ( return (
<span {...{ on: this.$listeners, class: classString, style: sizeStyle }}>{children}</span> <span {...{ on: getListeners(this), class: classString, style: sizeStyle }}>{children}</span>
); );
}, },
}; };

5
components/back-top/index.jsx
View File

@ -6,6 +6,7 @@ import BaseMixin from '../_util/BaseMixin';
import getTransitionProps from '../_util/getTransitionProps'; import getTransitionProps from '../_util/getTransitionProps';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import Base from '../base'; import Base from '../base';
import { getListeners } from '../_util/props-util';
const easeInOutCubic = (t, b, c, d) => { const easeInOutCubic = (t, b, c, d) => {
const cc = c - b; const cc = c - b;
@ -106,7 +107,7 @@ const BackTop = {
}, },
render() { render() {
const { prefixCls: customizePrefixCls, $slots, $listeners } = this; const { prefixCls: customizePrefixCls, $slots } = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('back-top', customizePrefixCls); const prefixCls = getPrefixCls('back-top', customizePrefixCls);
@ -118,7 +119,7 @@ const BackTop = {
); );
const divProps = { const divProps = {
on: { on: {
...$listeners, ...getListeners(this),
click: this.scrollToTop, click: this.scrollToTop,
}, },
class: prefixCls, class: prefixCls,

11
components/badge/Badge.jsx
View File

@ -1,7 +1,12 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import ScrollNumber from './ScrollNumber'; import ScrollNumber from './ScrollNumber';
import classNames from 'classnames'; import classNames from 'classnames';
import { initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/props-util'; import {
initDefaultProps,
filterEmpty,
getComponentFromProp,
getListeners,
} from '../_util/props-util';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import getTransitionProps from '../_util/getTransitionProps'; import getTransitionProps from '../_util/getTransitionProps';
import isNumeric from '../_util/isNumeric'; import isNumeric from '../_util/isNumeric';
@ -178,7 +183,7 @@ export default {
if (!children.length && status) { if (!children.length && status) {
return ( return (
<span <span
{...{ on: this.$listeners }} {...{ on: getListeners(this) }}
class={this.getBadgeClassName(prefixCls)} class={this.getBadgeClassName(prefixCls)}
style={this.getStyleWithOffset()} style={this.getStyleWithOffset()}
> >
@ -191,7 +196,7 @@ export default {
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : ''); const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '');
return ( return (
<span {...{ on: this.$listeners }} class={this.getBadgeClassName(prefixCls)}> <span {...{ on: getListeners(this) }} class={this.getBadgeClassName(prefixCls)}>
{children} {children}
<transition {...transitionProps}>{scrollNumber}</transition> <transition {...transitionProps}>{scrollNumber}</transition>
{statusText} {statusText}

17
components/button/button.jsx
View File

@ -1,7 +1,7 @@
import Wave from '../_util/wave'; import Wave from '../_util/wave';
import Icon from '../icon'; import Icon from '../icon';
import buttonTypes from './buttonTypes'; import buttonTypes from './buttonTypes';
import { filterEmpty } from '../_util/props-util'; import { filterEmpty, getListeners } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/; const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
@ -128,18 +128,7 @@ export default {
}, },
}, },
render() { render() {
const { const { type, htmlType, classes, icon, disabled, handleClick, sLoading, $slots, $attrs } = this;
type,
htmlType,
classes,
icon,
disabled,
handleClick,
sLoading,
$slots,
$attrs,
$listeners,
} = this;
const buttonProps = { const buttonProps = {
attrs: { attrs: {
...$attrs, ...$attrs,
@ -147,7 +136,7 @@ export default {
}, },
class: classes, class: classes,
on: { on: {
...$listeners, ...getListeners(this),
click: handleClick, click: handleClick,
}, },
}; };

6
components/calendar/index.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { getOptionProps, hasProp, initDefaultProps } from '../_util/props-util'; import { getOptionProps, hasProp, initDefaultProps, getListeners } from '../_util/props-util';
import * as moment from 'moment'; import * as moment from 'moment';
import FullCalendar from '../vc-calendar/src/FullCalendar'; import FullCalendar from '../vc-calendar/src/FullCalendar';
import LocaleReceiver from '../locale-provider/LocaleReceiver'; import LocaleReceiver from '../locale-provider/LocaleReceiver';
@ -172,7 +172,7 @@ const Calendar = {
}, },
renderCalendar(locale, localeCode) { renderCalendar(locale, localeCode) {
const props = getOptionProps(this); const props = getOptionProps(this);
const { sValue: value, sMode: mode, $listeners, $scopedSlots } = this; const { sValue: value, sMode: mode, $scopedSlots } = this;
if (value && localeCode) { if (value && localeCode) {
value.locale(localeCode); value.locale(localeCode);
} }
@ -220,7 +220,7 @@ const Calendar = {
disabledDate, disabledDate,
}, },
on: { on: {
...$listeners, ...getListeners(this),
select: this.onSelect, select: this.onSelect,
}, },
}; };

11
components/card/Card.jsx
View File

@ -4,7 +4,12 @@ import Row from '../row';
import Col from '../col'; import Col from '../col';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import addEventListener from '../_util/Dom/addEventListener'; import addEventListener from '../_util/Dom/addEventListener';
import { getComponentFromProp, getSlotOptions, filterEmpty } from '../_util/props-util'; import {
getComponentFromProp,
getSlotOptions,
filterEmpty,
getListeners,
} from '../_util/props-util';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
@ -112,7 +117,7 @@ export default {
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('card', customizePrefixCls); const prefixCls = getPrefixCls('card', customizePrefixCls);
const { $slots, $scopedSlots, $listeners } = this; const { $slots, $scopedSlots } = this;
const classString = { const classString = {
[`${prefixCls}`]: true, [`${prefixCls}`]: true,
@ -234,7 +239,7 @@ export default {
<div <div
class={classString} class={classString}
ref="cardContainerRef" ref="cardContainerRef"
{...{ on: omit($listeners, ['tabChange', 'tab-change']) }} {...{ on: omit(getListeners(this), ['tabChange', 'tab-change']) }}
> >
{head} {head}
{coverDom} {coverDom}

3
components/card/Grid.jsx
View File

@ -1,5 +1,6 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import { getListeners } from '../_util/props-util';
export default { export default {
name: 'ACardGrid', name: 'ACardGrid',
@ -20,7 +21,7 @@ export default {
[`${prefixCls}-grid`]: true, [`${prefixCls}-grid`]: true,
}; };
return ( return (
<div {...{ on: this.$listeners }} class={classString}> <div {...{ on: getListeners(this) }} class={classString}>
{this.$slots.default} {this.$slots.default}
</div> </div>
); );

4
components/card/Meta.jsx
View File

@ -1,5 +1,5 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getComponentFromProp } from '../_util/props-util'; import { getComponentFromProp, getListeners } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
export default { export default {
@ -39,7 +39,7 @@ export default {
</div> </div>
) : null; ) : null;
return ( return (
<div {...{ on: this.$listeners }} class={classString}> <div {...{ on: getListeners(this) }} class={classString}>
{avatarDom} {avatarDom}
{MetaDetail} {MetaDetail}
</div> </div>

11
components/carousel/index.jsx
View File

@ -1,6 +1,11 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { initDefaultProps, getComponentFromProp, filterEmpty } from '../_util/props-util'; import {
initDefaultProps,
getComponentFromProp,
filterEmpty,
getListeners,
} from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import Base from '../base'; import Base from '../base';
@ -132,7 +137,7 @@ const Carousel = {
const props = { const props = {
...this.$props, ...this.$props,
}; };
const { $slots, $listeners } = this; const { $slots } = this;
if (props.effect === 'fade') { if (props.effect === 'fade') {
props.fade = true; props.fade = true;
@ -150,7 +155,7 @@ const Carousel = {
nextArrow: getComponentFromProp(this, 'nextArrow'), nextArrow: getComponentFromProp(this, 'nextArrow'),
prevArrow: getComponentFromProp(this, 'prevArrow'), prevArrow: getComponentFromProp(this, 'prevArrow'),
}, },
on: $listeners, on: getListeners(this),
scopedSlots: this.$scopedSlots, scopedSlots: this.$scopedSlots,
}; };

5
components/cascader/index.jsx
View File

@ -15,6 +15,7 @@ import {
getAttrs, getAttrs,
getComponentFromProp, getComponentFromProp,
isValidElement, isValidElement,
getListeners,
} from '../_util/props-util'; } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
@ -372,7 +373,7 @@ const Cascader = {
}, },
render() { render() {
const { $slots, sPopupVisible, inputValue, $listeners, configProvider, localeData } = this; const { $slots, sPopupVisible, inputValue, configProvider, localeData } = this;
const { sValue: value, inputFocused } = this.$data; const { sValue: value, inputFocused } = this.$data;
const props = getOptionProps(this); const props = getOptionProps(this);
let suffixIcon = getComponentFromProp(this, 'suffixIcon'); let suffixIcon = getComponentFromProp(this, 'suffixIcon');
@ -542,7 +543,7 @@ const Cascader = {
loadingIcon, loadingIcon,
}, },
on: { on: {
...$listeners, ...getListeners(this),
popupVisibleChange: this.handlePopupVisibleChange, popupVisibleChange: this.handlePopupVisibleChange,
change: this.handleChange, change: this.handleChange,
}, },

6
components/checkbox/Checkbox.jsx
View File

@ -1,7 +1,7 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import classNames from 'classnames'; import classNames from 'classnames';
import VcCheckbox from '../vc-checkbox'; import VcCheckbox from '../vc-checkbox';
import { getOptionProps, getAttrs } from '../_util/props-util'; import { getOptionProps, getAttrs, getListeners } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
function noop() {} function noop() {}
@ -43,10 +43,10 @@ export default {
}, },
render() { render() {
const { checkboxGroupContext: checkboxGroup, $listeners, $slots } = this; const { checkboxGroupContext: checkboxGroup, $slots } = this;
const props = getOptionProps(this); const props = getOptionProps(this);
const children = $slots.default; const children = $slots.default;
const { mouseenter = noop, mouseleave = noop, input, ...restListeners } = $listeners; const { mouseenter = noop, mouseleave = noop, input, ...restListeners } = getListeners(this);
const { prefixCls: customizePrefixCls, indeterminate, ...restProps } = props; const { prefixCls: customizePrefixCls, indeterminate, ...restProps } = props;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('checkbox', customizePrefixCls); const prefixCls = getPrefixCls('checkbox', customizePrefixCls);

5
components/collapse/Collapse.jsx
View File

@ -4,6 +4,7 @@ import {
initDefaultProps, initDefaultProps,
getComponentFromProp, getComponentFromProp,
isValidElement, isValidElement,
getListeners,
} from '../_util/props-util'; } from '../_util/props-util';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import VcCollapse, { collapseProps } from '../vc-collapse'; import VcCollapse, { collapseProps } from '../vc-collapse';
@ -37,7 +38,7 @@ export default {
}, },
}, },
render() { render() {
const { prefixCls: customizePrefixCls, bordered, $listeners } = this; const { prefixCls: customizePrefixCls, bordered } = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('collapse', customizePrefixCls); const prefixCls = getPrefixCls('collapse', customizePrefixCls);
@ -51,7 +52,7 @@ export default {
expandIcon: panelProps => this.renderExpandIcon(panelProps, prefixCls), expandIcon: panelProps => this.renderExpandIcon(panelProps, prefixCls),
}, },
class: collapseClassName, class: collapseClassName,
on: $listeners, on: getListeners(this),
}; };
return <VcCollapse {...rcCollapeProps}>{this.$slots.default}</VcCollapse>; return <VcCollapse {...rcCollapeProps}>{this.$slots.default}</VcCollapse>;
}, },

6
components/collapse/CollapsePanel.jsx
View File

@ -1,4 +1,4 @@
import { getOptionProps, getComponentFromProp } from '../_util/props-util'; import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
import VcCollapse, { panelProps } from '../vc-collapse'; import VcCollapse, { panelProps } from '../vc-collapse';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
@ -11,7 +11,7 @@ export default {
configProvider: { default: () => ConfigConsumerProps }, configProvider: { default: () => ConfigConsumerProps },
}, },
render() { render() {
const { prefixCls: customizePrefixCls, showArrow = true, $listeners } = this; const { prefixCls: customizePrefixCls, showArrow = true } = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('collapse', customizePrefixCls); const prefixCls = getPrefixCls('collapse', customizePrefixCls);
@ -24,7 +24,7 @@ export default {
prefixCls, prefixCls,
}, },
class: collapsePanelClassName, class: collapsePanelClassName,
on: $listeners, on: getListeners(this),
}; };
const header = getComponentFromProp(this, 'header'); const header = getComponentFromProp(this, 'header');
return ( return (

4
components/comment/index.jsx
View File

@ -1,5 +1,5 @@
import PropsTypes from '../_util/vue-types'; import PropsTypes from '../_util/vue-types';
import { initDefaultProps, getComponentFromProp } from '../_util/props-util'; import { initDefaultProps, getComponentFromProp, getListeners } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import Base from '../base'; import Base from '../base';
export const CommentProps = { export const CommentProps = {
@ -81,7 +81,7 @@ const Comment = {
); );
const children = this.$slots.default; const children = this.$slots.default;
return ( return (
<div class={prefixCls} {...{ on: this.$listeners }}> <div class={prefixCls} {...{ on: getListeners(this) }}>
{comment} {comment}
{children ? this.renderNested(prefixCls, children) : null} {children ? this.renderNested(prefixCls, children) : null}
</div> </div>

8
components/date-picker/createPicker.js
View File

@ -14,6 +14,7 @@ import {
mergeProps, mergeProps,
getComponentFromProp, getComponentFromProp,
isValidElement, isValidElement,
getListeners,
} from '../_util/props-util'; } from '../_util/props-util';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
@ -131,11 +132,12 @@ export default function createPicker(TheCalendar, props) {
}, },
render() { render() {
const { $listeners, $scopedSlots } = this; const { $scopedSlots } = this;
const { sValue: value, showDate, _open: open } = this.$data; const { sValue: value, showDate, _open: open } = this.$data;
let suffixIcon = getComponentFromProp(this, 'suffixIcon'); let suffixIcon = getComponentFromProp(this, 'suffixIcon');
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon; suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
const { panelChange = noop, focus = noop, blur = noop, ok = noop } = $listeners; const listeners = getListeners(this);
const { panelChange = noop, focus = noop, blur = noop, ok = noop } = listeners;
const props = getOptionProps(this); const props = getOptionProps(this);
const { prefixCls: customizePrefixCls, locale, localeCode } = props; const { prefixCls: customizePrefixCls, locale, localeCode } = props;
@ -243,7 +245,7 @@ export default function createPicker(TheCalendar, props) {
prefixCls: `${prefixCls}-picker-container`, prefixCls: `${prefixCls}-picker-container`,
}, },
on: { on: {
...omit($listeners, 'change'), ...omit(listeners, 'change'),
...pickerProps.on, ...pickerProps.on,
open, open,
onOpenChange: this.handleOpenChange, onOpenChange: this.handleOpenChange,

3
components/layout/Sider.jsx
View File

@ -20,6 +20,7 @@ import {
getOptionProps, getOptionProps,
hasProp, hasProp,
getComponentFromProp, getComponentFromProp,
getListeners,
} from '../_util/props-util'; } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import isNumeric from '../_util/isNumeric'; import isNumeric from '../_util/isNumeric';
@ -234,7 +235,7 @@ export default {
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0, [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
}); });
const divProps = { const divProps = {
on: this.$listeners, on: getListeners(this),
class: siderCls, class: siderCls,
style: divStyle, style: divStyle,
}; };

16
components/vc-tree-select/src/Selector/MultipleSelector/index.jsx
View File

@ -3,7 +3,7 @@ import { createRef } from '../../util';
import generateSelector, { selectorPropTypes } from '../../Base/BaseSelector'; import generateSelector, { selectorPropTypes } from '../../Base/BaseSelector';
import SearchInput from '../../SearchInput'; import SearchInput from '../../SearchInput';
import Selection from './Selection'; import Selection from './Selection';
import { getComponentFromProp } from '../../../../_util/props-util'; import { getComponentFromProp, getListeners } from '../../../../_util/props-util';
import getTransitionProps from '../../../../_util/getTransitionProps'; import getTransitionProps from '../../../../_util/getTransitionProps';
import BaseMixin from '../../../../_util/BaseMixin'; import BaseMixin from '../../../../_util/BaseMixin';
const TREE_SELECT_EMPTY_VALUE_KEY = 'RC_TREE_SELECT_EMPTY_VALUE_KEY'; const TREE_SELECT_EMPTY_VALUE_KEY = 'RC_TREE_SELECT_EMPTY_VALUE_KEY';
@ -87,10 +87,9 @@ const MultipleSelector = {
} = this.$props; } = this.$props;
const { const {
vcTreeSelect: { onMultipleSelectorRemove }, vcTreeSelect: { onMultipleSelectorRemove },
$listeners,
$slots, $slots,
} = this; } = this;
const listeners = getListeners(this);
// Check if `maxTagCount` is set // Check if `maxTagCount` is set
let myValueList = selectorValueList; let myValueList = selectorValueList;
if (maxTagCount >= 0) { if (maxTagCount >= 0) {
@ -105,7 +104,7 @@ const MultipleSelector = {
label, label,
value, value,
}, },
on: { ...$listeners, remove: onMultipleSelectorRemove }, on: { ...listeners, remove: onMultipleSelectorRemove },
}} }}
key={value || TREE_SELECT_EMPTY_VALUE_KEY} key={value || TREE_SELECT_EMPTY_VALUE_KEY}
> >
@ -134,7 +133,7 @@ const MultipleSelector = {
label: content, label: content,
value: null, value: null,
}, },
on: $listeners, on: listeners,
}} }}
key="rc-tree-select-internal-max-tag-counter" key="rc-tree-select-internal-max-tag-counter"
> >
@ -153,7 +152,7 @@ const MultipleSelector = {
...this.$props, ...this.$props,
needAlign: true, needAlign: true,
}, },
on: $listeners, on: listeners,
directives: [ directives: [
{ {
name: 'ant-ref', name: 'ant-ref',
@ -187,7 +186,8 @@ const MultipleSelector = {
}, },
render() { render() {
const { $listeners, $slots } = this; const { $slots } = this;
const listeners = getListeners(this);
return ( return (
<Selector <Selector
{...{ {...{
@ -198,7 +198,7 @@ const MultipleSelector = {
renderSelection: this.renderSelection, renderSelection: this.renderSelection,
renderPlaceholder: this._renderPlaceholder, renderPlaceholder: this._renderPlaceholder,
}, },
on: $listeners, on: listeners,
}} }}
> >
{$slots.default} {$slots.default}

9
components/vc-trigger/Popup.jsx
View File

@ -4,6 +4,7 @@ import PopupInner from './PopupInner';
import LazyRenderBox from './LazyRenderBox'; import LazyRenderBox from './LazyRenderBox';
import animate from '../_util/css-animation'; import animate from '../_util/css-animation';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { getListeners } from '../_util/props-util';
export default { export default {
mixins: [BaseMixin], mixins: [BaseMixin],
@ -72,7 +73,8 @@ export default {
this.currentAlignClassName = currentAlignClassName; this.currentAlignClassName = currentAlignClassName;
popupDomNode.className = this.getClassName(currentAlignClassName); popupDomNode.className = this.getClassName(currentAlignClassName);
} }
this.$listeners.align && this.$listeners.align(popupDomNode, align); const listeners = getListeners(this);
listeners.align && listeners.align(popupDomNode, align);
}, },
// Record size if stretch needed // Record size if stretch needed
@ -148,7 +150,7 @@ export default {
return `${this.$props.prefixCls} ${this.$props.popupClassName} ${currentAlignClassName}`; return `${this.$props.prefixCls} ${this.$props.popupClassName} ${currentAlignClassName}`;
}, },
getPopupElement() { getPopupElement() {
const { $props: props, $slots, $listeners, getTransitionName } = this; const { $props: props, $slots, getTransitionName } = this;
const { stretchChecked, targetHeight, targetWidth } = this.$data; const { stretchChecked, targetHeight, targetWidth } = this.$data;
const { const {
@ -161,7 +163,6 @@ export default {
destroyPopupOnHide, destroyPopupOnHide,
stretch, stretch,
} = props; } = props;
// const { mouseenter, mouseleave } = $listeners
const className = this.getClassName( const className = this.getClassName(
this.currentAlignClassName || getClassNameFromAlign(align), this.currentAlignClassName || getClassNameFromAlign(align),
); );
@ -201,7 +202,7 @@ export default {
// hiddenClassName, // hiddenClassName,
}, },
class: className, class: className,
on: $listeners, on: getListeners(this),
ref: 'popupInstance', ref: 'popupInstance',
style: { ...sizeStyle, ...popupStyle, ...this.getZIndexStyle() }, style: { ...sizeStyle, ...popupStyle, ...this.getZIndexStyle() },
}; };