react-component · zombieJ · Oct 14, 2019 · Oct 12, 2019 · Oct 12, 2019 · Oct 12, 2019
diff --git a/assets/index.less b/assets/index.less
@@ -3,7 +3,14 @@
 @font-face {
   font-family: 'FontAwesome';
   src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot');
-  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
+  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix')
+      format('embedded-opentype'),
+    url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.woff')
+      format('woff'),
+    url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf')
+      format('truetype'),
+    url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?#fontawesomeregular')
+      format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,9 +31,9 @@
 
   &-collapse {
     overflow: hidden;
-    &-active {
-      transition: height .3s ease-out;
-    }
+    // &-active {
+    transition: height 0.3s ease-out;
+    // }
   }
 
   &-item-group-list {
@@ -68,15 +75,17 @@
     margin-top: 0;
   }
 
-  &-item, &-submenu-title {
+  &-item,
+  &-submenu-title {
     margin: 0;
     position: relative;
     display: block;
     padding: 7px 7px 7px 16px;
     white-space: nowrap;
 
     // Disabled state sets text to gray and nukes hover/tab effects
-    &.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled {
+    &.@{menuPrefixCls}-item-disabled,
+    &.@{menuPrefixCls}-submenu-disabled {
       color: #777 !important;
     }
   }
@@ -102,7 +111,8 @@
     }
   }
 
-  .@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item {
+  .@{menuPrefixCls}-submenu-title,
+  .@{menuPrefixCls}-item {
     .anticon {
       width: 14px;
       height: 14px;
@@ -112,31 +122,33 @@
   }
 
   &-horizontal {
-    background-color: #F3F5F7;
+    background-color: #f3f5f7;
     border: none;
     border-bottom: 1px solid #d9d9d9;
     box-shadow: none;
     white-space: nowrap;
     overflow: hidden;
 
-    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
+    & > .@{menuPrefixCls}-item,
+    & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
       padding: 15px 20px;
     }
 
-    & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {
+    & > .@{menuPrefixCls}-submenu,
+    & > .@{menuPrefixCls}-item {
       border-bottom: 2px solid transparent;
       display: inline-block;
       vertical-align: bottom;
 
       &-active {
         border-bottom: 2px solid #2db7f5;
-        background-color: #F3F5F7;
+        background-color: #f3f5f7;
         color: #2baee9;
       }
     }
 
     &:after {
-      content: "\20";
+      content: '\20';
       display: block;
       height: 0;
       clear: both;
@@ -148,7 +160,8 @@
   &-vertical-right,
   &-inline {
     padding: 12px 0;
-    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
+    & > .@{menuPrefixCls}-item,
+    & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
       padding: 12px 8px 12px 24px;
     }
     .@{menuPrefixCls}-submenu-arrow {
@@ -163,14 +176,14 @@
       right: 16px;
       line-height: 1.5em;
       &:before {
-        content: "\f0da";
+        content: '\f0da';
       }
     }
   }
   &-inline {
     .@{menuPrefixCls}-submenu-arrow {
       transform: rotate(90deg);
-      transition: transform .3s;
+      transition: transform 0.3s;
     }
     & .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title {
       .@{menuPrefixCls}-submenu-arrow {
@@ -191,22 +204,23 @@
     border-radius: 0;
     box-shadow: none;
 
-    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
+    & > .@{menuPrefixCls}-item,
+    & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
       padding-top: 8px;
       padding-bottom: 8px;
       padding-right: 0;
     }
   }
 
   .effect() {
-    animation-duration: .3s;
+    animation-duration: 0.3s;
     animation-fill-mode: both;
     transform-origin: 0 0;
   }
 
   &-open {
-
-    &-slide-up-enter, &-slide-up-appear {
+    &-slide-up-enter,
+    &-slide-up-appear {
       .effect();
       opacity: 0;
       animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
@@ -220,7 +234,8 @@
       animation-play-state: paused;
     }
 
-    &-slide-up-enter&-slide-up-enter-active, &-slide-up-appear&-slide-up-appear-active {
+    &-slide-up-enter&-slide-up-enter-active,
+    &-slide-up-appear&-slide-up-appear-active {
       animation-name: rcMenuOpenSlideUpIn;
       animation-play-state: running;
     }
@@ -255,7 +270,8 @@
       }
     }
 
-    &-zoom-enter, &-zoom-appear {
+    &-zoom-enter,
+    &-zoom-appear {
       opacity: 0;
       .effect();
       animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
@@ -268,7 +284,8 @@
       animation-play-state: paused;
     }
 
-    &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
+    &-zoom-enter&-zoom-enter-active,
+    &-zoom-appear&-zoom-appear-active {
       animation-name: rcMenuOpenZoomIn;
       animation-play-state: running;
     }
@@ -290,7 +307,6 @@
     }
     @keyframes rcMenuOpenZoomOut {
       0% {
-
         transform: scale(1, 1);
       }
       100% {
@@ -299,6 +315,4 @@
       }
     }
   }
-
 }
-
diff --git a/examples/antd.js b/examples/antd.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-console, react/require-default-props, no-param-reassign */
 
 import React from 'react';
-import animate from 'css-animation';
 import PropTypes from 'prop-types';
 import Menu, { SubMenu, Item as MenuItem, Divider } from '../src';
 import '../assets/index.less';
@@ -11,42 +10,17 @@ function handleClick(info) {
   console.log(info);
 }
 
-const animation = {
-  enter(node, done) {
-    let height;
-    return animate(node, 'rc-menu-collapse', {
-      start() {
-        height = node.offsetHeight;
-        node.style.height = 0;
-      },
-      active() {
-        node.style.height = `${height}px`;
-      },
-      end() {
-        node.style.height = '';
-        done();
-      },
-    });
-  },
-
-  appear(...args) {
-    return this.enter(...args);
-  },
-
-  leave(node, done) {
-    return animate(node, 'rc-menu-collapse', {
-      start() {
-        node.style.height = `${node.offsetHeight}px`;
-      },
-      active() {
-        node.style.height = 0;
-      },
-      end() {
-        node.style.height = '';
-        done();
-      },
-    });
-  },
+const collapseNode = () => ({ height: 0 });
+const expandNode = node => ({ height: node.scrollHeight });
+
+const inlineMotion = {
+  motionName: 'rc-menu-collapse',
+  onAppearStart: collapseNode,
+  onAppearActive: expandNode,
+  onEnterStart: collapseNode,
+  onEnterActive: expandNode,
+  onLeaveStart: expandNode,
+  onLeaveActive: collapseNode,
 };
 
 const nestSubMenu = (
@@ -165,6 +139,7 @@ class CommonMenu extends React.Component {
           openAnimation={this.props.openAnimation}
           defaultOpenKeys={this.props.defaultOpenKeys}
           overflowedIndicator={overflowedIndicator}
+          motion={this.props.motion}
         >
           {children}
         </Menu>
@@ -176,6 +151,7 @@ class CommonMenu extends React.Component {
 CommonMenu.propTypes = {
   mode: PropTypes.string,
   openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  motion: PropTypes.object,
   triggerSubMenuAction: PropTypes.string,
   defaultOpenKeys: PropTypes.arrayOf(PropTypes.string),
   updateChildrenAndOverflowedIndicator: PropTypes.bool,
@@ -203,11 +179,7 @@ function Demo() {
   const verticalMenu = <CommonMenu mode="vertical" openAnimation="zoom" />;
 
   const inlineMenu = (
-    <CommonMenu
-      mode="inline"
-      defaultOpenKeys={['1']}
-      openAnimation={animation}
-    />
+    <CommonMenu mode="inline" defaultOpenKeys={['1']} motion={inlineMotion} />
   );
 
   return (

diff --git a/examples/custom-icon.js b/examples/custom-icon.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-console, no-param-reassign */
 import * as React from 'react';
-import animate from 'css-animation';
 import Menu, { SubMenu, Item as MenuItem, Divider } from '../src';
 import '../assets/index.less';
 
@@ -45,42 +44,17 @@ function expandIcon(props) {
   });
 }
 
-const animation = {
-  enter(node, done) {
-    let height;
-    return animate(node, 'rc-menu-collapse', {
-      start() {
-        height = node.offsetHeight;
-        node.style.height = 0;
-      },
-      active() {
-        node.style.height = `${height}px`;
-      },
-      end() {
-        node.style.height = '';
-        done();
-      },
-    });
-  },
-
-  appear(...args) {
-    return this.enter(...args);
-  },
+const collapseNode = () => ({ height: 0 });
+const expandNode = node => ({ height: node.scrollHeight });
 
-  leave(node, done) {
-    return animate(node, 'rc-menu-collapse', {
-      start() {
-        node.style.height = `${node.offsetHeight}px`;
-      },
-      active() {
-        node.style.height = 0;
-      },
-      end() {
-        node.style.height = '';
-        done();
-      },
-    });
-  },
+const inlineMotion = {
+  motionName: 'rc-menu-collapse',
+  onAppearStart: collapseNode,
+  onAppearActive: expandNode,
+  onEnterStart: collapseNode,
+  onEnterActive: expandNode,
+  onLeaveStart: expandNode,
+  onLeaveActive: collapseNode,
 };
 
 class Demo extends React.Component {
@@ -149,7 +123,7 @@ class Demo extends React.Component {
     const inlineMenu = this.renderCommonMenu({
       mode: 'inline',
       defaultOpenKeys: ['1'],
-      openAnimation: animation,
+      motion: inlineMotion,
       itemIcon,
       expandIcon,
     });

diff --git a/package.json b/package.json
@@ -49,10 +49,11 @@
     "dom-scroll-into-view": "1.x",
     "mini-store": "^2.0.0",
     "mutationobserver-shim": "^0.3.2",
-    "rc-animate": "2.x",
+    "rc-animate": "^2.10.1",
     "rc-trigger": "^2.3.0",
     "rc-util": "^4.13.0",
-    "resize-observer-polyfill": "^1.5.0"
+    "resize-observer-polyfill": "^1.5.0",
+    "shallowequal": "^1.1.0"
   },
   "devDependencies": {
     "@types/jest": "^24.0.18",

diff --git a/src/DOMWrap.tsx b/src/DOMWrap.tsx
@@ -29,7 +29,6 @@ interface DOMWrapProps {
   theme?: string;
   overflowedIndicator?: React.ReactNode;
   visible?: boolean;
-  hiddenClassName?: string;
   tag?: string;
   style?: React.CSSProperties;
 }
@@ -350,7 +349,6 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
 
   render() {
     const {
-      hiddenClassName,
       visible,
       prefixCls,
       overflowedIndicator,
@@ -362,10 +360,6 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
       ...rest
     } = this.props;
 
-    if (!visible) {
-      rest.className += ` ${hiddenClassName}`;
-    }
-
     const Tag = tag as any;
 
     return <Tag {...rest}>{this.renderChildren(children)}</Tag>;