feat: update vc-dropdown to 2.4.1

components/vc-dropdown/assets/index.less

@@ -0,0 +1,218 @@
+@dropdownPrefixCls: rc-dropdown;
+
+@font-face {
+  font-family: 'anticon';
+  src: url('//at.alicdn.com/t/font_1434092639_4910953.eot');
+  /* IE9*/
+  src: url('//at.alicdn.com/t/font_1434092639_4910953.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1434092639_4910953.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1434092639_4910953.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1434092639_4910953.svg#iconfont') format('svg');
+  /* iOS 4.1- */
+}
+
+.@{dropdownPrefixCls} {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  z-index: 1070;
+  display: block;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.5;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-menu {
+    outline: none;
+    position: relative;
+    list-style-type: none;
+    padding: 0;
+    margin: 2px 0 0 0;
+    text-align: left;
+    background-color: #fff;
+    border-radius: 3px;
+    box-shadow: 0 1px 5px #ccc;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+
+    > li {
+      margin: 0;
+      padding: 0;
+    }
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: -4px;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background: rgb(255, 255, 255);
+      background: rgba(255, 255, 255, 0.01);
+    }
+
+    & > &-item {
+      position: relative;
+      display: block;
+      padding: 7px 10px;
+      clear: both;
+      font-size: 12px;
+      font-weight: normal;
+      color: #666666;
+      white-space: nowrap;
+
+      &:hover, &-active, &-selected {
+        background-color: #ebfaff;
+      }
+
+      &-selected {
+        position: relative;
+        &:after {
+          content: '\e613';
+          font-family: 'anticon';
+          font-weight: bold;
+          position: absolute;
+          top: 6px;
+          right: 16px;
+          color: #3CB8F0;
+        }
+      }
+
+      &-disabled {
+        color: #ccc;
+        cursor: not-allowed;
+        pointer-events: none;
+
+        &:hover {
+          color: #ccc;
+          background-color: #fff;
+          cursor: not-allowed;
+        }
+      }
+
+      &:last-child {
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+
+      &:first-child {
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+      }
+
+      &-divider {
+        height: 1px;
+        margin: 1px 0;
+        overflow: hidden;
+        background-color: #e5e5e5;
+        line-height: 0;
+      }
+    }
+  }
+
+  .effect() {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    transform-origin: 0 0;
+    display: block !important;
+  }
+
+  &-slide-up-enter,&-slide-up-appear {
+    .effect();
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+    animation-play-state: paused;
+  }
+
+  &-slide-up-leave {
+    .effect();
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+    animation-play-state: paused;
+  }
+
+  &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
+  &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft,
+  &-slide-up-enter&-slide-up-enter-active&-placement-bottomCenter,
+  &-slide-up-appear&-slide-up-appear-active&-placement-bottomCenter,
+  &-slide-up-enter&-slide-up-enter-active&-placement-bottomRight,
+  &-slide-up-appear&-slide-up-appear-active&-placement-bottomRight {
+    animation-name: rcDropdownSlideUpIn;
+    animation-play-state: running;
+  }
+
+  &-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
+  &-slide-up-appear&-slide-up-appear-active&-placement-topLeft,
+  &-slide-up-enter&-slide-up-enter-active&-placement-topCenter,
+  &-slide-up-appear&-slide-up-appear-active&-placement-topCenter,
+  &-slide-up-enter&-slide-up-enter-active&-placement-topRight,
+  &-slide-up-appear&-slide-up-appear-active&-placement-topRight {
+    animation-name: rcDropdownSlideDownIn;
+    animation-play-state: running;
+  }
+
+  &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft,
+  &-slide-up-leave&-slide-up-leave-active&-placement-bottomCenter,
+  &-slide-up-leave&-slide-up-leave-active&-placement-bottomRight {
+    animation-name: rcDropdownSlideUpOut;
+    animation-play-state: running;
+  }
+
+  &-slide-up-leave&-slide-up-leave-active&-placement-topLeft,
+  &-slide-up-leave&-slide-up-leave-active&-placement-topCenter,
+  &-slide-up-leave&-slide-up-leave-active&-placement-topRight {
+    animation-name: rcDropdownSlideDownOut;
+    animation-play-state: running;
+  }
+
+  @keyframes rcDropdownSlideUpIn {
+    0% {
+      opacity: 0;
+      transform-origin: 0% 0%;
+      transform: scaleY(0);
+    }
+    100% {
+      opacity: 1;
+      transform-origin: 0% 0%;
+      transform: scaleY(1);
+    }
+  }
+  @keyframes rcDropdownSlideUpOut {
+    0% {
+      opacity: 1;
+      transform-origin: 0% 0%;
+      transform: scaleY(1);
+    }
+    100% {
+      opacity: 0;
+      transform-origin: 0% 0%;
+      transform: scaleY(0);
+    }
+  }
+
+  @keyframes rcDropdownSlideDownIn {
+    0% {
+      opacity: 0;
+      transform-origin: 0% 100%;
+      transform: scaleY(0);
+    }
+    100% {
+      opacity: 1;
+      transform-origin: 0% 100%;
+      transform: scaleY(1);
+    }
+  }
+  @keyframes rcDropdownSlideDownOut {
+    0% {
+      opacity: 1;
+      transform-origin: 0% 100%;
+      transform: scaleY(1);
+    }
+    100% {
+      opacity: 0;
+      transform-origin: 0% 100%;
+      transform: scaleY(0);
+    }
+  }
+}

