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

perf: trigger

refactor-date
tangjinzhou 2021-08-15 21:58:42 +08:00
parent 64f07a0e7b
commit fc487c6b6f
10 changed files with 88 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/vc-align/Align.tsx
View File

@ -1,4 +1,5 @@
import { nextTick, PropType } from 'vue';
import type { PropType } from 'vue';
import { nextTick } from 'vue';
import { defineComponent, ref, computed, onMounted, onUpdated, watch, onUnmounted } from 'vue';
import { alignElement, alignPoint } from 'dom-align';
import addEventListener from '../vc-util/Dom/addEventListener';

4
components/vc-picker/Picker.tsx
View File

@ -527,7 +527,6 @@ function Picker<DateType>() {
return (
<PickerTrigger
visible={mergedOpen.value}
popupElement={panel}
popupStyle={popupStyle}
prefixCls={prefixCls}
dropdownClassName={dropdownClassName}
@ -536,6 +535,9 @@ function Picker<DateType>() {
transitionName={transitionName}
popupPlacement={popupPlacement}
direction={direction}
v-slots={{
popupElement: () => panel,
}}
>
<div
class={classNames(prefixCls, attrs.class, {

12
components/vc-picker/PickerTrigger.tsx
View File

@ -2,7 +2,6 @@ import type { CSSProperties } from '@vue/runtime-dom';
import type { AlignType } from '../vc-align/interface';
import Trigger from '../vc-trigger';
import classNames from '../_util/classNames';
import type { VueNode } from '../_util/type';
import useMergeProps from './hooks/useMergeProps';
const BUILT_IN_PLACEMENTS = {
@ -45,7 +44,6 @@ type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
export type PickerTriggerProps = {
prefixCls: string;
visible: boolean;
popupElement: VueNode;
popupStyle?: CSSProperties;
dropdownClassName?: string;
transitionName?: string;
@ -59,7 +57,6 @@ export type PickerTriggerProps = {
function PickerTrigger(props: PickerTriggerProps, { slots }) {
const {
prefixCls,
popupElement,
popupStyle,
visible,
dropdownClassName,
@ -87,7 +84,6 @@ function PickerTrigger(props: PickerTriggerProps, { slots }) {
builtinPlacements={BUILT_IN_PLACEMENTS}
prefixCls={dropdownPrefixCls}
popupTransitionName={transitionName}
popup={popupElement}
popupAlign={dropdownAlign}
popupVisible={visible}
popupClassName={classNames(dropdownClassName, {
@ -96,9 +92,11 @@ function PickerTrigger(props: PickerTriggerProps, { slots }) {
})}
popupStyle={popupStyle}
getPopupContainer={getPopupContainer}
>
{slots.default?.()}
</Trigger>
v-slots={{
default: slots.default,
popup: slots.popupElement,
}}
></Trigger>
);
}

5
components/vc-picker/RangePicker.tsx
View File

@ -1062,7 +1062,6 @@ function RangerPicker<DateType>() {
style={{ minWidth: `${popupMinWidth.value}px` }}
>
<div class={`${prefixCls}-range-arrow`} style={arrowPositionStyle} />
{renderPanels()}
</div>
);
@ -1128,7 +1127,6 @@ function RangerPicker<DateType>() {
return (
<PickerTrigger
visible={mergedOpen.value}
popupElement={rangePanel}
popupStyle={popupStyle}
prefixCls={prefixCls}
dropdownClassName={dropdownClassName}
@ -1137,6 +1135,9 @@ function RangerPicker<DateType>() {
transitionName={transitionName}
range
direction={direction}
v-slots={{
popupElement: () => rangePanel,
}}
>
<div
ref={containerRef}

2
components/vc-tooltip/src/Tooltip.tsx
View File

@ -13,7 +13,7 @@ export default defineComponent({
defaultVisible: PropTypes.looseBool,
visible: PropTypes.looseBool,
placement: PropTypes.string.def('right'),
transitionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
transitionName: PropTypes.string,
animation: PropTypes.any,
afterVisibleChange: PropTypes.func.def(() => {}),
overlay: PropTypes.any,

14
components/vc-trigger/Popup/MobilePopupInner.tsx
View File

@ -1,13 +1,15 @@
import { CSSProperties, defineComponent, ref, Transition } from 'vue';
import { flattenChildren } from 'ant-design-vue/es/_util/props-util';
import classNames from 'ant-design-vue/es/_util/classNames';
import { MobilePopupProps, mobileProps } from './interface';
import type { CSSProperties } from 'vue';
import { defineComponent, ref, Transition } from 'vue';
import { flattenChildren } from '../../_util/props-util';
import classNames from '../../_util/classNames';
import type { MobilePopupProps } from './interface';
import { mobileProps } from './interface';
export default defineComponent({
name: 'MobilePopupInner',
inheritAttrs: false,
props: mobileProps,
emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
inheritAttrs: false,
name: 'MobilePopupInner',
setup(props, { expose, slots }) {
const elementRef = ref<HTMLDivElement>();

90
components/vc-trigger/Popup/PopupInner.tsx
View File

@ -1,9 +1,9 @@
import type { AlignType } from '../interface';
import useVisibleStatus from './useVisibleStatus';
import useStretchStyle from './useStretchStyle';
import type { CSSProperties } from 'vue';
import {
computed,
CSSProperties,
defineComponent,
nextTick,
ref,
@ -12,19 +12,21 @@ import {
watch,
withModifiers,
} from 'vue';
import Align, { RefAlign } from 'ant-design-vue/es/vc-align/Align';
import type { RefAlign } from '../../vc-align/Align';
import Align from '../../vc-align/Align';
import { getMotion } from '../utils/motionUtil';
import { flattenChildren } from 'ant-design-vue/es/_util/props-util';
import classNames from 'ant-design-vue/es/_util/classNames';
import { innerProps, PopupInnerProps } from './interface';
import { getTransitionProps } from 'ant-design-vue/es/_util/transition';
import supportsPassive from 'ant-design-vue/es/_util/supportsPassive';
import { flattenChildren } from '../../_util/props-util';
import classNames from '../../_util/classNames';
import type { PopupInnerProps } from './interface';
import { innerProps } from './interface';
import { getTransitionProps } from '../../_util/transition';
import supportsPassive from '../../_util/supportsPassive';
export default defineComponent({
props: innerProps,
name: 'PopupInner',
emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
inheritAttrs: false,
props: innerProps,
emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
setup(props, { expose, attrs, slots }) {
const alignRef = ref<RefAlign>();
const elementRef = ref<HTMLDivElement>();
@ -147,36 +149,46 @@ export default defineComponent({
const mergedClassName = classNames(prefixCls, attrs.class, alignedClassName.value);
const transitionProps = getTransitionProps(motion.value.name, motion.value);
return (
<Transition ref={elementRef} {...transitionProps} onBeforeEnter={onShowPrepare}>
{!destroyPopupOnHide || visible ? (
<Align
v-show={visible}
target={getAlignTarget()}
key="popup"
ref={alignRef}
monitorWindowResize
disabled={alignDisabled}
align={align}
onAlign={onInternalAlign}
>
<div
class={mergedClassName}
onMouseenter={onMouseenter}
onMouseleave={onMouseleave}
onMousedown={withModifiers(onMousedown, ['capture'])}
{...{
[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart']: withModifiers(
onTouchstart,
['capture'],
),
}}
style={mergedStyle}
>
{childNode}
</div>
</Align>
) : null}
</Transition>
<Transition
ref={elementRef}
{...transitionProps}
onBeforeEnter={onShowPrepare}
v-slots={{
default: () => {
return !destroyPopupOnHide || visible ? (
<Align
v-show={visible}
target={getAlignTarget()}
key="popup"
ref={alignRef}
monitorWindowResize
disabled={alignDisabled}
align={align}
onAlign={onInternalAlign}
v-slots={{
default: () => (
<div
class={mergedClassName}
onMouseenter={onMouseenter}
onMouseleave={onMouseleave}
onMousedown={withModifiers(onMousedown, ['capture'])}
{...{
[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart']: withModifiers(
onTouchstart,
['capture'],
),
}}
style={mergedStyle}
>
{childNode}
</div>
),
}}
></Align>
) : null;
},
}}
></Transition>
);
};
},

4
components/vc-trigger/Popup/index.tsx
View File

@ -5,9 +5,9 @@ import MobilePopupInner from './MobilePopupInner';
import PopupInner from './PopupInner';
export default defineComponent({
props: popupProps,
inheritAttrs: false,
name: 'Popup',
inheritAttrs: false,
props: popupProps,
setup(props, { attrs, slots, expose }) {
const innerVisible = ref(false);
const inMobile = ref(false);

19
components/vc-trigger/Trigger.tsx
View File

@ -1,4 +1,5 @@
import { computed, defineComponent, HTMLAttributes, inject, provide, ref } from 'vue';
import type { HTMLAttributes } from 'vue';
import { computed, defineComponent, inject, provide, ref } from 'vue';
import PropTypes from '../_util/vue-types';
import contains from '../vc-util/Dom/contains';
import raf from '../_util/raf';
@ -411,17 +412,16 @@ export default defineComponent({
return popupAlign;
},
getComponent() {
const self = this;
const mouseProps: HTMLAttributes = {};
if (this.isMouseEnterToShow()) {
mouseProps.onMouseenter = self.onPopupMouseenter;
mouseProps.onMouseenter = this.onPopupMouseenter;
}
if (this.isMouseLeaveToHide()) {
mouseProps.onMouseleave = self.onPopupMouseleave;
mouseProps.onMouseleave = this.onPopupMouseleave;
}
mouseProps.onMousedown = this.onPopupMouseDown;
mouseProps[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'] = this.onPopupMouseDown;
const { handleGetPopupClassFromAlign, getRootDomNode, getContainer, $attrs } = self;
const { handleGetPopupClassFromAlign, getRootDomNode, getContainer, $attrs } = this;
const {
prefixCls,
destroyPopupOnHide,
@ -437,7 +437,7 @@ export default defineComponent({
alignPoint,
mobile,
forceRender,
} = self.$props;
} = this.$props;
const { sPopupVisible, point } = this.$data;
const popupProps = {
prefixCls,
@ -463,7 +463,12 @@ export default defineComponent({
mobile,
forceRender,
} as any;
return <Popup {...popupProps}>{getComponent(self, 'popup')}</Popup>;
return (
<Popup
{...popupProps}
v-slots={{ default: this.$slots.popup || (() => getComponent(this, 'popup')) }}
></Popup>
);
},
attachParent(popupContainer) {

2
v2-doc

@ -1 +1 @@
Subproject commit 7a7b52df8b3b69d8b1a8b8dcd96e1b0f7bb3f8c9
Subproject commit 2aa53d9c7aae3b172d8837a0ba9118c3fd8c2038