react-artasys-ui 0.1.15 → 0.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/lib/Dropdown/Dropdown.d.ts +3 -1
- package/package.json +1 -1
- package/src/Dropdown/Dropdown.tsx +9 -1
- package/src/Dropdown/Items.tsx +11 -2
|
@@ -8,6 +8,8 @@ export interface IDropdown extends AllHTMLAttributes<HTMLDivElement> {
|
|
|
8
8
|
hover?: boolean;
|
|
9
9
|
items?: FunctionComponentElement<IItem> | FunctionComponentElement<IItem>[];
|
|
10
10
|
disabled?: boolean;
|
|
11
|
+
onShow?: () => void;
|
|
12
|
+
onHide?: () => void;
|
|
11
13
|
}
|
|
12
|
-
declare const Dropdown: ({ children, className, items, direction, position, split, disabled, hover, ...props }: IDropdown) => JSX.Element;
|
|
14
|
+
declare const Dropdown: ({ children, className, items, direction, position, split, disabled, hover, onShow, onHide, ...props }: IDropdown) => JSX.Element;
|
|
13
15
|
export default Dropdown;
|
package/package.json
CHANGED
|
@@ -27,9 +27,11 @@ export interface IDropdown extends AllHTMLAttributes<HTMLDivElement> {
|
|
|
27
27
|
hover?: boolean;
|
|
28
28
|
items?: FunctionComponentElement<IItem> | FunctionComponentElement<IItem>[];
|
|
29
29
|
disabled?: boolean;
|
|
30
|
+
onShow?: () => void;
|
|
31
|
+
onHide?: () => void;
|
|
30
32
|
};
|
|
31
33
|
|
|
32
|
-
const Dropdown = ({children, className, items, direction = 'down', position = 'right', split = false, disabled, hover = false, ...props}: IDropdown) => {
|
|
34
|
+
const Dropdown = ({children, className, items, direction = 'down', position = 'right', split = false, disabled, hover = false, onShow, onHide, ...props}: IDropdown) => {
|
|
33
35
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
34
36
|
const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();
|
|
35
37
|
const [isOpen, setOpen] = useState(false);
|
|
@@ -76,8 +78,14 @@ const Dropdown = ({children, className, items, direction = 'down', position = 'r
|
|
|
76
78
|
if (isOpen) {
|
|
77
79
|
classList?.add(styles['opened']);
|
|
78
80
|
element?.focus();
|
|
81
|
+
if (typeof onShow === 'function') {
|
|
82
|
+
onShow();
|
|
83
|
+
}
|
|
79
84
|
}else{
|
|
80
85
|
classList?.remove(styles['opened']);
|
|
86
|
+
if (typeof onHide === 'function') {
|
|
87
|
+
onHide();
|
|
88
|
+
}
|
|
81
89
|
}
|
|
82
90
|
}, [isOpen]);
|
|
83
91
|
|
package/src/Dropdown/Items.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styles from "./style.module.css";
|
|
2
2
|
import type { IDropdown } from "./Dropdown";
|
|
3
|
-
import { useEffect, useRef } from "react";
|
|
3
|
+
import { useEffect, useRef, useState } from "react";
|
|
4
4
|
|
|
5
5
|
interface IItems extends Pick<IDropdown, 'items' | 'disabled'> {
|
|
6
6
|
isOpen: boolean;
|
|
@@ -8,11 +8,20 @@ interface IItems extends Pick<IDropdown, 'items' | 'disabled'> {
|
|
|
8
8
|
|
|
9
9
|
const Items = ({items, isOpen, disabled}: IItems) => {
|
|
10
10
|
const listRef = useRef<HTMLUListElement>(null);
|
|
11
|
+
const [hide, setHide] = useState(false);
|
|
11
12
|
|
|
12
13
|
useEffect(() => {
|
|
13
14
|
if (!listRef.current) return;
|
|
14
15
|
const screenWidth = window.innerWidth;
|
|
15
16
|
const element = listRef.current.getBoundingClientRect();
|
|
17
|
+
if (!isOpen) {
|
|
18
|
+
listRef.current.ontransitionend = () => {
|
|
19
|
+
setHide(true);
|
|
20
|
+
};
|
|
21
|
+
}else{
|
|
22
|
+
setHide(false);
|
|
23
|
+
}
|
|
24
|
+
|
|
16
25
|
// console.log(element.left)
|
|
17
26
|
if (element.left <= 0) {
|
|
18
27
|
|
|
@@ -20,7 +29,7 @@ const Items = ({items, isOpen, disabled}: IItems) => {
|
|
|
20
29
|
}
|
|
21
30
|
},[isOpen]);
|
|
22
31
|
|
|
23
|
-
if (disabled) return null;
|
|
32
|
+
if (disabled || hide) return null;
|
|
24
33
|
|
|
25
34
|
return(<ul className={styles['dropdown-list']} children={items} ref={listRef}/>);
|
|
26
35
|
};
|