react-artasys-ui 0.1.19 → 0.1.20

package/lib/Dropdown/Dropdown.d.ts

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

package/lib/Dropdown/Items.d.ts

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

package/package.json

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

package/src/Dropdown/Dropdown.tsx

@@ -27,11 +27,12 @@ export interface IDropdown extends AllHTMLAttributes<HTMLDivElement> {
 	hover?: boolean;
 	items?: FunctionComponentElement<IItem> | FunctionComponentElement<IItem>[];
 	disabled?: boolean;
+	enableRerenderItems?: boolean;
 	onShow?: () => void;
 	onHide?: () => void;
 };
 
-const Dropdown = ({children, className, items, direction = 'down', position = 'right', split = false, disabled, hover = false, onShow, onHide, ...props}: IDropdown) => {
+const Dropdown = ({children, className, items, direction = 'down', position = 'right', split = false, disabled, hover = false, enableRerenderItems = true, onShow, onHide, ...props}: IDropdown) => {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();
 	const [isOpen, setOpen] = useState(false);
@@ -104,7 +105,7 @@ const Dropdown = ({children, className, items, direction = 'down', position = 'r
 				{children}
 			</div>
 			{(position === 'right' && !disabled) && <Arrow className={styles['arrow']} onClick={handleClickArrow}/>}
-			<Items isOpen={isOpen} disabled={disabled} items={items}/>
+			<Items isOpen={isOpen} disabled={disabled} enableRerenderItems={enableRerenderItems} items={items}/>
 		</div>
 	</Context.Provider>);
 };

package/src/Dropdown/Items.tsx

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