Merge pull request #29 from hangaoke1/hotfix/dropdown_11.10

fix: 修复dropdown状态显示异常问题
NSFI · Nov 10, 2021 · db4b2cd · db4b2cd
2 parents 60b9718 + 4a4ff96
commit db4b2cd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/source/components/Dropdown/DropdownItem.tsx b/source/components/Dropdown/DropdownItem.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
+import classnames from 'classnames';
 import { DropdownItemPropsType } from './PropsType';
 
 const DropdownItem: React.FC<DropdownItemPropsType> = ({
@@ -14,12 +15,14 @@ const DropdownItem: React.FC<DropdownItemPropsType> = ({
     e.stopPropagation();
     setDropDownMenuValue?.((pre: any) => (pre === value ? '' : value));
   };
+
+  const isActive = dropDownMenuValue === value;
   return (
     <div className="fm-dropdown-menu__item">
       <div
-        className="fm-dropdown-menu__title"
+        className={classnames('fm-dropdown-menu__title', isActive ? 'fm-dropdown-menu__title--active' : '')}
         style={{
-          color: dropDownMenuValue === value ? activeColor : '#222',
+          color: isActive ? activeColor : '#222',
         }}
         onClick={handleItemClick}
       >

diff --git a/source/components/Dropdown/DropdownMenu.tsx b/source/components/Dropdown/DropdownMenu.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useRef, useEffect, createRef } from 'react';
 import classNames from 'classnames';
+import { useClickAway } from 'ahooks';
 import { CSSTransition } from 'react-transition-group';
 import { DropdownMenuPropsType } from './PropsType';
 import DropdownItem from './DropdownItem';
@@ -14,13 +15,9 @@ const DropdownMenu: React.FC<DropdownMenuPropsType> & {
   const renderChildren = Array.isArray(children) ? children : [children];
   const cssTransitionNodeRefs = useRef<any[]>(renderChildren.map(() => createRef()));
 
-  useEffect(() => {
-    const fn = () => setDropDownMenuValue('');
-    window.addEventListener('click', fn, false);
-    return () => {
-      window.removeEventListener('click', fn);
-    };
-  }, []);
+  useClickAway(() => {
+    setDropDownMenuValue('');
+  }, dropDownMenuRef);
 
   useEffect(() => {
     if (dropDownMenuValue) {
@@ -91,7 +88,12 @@ const DropdownMenu: React.FC<DropdownMenuPropsType> & {
                   }
             }
           >
-            <div className="fm-overlay" />
+            <div
+              className="fm-overlay"
+              onClick={() => {
+                setDropDownMenuValue('');
+              }}
+            />
             <div
               className="fm-dropdown-item__content"
               style={direction === 'down' ? { top: 0 } : { bottom: 0 }}

diff --git a/source/components/Dropdown/style/index.less b/source/components/Dropdown/style/index.less
@@ -11,13 +11,15 @@
     min-width: 0;
     cursor: pointer;
   }
+
   &__title {
     position: relative;
     box-sizing: border-box;
     max-width: 100%;
     padding: 0 8px;
     font-size: 15px;
     line-height: 22px;
+
     &::after {
       position: absolute;
       top: 50%;
@@ -31,19 +33,22 @@
       content: '';
     }
   }
+
+  &__title--active::after {
+    margin-top: -1px;
+    transform: rotate(135deg);
+    border-color: transparent transparent currentColor currentColor;
+  }
+
   &_bar {
     position: relative;
     display: flex;
     height: 50px;
     background-color: #fff;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+
     &--opened {
       z-index: 11;
-      .fm-dropdown-menu__title::after {
-        margin-top: -1px;
-        transform: rotate(135deg);
-        border-color: transparent transparent currentColor currentColor;
-      }
     }
   }
 }
@@ -55,6 +60,7 @@
   z-index: 10;
   overflow: hidden;
   transition: all .3s ease-in;
+
   .fm-overlay {
     position: absolute;
     top: 0;
@@ -65,6 +71,7 @@
     background-color: rgba(0, 0, 0, 0.7);
     transition: all .3s ease;
   }
+
   &__content {
     position: absolute;
     left: 0;
@@ -73,6 +80,7 @@
     z-index: 2021;
     background-color: #fff;
     transition: transform .3s ease;
+
     .fm-cell {
       position: relative;
       display: flex;
@@ -91,21 +99,28 @@
   transform: translate3d(0, -100%, 0);
   transition-timing-function: ease-out;
 }
+
 .down-exit-active .fm-dropdown-item__content {
   transform: translate3d(0, -100%, 0);
   transition-timing-function: ease-in;
 }
+
 .up-enter .fm-dropdown-item__content {
   transform: translate3d(0, 100%, 0);
   transition-timing-function: ease-out;
 }
+
 .up-exit-active .fm-dropdown-item__content {
   transform: translate3d(0, 100%, 0);
   transition-timing-function: ease-in;
 }
-.down-enter,.up-enter .fm-overlay {
+
+.down-enter,
+.up-enter .fm-overlay {
   opacity: 0;
 }
-.down-exit-active,.up-enter .fm-overlay {
+
+.down-exit-active,
+.up-enter .fm-overlay {
   opacity: 0;
-}
+}