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

100% working DD

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

41
Parts/DropDown.js
View File

@ -1,8 +1,10 @@
import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, useState } from "react"; import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, useState } from "react";
import { createPopper } from "@popperjs/core"; import { createPopper } from "@popperjs/core";
import { usePopper } from 'react-popper';
import tw, { styled } from "twin.macro" import tw, { styled } from "twin.macro"
import "styled-components/macro" import "styled-components/macro"
import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors"; import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
const DropDownItem = styled.button(({ type }) => [ const DropDownItem = styled.button(({ type }) => [
@ -21,15 +23,16 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef(); const [btnDropdownRef, setBtnDropdownRef] = React.useState(null);
const popoverDropdownRef = React.createRef(); const [popoverDropdownRef, setPopoverDropdownRef] = React.useState(null);
const openDropdownPopover = () => { const { styles, attributes, update } = usePopper(btnDropdownRef, popoverDropdownRef,
createPopper(btnDropdownRef.current, popoverDropdownRef.current, { { placement: placement ?? "bottom", ...popper });
placement: placement ?? "bottom",
...popper const openDropdownPopover = async () => {
});
setDropdownPopoverShow(true); setDropdownPopoverShow(true);
console.log(update)
await update();
onValueChanged && onValueChanged(true); onValueChanged && onValueChanged(true);
}; };
@ -39,7 +42,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
}; };
function handleOutsideClick(event) { function handleOutsideClick(event) {
let node = popoverDropdownRef?.current; let node = popoverDropdownRef;
if (node && !node?.contains(event.target)) { if (node && !node?.contains(event.target)) {
closeDropdownPopover(); closeDropdownPopover();
} }
@ -74,31 +77,34 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
return ( return (
<> <>
<button <button
ref={btnDropdownRef} ref={setBtnDropdownRef}
onClick={(e) => { onClick={async (e) => {
e.preventDefault(); e.preventDefault();
dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); dropdownPopoverShow ? closeDropdownPopover() : await openDropdownPopover();
}} }}
onMouseEnter={() => { setOverButton(true); hover && openDropdownPopover() }} onMouseEnter={async () => { setOverButton(true); hover && await openDropdownPopover() }}
onMouseLeave={() => { setOverButton(false); (!overDropDown && hover) && closeDropdownPopover() }} onMouseLeave={() => { setOverButton(false); (!overDropDown && hover) && closeDropdownPopover() }}
{...buttonProps} {...buttonProps}
> >
{button} {button}
</button> </button>
{dropdownPopoverShow &&
<div <div
{...props} {...props}
ref={popoverDropdownRef} ref={setPopoverDropdownRef}
onMouseEnter={() => { setOverDropDown(true); hover && openDropdownPopover() }} onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover() }}
onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }} onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }}
style={styles.popper}
{...attributes.popper}
css={[ css={[
(dropdownPopoverShow ? tw`block` : tw`hidden`),
tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`, tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
dropdownCss, dropdownCss,
props.css props.css
]} ]}
> >
{dropdownPopoverShow && childrenWithProps} {childrenWithProps}
</div> </div>
}
</> </>
); );
}); });
@ -111,8 +117,7 @@ export function DropdownMenu({ children, fallback, button, notSelectedOne = true
if (children && children.length > 0) if (children && children.length > 0)
btn = children[value > children.length ? 0 : value] btn = children[value > children.length ? 0 : value]
if(button != null) if (button != null) {
{
btn = button(btn, value > children.length ? 0 : value); btn = button(btn, value > children.length ? 0 : value);
} }