diff --git a/components/_util/props-util.js b/components/_util/props-util.js index 5ab8f07dd..4868f59c0 100644 --- a/components/_util/props-util.js +++ b/components/_util/props-util.js @@ -201,7 +201,7 @@ export function getEvents(child) { // use getListeners instead this.$listeners // https://github.com/vueComponent/ant-design-vue/issues/1705 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) { let data = {}; diff --git a/components/_util/proxyComponent.jsx b/components/_util/proxyComponent.jsx index e8aeee39d..5a13daa8a 100644 --- a/components/_util/proxyComponent.jsx +++ b/components/_util/proxyComponent.jsx @@ -1,5 +1,5 @@ import PropTypes from './vue-types'; -import { getOptionProps } from './props-util'; +import { getOptionProps, getListeners } from './props-util'; function getDisplayName(WrappedComponent) { return WrappedComponent.name || 'Component'; @@ -23,7 +23,7 @@ export default function wrapWithConnect(WrappedComponent) { }, }, render() { - const { $listeners, $slots = {}, $scopedSlots } = this; + const { $slots = {}, $scopedSlots } = this; const props = getOptionProps(this); const wrapProps = { props: { @@ -32,7 +32,7 @@ export default function wrapWithConnect(WrappedComponent) { componentWillReceiveProps: { ...props }, children: $slots.default || props.children || [], }, - on: $listeners, + on: getListeners(this), }; if (Object.keys($scopedSlots).length) { wrapProps.scopedSlots = $scopedSlots; diff --git a/components/_util/store/connect.jsx b/components/_util/store/connect.jsx index fb2274980..3fab39ef6 100644 --- a/components/_util/store/connect.jsx +++ b/components/_util/store/connect.jsx @@ -1,6 +1,6 @@ import shallowEqual from 'shallowequal'; import omit from 'omit.js'; -import { getOptionProps } from '../props-util'; +import { getOptionProps, getListeners } from '../props-util'; import PropTypes from '../vue-types'; import proxyComponent from '../proxyComponent'; @@ -81,7 +81,7 @@ export default function connect(mapStateToProps) { }, render() { this.preProps = { ...this.$props }; - const { $listeners, $slots = {}, $scopedSlots, subscribed, store } = this; + const { $slots = {}, $scopedSlots, subscribed, store } = this; const props = getOptionProps(this); this.preProps = { ...omit(props, ['__propsSymbol__']) }; const wrapProps = { @@ -90,7 +90,7 @@ export default function connect(mapStateToProps) { ...subscribed, store, }, - on: $listeners, + on: getListeners(this), scopedSlots: $scopedSlots, }; return ( diff --git a/components/auto-complete/InputElement.jsx b/components/auto-complete/InputElement.jsx index 10cdefcc4..ab84209e2 100644 --- a/components/auto-complete/InputElement.jsx +++ b/components/auto-complete/InputElement.jsx @@ -1,6 +1,6 @@ import PropTypes from '../_util/vue-types'; import { cloneElement } from '../_util/vnode'; -import { getOptionProps } from '../_util/props-util'; +import { getOptionProps, getListeners } from '../_util/props-util'; function chaining(...fns) { return function(...args) { // eslint-disable-line @@ -14,6 +14,7 @@ function chaining(...fns) { } export default { name: 'InputElement', + inheritAttrs: false, props: { value: PropTypes.any, disabled: PropTypes.bool, @@ -30,16 +31,17 @@ export default { }, render() { - const { $slots = {}, $listeners = {}, $attrs = {} } = this; + const { $slots = {}, $attrs = {} } = this; + const listeners = getListeners(this); const props = getOptionProps(this); const value = props.value === undefined ? '' : props.value; const children = $slots.default[0]; const { componentOptions = {} } = $slots.default[0]; - const { listeners = {} } = componentOptions; - const newEvent = { ...listeners }; + const { listeners: events = {} } = componentOptions; + const newEvent = { ...events }; - for (const [eventName, event] of Object.entries($listeners)) { - newEvent[eventName] = chaining(event, listeners[eventName]); + for (const [eventName, event] of Object.entries(listeners)) { + newEvent[eventName] = chaining(event, events[eventName]); } return cloneElement(children, { diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap index be5255332..c96a8fb2a 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap @@ -23,7 +23,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
input here
@@ -84,7 +84,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
input here
diff --git a/components/auto-complete/index.jsx b/components/auto-complete/index.jsx index a138b919f..4988d3baa 100644 --- a/components/auto-complete/index.jsx +++ b/components/auto-complete/index.jsx @@ -9,6 +9,7 @@ import { getOptionProps, filterEmpty, isValidElement, + getListeners, } from '../_util/props-util'; import Base from '../base'; @@ -91,14 +92,7 @@ const AutoComplete = { }, render() { - const { - size, - prefixCls: customizePrefixCls, - optionLabelProp, - dataSource, - $slots, - $listeners, - } = this; + const { size, prefixCls: customizePrefixCls, optionLabelProp, dataSource, $slots } = this; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('select', customizePrefixCls); @@ -143,7 +137,7 @@ const AutoComplete = { }, class: cls, ref: 'select', - on: $listeners, + on: getListeners(this), }; return ; }, diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx index b8bd25646..c13d1d1b6 100644 --- a/components/avatar/Avatar.jsx +++ b/components/avatar/Avatar.jsx @@ -1,5 +1,6 @@ import { ConfigConsumerProps } from '../config-provider'; import Icon from '../icon'; +import { getListeners } from '../_util/props-util'; export default { name: 'AAvatar', @@ -155,7 +156,7 @@ export default { } } return ( - {children} + {children} ); }, }; diff --git a/components/back-top/index.jsx b/components/back-top/index.jsx index c3160ea51..54cd744b0 100644 --- a/components/back-top/index.jsx +++ b/components/back-top/index.jsx @@ -6,6 +6,7 @@ import BaseMixin from '../_util/BaseMixin'; import getTransitionProps from '../_util/getTransitionProps'; import { ConfigConsumerProps } from '../config-provider'; import Base from '../base'; +import { getListeners } from '../_util/props-util'; const easeInOutCubic = (t, b, c, d) => { const cc = c - b; @@ -106,7 +107,7 @@ const BackTop = { }, render() { - const { prefixCls: customizePrefixCls, $slots, $listeners } = this; + const { prefixCls: customizePrefixCls, $slots } = this; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('back-top', customizePrefixCls); @@ -118,7 +119,7 @@ const BackTop = { ); const divProps = { on: { - ...$listeners, + ...getListeners(this), click: this.scrollToTop, }, class: prefixCls, diff --git a/components/badge/Badge.jsx b/components/badge/Badge.jsx index 8fb33aad9..7041cacd0 100644 --- a/components/badge/Badge.jsx +++ b/components/badge/Badge.jsx @@ -1,7 +1,12 @@ import PropTypes from '../_util/vue-types'; import ScrollNumber from './ScrollNumber'; 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 getTransitionProps from '../_util/getTransitionProps'; import isNumeric from '../_util/isNumeric'; @@ -178,7 +183,7 @@ export default { if (!children.length && status) { return ( @@ -191,7 +196,7 @@ export default { const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : ''); return ( - + {children} {scrollNumber} {statusText} diff --git a/components/button/button.jsx b/components/button/button.jsx index b67000484..06a39a143 100644 --- a/components/button/button.jsx +++ b/components/button/button.jsx @@ -1,7 +1,7 @@ import Wave from '../_util/wave'; import Icon from '../icon'; import buttonTypes from './buttonTypes'; -import { filterEmpty } from '../_util/props-util'; +import { filterEmpty, getListeners } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/; @@ -128,18 +128,7 @@ export default { }, }, render() { - const { - type, - htmlType, - classes, - icon, - disabled, - handleClick, - sLoading, - $slots, - $attrs, - $listeners, - } = this; + const { type, htmlType, classes, icon, disabled, handleClick, sLoading, $slots, $attrs } = this; const buttonProps = { attrs: { ...$attrs, @@ -147,7 +136,7 @@ export default { }, class: classes, on: { - ...$listeners, + ...getListeners(this), click: handleClick, }, }; diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx index 7c094dcf5..54fd1183a 100644 --- a/components/calendar/index.jsx +++ b/components/calendar/index.jsx @@ -1,6 +1,6 @@ import PropTypes from '../_util/vue-types'; 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 FullCalendar from '../vc-calendar/src/FullCalendar'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; @@ -172,7 +172,7 @@ const Calendar = { }, renderCalendar(locale, localeCode) { const props = getOptionProps(this); - const { sValue: value, sMode: mode, $listeners, $scopedSlots } = this; + const { sValue: value, sMode: mode, $scopedSlots } = this; if (value && localeCode) { value.locale(localeCode); } @@ -220,7 +220,7 @@ const Calendar = { disabledDate, }, on: { - ...$listeners, + ...getListeners(this), select: this.onSelect, }, }; diff --git a/components/card/Card.jsx b/components/card/Card.jsx index 5d48c2928..1b245a42a 100644 --- a/components/card/Card.jsx +++ b/components/card/Card.jsx @@ -4,7 +4,12 @@ import Row from '../row'; import Col from '../col'; import PropTypes from '../_util/vue-types'; 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 BaseMixin from '../_util/BaseMixin'; import { ConfigConsumerProps } from '../config-provider'; @@ -112,7 +117,7 @@ export default { const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('card', customizePrefixCls); - const { $slots, $scopedSlots, $listeners } = this; + const { $slots, $scopedSlots } = this; const classString = { [`${prefixCls}`]: true, @@ -234,7 +239,7 @@ export default {
{head} {coverDom} diff --git a/components/card/Grid.jsx b/components/card/Grid.jsx index f00e40797..26b276aa3 100644 --- a/components/card/Grid.jsx +++ b/components/card/Grid.jsx @@ -1,5 +1,6 @@ import PropTypes from '../_util/vue-types'; import { ConfigConsumerProps } from '../config-provider'; +import { getListeners } from '../_util/props-util'; export default { name: 'ACardGrid', @@ -20,7 +21,7 @@ export default { [`${prefixCls}-grid`]: true, }; return ( -
+
{this.$slots.default}
); diff --git a/components/card/Meta.jsx b/components/card/Meta.jsx index f311ff473..e77901948 100644 --- a/components/card/Meta.jsx +++ b/components/card/Meta.jsx @@ -1,5 +1,5 @@ import PropTypes from '../_util/vue-types'; -import { getComponentFromProp } from '../_util/props-util'; +import { getComponentFromProp, getListeners } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; export default { @@ -39,7 +39,7 @@ export default {
) : null; return ( -
+
{avatarDom} {MetaDetail}
diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx index 67401a12a..3a8c003e8 100644 --- a/components/carousel/index.jsx +++ b/components/carousel/index.jsx @@ -1,6 +1,11 @@ import PropTypes from '../_util/vue-types'; 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 Base from '../base'; @@ -132,7 +137,7 @@ const Carousel = { const props = { ...this.$props, }; - const { $slots, $listeners } = this; + const { $slots } = this; if (props.effect === 'fade') { props.fade = true; @@ -150,7 +155,7 @@ const Carousel = { nextArrow: getComponentFromProp(this, 'nextArrow'), prevArrow: getComponentFromProp(this, 'prevArrow'), }, - on: $listeners, + on: getListeners(this), scopedSlots: this.$scopedSlots, }; diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx index 391c5cc39..76750b003 100644 --- a/components/cascader/index.jsx +++ b/components/cascader/index.jsx @@ -15,6 +15,7 @@ import { getAttrs, getComponentFromProp, isValidElement, + getListeners, } from '../_util/props-util'; import BaseMixin from '../_util/BaseMixin'; import { cloneElement } from '../_util/vnode'; @@ -372,7 +373,7 @@ const Cascader = { }, render() { - const { $slots, sPopupVisible, inputValue, $listeners, configProvider, localeData } = this; + const { $slots, sPopupVisible, inputValue, configProvider, localeData } = this; const { sValue: value, inputFocused } = this.$data; const props = getOptionProps(this); let suffixIcon = getComponentFromProp(this, 'suffixIcon'); @@ -542,7 +543,7 @@ const Cascader = { loadingIcon, }, on: { - ...$listeners, + ...getListeners(this), popupVisibleChange: this.handlePopupVisibleChange, change: this.handleChange, }, diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx index 5141d924e..8fd331725 100644 --- a/components/checkbox/Checkbox.jsx +++ b/components/checkbox/Checkbox.jsx @@ -1,7 +1,7 @@ import PropTypes from '../_util/vue-types'; import classNames from 'classnames'; 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'; function noop() {} @@ -43,10 +43,10 @@ export default { }, render() { - const { checkboxGroupContext: checkboxGroup, $listeners, $slots } = this; + const { checkboxGroupContext: checkboxGroup, $slots } = this; const props = getOptionProps(this); 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 getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('checkbox', customizePrefixCls); diff --git a/components/collapse/Collapse.jsx b/components/collapse/Collapse.jsx index 73aa08830..f58949c24 100644 --- a/components/collapse/Collapse.jsx +++ b/components/collapse/Collapse.jsx @@ -4,6 +4,7 @@ import { initDefaultProps, getComponentFromProp, isValidElement, + getListeners, } from '../_util/props-util'; import { cloneElement } from '../_util/vnode'; import VcCollapse, { collapseProps } from '../vc-collapse'; @@ -37,7 +38,7 @@ export default { }, }, render() { - const { prefixCls: customizePrefixCls, bordered, $listeners } = this; + const { prefixCls: customizePrefixCls, bordered } = this; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('collapse', customizePrefixCls); @@ -51,7 +52,7 @@ export default { expandIcon: panelProps => this.renderExpandIcon(panelProps, prefixCls), }, class: collapseClassName, - on: $listeners, + on: getListeners(this), }; return {this.$slots.default}; }, diff --git a/components/collapse/CollapsePanel.jsx b/components/collapse/CollapsePanel.jsx index f240b51d0..0c1b6b259 100644 --- a/components/collapse/CollapsePanel.jsx +++ b/components/collapse/CollapsePanel.jsx @@ -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 { ConfigConsumerProps } from '../config-provider'; @@ -11,7 +11,7 @@ export default { configProvider: { default: () => ConfigConsumerProps }, }, render() { - const { prefixCls: customizePrefixCls, showArrow = true, $listeners } = this; + const { prefixCls: customizePrefixCls, showArrow = true } = this; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('collapse', customizePrefixCls); @@ -24,7 +24,7 @@ export default { prefixCls, }, class: collapsePanelClassName, - on: $listeners, + on: getListeners(this), }; const header = getComponentFromProp(this, 'header'); return ( diff --git a/components/comment/index.jsx b/components/comment/index.jsx index 39d698349..435e82024 100644 --- a/components/comment/index.jsx +++ b/components/comment/index.jsx @@ -1,5 +1,5 @@ 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 Base from '../base'; export const CommentProps = { @@ -81,7 +81,7 @@ const Comment = { ); const children = this.$slots.default; return ( -
+
{comment} {children ? this.renderNested(prefixCls, children) : null}
diff --git a/components/date-picker/createPicker.js b/components/date-picker/createPicker.js index 91becc4ae..f2b7cc747 100644 --- a/components/date-picker/createPicker.js +++ b/components/date-picker/createPicker.js @@ -14,6 +14,7 @@ import { mergeProps, getComponentFromProp, isValidElement, + getListeners, } from '../_util/props-util'; import { cloneElement } from '../_util/vnode'; @@ -131,11 +132,12 @@ export default function createPicker(TheCalendar, props) { }, render() { - const { $listeners, $scopedSlots } = this; + const { $scopedSlots } = this; const { sValue: value, showDate, _open: open } = this.$data; let suffixIcon = getComponentFromProp(this, '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 { prefixCls: customizePrefixCls, locale, localeCode } = props; @@ -243,7 +245,7 @@ export default function createPicker(TheCalendar, props) { prefixCls: `${prefixCls}-picker-container`, }, on: { - ...omit($listeners, 'change'), + ...omit(listeners, 'change'), ...pickerProps.on, open, onOpenChange: this.handleOpenChange, diff --git a/components/layout/Sider.jsx b/components/layout/Sider.jsx index 27486d2b0..771a2322c 100644 --- a/components/layout/Sider.jsx +++ b/components/layout/Sider.jsx @@ -20,6 +20,7 @@ import { getOptionProps, hasProp, getComponentFromProp, + getListeners, } from '../_util/props-util'; import BaseMixin from '../_util/BaseMixin'; import isNumeric from '../_util/isNumeric'; @@ -234,7 +235,7 @@ export default { [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0, }); const divProps = { - on: this.$listeners, + on: getListeners(this), class: siderCls, style: divStyle, }; diff --git a/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx b/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx index 0b5c52a13..8fc40177f 100644 --- a/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx +++ b/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx @@ -3,7 +3,7 @@ import { createRef } from '../../util'; import generateSelector, { selectorPropTypes } from '../../Base/BaseSelector'; import SearchInput from '../../SearchInput'; import Selection from './Selection'; -import { getComponentFromProp } from '../../../../_util/props-util'; +import { getComponentFromProp, getListeners } from '../../../../_util/props-util'; import getTransitionProps from '../../../../_util/getTransitionProps'; import BaseMixin from '../../../../_util/BaseMixin'; const TREE_SELECT_EMPTY_VALUE_KEY = 'RC_TREE_SELECT_EMPTY_VALUE_KEY'; @@ -87,10 +87,9 @@ const MultipleSelector = { } = this.$props; const { vcTreeSelect: { onMultipleSelectorRemove }, - $listeners, $slots, } = this; - + const listeners = getListeners(this); // Check if `maxTagCount` is set let myValueList = selectorValueList; if (maxTagCount >= 0) { @@ -105,7 +104,7 @@ const MultipleSelector = { label, value, }, - on: { ...$listeners, remove: onMultipleSelectorRemove }, + on: { ...listeners, remove: onMultipleSelectorRemove }, }} key={value || TREE_SELECT_EMPTY_VALUE_KEY} > @@ -134,7 +133,7 @@ const MultipleSelector = { label: content, value: null, }, - on: $listeners, + on: listeners, }} key="rc-tree-select-internal-max-tag-counter" > @@ -153,7 +152,7 @@ const MultipleSelector = { ...this.$props, needAlign: true, }, - on: $listeners, + on: listeners, directives: [ { name: 'ant-ref', @@ -187,7 +186,8 @@ const MultipleSelector = { }, render() { - const { $listeners, $slots } = this; + const { $slots } = this; + const listeners = getListeners(this); return ( {$slots.default} diff --git a/components/vc-trigger/Popup.jsx b/components/vc-trigger/Popup.jsx index d76ccc7db..5a85f8b0d 100644 --- a/components/vc-trigger/Popup.jsx +++ b/components/vc-trigger/Popup.jsx @@ -4,6 +4,7 @@ import PopupInner from './PopupInner'; import LazyRenderBox from './LazyRenderBox'; import animate from '../_util/css-animation'; import BaseMixin from '../_util/BaseMixin'; +import { getListeners } from '../_util/props-util'; export default { mixins: [BaseMixin], @@ -72,7 +73,8 @@ export default { this.currentAlignClassName = 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 @@ -148,7 +150,7 @@ export default { return `${this.$props.prefixCls} ${this.$props.popupClassName} ${currentAlignClassName}`; }, getPopupElement() { - const { $props: props, $slots, $listeners, getTransitionName } = this; + const { $props: props, $slots, getTransitionName } = this; const { stretchChecked, targetHeight, targetWidth } = this.$data; const { @@ -161,7 +163,6 @@ export default { destroyPopupOnHide, stretch, } = props; - // const { mouseenter, mouseleave } = $listeners const className = this.getClassName( this.currentAlignClassName || getClassNameFromAlign(align), ); @@ -201,7 +202,7 @@ export default { // hiddenClassName, }, class: className, - on: $listeners, + on: getListeners(this), ref: 'popupInstance', style: { ...sizeStyle, ...popupStyle, ...this.getZIndexStyle() }, };