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

change dropdown to tsx

Browse Source
This commit is contained in:
honzapatCZ 2024-10-12 15:30:19 +02:00
parent 407d4c1215
commit 24693e25f1
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Parts/DropDown.js → Parts/DropDown.tsx
View File

@ -1,5 +1,5 @@
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, Placement } from "@popperjs/core";
import { usePopper } from 'react-popper'; import { usePopper } from 'react-popper';
import tw, { styled } from "twin.macro" import tw, { styled } from "twin.macro"
@ -16,7 +16,16 @@ const DropDownItem = styled.button(({ type }) => [
]) ])
export { DropDownItem } export { DropDownItem }
let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, buttonProps, popper, placement, hover, ...props }, ref) => { let Dropdown = React.forwardRef(({ children, dropdownCss = null, onValueChanged = null, button, buttonProps = null, popper = null, placement = null, hover = null, ...props }: {
children: React.ReactNode,
dropdownCss?: any,
onValueChanged?: (value: boolean) => void,
button?: React.ReactNode,
buttonProps?: any,
popper?: any,
placement?: Placement,
hover?: boolean,
}, ref) => {
// dropdown props // dropdown props
const [overButton, setOverButton] = React.useState(false); const [overButton, setOverButton] = React.useState(false);
const [overDropDown, setOverDropDown] = React.useState(false); const [overDropDown, setOverDropDown] = React.useState(false);
@ -85,11 +94,14 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
let childrenWithProps = React.Children.map(children, (item) => { let childrenWithProps = React.Children.map(children, (item) => {
if (!item) if (!item)
return; return;
//check that item is not only ReactNode
if (!isValidElement(item))
return;
let click = item.props?.onClick; let click = item.props?.onClick;
let close = item.props?.closeOnClick ?? true; let close = item.props?.closeOnClick ?? true;
return cloneElement(item, { key: children.indexOf ? children.indexOf(item) : 0, onClick: () => { close && closeDropdownPopover(); click && click() } });
});
return cloneElement(item as any, { key: Array.isArray(children) ? children.indexOf(item) : 0, onClick: () => { close && closeDropdownPopover(); click && click() } });
});
return ( return (
<> <>
<button <button
@ -116,7 +128,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
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 z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
dropdownCss, dropdownCss,
props.css (props as any).css
]} ]}
> >
{childrenWithProps} {childrenWithProps}