Merge pull request #2632 from XiaoMi/feature/drawer(#2629)

feat(drawer): add onOutsideClick api (#2629)

.changeset/kind-beers-check.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Drawer feat: add onOutsideClick api

.changeset/shy-crabs-clean.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/drawer": minor
+---
+
+feat: add onOutsideClick api

packages/ui/drawer/src/Drawer.tsx

@@ -10,6 +10,8 @@ import { useToggle } from '@hi-ui/use-toggle'
 import { isNumeric } from '@hi-ui/type-assertion'
 import { CloseOutlined } from '@hi-ui/icons'
 import { IconButton } from '@hi-ui/icon-button'
+import { mergeRefs } from '@hi-ui/react-utils'
+import { useOutsideClick } from '@hi-ui/use-outside-click'
 import { DrawerPlacementEnum } from './types'
 
 const DRAWER_PREFIX = getPrefixCls('drawer')
@@ -42,6 +44,7 @@ export const Drawer = forwardRef<HTMLDivElement | null, DrawerProps>(
       showMask = true,
       placement = 'right',
       drawerConfig,
+      onOutsideClick,
       ...rest
     },
     ref
@@ -70,6 +73,11 @@ export const Drawer = forwardRef<HTMLDivElement | null, DrawerProps>(
       }
     }, [visible, transitionVisibleAction, transitionExitedAction])
 
+    const modalProps = getModalProps(rootProps, ref)
+    const innerRef = React.useRef<HTMLDivElement | null>(null)
+
+    useOutsideClick(innerRef, onOutsideClick)
+
     const onExitedLatest = useLatestCallback(onExitedProp)
     const onExited = useCallback(() => {
       transitionExitedAction.on()
@@ -95,7 +103,10 @@ export const Drawer = forwardRef<HTMLDivElement | null, DrawerProps>(
         >
           <div
             className={cls}
-            {...getModalProps(rootProps, ref)}
+            {...{
+              ...modalProps,
+              ref: mergeRefs(modalProps.ref, innerRef),
+            }}
             {...(!showMask &&
               visible && {
                 style:
@@ -180,6 +191,10 @@ export interface DrawerProps extends Omit<HiBaseHTMLProps<'div'>, 'title'>, UseM
    * 是否展示右上角关闭按钮
    */
   closeable?: boolean
+  /**
+   * 外界元素点击数触发
+   */
+  onOutsideClick?: (evt: Event) => void
   /**
    * 自定义关闭时 icon。暂不对外暴露
    * @private

packages/ui/drawer/stories/index.stories.tsx

@@ -4,6 +4,7 @@ import Drawer from '../src'
 export * from './basic.stories'
 export * from './header.stories'
 export * from './mask.stories'
+export * from './outside-click.stories'
 export * from './container.stories'
 export * from './nested.stories'
 export * from './extra.stories'

packages/ui/drawer/stories/outside-click.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import Drawer from '../src'
+import Button from '@hi-ui/button'
+import Tree, { TreeDataItem } from '@hi-ui/tree'
+
+/**
+ * @title 点击外部事件处理
+ * @desc 常用于无蒙层模式下，切换列表项详情内容
+ */
+export const OutsideClick = () => {
+  const [visible, setVisible] = React.useState(false)
+  const [data] = React.useState([
+    {
+      id: 1,
+      title: '小米',
+      children: [
+        {
+          id: 2,
+          title: '研发',
+          disabled: true,
+          children: [
+            { id: 3, title: '后端', disabled: true },
+            { id: 4, title: '运维' },
+            { id: 5, title: '前端' },
+          ],
+        },
+        { id: 6, title: '产品' },
+      ],
+    },
+    {
+      id: 11,
+      title: '大米',
+      children: [
+        { id: 22, title: '可视化' },
+        { id: 66, title: 'HiUI' },
+      ],
+    },
+  ])
+  const [currentData, setCurrentData] = React.useState<TreeDataItem>()
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null)
+
+  return (
+    <>
+      <h1>OutsideClick</h1>
+      <div className="drawer-outside-click__wrap">
+        <div className="list-wrapper" ref={wrapperRef}>
+          <Tree
+            data={data}
+            onSelect={(id, node) => {
+              // console.log('node', node)
+
+              if (id) {
+                setVisible(true)
+                setCurrentData(node?.raw)
+              } else {
+                setVisible(false)
+              }
+            }}
+          />
+        </div>
+        <Drawer
+          title={currentData?.title}
+          visible={visible}
+          showMask={false}
+          onClose={() => setVisible(false)}
+          // 点击列表外部内容时关闭抽屉
+          onOutsideClick={(e) => {
+            // console.log('target', e.target)
+
+            if (!wrapperRef.current?.contains(e.target as Element)) {
+              setVisible(false)
+            }
+          }}
+          footer={
+            <div style={{ textAlign: 'right' }}>
+              <Button type="default" key={1} onClick={() => console.log(2)}>
+                取消
+              </Button>
+              <Button type="primary" key={0} onClick={() => console.log(1)}>
+                确认
+              </Button>
+            </div>
+          }
+        >
+          {currentData?.title}
+        </Drawer>
+      </div>
+    </>
+  )
+}