react-artasys-ui 0.1.14 → 0.1.16

package/lib/Dropdown/Dropdown.d.ts

@@ -8,6 +8,8 @@ export interface IDropdown extends AllHTMLAttributes<HTMLDivElement> {
     hover?: boolean;
     items?: FunctionComponentElement<IItem> | FunctionComponentElement<IItem>[];
     disabled?: boolean;
+    onShow?: () => void;
+    onHide?: () => void;
 }
-declare const Dropdown: ({ children, className, items, direction, position, split, disabled, hover, ...props }: IDropdown) => JSX.Element;
+declare const Dropdown: ({ children, className, items, direction, position, split, disabled, hover, onShow, onHide, ...props }: IDropdown) => JSX.Element;
 export default Dropdown;

package/lib/Dropdown/Items.d.ts

@@ -0,0 +1,6 @@
+import type { IDropdown } from "./Dropdown";
+interface IItems extends Pick<IDropdown, 'items' | 'disabled'> {
+    isOpen: boolean;
+}
+declare const Items: ({ items, isOpen, disabled }: IItems) => JSX.Element | null;
+export default Items;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

package/src/Dropdown/Dropdown.tsx

@@ -4,7 +4,9 @@ import {
 	useState,
 	FunctionComponentElement,
 	useEffect,
-	createContext
+	createContext,
+	Children,
+	type FocusEvent
 } from "react";
 import styles from "./style.module.css";
 import Arrow from "../Components/Arrow";
@@ -12,6 +14,7 @@ import type {
 	IItem,
 	TChildrenAction
 } from "./Item";
+import Items from "./Items";
 
 export const Context = createContext<TChildrenAction>({
 	close: () => {}
@@ -24,9 +27,11 @@ export interface IDropdown extends AllHTMLAttributes<HTMLDivElement> {
 	hover?: boolean;
 	items?: FunctionComponentElement<IItem> | FunctionComponentElement<IItem>[];
 	disabled?: boolean;
+	onShow?: () => void;
+	onHide?: () => void;
 };
 
-const Dropdown = ({children, className, items, direction = 'down', position = 'right', split = false, disabled, hover = false, ...props}: IDropdown) => {
+const Dropdown = ({children, className, items, direction = 'down', position = 'right', split = false, disabled, hover = false, onShow, onHide, ...props}: IDropdown) => {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();
 	const [isOpen, setOpen] = useState(false);
@@ -47,15 +52,11 @@ const Dropdown = ({children, className, items, direction = 'down', position = 'r
 	};
 
 	const handleClick = () => {
-		if (!split) {
-			toggle();
-		}
-		if (hover) {
-			close();
-		}
+		if (hoverTimeout.current) return;
+		if (!split || hover) toggle();
 	};
 
-	const handleBlur = (e: React.FocusEvent) => {
+	const handleBlur = (e: FocusEvent) => {
 		if (e.currentTarget.contains(e.relatedTarget)) return;
 		close();
 	};
@@ -77,8 +78,14 @@ const Dropdown = ({children, className, items, direction = 'down', position = 'r
 		if (isOpen) {
 			classList?.add(styles['opened']);
 			element?.focus();
+			if (typeof onShow === 'function') {
+				onShow();
+			}
 		}else{
 			classList?.remove(styles['opened']);
+			if (typeof onHide === 'function') {
+				onHide();
+			}
 		}
 	}, [isOpen]);
 
@@ -93,15 +100,11 @@ const Dropdown = ({children, className, items, direction = 'down', position = 'r
 	}}>
 		<div {...props} className={classes.join(' ')} ref={containerRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseOut} tabIndex={1} onBlur={handleBlur}>
 			{(position === 'left' && !disabled) && <Arrow className={styles['arrow']} onClick={handleClickArrow}/>}
-			<div onClick={handleClick}>
+			<div onClick={handleClick} className={'ui-dropdown-block' + (isOpen ? ' ' + styles['hide'] : '')}>
 				{children}
 			</div>
 			{(position === 'right' && !disabled) && <Arrow className={styles['arrow']} onClick={handleClickArrow}/>}
-			{
-				(items && !disabled) && <ul className={styles['dropdown-list']}>
-					{items}
-				</ul>
-			}
+			<Items isOpen={isOpen} disabled={disabled} items={items}/>
 		</div>
 	</Context.Provider>);
 };

package/src/Dropdown/Items.tsx

@@ -0,0 +1,37 @@
+import styles from "./style.module.css";
+import type { IDropdown } from "./Dropdown";
+import { useEffect, useRef, useState } from "react";
+
+interface IItems extends Pick<IDropdown, 'items' | 'disabled'> {
+	isOpen: boolean;
+};
+
+const Items = ({items, isOpen, disabled}: IItems) => {
+	const listRef = useRef<HTMLUListElement>(null);
+	const [hide, setHide] = useState(false);
+
+	useEffect(() => {
+		if (!listRef.current) return;
+		const screenWidth = window.innerWidth;
+		const element = listRef.current.getBoundingClientRect();
+		if (isOpen) {
+			listRef.current.ontransitionend = () => {
+				setHide(true);
+			};
+		}else{
+			setHide(false);
+		}
+		
+		// console.log(element.left)
+		if (element.left <= 0) {
+			
+			// listRef.current.style.transform = 'translateX(' + Math.abs(element.left) + 'px)';
+		}
+	},[isOpen]);
+
+	if (disabled || hide) return null;
+
+	return(<ul className={styles['dropdown-list']} children={items} ref={listRef}/>);
+};
+
+export default Items;

package/src/Dropdown/style.module.css

@@ -9,6 +9,23 @@
 	cursor: pointer;
 }
 
+.container > :global(.ui-dropdown-block) {
+	position: relative;
+}
+
+.container > :global(.ui-dropdown-block)::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.container > :global(.ui-dropdown-block).hide::after {
+	display: none;
+}
+
 .arrow {
 	padding: 5px;
 }