parent
844232c526
commit
7d6ce909ec
@ -1,92 +0,0 @@ |
||||
import * as React from 'react'; |
||||
import {DropdownProps} from 'react-bootstrap/Dropdown'; |
||||
import {useRef} from "react"; |
||||
|
||||
interface Props extends DropdownProps { |
||||
id?: string; |
||||
className?: string; |
||||
href?: string; |
||||
title: string |
||||
} |
||||
|
||||
export const DropdownSubmenu: React.FC<Props> = (props:Props) => { |
||||
let refSubMenuContent = useRef(null as HTMLDivElement | null); |
||||
|
||||
let className = 'dropdown-submenu-container'; |
||||
className = props.className |
||||
? className + ' ' + props.className |
||||
: className; |
||||
|
||||
const onClick = (event: React.SyntheticEvent<any>) => { |
||||
event.preventDefault(); |
||||
event.stopPropagation(); |
||||
|
||||
if (refSubMenuContent.current) { |
||||
let show = false; |
||||
if (refSubMenuContent.current.classList.contains('show')) { |
||||
hideChildren(refSubMenuContent.current); |
||||
} else { |
||||
show = true; |
||||
hideSiblings(); |
||||
} |
||||
refSubMenuContent.current.classList.toggle('show'); |
||||
if (typeof props.onToggle === 'function') { |
||||
props.onToggle(show, event, { source: 'select'}); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
const hideSiblings = () => { |
||||
if (refSubMenuContent.current) { |
||||
const parents = getParents( |
||||
refSubMenuContent.current, |
||||
'.dropdown-menu.show' |
||||
); |
||||
if (parents.length > 1) { |
||||
hideChildren(parents[1]); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
const hideChildren = (parent: any) => { |
||||
const children = parent.querySelectorAll('.dropdown-menu.show') as any; |
||||
for (const child of children) { |
||||
child.classList.remove('show'); |
||||
} |
||||
} |
||||
|
||||
const getParents = (elem: any, selector: string) => { |
||||
const nodes = []; |
||||
let element = elem; |
||||
nodes.push(element); |
||||
while (element.parentNode) { |
||||
if ( |
||||
typeof element.parentNode.matches === 'function' && |
||||
element.parentNode.matches(selector) |
||||
) { |
||||
nodes.push(element.parentNode); |
||||
} |
||||
element = element.parentNode; |
||||
} |
||||
return nodes; |
||||
} |
||||
|
||||
return ( |
||||
<div className={className} id={props.id}> |
||||
<a |
||||
href={props.href} |
||||
className="dropdown-item dropdown-submenu dropdown-toggle" |
||||
onClick={onClick} |
||||
> |
||||
{props.title} |
||||
</a> |
||||
<div |
||||
className="dropdown-menu" |
||||
ref={refSubMenuContent} |
||||
> |
||||
{props.children} |
||||
</div> |
||||
</div> |
||||
); |
||||
|
||||
} |
Loading…
Reference in new issue