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