From 166256d6fb529998c518896b1cedddd0defa0145 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Fri, 13 Nov 2020 00:16:37 +0800
Subject: [PATCH 1/2] fix: menu parent dom select class not work
---
components/form/Form.tsx | 2 +-
.../__tests__/__snapshots__/demo.test.js.snap | 214 ++++++++++++++++--
components/menu/index.tsx | 1 -
components/vc-menu/MenuItem.jsx | 12 +-
components/vc-menu/SubMenu.jsx | 40 +++-
components/vc-menu/SubPopupMenu.jsx | 2 +-
components/vc-menu/commonPropsType.js | 2 +-
7 files changed, 235 insertions(+), 38 deletions(-)
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index 02421d4cac..2f82256469 100755
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -52,7 +52,7 @@ export const FormProps = {
prefixCls: PropTypes.string,
hideRequiredMark: PropTypes.looseBool,
model: PropTypes.object,
- rules: { type: Object as PropType<{[k: string]: ValidationRule[] | ValidationRule}> },
+ rules: { type: Object as PropType<{ [k: string]: ValidationRule[] | ValidationRule }> },
validateMessages: PropTypes.object,
validateOnRuleChange: PropTypes.looseBool,
// 提交失败自动滚动到第一个错误字段
diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap
index 4266989b95..2413edfe2b 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap
@@ -6,7 +6,8 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
@@ -16,7 +17,8 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
@@ -26,19 +28,22 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
@@ -48,7 +53,8 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
@@ -92,12 +98,52 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline.md correctly 1`] = `
@@ -123,7 +169,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline-collapsed.md correctly 1`] =
@@ -313,13 +479,15 @@ exports[`renders ./antdv-demo/docs/menu/demo/vertical.md correctly 1`] = `
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index 84a3e9bc97..10096218be 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -276,7 +276,6 @@ const Menu = defineComponent({
onMouseenter: this.handleMouseEnter,
onTransitionend: this.handleTransitionEnd,
children: getSlot(this),
- openTransitionName: '', //issue解决后可去掉openTransitionName https://github.com/vuejs/vue-next/issues/1412
};
if (!hasProp(this, 'selectedKeys')) {
delete menuProps.selectedKeys;
diff --git a/components/vc-menu/MenuItem.jsx b/components/vc-menu/MenuItem.jsx
index a7b320828a..d9b4424963 100644
--- a/components/vc-menu/MenuItem.jsx
+++ b/components/vc-menu/MenuItem.jsx
@@ -42,7 +42,11 @@ const MenuItem = {
// invoke customized ref to expose component to mixin
this.callRef();
},
+ mounted() {
+ this.updateParentMenuSelectedStatus();
+ },
updated() {
+ this.updateParentMenuSelectedStatus();
this.$nextTick(() => {
const { active, parentMenu, eventKey } = this;
if (!this.prevActive && active && (!parentMenu || !parentMenu[`scrolled-${eventKey}`])) {
@@ -58,10 +62,16 @@ const MenuItem = {
this.callRef();
},
beforeUnmount() {
+ this.updateParentMenuSelectedStatus(false);
const props = this.$props;
this.__emit('destroy', props.eventKey);
},
methods: {
+ updateParentMenuSelectedStatus(status = this.isSelected) {
+ if (this.parentMenu && this.parentMenu.setChildrenSelectedStatus) {
+ this.parentMenu.setChildrenSelectedStatus(this.eventKey, status);
+ }
+ },
onKeyDown(e) {
const keyCode = e.keyCode;
if (keyCode === KeyCode.ENTER) {
@@ -99,7 +109,7 @@ const MenuItem = {
const info = {
key: eventKey,
keyPath: [eventKey],
- item: this,
+ item: { ...this.$props },
domEvent: e,
};
diff --git a/components/vc-menu/SubMenu.jsx b/components/vc-menu/SubMenu.jsx
index 102c670968..854431d5a6 100644
--- a/components/vc-menu/SubMenu.jsx
+++ b/components/vc-menu/SubMenu.jsx
@@ -9,7 +9,7 @@ import placements from './placements';
import BaseMixin from '../_util/BaseMixin';
import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../_util/props-util';
import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
-import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
+import { noop, getMenuIdFromSubMenuEventKey } from './util';
import { getTransitionProps, Transition } from '../_util/transition';
import { injectExtraPropsKey } from './FunctionProvider';
@@ -49,7 +49,7 @@ const SubMenu = {
triggerSubMenuAction: PropTypes.string,
popupClassName: PropTypes.string,
getPopupContainer: PropTypes.func,
- forceSubMenuRender: PropTypes.looseBool,
+ forceSubMenuRender: PropTypes.looseBool.def(true),
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
disabled: PropTypes.looseBool,
subMenuOpenDelay: PropTypes.number.def(0.1),
@@ -100,21 +100,30 @@ const SubMenu = {
this.subMenuTitle = undefined;
return {
// defaultActiveFirst: false,
+ childrenSelectedStatus: {},
};
},
+ computed: {
+ isChildrenSelected() {
+ return Object.values(this.childrenSelectedStatus).find(status => status);
+ },
+ },
mounted() {
this.$nextTick(() => {
this.handleUpdated();
});
+ this.updateParentMenuSelectedStatus();
},
updated() {
this.$nextTick(() => {
this.handleUpdated();
});
+ this.updateParentMenuSelectedStatus();
},
beforeUnmount() {
+ this.updateParentMenuSelectedStatus(false);
const { eventKey } = this;
this.__emit('destroy', eventKey);
@@ -131,6 +140,18 @@ const SubMenu = {
}
},
methods: {
+ updateParentMenuSelectedStatus(status = this.isChildrenSelected) {
+ if (this.parentMenu && this.parentMenu.setChildrenSelectedStatus) {
+ this.parentMenu.setChildrenSelectedStatus(this.eventKey, status);
+ }
+ },
+ setChildrenSelectedStatus(key, status) {
+ if (!status) {
+ delete this.childrenSelectedStatus[key];
+ } else {
+ this.childrenSelectedStatus[key] = status;
+ }
+ },
handleUpdated() {
const { mode, parentMenu, manualRef } = this;
@@ -310,11 +331,11 @@ const SubMenu = {
}
},
- isChildrenSelected(children) {
- const ret = { find: false };
- loopMenuItemRecursively(children, this.$props.selectedKeys, ret);
- return ret.find;
- },
+ // isChildrenSelected(children) {
+ // const ret = { find: false };
+ // loopMenuItemRecursively(children, this.$props.selectedKeys, ret);
+ // return ret.find;
+ // },
// isOpen () {
// return this.$props.openKeys.indexOf(this.$props.eventKey) !== -1
// },
@@ -412,7 +433,6 @@ const SubMenu = {
render() {
const props = { ...this.$props, ...this.$attrs };
const { onEvents } = splitAttrs(props);
- const { rootPrefixCls } = this;
const isOpen = props.isOpen;
const prefixCls = this.getPrefixCls();
const isInlineMode = props.mode === 'inline';
@@ -425,7 +445,7 @@ const SubMenu = {
[this.getOpenClassName()]: isOpen,
[this.getActiveClassName()]: props.active || (isOpen && !isInlineMode),
[this.getDisabledClassName()]: props.disabled,
- [this.getSelectedClassName()]: this.isChildrenSelected(childrenTemp),
+ [this.getSelectedClassName()]: this.isChildrenSelected,
};
if (!this.internalMenuId) {
@@ -498,7 +518,7 @@ const SubMenu = {
const popupPlacement = popupPlacementMap[props.mode];
const popupAlign = props.popupOffset ? { offset: props.popupOffset } : {};
let popupClassName = props.mode === 'inline' ? '' : props.popupClassName || '';
- popupClassName = `${prefixCls}-popup ${rootPrefixCls} ${popupClassName}`;
+ popupClassName = `${prefixCls}-popup ${popupClassName}`;
const liProps = {
...omit(onEvents, ['onClick']),
...mouseEvents,
diff --git a/components/vc-menu/SubPopupMenu.jsx b/components/vc-menu/SubPopupMenu.jsx
index 11c01d2684..864c6d046f 100644
--- a/components/vc-menu/SubPopupMenu.jsx
+++ b/components/vc-menu/SubPopupMenu.jsx
@@ -116,7 +116,7 @@ const SubPopupMenu = {
expandIcon: PropTypes.any,
overflowedIndicator: PropTypes.any,
children: PropTypes.any.def([]),
- forceSubMenuRender: PropTypes.looseBool,
+ forceSubMenuRender: PropTypes.looseBool.def(true),
},
{
prefixCls: 'rc-menu',
diff --git a/components/vc-menu/commonPropsType.js b/components/vc-menu/commonPropsType.js
index 57eb566e38..29d8de013d 100644
--- a/components/vc-menu/commonPropsType.js
+++ b/components/vc-menu/commonPropsType.js
@@ -30,7 +30,7 @@ export default {
theme: PropTypes.oneOf(['light', 'dark']).def('light'),
getPopupContainer: PropTypes.func,
openTransitionName: PropTypes.string,
- forceSubMenuRender: PropTypes.looseBool,
+ forceSubMenuRender: PropTypes.looseBool.def(true),
selectable: PropTypes.looseBool,
isRootMenu: PropTypes.looseBool.def(true),
builtinPlacements: PropTypes.object.def(() => ({})),
From f2bb61c25fe870affde61e83c89845395000363e Mon Sep 17 00:00:00 2001
From: tanjinzhou <415800467@qq.com>
Date: Fri, 13 Nov 2020 18:03:18 +0800
Subject: [PATCH 2/2] perf: ease-in-out update
---
components/style/themes/default.less | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index e77fd7d129..e3c0e69a80 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -98,7 +98,7 @@
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+@ease-in-out: cubic-bezier(0.25, 0.8, 0.5, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);