overleaf/services/web/frontend/js/shared/components/controlled-dropdown.tsx
Alf Eaton 5382178309 Merge pull request #13223 from overleaf/ae-typescript-upgrade
Upgrade TypeScript to v5

GitOrigin-RevId: 55d98c0e8fdeb39c1297b4472f0d604e25af995b
2023-07-17 10:29:14 +00:00

58 lines
1.4 KiB
TypeScript

import React, {
Children,
cloneElement,
type FC,
isValidElement,
useCallback,
} from 'react'
import { Dropdown, DropdownProps } from 'react-bootstrap'
import useDropdown from '../hooks/use-dropdown'
type ControlledDropdownProps = DropdownProps & {
defaultOpen?: boolean
onMainButtonClick?: (dropdownOpen: boolean) => void
}
const ControlledDropdown: FC<ControlledDropdownProps> = ({
defaultOpen,
onMainButtonClick,
...props
}) => {
const { onClick, ...dropdownProps } = useDropdown(Boolean(defaultOpen))
const handleClick = useCallback(
(e: React.MouseEvent<Dropdown, MouseEvent>) => {
onClick(e)
if (onMainButtonClick) {
onMainButtonClick(dropdownProps.open)
}
},
[onClick, onMainButtonClick, dropdownProps.open]
)
return (
<Dropdown {...props} {...dropdownProps} onClick={handleClick}>
{Children.map(props.children, child => {
if (!isValidElement(child)) {
return child
}
// Dropdown.Menu
if ('open' in child.props) {
return cloneElement<any>(child, { open: dropdownProps.open })
}
// Overlay
if ('show' in child.props) {
return cloneElement<any>(child, { show: dropdownProps.open })
}
// anything else
return cloneElement(child)
})}
</Dropdown>
)
}
export default ControlledDropdown