import React, { useCallback, useState } from 'react';
import { Drawer } from 'antd';
import { DrawerProps } from 'antd/lib/drawer';

export type DrawerOverlayRender = (props: {
  close: () => void;
}) => React.ReactNode;
export type DrawerChildrenRender = (props: {
  open: () => void;
}) => React.ReactNode;
/**
 * Drawer触发器
 */
export const DrawerTrigger: React.FC<
  {
    overlay?: DrawerOverlayRender;
    children?: DrawerChildrenRender;
  } & Omit<DrawerProps, 'visible' | 'onClose'>
> = (props) => {
  const [vis, setVis] = useState(false);
  const open = useCallback(() => setVis(true), []);
  const close = useCallback(() => setVis(false), []);
  const { children, overlay, ...DrawerProps } = props;
  return (
    <>
      <Drawer {...DrawerProps} visible={vis} onClose={close}>
        {overlay ? overlay({ close }) : <></>}
      </Drawer>
      {children && children({ open })}
    </>
  );
};

export default DrawerTrigger;