DrawerPopup.tsx

import { clsx } from 'clsx';
import type { CSSMotionProps } from '@rc-component/motion';
import CSSMotion from '@rc-component/motion';
import pickAttrs from '@rc-component/util/lib/pickAttrs';
import { fillRef } from '@rc-component/util/lib/ref';
import * as React from 'react';
import type { DrawerContextProps } from './context';
import DrawerContext from './context';
import type {
  DrawerPanelAccessibility,
  DrawerPanelEvents,
} from './DrawerPanel';
import DrawerPanel from './DrawerPanel';
import useDrag from './hooks/useDrag';
import { parseWidthHeight } from './util';
import type { DrawerClassNames, DrawerStyles } from './inter';
import { useEvent } from '@rc-component/util';
import useFocusable from './hooks/useFocusable';

export type Placement = 'left' | 'right' | 'top' | 'bottom';

export interface PushConfig {
  distance?: number | string;
}

export interface DrawerPopupProps
  extends DrawerPanelEvents, DrawerPanelAccessibility {
  prefixCls: string;
  open?: boolean;
  inline?: boolean;
  push?: boolean | PushConfig;
  forceRender?: boolean;
  keyboard?: boolean;

  // Focus
  autoFocus?: boolean;
  focusTrap?: boolean;

  // Root
  rootClassName?: string;
  rootStyle?: React.CSSProperties;
  zIndex?: number;

  // Drawer
  placement?: Placement;
  id?: string;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
  width?: number | string;
  height?: number | string;
  /** Size of the drawer (width for left/right placement, height for top/bottom placement) */
  size?: number | string;
  /** Maximum size of the drawer */
  maxSize?: number;

  // Mask
  mask?: boolean;
  maskClosable?: boolean;
  maskClassName?: string;
  maskStyle?: React.CSSProperties;

  // Motion
  motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
  maskMotion?: CSSMotionProps;

  // Events
  afterOpenChange?: (open: boolean) => void;
  onClose?: (
    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
  ) => void;

  // classNames
  classNames?: DrawerClassNames;

  // styles
  styles?: DrawerStyles;
  drawerRender?: (node: React.ReactNode) => React.ReactNode;

  // resizable
  /** Default size for uncontrolled resizable drawer */
  defaultSize?: number | string;
  resizable?:
    | boolean
    | {
        onResize?: (size: number) => void;
        onResizeStart?: () => void;
        onResizeEnd?: () => void;
      };
}

const DrawerPopup: React.ForwardRefRenderFunction<
  HTMLDivElement,
  DrawerPopupProps
