refactor: drawer panel (#443)

Author: afc163

src/DrawerPanel.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
-import { useComposeRef } from 'rc-util';
 import * as React from 'react';
 import { RefContext } from './context';
 import pickAttrs from 'rc-util/lib/pickAttrs';
+import { useComposeRef } from 'rc-util/lib/ref';
 
 export interface DrawerPanelRef {
   focus: VoidFunction;
@@ -22,9 +22,7 @@ export type DrawerPanelAccessibility = Pick<
   keyof React.AriaAttributes
 >;
 
-export interface DrawerPanelProps
-  extends DrawerPanelEvents,
-    DrawerPanelAccessibility {
+export interface DrawerPanelProps extends DrawerPanelEvents, DrawerPanelAccessibility {
   prefixCls: string;
   className?: string;
   id?: string;
@@ -37,49 +35,24 @@ const DrawerPanel = (props: DrawerPanelProps) => {
   const {
     prefixCls,
     className,
-    style,
-    children,
     containerRef,
-    id,
-    onMouseEnter,
-    onMouseOver,
-    onMouseLeave,
-    onClick,
-    onKeyDown,
-    onKeyUp,
+    ...restProps
   } = props;
 
-  const eventHandlers = {
-    onMouseEnter,
-    onMouseOver,
-    onMouseLeave,
-    onClick,
-    onKeyDown,
-    onKeyUp,
-  };
-
   const { panel: panelRef } = React.useContext(RefContext);
   const mergedRef = useComposeRef(panelRef, containerRef);
 
   // =============================== Render ===============================
 
   return (
-    <>
-      <div
-        id={id}
-        className={classNames(`${prefixCls}-content`, className)}
-        style={{
-          ...style,
-        }}
-        role="dialog"
-        ref={mergedRef}
-        {...pickAttrs(props, { aria: true })}
-        aria-modal="true"
-        {...eventHandlers}
-      >
-        {children}
-      </div>
-    </>
+    <div
+      className={classNames(`${prefixCls}-content`, className)}
+      role="dialog"
+      ref={mergedRef}
+      {...pickAttrs(props, { aria: true })}
+      aria-modal="true"
+      {...restProps}
+    />
   );
 };
 

src/DrawerPopup.tsx

@@ -175,12 +175,8 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
 
   // Merge push distance
   let pushConfig: PushConfig;
-  if (push === false) {
-    pushConfig = {
-      distance: 0,
-    };
-  } else if (push === true) {
-    pushConfig = {};
+  if (typeof push === 'boolean') {
+    pushConfig = push ? {} : { distance: 0 };
   } else {
     pushConfig = push || {};
   }
@@ -224,25 +220,23 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
       {(
         { className: motionMaskClassName, style: motionMaskStyle },
         maskRef,
-      ) => {
-        return (
-          <div
-            className={classNames(
-              `${prefixCls}-mask`,
-              motionMaskClassName,
-              drawerClassNames?.mask,
-              maskClassName,
-            )}
-            style={{
-              ...motionMaskStyle,
-              ...maskStyle,
-              ...styles?.mask,
-            }}
-            onClick={maskClosable && open ? onClose : undefined}
-            ref={maskRef}
-          />
-        );
-      }}
+      ) => (
+        <div
+          className={classNames(
+            `${prefixCls}-mask`,
+            motionMaskClassName,
+            drawerClassNames?.mask,
+            maskClassName,
+          )}
+          style={{
+            ...motionMaskStyle,
+            ...maskStyle,
+            ...styles?.mask,
+          }}
+          onClick={maskClosable && open ? onClose : undefined}
+          ref={maskRef}
+        />
+      )}
     </CSSMotion>
   );