feat: add BaseDrawer Component (#4)

Author: Wxh16144

config/menus/desktop.ts

@@ -14,6 +14,7 @@ const desktopComponent: ComponentMenus = {
   ],
   feedback: [
     'src/base-modal',
+    'src/base-drawer',
   ],
   guidance: [],
   other: [],

packages/desktop-ui/src/base-drawer/__tests__/index.test.tsx

@@ -0,0 +1,101 @@
+import { useUnmount } from 'ahooks'
+import React from 'react'
+import BaseDrawer from '..'
+import { act, fireEvent, render, sleep } from '../../../../../tests/utils'
+
+describe('BaseModal', () => {
+  const clear = async function clear() {
+    await act(async () => {
+      jest.runAllTimers()
+      await sleep()
+    })
+  }
+
+  it('custom classname should take effect', () => {
+    render(
+      <BaseDrawer
+        drawerProps={{ visible: true, className: 'custom-classname' }}
+      />,
+    )
+
+    expect(document.body.querySelectorAll('.custom-classname').length).toBe(1)
+  })
+
+  it('click children should open modal', async () => {
+    const Demo = () => {
+      return (
+        <BaseDrawer
+          drawerProps={{ className: 'modal-open' }}
+        >
+          <button className='open-modal-btn'>open</button>
+        </BaseDrawer>
+      )
+    }
+
+    const { container } = render(<Demo />)
+
+    fireEvent.click(container.querySelectorAll('.open-modal-btn')[0])
+
+    await clear()
+
+    expect(document.body.querySelectorAll('.modal-open')).toHaveLength(1)
+  })
+
+  it('默认情况下，点击关闭时应该销毁弹窗内容', async () => {
+    const unMountFn = jest.fn()
+
+    const Content = () => {
+      useUnmount(unMountFn)
+      return <>Content</>
+    }
+
+    const { container } = render(
+      <BaseDrawer drawerContent={<Content />}>
+        <button className='open-modal-btn'>open</button>
+      </BaseDrawer>,
+    )
+
+    fireEvent.click(container.querySelectorAll('.open-modal-btn')[0])
+
+    await clear()
+
+    // Click the close icon to close
+    fireEvent.click(document.body.querySelectorAll('.ant-modal-close')[0])
+
+    await clear()
+
+    expect(unMountFn).toHaveBeenCalled()
+  })
+
+  it('存在 onClick 时，点击触发器应该触发 onClick 事件，默认不打开弹窗，需手动打开', async () => {
+    const onClick = jest.fn()
+    const { container } = render(
+      <BaseDrawer
+        onClick={onClick}
+        drawerProps={{ className: 'modal-open' }}
+      >
+        <button className='open-modal-btn'>open</button>
+      </BaseDrawer>,
+    )
+
+    fireEvent.click(container.querySelectorAll('.open-modal-btn')[0])
+
+    await clear()
+
+    expect(document.body.querySelectorAll('.modal-open')).toHaveLength(0)
+
+    expect(onClick).toHaveBeenCalled()
+    expect(onClick.mock.calls[0][1]).toEqual({
+      open: expect.any(Function),
+      close: expect.any(Function),
+    })
+
+    onClick.mockImplementation((_, modalAction) => {
+      modalAction.open()
+    })
+
+    fireEvent.click(container.querySelectorAll('.open-modal-btn')[0])
+
+    expect(document.body.querySelectorAll('.modal-open')).toHaveLength(1)
+  })
+})

packages/desktop-ui/src/base-drawer/demo/Base.tsx

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react'
+import { Button } from 'antd'
+import type { BaseModalAction } from '@template-pro/desktop-ui'
+import { BaseDrawer } from '@template-pro/desktop-ui'
+
+const Content = ({ drawerAction }: any) => (
+  <>
+    <h3>这是抽屉内容</h3>
+    <Button onClick={drawerAction.close}>
+      点击关闭抽屉
+    </Button>
+  </>
+)
+
+function BaseModalDemo() {
+  const modalRef = useRef<BaseModalAction>()
+
+  return (
+    <BaseDrawer
+      ref={modalRef}
+      drawerProps={{
+        title: '标题',
+        footer: (
+          <Button
+            onClick={() => modalRef.current?.close()}>
+            通过 Ref 关闭
+          </Button>
+        ),
+      }}
+      drawerContent={<Content />}
+    >
+      <Button>打开抽屉</Button>
+    </BaseDrawer>
+  )
+}
+
+export default BaseModalDemo

packages/desktop-ui/src/base-drawer/demo/Event.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { BaseDrawer } from '@template-pro/desktop-ui'
+import { Button, message } from 'antd'
+
+function BaseModalBaseDemo() {
+  return (
+    <BaseDrawer
+      drawerContent="这是抽屉内容"
+      onClick={(event, drawerAction) => {
+        window.console.log({ event, drawerAction })
+        message.info({
+          content: '1秒后打开抽屉',
+          duration: 1,
+          onClose() {
+            drawerAction.open()
+          },
+        })
+      }}
+    >
+      <Button>Click me</Button>
+    </BaseDrawer>
+  )
+}
+
+export default BaseModalBaseDemo

packages/desktop-ui/src/base-drawer/index.md

@@ -0,0 +1,10 @@
+# BaseDrawer
+
+## 基础用法
+
+<code hideActions='["CSB", "EXTERNAL"]' src="./demo/Base.tsx" />
+
+
+## 通过事件手动控制打开
+
+<code hideActions='["CSB", "EXTERNAL"]' src="./demo/Event.tsx" />

packages/desktop-ui/src/base-drawer/index.tsx

@@ -0,0 +1,83 @@
+import Drawer, { type DrawerProps } from 'antd/es/drawer'
+import { useBoolean } from 'ahooks'
+import classNames from 'classnames'
+import React, { useImperativeHandle, useRef } from 'react'
+import { defaultPrefixCls } from '../constants'
+import { isDOMTypeElement, isElement } from '../_utils/is'
+
+export interface BaseDrawerAction {
+  close: () => void
+  open: () => void
+}
+
+export interface BaseDrawerProps {
+  children?: React.ReactNode
+  drawerContent?: React.ReactNode
+  onClick?: (
+    e: React.MouseEvent<HTMLElement>,
+    modalAction: BaseDrawerAction
+  ) => void
+  drawerProps?: DrawerProps
+}
+
+const BaseDrawer: React.ForwardRefRenderFunction<unknown, BaseDrawerProps> = (props, ref) => {
+  const [drawerVisible, { setTrue: open, setFalse: close }] = useBoolean(false)
+
+  const drawerActionRef = useRef<BaseDrawerAction>({ open, close })
+
+  const { children, drawerContent, onClick, drawerProps = {} } = props
+
+  const {
+    onClose,
+    className,
+    footer = null,
+    ...restDrawerProps
+  } = drawerProps
+
+  useImperativeHandle(ref, () => drawerActionRef.current, [drawerActionRef])
+
+  const handleButtonClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (onClick)
+      return onClick(event, drawerActionRef.current)
+
+    return open()
+  }
+
+  const handleDrawerClose = (event: React.MouseEvent<HTMLElement>) => {
+    if (onClose)
+      onClose(event)
+
+    return close()
+  }
+
+  // ======================== buttonNode ========================
+  let buttonNode: React.ReactNode = children
+  if (React.isValidElement(children))
+    buttonNode = React.cloneElement<any>(children, { onClick: handleButtonClick })
+
+  // ======================== drawerContent ========================
+  let childrenNode: React.ReactNode = drawerContent
+  if (isElement(childrenNode) && !isDOMTypeElement(childrenNode)) {
+    childrenNode = React.cloneElement<any>(childrenNode, {
+      drawerAction: drawerActionRef.current,
+    })
+  }
+
+  return (
+    <>
+      {buttonNode}
+      <Drawer
+        open={drawerVisible}
+        onClose={handleDrawerClose}
+        className={classNames(`${defaultPrefixCls}-base-drawer`, className)}
+        footer={footer}
+        destroyOnClose
+        {...restDrawerProps}
+      >
+        {childrenNode}
+      </Drawer>
+    </>
+  )
+}
+
+export default React.forwardRef(BaseDrawer)

packages/desktop-ui/src/base-drawer/style/index.less

@@ -0,0 +1,6 @@
+@import '../../styles/themes/index';
+@import '~antd/es/drawer/style/index.less';
+
+.@{cls-prefix}-base-drawer {
+ 
+}

packages/desktop-ui/src/base-drawer/style/index.tsx

@@ -0,0 +1 @@
+import './index.less'

packages/desktop-ui/src/index.tsx

@@ -1,6 +1,9 @@
 export type { BaseModalAction, BaseModalProps } from './base-modal'
 export { default as BaseModal } from './base-modal'
 
+export type { BaseDrawerProps, BaseDrawerAction } from './base-drawer'
+export { default as BaseDrawer } from './base-drawer'
+
 export type { IgnoreEmojiInputProps } from './ignore-emoji-input'
 export { default as IgnoreEmojiInput } from './ignore-emoji-input'