You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
716 B
26 lines
716 B
import type { ReactNode } from 'react'
|
|
|
|
import styled from 'styled-components/macro'
|
|
|
|
import { useOutsideClickEffect } from './hooks'
|
|
|
|
type Props = {
|
|
/** элемент, которому необходим функционал `OutsideClick` */
|
|
children: ReactNode,
|
|
/** функция-коллбек, отрабатывающая по клику вне области элемента */
|
|
onClick: (event?: MouseEvent) => void,
|
|
}
|
|
|
|
export const OutsideClickWrapper = styled.div``
|
|
|
|
export const OutsideClick = ({
|
|
children,
|
|
onClick,
|
|
}: Props) => {
|
|
const wrapperRef = useOutsideClickEffect({ onClick })
|
|
return (
|
|
<OutsideClickWrapper ref={wrapperRef}>
|
|
{children}
|
|
</OutsideClickWrapper>
|
|
)
|
|
}
|
|
|