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

drdopdown is now isoalted protal

Browse Source
This commit is contained in:
honzapatCZ 2026-08-20 16:12:33 +02:00
parent 59aa96507a
commit 99f2115a1c
1 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Parts/DropDown.tsx
View File

@ -1,6 +1,7 @@
import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, useState } from "react"; import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, useState } from "react";
import { createPopper, Placement } from "@popperjs/core"; import { createPopper, Placement } from "@popperjs/core";
import { usePopper } from 'react-popper'; import { usePopper } from 'react-popper';
import { Portal } from "@mantine/core";
import styled from "styled-components"; import styled from "styled-components";
import tw from "twin.macro" import tw from "twin.macro"
@ -118,22 +119,26 @@ let Dropdown = React.forwardRef(({ children, dropdownCss = null, onValueChanged
{button} {button}
</button> </button>
{dropdownPopoverShow && <div {dropdownPopoverShow && (
<Portal>
<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, zIndex: 99999 }}
{...attributes.popper} {...attributes.popper}
css={[ css={[
dropdownPopoverShow ? tw`block` : tw`hidden`, 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 float-left rounded-xl overflow-hidden text-left shadow-2xl border border-secondary`,
dropdownCss, dropdownCss,
(props as any).css (props as any).css
]} ]}
> >
{childrenWithProps} {childrenWithProps}
</div>} </div>
</Portal>
)}
</> </>
); );