34 lines
836 B
TypeScript
34 lines
836 B
TypeScript
import classNames from 'classnames';
|
|
import { PropsWithChildren, useCallback } from 'react';
|
|
|
|
import './index.less';
|
|
|
|
interface IProps extends PropsWithChildren {
|
|
visible: boolean;
|
|
onClickOuter: () => void;
|
|
outerClassName?: string;
|
|
innerClassName?: string;
|
|
}
|
|
|
|
const PREFIX = 'overlay';
|
|
|
|
function Overlay(props: IProps) {
|
|
const { visible, outerClassName, innerClassName, onClickOuter } = props;
|
|
|
|
const onClickContent = useCallback((e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation(), []);
|
|
|
|
if (!visible) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={classNames(`${PREFIX}__container`, outerClassName)} onClick={onClickOuter}>
|
|
<div className={classNames(`${PREFIX}__content`, innerClassName)} onClick={onClickContent}>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Overlay;
|