1 | import classNames from 'classnames';
|
2 | import * as React from 'react';
|
3 | import { useContext } from 'react';
|
4 | import { useDropdownMenu } from '@restart/ui/DropdownMenu';
|
5 | import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
|
6 | import useMergedRefs from '@restart/hooks/useMergedRefs';
|
7 | import warning from 'warning';
|
8 | import DropdownContext from './DropdownContext';
|
9 | import InputGroupContext from './InputGroupContext';
|
10 | import NavbarContext from './NavbarContext';
|
11 | import { useBootstrapPrefix } from './ThemeProvider';
|
12 | import useWrappedRefWithWarning from './useWrappedRefWithWarning';
|
13 | import { alignPropType } from './types';
|
14 | import { jsx as _jsx } from "react/jsx-runtime";
|
15 | const defaultProps = {
|
16 | flip: true
|
17 | };
|
18 | export function getDropdownMenuPlacement(alignEnd, dropDirection, isRTL) {
|
19 | const topStart = isRTL ? 'top-end' : 'top-start';
|
20 | const topEnd = isRTL ? 'top-start' : 'top-end';
|
21 | const bottomStart = isRTL ? 'bottom-end' : 'bottom-start';
|
22 | const bottomEnd = isRTL ? 'bottom-start' : 'bottom-end';
|
23 | const leftStart = isRTL ? 'right-start' : 'left-start';
|
24 | const leftEnd = isRTL ? 'right-end' : 'left-end';
|
25 | const rightStart = isRTL ? 'left-start' : 'right-start';
|
26 | const rightEnd = isRTL ? 'left-end' : 'right-end';
|
27 | let placement = alignEnd ? bottomEnd : bottomStart;
|
28 | if (dropDirection === 'up') placement = alignEnd ? topEnd : topStart;else if (dropDirection === 'end') placement = alignEnd ? rightEnd : rightStart;else if (dropDirection === 'start') placement = alignEnd ? leftEnd : leftStart;
|
29 | return placement;
|
30 | }
|
31 | const DropdownMenu = React.forwardRef(({
|
32 | bsPrefix,
|
33 | className,
|
34 | align,
|
35 | rootCloseEvent,
|
36 | flip,
|
37 | show: showProps,
|
38 | renderOnMount,
|
39 |
|
40 | as: Component = 'div',
|
41 | popperConfig,
|
42 | variant,
|
43 | ...props
|
44 | }, ref) => {
|
45 | let alignEnd = false;
|
46 | const isNavbar = useContext(NavbarContext);
|
47 | const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-menu');
|
48 | const {
|
49 | align: contextAlign,
|
50 | drop,
|
51 | isRTL
|
52 | } = useContext(DropdownContext);
|
53 | align = align || contextAlign;
|
54 | const isInputGroup = useContext(InputGroupContext);
|
55 | const alignClasses = [];
|
56 |
|
57 | if (align) {
|
58 | if (typeof align === 'object') {
|
59 | const keys = Object.keys(align);
|
60 | process.env.NODE_ENV !== "production" ? warning(keys.length === 1, 'There should only be 1 breakpoint when passing an object to `align`') : void 0;
|
61 |
|
62 | if (keys.length) {
|
63 | const brkPoint = keys[0];
|
64 | const direction = align[brkPoint];
|
65 |
|
66 |
|
67 | alignEnd = direction === 'start';
|
68 | alignClasses.push(`${prefix}-${brkPoint}-${direction}`);
|
69 | }
|
70 | } else if (align === 'end') {
|
71 | alignEnd = true;
|
72 | }
|
73 | }
|
74 |
|
75 | const placement = getDropdownMenuPlacement(alignEnd, drop, isRTL);
|
76 | const [menuProps, {
|
77 | hasShown,
|
78 | popper,
|
79 | show,
|
80 | toggle
|
81 | }] = useDropdownMenu({
|
82 | flip,
|
83 | rootCloseEvent,
|
84 | show: showProps,
|
85 | usePopper: !isNavbar && alignClasses.length === 0,
|
86 | offset: [0, 2],
|
87 | popperConfig,
|
88 | placement
|
89 | });
|
90 | menuProps.ref = useMergedRefs(useWrappedRefWithWarning(ref, 'DropdownMenu'), menuProps.ref);
|
91 | useIsomorphicEffect(() => {
|
92 |
|
93 |
|
94 | if (show) popper == null ? void 0 : popper.update();
|
95 | }, [show]);
|
96 | if (!hasShown && !renderOnMount && !isInputGroup) return null;
|
97 |
|
98 | if (typeof Component !== 'string') {
|
99 | menuProps.show = show;
|
100 |
|
101 | menuProps.close = () => toggle == null ? void 0 : toggle(false);
|
102 |
|
103 | menuProps.align = align;
|
104 | }
|
105 |
|
106 | let style = props.style;
|
107 |
|
108 | if (popper != null && popper.placement) {
|
109 |
|
110 |
|
111 | style = { ...props.style,
|
112 | ...menuProps.style
|
113 | };
|
114 | props['x-placement'] = popper.placement;
|
115 | }
|
116 |
|
117 | return _jsx(Component, { ...props,
|
118 | ...menuProps,
|
119 | style: style
|
120 | ,
|
121 | ...((alignClasses.length || isNavbar) && {
|
122 | 'data-bs-popper': 'static'
|
123 | }),
|
124 | className: classNames(className, prefix, show && 'show', alignEnd && `${prefix}-end`, variant && `${prefix}-${variant}`, ...alignClasses)
|
125 | });
|
126 | });
|
127 | DropdownMenu.displayName = 'DropdownMenu';
|
128 | DropdownMenu.defaultProps = defaultProps;
|
129 | export default DropdownMenu; |
\ | No newline at end of file |