f7f4a8de4d
* feat: docker-compose version * feat: chat slider support folder * lazy behavior * pref: code sandbox size
49 lines
1022 B
TypeScript
49 lines
1022 B
TypeScript
import React from 'react';
|
|
import {
|
|
Popover,
|
|
PopoverTrigger,
|
|
PopoverContent,
|
|
useDisclosure,
|
|
PlacementWithLogical
|
|
} from '@chakra-ui/react';
|
|
|
|
const MyPopover = ({
|
|
Trigger,
|
|
placement,
|
|
offset,
|
|
trigger,
|
|
children
|
|
}: {
|
|
Trigger: React.ReactNode;
|
|
placement?: PlacementWithLogical;
|
|
offset?: [number, number];
|
|
trigger?: 'hover' | 'click';
|
|
children: (e: { onClose: () => void }) => React.ReactNode;
|
|
}) => {
|
|
const firstFieldRef = React.useRef(null);
|
|
|
|
const { onOpen, onClose, isOpen } = useDisclosure();
|
|
|
|
return (
|
|
<Popover
|
|
isOpen={isOpen}
|
|
initialFocusRef={firstFieldRef}
|
|
onOpen={onOpen}
|
|
onClose={onClose}
|
|
placement={placement}
|
|
offset={offset}
|
|
closeOnBlur={false}
|
|
trigger={trigger}
|
|
openDelay={100}
|
|
closeDelay={100}
|
|
isLazy
|
|
lazyBehavior="keepMounted"
|
|
>
|
|
<PopoverTrigger>{Trigger}</PopoverTrigger>
|
|
<PopoverContent p={4}>{children({ onClose })}</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default MyPopover;
|