@kdcloudjs/kdesign 1.5.3 → 1.5.6

package/es/tree/treeNode.d.ts

@@ -25,6 +25,7 @@ export interface TreeNodeProps {
     pos?: string;
     estimatedItemSize?: number;
     dragOver?: boolean;
+    isLeaf?: boolean;
     onCheck?: (key: string, value: boolean, node: React.ReactNode, event: React.MouseEvent<MouseEvent>, pos: string) => void;
     onSelect?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode, key: string) => void;
     onExpand?: (value: boolean, node: React.ReactNode) => void;

package/es/tree/treeNode.js

@@ -17,12 +17,13 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import Checkbox from './../checkbox';
 import Icon from '../icon';
+import Spin from '../spin';
 var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _context;
 
@@ -57,6 +58,8 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       indeterminate = TreeNodeProps.indeterminate,
       estimatedItemSize = TreeNodeProps.estimatedItemSize,
       dragOver = TreeNodeProps.dragOver,
+      expandOnClickNode = TreeNodeProps.expandOnClickNode,
+      loading = TreeNodeProps.loading,
       onExpand = TreeNodeProps.onExpand,
       onCheck = TreeNodeProps.onCheck,
       onDragStart = TreeNodeProps.onDragStart,
@@ -66,7 +69,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onDragEnd = TreeNodeProps.onDragEnd,
       onDrop = TreeNodeProps.onDrop,
       onSelect = TreeNodeProps.onSelect,
