f112f9813d
* NotifyReminderPopup uses a custom Popover * fix Popover resizing in storybook * Prettified Code! --------- Co-authored-by: janWilejan <> Co-authored-by: janWilejan <janWilejan@users.noreply.github.com>
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React, { FC, ReactNode } from 'react';
|
|
import styles from './Popover.module.scss';
|
|
|
|
export type PopoverProps = {
|
|
open: boolean;
|
|
title: ReactNode;
|
|
content: ReactNode;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
/// Replace Popover from antd with a custom popover implementation.
|
|
///
|
|
/// The popover is positioned relative to its parent (unlike antd's popover,
|
|
/// which uses absolute positioning on the page).
|
|
//
|
|
// TODO the following properties of antd's popover have not been implemented
|
|
// placement ("topRight" is used as default)
|
|
// defaultOpen
|
|
// destroyTooltipOnHide
|
|
// overlayInnerStyle
|
|
// color (it uses var(--theme-color-components-primary-button-background))
|
|
|
|
export const Popover: FC<PopoverProps> = ({ open, title, content, children }) => (
|
|
<div style={{ width: 'max-content', height: 'max-content' }}>
|
|
{open && (
|
|
<div className={styles.anchor}>
|
|
<div className={styles.popover}>
|
|
<div className={styles.title}>{title}</div>
|
|
<hr style={{ color: 'var(--color-owncast-palette-4)' }} />
|
|
<div className={styles.content}>{content}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
);
|