> = (props, ref) => {
  const {
    prefixCls,
    open,
    placement,
    inline,
    push,
    forceRender,

    // Focus
    autoFocus,
    focusTrap,

    // classNames
    classNames: drawerClassNames,
    // Root
    rootClassName,
    rootStyle,
    zIndex,

    // Drawer
    className,
    id,
    style,
    motion,
    width,
    height,
    size,
    maxSize,
    children,

    // Mask
    mask,
    maskClosable,
    maskMotion,
    maskClassName,
    maskStyle,

    // Events
    afterOpenChange,
    onClose,
    onMouseEnter,
    onMouseOver,
    onMouseLeave,
    onClick,
    onKeyDown,
    onKeyUp,

    styles,
    drawerRender,
    resizable,
    defaultSize,
  } = props;

  // ================================ Refs ================================
  const panelRef = React.useRef<HTMLDivElement>(null);

  React.useImperativeHandle(ref, () => panelRef.current);

  // ========================= Focusable ==========================
  const ignoreElement = useFocusable(
    () => panelRef.current,
    open,
    autoFocus,
    focusTrap,
    mask,
  );

  // ============================ Push ============================
  const [pushed, setPushed] = React.useState(false);

  const parentContext = React.useContext(DrawerContext);

  // Merge push distance
  let pushConfig: PushConfig;
  if (typeof push === 'boolean') {
    pushConfig = push ? {} : { distance: 0 };
  } else {
    pushConfig = push || {};
  }
  const pushDistance =
    pushConfig?.distance ?? parentContext?.pushDistance ?? 180;

  const mergedContext = React.useMemo<DrawerContextProps>(
    () => ({
      pushDistance,
      push: () => {
        setPushed(true);
      },
      pull: () => {
        setPushed(false);
      },
    }),
    [pushDistance],
  );

  // ========================= ScrollLock =========================
  // Tell parent to push
  React.useEffect(() => {
    if (open) {
      parentContext?.push?.();
    } else {
      parentContext?.pull?.();
    }
  }, [open]);

  // Clean up
  React.useEffect(
    () => () => {
      parentContext?.pull?.();
    },
    [],
  );

  // ============================ Mask ============================
  const maskNode: React.ReactNode = (
    <CSSMotion key="mask" {...maskMotion} visible={mask && open}>
      {(
        { className: motionMaskClassName, style: motionMaskStyle },
        maskRef,
      ) => (
        <div
          className={clsx(
            `${prefixCls}-mask`,
            motionMaskClassName,
            drawerClassNames?.mask,
            maskClassName,
          )}
          style={{ ...motionMaskStyle, ...maskStyle, ...styles?.mask }}
          onClick={maskClosable && open ? onClose : undefined}
          ref={maskRef}
        />
      )}
    </CSSMotion>
  );

  // =========================== Panel ============================
  const motionProps = typeof motion === 'function' ? motion(placement) : motion;

  // ============================ Size ============================
  const [currentSize, setCurrentSize] = React.useState<number>();
  const isHorizontal = placement === 'left' || placement === 'right';

  // Aggregate size logic with backward compatibility using useMemo
  const mergedSize = React.useMemo(() => {
    const legacySize = isHorizontal ? width : height;

    const nextMergedSize =
      size ??
      legacySize ??
      currentSize ??
      defaultSize ??
      (isHorizontal ? 378 : undefined);

    return parseWidthHeight(nextMergedSize);
  }, [size, width, height, defaultSize, isHorizontal, currentSize]);

  // >>> Style
  const wrapperStyle: React.CSSProperties = React.useMemo(() => {
    const nextWrapperStyle: React.CSSProperties = {};

    if (pushed && pushDistance) {
      switch (placement) {
        case 'top':
          nextWrapperStyle.transform = `translateY(${pushDistance}px)`;
          break;
        case 'bottom':
          nextWrapperStyle.transform = `translateY(${-pushDistance}px)`;
          break;
        case 'left':
          nextWrapperStyle.transform = `translateX(${pushDistance}px)`;

          break;
        default:
          nextWrapperStyle.transform = `translateX(${-pushDistance}px)`;
          break;
      }
    }

    if (isHorizontal) {
      nextWrapperStyle.width = parseWidthHeight(mergedSize);
    } else {
      nextWrapperStyle.height = parseWidthHeight(mergedSize);
    }

    return nextWrapperStyle;
  }, [pushed, pushDistance, placement, isHorizontal, mergedSize]);

  // =========================== Resize ===========================
  const wrapperRef = React.useRef<HTMLDivElement>(null);

  const isResizable = !!resizable;
  const resizeConfig = (typeof resizable === 'object' && resizable) || {};

  const onInternalResize = useEvent((size: number) => {
    setCurrentSize(size);
    resizeConfig.onResize?.(size);
  });

  const { dragElementProps, isDragging } = useDrag({
    prefixCls: `${prefixCls}-resizable`,
    direction: placement,
    className: drawerClassNames?.dragger,
    style: styles?.dragger,
    maxSize,
    containerRef: wrapperRef,
    currentSize: mergedSize,
    onResize: onInternalResize,
    onResizeStart: resizeConfig.onResizeStart,
    onResizeEnd: resizeConfig.onResizeEnd,
  });

  const fillWrapperRef = React.useCallback(
    (motionRef: React.Ref<HTMLDivElement>) => (node: HTMLDivElement) => {
      wrapperRef.current = node;
      fillRef(motionRef, node);
    },
    [],
  );

  // =========================== Events ===========================
  const eventHandlers = {
    onMouseEnter,
    onMouseOver,
    onMouseLeave,
    onClick,
    onKeyDown,
    onKeyUp,
    onFocus: (e: React.FocusEvent<HTMLDivElement>) => {
      ignoreElement(e.target);
    },
  };

  // =========================== Render ==========================
  // >>>>> Panel
  const panelNode: React.ReactNode = (
    <CSSMotion
      key="panel"
      {...motionProps}
      visible={open}
      forceRender={forceRender}
      onVisibleChanged={afterOpenChange}
      removeOnLeave={false}
      leavedClassName={`${prefixCls}-content-wrapper-hidden`}
    >
      {({ className: motionClassName, style: motionStyle }, motionRef) => {
        const content = (
          <DrawerPanel
            id={id}
            prefixCls={prefixCls}
            className={clsx(className, drawerClassNames?.section)}
            style={{ ...style, ...styles?.section }}
            {...pickAttrs(props, { aria: true })}
            {...eventHandlers}
          >
            {children}
          </DrawerPanel>
        );
        return (
          <div
            ref={fillWrapperRef(motionRef)}
            className={clsx(
              `${prefixCls}-content-wrapper`,
              isDragging && `${prefixCls}-content-wrapper-dragging`,
              drawerClassNames?.wrapper,
              !isDragging && motionClassName,
            )}
            style={{ ...motionStyle, ...wrapperStyle, ...styles?.wrapper }}
            {...pickAttrs(props, { data: true })}
          >
            {isResizable && <div {...dragElementProps} />}
            {drawerRender ? drawerRender(content) : content}
          </div>
        );
      }}
    </CSSMotion>
  );

  // >>>>> Container
  const containerStyle: React.CSSProperties = {
    ...rootStyle,
  };

  if (zIndex) {
    containerStyle.zIndex = zIndex;
  }

  return (
    <DrawerContext.Provider value={mergedContext}>
      <div
        className={clsx(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
          [`${prefixCls}-open`]: open,
          [`${prefixCls}-inline`]: inline,
        })}
        style={containerStyle}
        tabIndex={-1}
        ref={panelRef}
      >
        {maskNode}
        {panelNode}
      </div>
    </DrawerContext.Provider>
  );
};

const RefDrawerPopup = React.forwardRef(DrawerPopup);

if (process.env.NODE_ENV !== 'production') {
  RefDrawerPopup.displayName = 'DrawerPopup';
}

export default RefDrawerPopup;