components/vc-dropdown/demo/simple.jsx

@@ -0,0 +1,39 @@
+import Menu, { Item as MenuItem, Divider } from '../../vc-menu/index';
+import Dropdown from '../src/index.js';
+import '../assets/index.less';
+
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    onSelect({ key }) {
+      console.log(`${key} selected`);
+    },
+    onVisibleChange(visible) {
+      console.log(visible);
+    },
+  },
+  render() {
+    return (
+      <div style="margin: 100px">
+        <div style="height: 100px"/>
+        <div>
+          <Dropdown
+            trigger={['click']}
+            animation="slide-up"
+            onVisibleChange={this.onVisibleChange}
+          >
+            <Menu slot="overlay" onSelect={this.onSelect}>
+              <MenuItem disabled>disabled</MenuItem>
+              <MenuItem key="1">one</MenuItem>
+              <Divider />
+              <MenuItem key="2">two</MenuItem>
+            </Menu>
+            <button style="width: 100px">open</button>
+          </Dropdown>
+        </div>
+      </div>
+    );
+  },
+};

components/vc-dropdown/src/Dropdown.jsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import PropTypes from '../../_util/vue-types';
 import Trigger from '../../vc-trigger';
 import placements from './placements';
@@ -12,10 +13,15 @@ export default {
     prefixCls: PropTypes.string.def('rc-dropdown'),
     transitionName: PropTypes.string,
     overlayClassName: PropTypes.string.def(''),
+    openClassName: PropTypes.string,
     animation: PropTypes.any,
     align: PropTypes.object,
     overlayStyle: PropTypes.object.def({}),
     placement: PropTypes.string.def('bottomLeft'),
+    overlay: PropTypes.oneOfType([
+      PropTypes.any,
+      PropTypes.func,
+    ]),
     trigger: PropTypes.array.def(['hover']),
     alignPoint: PropTypes.bool,
     showAction: PropTypes.array.def([]),
@@ -77,9 +83,21 @@ export default {
       return !alignPoint;
     },
 
+    getOverlayElement() {
+      const overlay = this.overlay || this.$slots.overlay || this.$scopedSlots.overlay;
+      let overlayElement;
+      if (typeof overlay === 'function') {
+        overlayElement = overlay();
+      } else {
+        overlayElement = overlay;
+      }
+      return overlayElement;
+    },
+
     getMenuElement() {
       const { onClick, prefixCls, $slots } = this;
       this.childOriginEvents = getEvents($slots.overlay[0]);
+      const overlayElement = this.getOverlayElement();
       const extraOverlayProps = {
         props: {
           prefixCls: `${prefixCls}-menu`,
@@ -89,13 +107,32 @@ export default {
           click: onClick,
         },
       };
+      if (typeof overlayElement.type === 'string') {
+        delete extraOverlayProps.props.prefixCls;
+      }
       return cloneElement($slots.overlay[0], extraOverlayProps);
     },
 
+    getMenuElementOrLambda() {
+      const overlay = this.overlay || this.$slots.overlay || this.$scopedSlots.overlay;
+      if (typeof overlay === 'function') {
+        return this.getMenuElement;
+      }
+      return this.getMenuElement();
+    },
+
     getPopupDomNode() {
       return this.$refs.trigger.getPopupDomNode();
     },
 
+    getOpenClassName() {
+      const { openClassName, prefixCls } = this.$props;
+      if (openClassName !== undefined) {
+        return openClassName;
+      }
+      return `${prefixCls}-open`;
+    },
+
     afterVisibleChange(visible) {
       if (visible && this.getMinOverlayWidthMatchTrigger()) {
         const overlayNode = this.getPopupDomNode();
@@ -112,6 +149,12 @@ export default {
         }
       }
     },
+
+    renderChildren() {
+      const children = this.$slots.default && this.$slots.default[0];
+      const { sVisible } = this;
+      return (sVisible && children) ? cloneElement(children, { class: this.getOpenClassName() }) : children;
+    },
   },
 
   render() {
@@ -160,7 +203,7 @@ export default {
     const child = this.$slots.default && this.$slots.default[0];
     return (
       <Trigger {...triggerProps}>
-        {child && !child.tag ? <span>{child}</span> : child}
+        {this.renderChildren()}
         <template slot="popup">{this.$slots.overlay && this.getMenuElement()}</template>
       </Trigger>
     );

components/vc-dropdown/src/index.js

@@ -1,3 +1,3 @@
-// base in 2.2.1
+// base in 2.4.1
 import Dropdown from './Dropdown';
 export default Dropdown;