fix(submenu&menuitem): hover performance not good in mobile ;so chang…

…e the mode and methods;

horizon mode default method will use click to open submenu ; expose some interface to config

CHANGELOG.md

@@ -1,4 +1,4 @@
-## 0.1.23 (2020-06-18)
+## 0.1.24 (2020-06-19)
 
 
 ### Bug Fixes
@@ -8,6 +8,7 @@
 * **message:** fix message componenet dom remove bug ([547a77c](https://github.com/yehuozhili/bigbear-ui/commit/547a77cc5c0bc9df9fae5ebc354847472ac45f34))
 * **modal:** fix modal closebtn style ([742142f](https://github.com/yehuozhili/bigbear-ui/commit/742142f0e1a25f54f272b78951035a3d3af5692d))
 * **pagination:** fix pagination splash screen bug ([31980aa](https://github.com/yehuozhili/bigbear-ui/commit/31980aaf84cabf91e98dab10c3b9cb4916ff74d1))
+* **popconfirm&message:** popconfirm can not get scrolltop in mobile ; message btn style render error ([896eb09](https://github.com/yehuozhili/bigbear-ui/commit/896eb0933eeffa08ba98e5c1192b866895f27cd3))
 * **submenu:** fix submenu animation bug ([96edbf7](https://github.com/yehuozhili/bigbear-ui/commit/96edbf78f2babdc7199a6de8f5c4a1ddbac4c2d5))
 * ghpage decorator bug ([8e36b73](https://github.com/yehuozhili/bigbear-ui/commit/8e36b7308635b7a4bf9278b7996b9cab8279b1fe))
 

src/components/Menu/_style.scss

@@ -115,7 +115,7 @@
             transition: .25s ease-in-out;
         }
     }
-    &:hover{
+    &.bigbear-menuopen{
         .bigbear-submenu-icon{
             transform: rotate(180deg);
         }

src/components/Menu/menuitem.tsx

@@ -7,10 +7,17 @@ export interface MenuItemProps {
 	disabled?: boolean;
 	className?: string;
 	style?: CSSProperties;
+	/** 点了menuitem是否关闭submenu 只对horizontal模式有效*/
+	close?: boolean;
+	/** 延迟多久关闭，只在close为true生效*/
+	delay?: number;
+	setMenu?: React.Dispatch<React.SetStateAction<boolean>>;
+	/** 点击后执行逻辑，通过menu回调也可以拿*/
+	callback?: (index: string) => void;
 }
 
 export const MenuItem: FC<MenuItemProps> = (props) => {
-	const { index, disabled, className, style, children } = props;
+	const { index, disabled, className, style, children, close, setMenu, delay, callback } = props;
 	const context = useContext(MenuContext);
 	const classes = classNames("bigbear-menuitem", className, {
 		isdisabled: disabled,
@@ -20,6 +27,14 @@ export const MenuItem: FC<MenuItemProps> = (props) => {
 		if (context.onSelect && !disabled && typeof index === "string") {
 			context.onSelect(index);
 		}
+		if (close && setMenu && context.mode === "horizontal") {
+			setTimeout(() => {
+				setMenu(false);
+			}, delay);
+		}
+		if (callback && !disabled && typeof index === "string") {
+			callback(index);
+		}
 	};
 	return (
 		<li className={classes} style={style} onClick={handleClick}>
@@ -30,4 +45,9 @@ export const MenuItem: FC<MenuItemProps> = (props) => {
 
 MenuItem.displayName = "MenuItem";
 
+MenuItem.defaultProps = {
+	close: true,
+	delay: 300
+};
+
 export default MenuItem;

src/components/Menu/submenu.tsx

@@ -4,32 +4,38 @@ import React, {
 	FunctionComponentElement,
 	CSSProperties,
 	useState,
-	useEffect
+	useEffect,
+	ReactNode,
+	useRef
 } from "react";
 import { MenuContext } from "./menu";
 import classNames from "classnames";
 import { MenuItemProps } from "./menuitem";
 import Icon from "../Icon/icon";
 import Transition from "../Transition/transition";
+import { useClickOutside } from "../..";
 
 export interface SubMenuProps {
 	/** 是否默认开启*/
 	isopen?: boolean;
 	/** 传给item的索引*/
 	index?: string;
 	/** submenu的标题*/
-	title?: string;
+	title?: ReactNode;
 	/** 新增的类名*/
 	className?: string;
 	/** 样式*/
 	style?: CSSProperties;
+	/** 开启横向menu的hover打卡submenu */
+	hover?: boolean;
 }
 
 const renderChildren = (
 	children: React.ReactNode,
 	menuopen: boolean,
 	index: string | undefined,
-	mode: "horizontal" | "vertical" | undefined
+	mode: "horizontal" | "vertical" | undefined,
+	setMenuopen: React.Dispatch<React.SetStateAction<boolean>>
 ) => {
 	const classes = classNames("bigbear-submenu-children", {
 		"bigbear-menuopen": menuopen
@@ -38,7 +44,8 @@ const renderChildren = (
 		const childElement = child as FunctionComponentElement<MenuItemProps>;
 		if (childElement.type.displayName === "MenuItem") {
 			return React.cloneElement(childElement, {
-				index: `${index}-${i}`
+				index: `${index}-${i}`,
+				setMenu: setMenuopen
 			});
 		} else {
 			console.error("submenu must in menuItem");
@@ -55,30 +62,37 @@ const renderChildren = (
 	);
 };
 export const SubMenu: FC<SubMenuProps> = (props) => {
-	const { index, className, style, children, title, isopen } = props;
+	const { index, className, style, children, title, isopen, hover } = props;
 	const context = useContext(MenuContext);
 	const [menuopen, setMenuopen] = useState(
 		context.index === index && context.mode === "vertical" ? true : false
 	);
 	const classes = classNames("bigbear-menuitem bigbear-submenu menu-realative", className, {
 		"bigbear-menuopen": menuopen,
+		"bigbear-menuclose": !menuopen && context.mode === "horizontal",
 		isvertical: context.mode === "vertical",
 		issubactive: context.index.split("-")[0] === index
 	});
 
 	const handleClick = (e: React.MouseEvent) => {
 		e.preventDefault();
 	};
-	let timer: any;
+	let timer: number;
+	const ref = useRef(null);
+	useClickOutside(ref, () => {
+		if (context.mode === "horizontal") {
+			setMenuopen(false);
+		}
+	});
 	const handleHover = (e: React.MouseEvent, toggle: boolean) => {
 		clearTimeout(timer);
 		e.preventDefault();
-		timer = setTimeout(() => {
+		timer = window.setTimeout(() => {
 			setMenuopen(toggle);
 		}, 300);
 	};
 	const hoverEvents =
-		context.mode !== "vertical"
+		context.mode !== "vertical" && hover
 			? {
 					onMouseEnter: (e: React.MouseEvent) => {
 						handleHover(e, true);
@@ -94,23 +108,28 @@ export const SubMenu: FC<SubMenuProps> = (props) => {
 		}
 	}, [isopen]);
 	return (
-		<li key={index} className={classes} style={style} onClick={handleClick} {...hoverEvents}>
-			<div
-				onClick={() => (context.mode === "vertical" ? setMenuopen(!menuopen) : null)}
-				className="bigbear-submenu-title"
-			>
+		<li
+			key={index}
+			className={classes}
+			style={style}
+			onClick={handleClick}
+			{...hoverEvents}
+			ref={ref}
+		>
+			<div onClick={() => setMenuopen(!menuopen)} className="bigbear-submenu-title">
 				{title ? title : null}
 				<Icon icon="angle-down" className="bigbear-submenu-icon"></Icon>
 			</div>
-			{renderChildren(children, menuopen, index, context.mode)}
+			{renderChildren(children, menuopen, index, context.mode, setMenuopen)}
 		</li>
 	);
 };
 
 SubMenu.displayName = "SubMenu";
 
 SubMenu.defaultProps = {
-	isopen: false
+	isopen: false,
+	hover: false
 };
 
 export default SubMenu;