overleaf/services/web/frontend/js/shared/components/controlled-dropdown.js
ilkin-overleaf e12c93c537 Merge pull request #9700 from overleaf/ii-dashboard-mobile-view
[web] Projects dashboard mobile view

GitOrigin-RevId: 84894e19c814a2cc1ce751181952c0ade6b62044
2022-09-26 08:04:38 +00:00

37 lines
989 B
JavaScript

import React from 'react'
import { Dropdown } from 'react-bootstrap'
import PropTypes from 'prop-types'
import useDropdown from '../hooks/use-dropdown'
export default function ControlledDropdown(props) {
const dropdownProps = useDropdown(Boolean(props.defaultOpen))
return (
<Dropdown {...props} {...dropdownProps}>
{React.Children.map(props.children, child => {
if (!React.isValidElement(child)) {
return child
}
// Dropdown.Menu
if ('open' in child.props) {
return React.cloneElement(child, { open: dropdownProps.open })
}
// Overlay
if ('show' in child.props) {
return React.cloneElement(child, { show: dropdownProps.open })
}
// anything else
return React.cloneElement(child)
})}
</Dropdown>
)
}
ControlledDropdown.propTypes = {
children: PropTypes.any,
defaultOpen: PropTypes.bool,
id: PropTypes.string,
className: PropTypes.string,
}