trigger/src/UniqueProvider/UniqueContainer.tsx at master · react-component/trigger · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from 'react';
import useOffsetStyle from '../hooks/useOffsetStyle';
import { clsx } from 'clsx';
import CSSMotion from '@rc-component/motion';
import type { CSSMotionProps } from '@rc-component/motion';
import type { AlignType, ArrowPos } from '../interface';

export interface UniqueContainerProps {
  prefixCls: string; // ${prefixCls}-unique-container
  isMobile: boolean;
  ready: boolean;
  open: boolean;
  align: AlignType;
  offsetR: number;
  offsetB: number;
  offsetX: number;
  offsetY: number;
  arrowPos?: ArrowPos;
  popupSize?: { width: number; height: number };
  motion?: CSSMotionProps;
  uniqueContainerClassName?: string;
  uniqueContainerStyle?: React.CSSProperties;
}

const UniqueContainer = (props: UniqueContainerProps) => {
  const {
    prefixCls,
    isMobile,
    ready,
    open,
    align,
    offsetR,
    offsetB,
    offsetX,
    offsetY,
    arrowPos,
    popupSize,
    motion,
    uniqueContainerClassName,
    uniqueContainerStyle,
  } = props;

  const containerCls = `${prefixCls}-unique-container`;

  const [motionVisible, setMotionVisible] = React.useState(false);

  // ========================= Styles =========================
  const offsetStyle = useOffsetStyle(
    isMobile,
    ready,
    open,
    align,
    offsetR,
    offsetB,
    offsetX,
    offsetY,
  );

  // Cache for offsetStyle when ready is true
  const cachedOffsetStyleRef = React.useRef(offsetStyle);

  // Update cached offset style when ready is true
  if (ready) {
    cachedOffsetStyleRef.current = offsetStyle;
  }

  // Apply popup size if available
  const sizeStyle: React.CSSProperties = {};
  if (popupSize) {
    sizeStyle.width = popupSize.width;
    sizeStyle.height = popupSize.height;
  }

  // ========================= Render =========================
  return (
    <CSSMotion
      motionAppear
      motionEnter
      motionLeave
      removeOnLeave={false}
      leavedClassName={`${containerCls}-hidden`}
      {...motion}
      visible={open}
      onVisibleChanged={(nextVisible) => {
        setMotionVisible(nextVisible);
      }}
    >
      {({ className: motionClassName, style: motionStyle }) => {
        const cls = clsx(
          containerCls,
          motionClassName,
          uniqueContainerClassName,
          { [`${containerCls}-visible`]: motionVisible },
        );

        return (
          <div
            className={cls}
            style={
              {
                '--arrow-x': `${arrowPos?.x || 0}px`,
                '--arrow-y': `${arrowPos?.y || 0}px`,
                ...cachedOffsetStyleRef.current,
                ...sizeStyle,
                ...motionStyle,
                ...uniqueContainerStyle,
              } as React.CSSProperties
            }
          />
        );
      }}
    </CSSMotion>
  );
};

export default UniqueContainer;