-      others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
+      others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "expandOnClickNode", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
 
   var nodeData = React.useMemo(function () {
     return _extends({
@@ -84,7 +87,6 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       indeterminate: indeterminate,
       icon: icon,
       switcherIcon: switcherIcon,
-      // showLine,
       showIcon: showIcon,
       selected: selected
     }, others);
@@ -166,57 +168,46 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     return indentArr;
-  }; // line的两种模式， 图标被替换和图标不被替换
+  };
+
+  var isLeaf = useCallback(function () {
+    var isLeaf = TreeNodeProps.isLeaf,
+        loadData = TreeNodeProps.loadData,
+        hasChildNode = TreeNodeProps.hasChildNode;
+
+    if (isLeaf === false) {
+      return false;
+    }
 
+    return isLeaf || !loadData && !hasChildNode;
+  }, [TreeNodeProps]); // line的两种模式， 图标被替换和图标不被替换
 
   var renderExpandIcon = function renderExpandIcon() {
-    // todo 图标被替换则 line样式改变
-    // if(switcherIcon){
-    // }
-    if (hasChildNode) {
-      var _classNames2;
-
-      // todo    showLine模式 使用+ -符号图标
-      // if(!!showLine){
-      //   return (
-      //     <span
-      //     onClick={handleClick}
-      //     className={classNames(`${treeNodePrefixCls}-icon`)}
-      //   >
-      //     {expand ? <Icon type='search' /> : <Icon type='add' />}
-      //   </span>
-      //   )
-      // }
+    if (loading) {
+      return /*#__PURE__*/React.createElement(Spin, {
+        type: "component"
+      });
+    }
+
+    var showExpandIcon = !isLeaf();
+
+    if (showExpandIcon) {
+      var _classNames3;
+
       if (Array.isArray(switcherIcon) && switcherIcon.length === 2) {
         return /*#__PURE__*/React.createElement("span", {
-          className: classNames("".concat(treeNodePrefixCls, "-icon"))
+          className: classNames("".concat(treeNodePrefixCls, "-icon"), _defineProperty({}, "".concat(treeNodePrefixCls, "-icon-hover"), !expandOnClickNode)),
+          onClick: expandOnClickNode ? undefined : handleExpandIconClick
         }, expandState ? renderIcon(switcherIcon[1]) : renderIcon(switcherIcon[0]));
       }
 
       return /*#__PURE__*/React.createElement("span", {
-        className: classNames("".concat(treeNodePrefixCls, "-icon"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(treeNodePrefixCls, "-animation-expand"), expandState), _defineProperty(_classNames2, "".concat(treeNodePrefixCls, "-animation-collapse"), !expandState), _classNames2))
+        className: classNames("".concat(treeNodePrefixCls, "-icon"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-animation-expand"), expandState), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-animation-collapse"), !expandState), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-icon-hover"), !expandOnClickNode), _classNames3)),
+        onClick: expandOnClickNode ? undefined : handleExpandIconClick
       }, renderIcon(switcherIcon || /*#__PURE__*/React.createElement(Icon, {
         type: "arrow-right-solid"
       })));
     } else {
-      // if(typeof showLine === 'object' && !showLine.showLeafIcon){
-      //   return (
-      //     <span
-      //       className={classNames(`${treeNodePrefixCls}-icon-hidden`)}
-      //     >
-      //       {/* todo  renderLeafLine() */}
-      //       {renderIcon(leafIcon)}
-      //     </span>
-      //   )
-      // }else if(typeof showLine === 'object' && showLine.showLeafIcon || showLine === true){
-      //   return (
-      //     <span
-      //       className={classNames(`${treeNodePrefixCls}-leaf-icon`)}
-      //     >
-      //       {renderIcon(leafIcon)}
-      //     </span>
-      //   )
-      // }
       // 叶子结点 隐藏展开按钮
       return /*#__PURE__*/React.createElement("span", {
         className: "".concat(treeNodePrefixCls, "-icon-hidden")
@@ -231,11 +222,11 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var renderNode = function renderNode() {
-    var _classNames3;
+    var _classNames4, _classNames5;
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       draggable: draggable && !disabled,
-      className: classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-draggabled"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-root"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-drag-over"), dragOver), _classNames3)),
+      className: classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(treeNodePrefixCls, "-draggabled"), true), _defineProperty(_classNames4, "".concat(treeNodePrefixCls, "-root"), true), _defineProperty(_classNames4, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _defineProperty(_classNames4, "".concat(treeNodePrefixCls, "-drag-over"), dragOver), _classNames4)),
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
       onDragOver: handleDragOver,
@@ -244,7 +235,8 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onDrop: handleDrop,
       ref: dragRef
     }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(treeNodePrefixCls, "-title-wrap")
+      className: classNames((_classNames5 = {}, _defineProperty(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap"), true), _defineProperty(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap-hover"), !expandOnClickNode && !disabled), _defineProperty(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap-selected"), selected && selectable && !disabled && !expandOnClickNode), _classNames5)),
+      onClick: expandOnClickNode ? undefined : handleClick
     }, checkable ? /*#__PURE__*/React.createElement(Checkbox, {
       onChange: handleOnchange,
       checked: checked,
@@ -271,12 +263,16 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       selectNode: handleSelect
     };
   });
-  var handleClick = React.useCallback(function (e) {
-    e.stopPropagation();
+  var handleExpandIconClick = useCallback(function (e) {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
     setExpandState(!expandState);
     onExpand && onExpand(nodeKey, !expandState, nodeData);
+  }, [expandState, nodeData, nodeKey, onExpand, setExpandState]);
+  var handleClick = React.useCallback(function (e) {
+    e.stopPropagation();
+    expandOnClickNode && handleExpandIconClick();
     handleSelect(e);
-  }, [setExpandState, expandState, onExpand, nodeKey, nodeData, handleSelect]);
+  }, [expandOnClickNode, handleExpandIconClick, handleSelect]);
   var handleDragStart = React.useCallback(function (e) {
     if (!draggable) return;
     setDragNode(nodeData);
@@ -325,11 +321,11 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [onDrop, nodeData, nodeKey]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(treeNodePrefixCls, "-item"), _defineProperty({}, "".concat(treeNodePrefixCls, "-item-hover"), !disabled && selectable), _defineProperty({}, "".concat(treeNodePrefixCls, "-selected"), selected && selectable && !disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-disabled"), disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-opened"), expandState), _concatInstanceProperty(_context = "".concat(treeNodePrefixCls, "-item-")).call(_context, nodeKey), className),
+    className: classNames("".concat(treeNodePrefixCls, "-item"), _defineProperty({}, "".concat(treeNodePrefixCls, "-item-hover"), !disabled && selectable && expandOnClickNode), _defineProperty({}, "".concat(treeNodePrefixCls, "-selected"), selected && selectable && !disabled && expandOnClickNode), _defineProperty({}, "".concat(treeNodePrefixCls, "-disabled"), disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-opened"), expandState), _concatInstanceProperty(_context = "".concat(treeNodePrefixCls, "-item-")).call(_context, nodeKey), className),
     style: _extends({
       height: "".concat(estimatedItemSize, "px")
     }, style),
-    onClick: handleClick
+    onClick: expandOnClickNode ? handleClick : undefined
   }, renderNode());
 });
 TreeNode.displayName = 'TreeNode';

