Nejcraft/nej-react-components
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

DD fix

Browse Source
This commit is contained in:
honzapatCZ 2023-06-08 21:08:38 +02:00
parent 5453ee671f
commit 4d4767beb3
1 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
Parts/DropDown.js
View File

@ -27,12 +27,18 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
const [popoverDropdownRef, setPopoverDropdownRef] = React.useState(null);
const { styles, attributes, update } = usePopper(btnDropdownRef, popoverDropdownRef,
{ placement: placement ?? "bottom", ...popper });
{
placement: placement ?? "bottom",
strategy: "fixed",
...popper
});
const openDropdownPopover = async () => {
setDropdownPopoverShow(true);
console.log(update)
await update();
if (update != null) {
await update();
}
onValueChanged && onValueChanged(true);
};
@ -43,7 +49,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
function handleOutsideClick(event) {
let node = popoverDropdownRef;
if (node && !node?.contains(event.target)) {
if (node && !node?.contains(event.target) && !btnDropdownRef?.contains(event.target)) {
closeDropdownPopover();
}
}
@ -60,11 +66,11 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
document.removeEventListener("click", handleOutsideClick)
};
});
useImperativeHandle(ref, () => ({
openDropdownPopover,
closeDropdownPopover
}))
/*
useImperativeHandle(ref, () => ({
openDropdownPopover,
closeDropdownPopover
}))*/
let childrenWithProps = React.Children.map(children, (item) => {
if (!item)
@ -88,23 +94,24 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
>
{button}
</button>
{dropdownPopoverShow &&
<div
{...props}
ref={setPopoverDropdownRef}
onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover() }}
onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }}
style={styles.popper}
{...attributes.popper}
css={[
tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
dropdownCss,
props.css
]}
>
{childrenWithProps}
</div>
}
{dropdownPopoverShow && <div
{...props}
ref={setPopoverDropdownRef}
onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover() }}
onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }}
style={styles.popper}
{...attributes.popper}
css={[
dropdownPopoverShow ? tw`block` : tw`hidden`,
tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
dropdownCss,
props.css
]}
>
{childrenWithProps}
</div>}
</>
);
});