package/es/tree/utils/treeUtils.d.ts

@@ -7,13 +7,16 @@ import { TreeNodeData } from '../tree';
  * @param level
  * @param pos
  */
-export declare const flattenAll: (treeData: any[], newTreeData?: TreeNodeData[], level?: number, pos?: string | undefined) => TreeNodeData[];
+export declare const flattenAll: (treeData: any[], newTreeData?: TreeNodeData[], level?: number, pos?: string | undefined) => {
+    flattenAllData: TreeNodeData[];
+    maxLevel: number;
+};
 export declare const getExpand: (expandedKeys: string[], key: string) => boolean;
 export declare const getChecked: (checkedKeys: string[], key: string) => boolean;
 export declare const getSelected: (selectedKeys: string[], key: string) => boolean;
 export declare const getHalfChecked: (halfCheckedKeys: string[], key: string) => boolean;
 export declare const getAllFilterKeys: (data: any[], filterTreeNode: FunctionConstructor) => any[];
-export declare const getFilterData: (data: any[], filterTreeNode: FunctionConstructor, filterValue: string) => any[];
+export declare const getFilterData: (data: any[], filterTreeNode: FunctionConstructor, isSearching: boolean) => any[];
 export declare const getMaxLevel: (data: any[]) => number;
 /**
  *计算node的属性后返回新的 treedata
@@ -43,6 +46,6 @@ export declare const getDataCheckededStateStrictly: (checkedKeys: string[]) => {
 };
 export declare const delKey: (prevKeys: string[], delKeys: string[]) => never[] & string[];
 export declare const getAllNodeKeys: (data: any[]) => string[];
-export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, filterValue: string) => string[];
+export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, isSearching: boolean) => string[];
 export declare const getExpandedKeys: (expandedKeys: string[], expandScrollkeys?: string[]) => string[];
 export declare const calcDropPosition: (event: React.MouseEvent, dropNode: HTMLElement) => 0 | 1 | -1;

package/es/tree/utils/treeUtils.js

@@ -5,7 +5,6 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -38,29 +37,54 @@ export var flattenAll = function flattenAll(treeData) {
   var newTreeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var pos = arguments.length > 3 ? arguments[3] : undefined;
-  treeData && treeData.forEach(function (item, index) {
-    var _context;
+  var maxLevel = 0;
 
-    var children = item.children,
-        title = item.title,
-        key = item.key,
-        others = __rest(item, ["children", "title", "key"]);
+  var fn = function fn(treeData) {
+    var newTreeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    var pos = arguments.length > 3 ? arguments[3] : undefined;
+    var parent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+    treeData && treeData.forEach(function (item, index) {
+      var _context;
 
-    var _pos = pos ? _concatInstanceProperty(_context = "".concat(pos, "-")).call(_context, index) : "".concat(index);
+      var children = item.children,
+          title = item.title,
+          key = item.key,
+          others = __rest(item, ["children", "title", "key"]);
 
-    var hasChildNode = children && children instanceof Array && children.length > 0;
-    newTreeData.push(_extends({
-      title: title,
-      key: key,
-      pos: _pos,
-      hasChildNode: hasChildNode,
-      level: level
-    }, others));
-    var _level = level;
-    _level++;
-    flattenAll(children, newTreeData, _level, _pos);
-  });
-  return newTreeData;
+      item.parent = parent;
+
+      var _pos = pos ? _concatInstanceProperty(_context = "".concat(pos, "-")).call(_context, index) : "".concat(index);
+
+      var hasChildNode = item.isLeaf ? false : children && children instanceof Array && children.length > 0;
+
+      var flattenNode = _extends({
+        title: title,
+        key: key,
+        pos: _pos,
+        hasChildNode: hasChildNode,
+        level: level,
+        parent: parent
+      }, others);
+
+      newTreeData.push(flattenNode);
+      var _level = level;
+
+      if (maxLevel < level) {
+        maxLevel = level;
+      }
+
+      _level++;
+      hasChildNode && fn(children, newTreeData, _level, _pos, flattenNode);
+    });
+    return newTreeData;
+  };
+
+  var flattenAllData = fn(treeData, newTreeData, level, pos);
+  return {
+    flattenAllData: flattenAllData,
+    maxLevel: maxLevel
+  };
 };
 export var getExpand = function getExpand(expandedKeys, key) {
   return expandedKeys === null || expandedKeys === void 0 ? void 0 : _includesInstanceProperty(expandedKeys).call(expandedKeys, key);
@@ -97,29 +121,29 @@ var isAllParentExpand = function isAllParentExpand(data, pos) {
 };
 
 export var getAllFilterKeys = function getAllFilterKeys(data, filterTreeNode) {
-  var filterData = _filterInstanceProperty(data).call(data, function (item) {
-    return filterTreeNode === null || filterTreeNode === void 0 ? void 0 : filterTreeNode(item);
-  });
-
-  var filterKeys = getAllNodeKeys(filterData);
   var allFilterKeys = [];
 
-  _mapInstanceProperty(filterKeys).call(filterKeys, function (key) {
-    var _context2;
+  _filterInstanceProperty(data).call(data, function (item) {
+    return filterTreeNode === null || filterTreeNode === void 0 ? void 0 : filterTreeNode(item);
+  }).forEach(function (item) {
+    var node = _extends({}, item);
 
-    return allFilterKeys.push.apply(allFilterKeys, _concatInstanceProperty(_context2 = _toConsumableArray(getAllParentKeys(data, key))).call(_context2, [key]));
+    while (node) {
+      allFilterKeys.push(node.key);
+      node = node.parent;
+    }
   });
 
   return _toConsumableArray(new _Set(allFilterKeys));
 };
-export var getFilterData = function getFilterData(data, filterTreeNode, filterValue) {
+export var getFilterData = function getFilterData(data, filterTreeNode, isSearching) {
   var filterData = data;
+  var allFilterKeys = null;
 
-  if (typeof filterTreeNode === 'function' && filterValue) {
+  if (isSearching) {
+    allFilterKeys = getAllFilterKeys(filterData, filterTreeNode);
     filterData = _filterInstanceProperty(filterData).call(filterData, function (item) {
-      var _context3;
-
-      return _includesInstanceProperty(_context3 = getAllFilterKeys(filterData, filterTreeNode)).call(_context3, item.key);
+      return _includesInstanceProperty(allFilterKeys).call(allFilterKeys, item.key);
     });
   }
 
@@ -258,11 +282,11 @@ export var getSpreadAttrData = function getSpreadAttrData(treeData, expandedKeys
   return newTreeData;
 };
 export var addKeys = function addKeys() {
-  var _context4;
+  var _context2;
 
   var prevKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var newKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return _Array$from(new _Set(_concatInstanceProperty(_context4 = []).call(_context4, _toConsumableArray(prevKeys), _toConsumableArray(newKeys))));
+  return _Array$from(new _Set(_concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(prevKeys), _toConsumableArray(newKeys))));
 };
 export var getAllParentKeys = function getAllParentKeys(data) {
   var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -315,14 +339,14 @@ export var getPos = function getPos(data, key) {
   return node === null || node === void 0 ? void 0 : node.pos;
 };
 export var getInitCheckedKeys = function getInitCheckedKeys(data, keys) {
-  var _context5;
+  var _context3;
 
   var checkedKeys = [];
   keys.forEach(function (item) {
     var pos = getPos(data, item);
     checkedKeys.push.apply(checkedKeys, _toConsumableArray(getAllChildKeys(data, pos)));
   });
-  return _Array$from(new _Set(_concatInstanceProperty(_context5 = []).call(_context5, checkedKeys, _toConsumableArray(keys))));
+  return _Array$from(new _Set(_concatInstanceProperty(_context3 = []).call(_context3, checkedKeys, _toConsumableArray(keys))));
 };
 export var getInitCheckededState = function getInitCheckededState(data) {
   var checkedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -497,7 +521,7 @@ var getRootKeys = function getRootKeys(data) {
 export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent) {
   var expandScrollkeys = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : [];
   var filterTreeNode = arguments.length > 7 ? arguments[7] : undefined;
-  var filterValue = arguments.length > 8 ? arguments[8] : undefined;
+  var isSearching = arguments.length > 8 ? arguments[8] : undefined;
   var keys = (expandedKeys === null || expandedKeys === void 0 ? void 0 : _concatInstanceProperty(expandedKeys).call(expandedKeys, expandScrollkeys)) || (defaultExpandedKeys === null || defaultExpandedKeys === void 0 ? void 0 : _concatInstanceProperty(defaultExpandedKeys).call(defaultExpandedKeys, expandScrollkeys)) || [];
 
   if (defaultExpandAll) {
@@ -520,10 +544,10 @@ export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys
     }
   }
 
-  if (typeof filterTreeNode === 'function' && filterValue) {
-    var _context6;
+  if (isSearching) {
+    var _context4;
 
-    keys = _concatInstanceProperty(_context6 = []).call(_context6, _toConsumableArray(keys), _toConsumableArray(getAllFilterKeys(data, filterTreeNode)));
+    keys = _concatInstanceProperty(_context4 = []).call(_context4, _toConsumableArray(keys), _toConsumableArray(getAllFilterKeys(data, filterTreeNode)));
   }
 
   return _Array$from(new _Set(_toConsumableArray(keys)));

package/lib/_utils/usePopper.js

@@ -255,6 +255,11 @@ function usePopper(locatorElement, popperElement, props) {
       visible = _useState10[0],
       setVisible = _useState10[1];
 
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      active = _useState12[0],
+      setActive = _useState12[1];
+
   (0, _react.useEffect)(function () {
     if (props.visible) {
       !exist && setExist(true);
@@ -265,20 +270,20 @@ function usePopper(locatorElement, popperElement, props) {
     }
   }, [exist, props.visible]);
 
-  var _useState11 = (0, _react.useState)(''),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      evType = _useState12[0],
-      setEvType = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(),
+  var _useState13 = (0, _react.useState)(''),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      align = _useState14[0],
-      setAlign = _useState14[1];
+      evType = _useState14[0],
+      setEvType = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(placement),
+  var _useState15 = (0, _react.useState)(),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      currentPlacement = _useState16[0],
-      setCurrentPlacement = _useState16[1];
+      align = _useState16[0],
+      setAlign = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(placement),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      nextPlacement = _useState18[0],
+      setNextPlacement = _useState18[1];
 
   var alignPopper = (0, _react.useCallback)(function () {
     if ((locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current) && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
@@ -323,39 +328,47 @@ function usePopper(locatorElement, popperElement, props) {
         bottom: locatorTop + borderTop + translateTop + height - containerTop - scrollTop
       };
       var currentPos = trigger === 'contextMenu' ? mousePos : locatorPos;
-      var _currentPlacement = placement;
+      var currentPlacement = nextPlacement;
 
       if (autoPlacement) {
         if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
-          _currentPlacement = _currentPlacement.replace('top', 'bottom');
+          currentPlacement = currentPlacement.replace('top', 'bottom');
         }
 
         if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
-          _currentPlacement = _currentPlacement.replace('bottom', 'top');
+          currentPlacement = currentPlacement.replace('bottom', 'top');
         }
 
         if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
-          _currentPlacement = _currentPlacement.replace('Left', 'Right');
+          currentPlacement = currentPlacement.replace('Left', 'Right');
         }
 
         if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
-          _currentPlacement = _currentPlacement.replace('Right', 'Left');
+          currentPlacement = currentPlacement.replace('Right', 'Left');
         }
 
         if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
-          _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
+          currentPlacement = currentPlacement.replace('Top', 'Bottom');
         }
 
         if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
-          _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
+          currentPlacement = currentPlacement.replace('Bottom', 'Top');
         }
 
         if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
-          _currentPlacement = _currentPlacement.replace('left', 'right');
+          currentPlacement = currentPlacement.replace('left', 'right');
         }
 
         if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
-          _currentPlacement = _currentPlacement.replace('right', 'left');
+          currentPlacement = currentPlacement.replace('right', 'left');
+        }
+
+        if (right - width / 2 + popperWidth / 2 >= document.body.clientWidth - 5 && right - popperWidth > 5) {
+          currentPlacement += 'Right';
+        }
+
+        if (left - width / 2 - popperWidth / 2 <= 5 && left + popperWidth < document.body.clientWidth - 5) {
+          currentPlacement += 'Left';
         }
       }
 
@@ -417,16 +430,16 @@ function usePopper(locatorElement, popperElement, props) {
           top: topBottom
         }
       };
-      var alignPos = mapAlign[_currentPlacement];
+      var alignPos = mapAlign[currentPlacement];
       var _arrowPos = {
         top: 0,
         left: 0
       };
 
-      if (/left/.test(_currentPlacement) || /right/.test(_currentPlacement)) {
-        if (/Top/.test(_currentPlacement)) {
+      if (/left/.test(currentPlacement) || /right/.test(currentPlacement)) {
+        if (/Top/.test(currentPlacement)) {
           _arrowPos.top = arrowOffset;
-        } else if (/Bottom/.test(_currentPlacement)) {
+        } else if (/Bottom/.test(currentPlacement)) {
           _arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
         } else {
           _arrowPos.top = (popperHeight - arrowWidth) / 2 - 1;
@@ -453,29 +466,40 @@ function usePopper(locatorElement, popperElement, props) {
             _arrowPos.top += scrollBottom - document.body.clientHeight;
           }
         }
-      }
-
-      if (/top/.test(_currentPlacement) || /bottom/.test(_currentPlacement)) {
-        if (/Left/.test(_currentPlacement)) {
+      } else if (/top/.test(currentPlacement) || /bottom/.test(currentPlacement)) {
+        if (/Left/.test(currentPlacement)) {
           _arrowPos.left = arrowOffset;
-        } else if (/Right/.test(_currentPlacement)) {
+        } else if (/Right/.test(currentPlacement)) {
           _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
         } else {
           _arrowPos.left = (popperWidth - arrowWidth) / 2 - 1;
         }
+
+        if (left <= 0) {
+          alignPos.left = locatorPos.left;
+          _arrowPos.left = arrowOffset;
+        } else if (right >= document.body.clientWidth) {
+          alignPos.left = locatorPos.right - popperWidth;
+          alignPos.right = -360;
+          _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
+        }
       }
 
       setAlign(alignPos);
       setArrowPos(_arrowPos);
-      setCurrentPlacement(_currentPlacement);
+      setNextPlacement(currentPlacement);
     }
-  }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth, autoPlacement]);
+  }, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth]);
   (0, _react.useEffect)(function () {
     if (canAlign) {
       alignPopper();
       setCanAlign(false);
       props.visible === undefined && setVisible(true);
       onVisibleChange && onVisibleChange(true);
+      setActive(true);
+      setTimeout(function () {
+        return setActive(false);
+      }, 200);
     }
   }, [alignPopper, canAlign, onVisibleChange, props]);
   var arrowStyle = (_arrowStyle = {}, (0, _defineProperty2.default)(_arrowStyle, "--arrowSize", arrowSize + 'px'), (0, _defineProperty2.default)(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
@@ -487,10 +511,10 @@ function usePopper(locatorElement, popperElement, props) {
   var popperProps = {
     ref: popperRef,
     style: popperContainerStyle,
-    className: (0, _classnames.default)(prefixCls, popperClassName, currentPlacement, (0, _defineProperty2.default)({
+    className: (0, _classnames.default)(prefixCls, popperClassName, nextPlacement, (0, _defineProperty2.default)({
       arrow: arrow,
       hidden: !visible
-    }, "".concat(currentPlacement, "-active"), visible))
+    }, "".concat(nextPlacement, "-active"), active))
   };
   var popperNode = popperRef.current;
   var locatorNode = locatorRef.current;
@@ -520,6 +544,11 @@ function usePopper(locatorElement, popperElement, props) {
     props.visible === undefined && setVisible(false);
     onVisibleChange && onVisibleChange(false);
   }, [onVisibleChange, props.visible]);
+
+  var matchTrigger = function matchTrigger(words) {
+    return Array.isArray(trigger) ? (0, _includes.default)(trigger).call(trigger, words) : trigger === words;
+  };
+
   (0, _react.useEffect)(function () {
     if (exist && visible) {
       var mouseleaveTimer;
@@ -528,21 +557,21 @@ function usePopper(locatorElement, popperElement, props) {
         var triggerNode = getTriggerElement(locatorRef.current);
         var triggerRect = triggerNode.getBoundingClientRect();
         var popperRect = popperRef.current.getBoundingClientRect();
-        var left = /left/.test(currentPlacement) ? popperRect.right : triggerRect.left;
-        var right = /right/.test(currentPlacement) ? popperRect.left : triggerRect.right;
-        var top = /top/.test(currentPlacement) ? popperRect.bottom : triggerRect.top;
-        var bottom = /bottom/.test(currentPlacement) ? popperRect.top : triggerRect.bottom;
+        var left = /left/.test(nextPlacement) ? popperRect.right : triggerRect.left;
+        var right = /right/.test(nextPlacement) ? popperRect.left : triggerRect.right;
+        var top = /top/.test(nextPlacement) ? popperRect.bottom : triggerRect.top;
+        var bottom = /bottom/.test(nextPlacement) ? popperRect.top : triggerRect.bottom;
         var X = e.clientX,
             Y = e.clientY;
         var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
         var inPopperRect = X > popperRect.left && X < popperRect.right && Y > popperRect.top && Y < popperRect.bottom;
-        var ableArea = evType === 'contextmenu' ? inPopperRect : inTriggerRect || inPopperRect;
+        var ableArea = matchTrigger('contextMenu') ? inPopperRect : inTriggerRect || inPopperRect;
 
         if (ableArea) {
           mouseleaveTimer && clearTimeout(mouseleaveTimer);
-          evType === 'focus' && triggerNode.focus();
+          matchTrigger('focus') && triggerNode.focus();
         } else {
-          evType === 'mouseenter' ? mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000) : hidePopper();
+          matchTrigger('hover') ? mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000) : hidePopper();
         }
       };
 
@@ -550,17 +579,21 @@ function usePopper(locatorElement, popperElement, props) {
         leading: true
       });
       var mapEvent = {
-        mouseenter: 'mousemove',
-        mouseup: 'mousedown',
+        hover: 'mousemove',
+        click: 'mousedown',
         focus: 'mousedown',
-        contextmenu: 'mousedown'
+        contextMenu: 'mousedown'
       };
-      document.addEventListener(mapEvent[evType], debounceHidePopper);
+      Array.isArray(trigger) ? trigger.forEach(function (action) {
+        return document.addEventListener(mapEvent[action], debounceHidePopper);
+      }) : document.addEventListener(mapEvent[trigger], debounceHidePopper);
       return function () {
-        document.removeEventListener(mapEvent[evType], debounceHidePopper);
+        Array.isArray(trigger) ? trigger.forEach(function (action) {
+          return document.removeEventListener(mapEvent[action], debounceHidePopper);
+        }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
       };
     }
-  }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
+  }, [nextPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
   (0, _react.useEffect)(function () {
     if (visible) {
       var scrollAlign = (0, _debounce.default)(function (e) {