1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import { DropdownMenu } from './DropdownMenu';
|
6 | import { DropdownContext, DropdownDirection, DropdownPosition } from './dropdownConstants';
|
7 | import { getOUIAProps } from '../../helpers';
|
8 | import { Popper } from '../../helpers/Popper/Popper';
|
9 | export class DropdownWithContext extends React.Component {
|
10 | constructor(props) {
|
11 | super(props);
|
12 | this.openedOnEnter = false;
|
13 | this.baseComponentRef = React.createRef();
|
14 | this.menuComponentRef = React.createRef();
|
15 | this.onEnter = () => {
|
16 | this.openedOnEnter = true;
|
17 | };
|
18 | this.setMenuComponentRef = (element) => {
|
19 | this.menuComponentRef = element;
|
20 | };
|
21 | this.getMenuComponentRef = () => this.menuComponentRef;
|
22 | if (props.dropdownItems && props.dropdownItems.length > 0 && props.children) {
|
23 |
|
24 | console.error('Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered');
|
25 | }
|
26 | }
|
27 | componentDidUpdate() {
|
28 | if (!this.props.isOpen) {
|
29 | this.openedOnEnter = false;
|
30 | }
|
31 | }
|
32 | render() {
|
33 | const _a = this.props, { children, className, direction, dropdownItems, isOpen, isPlain, isText, isGrouped, isFullHeight,
|
34 |
|
35 | onSelect, position, toggle, autoFocus, menuAppendTo } = _a, props = __rest(_a, ["children", "className", "direction", "dropdownItems", "isOpen", "isPlain", "isText", "isGrouped", "isFullHeight", "onSelect", "position", "toggle", "autoFocus", "menuAppendTo"]);
|
36 | const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
|
37 | let component;
|
38 | let renderedContent;
|
39 | let ariaHasPopup = false;
|
40 | if (dropdownItems && dropdownItems.length > 0) {
|
41 | component = 'ul';
|
42 | renderedContent = dropdownItems;
|
43 | ariaHasPopup = true;
|
44 | }
|
45 | else {
|
46 | component = 'div';
|
47 | renderedContent = React.Children.toArray(children);
|
48 | }
|
49 | const openedOnEnter = this.openedOnEnter;
|
50 | return (React.createElement(DropdownContext.Consumer, null, ({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => {
|
51 | const BaseComponent = baseComponent;
|
52 | const menuContainer = (React.createElement(DropdownMenu, { setMenuComponentRef: this.setMenuComponentRef, component: component, isOpen: isOpen, position: position, "aria-labelledby": contextId ? `${contextId}-toggle` : id, isGrouped: isGrouped, autoFocus: openedOnEnter && autoFocus, alignments: alignments }, renderedContent));
|
53 | const popperContainer = (React.createElement("div", { className: css(baseClass, direction === DropdownDirection.up && styles.modifiers.top, position === DropdownPosition.right && styles.modifiers.alignRight, isOpen && styles.modifiers.expanded, className) }, isOpen && menuContainer));
|
54 | const mainContainer = (React.createElement(BaseComponent, Object.assign({}, props, { className: css(baseClass, direction === DropdownDirection.up && styles.modifiers.top, position === DropdownPosition.right && styles.modifiers.alignRight, isOpen && styles.modifiers.expanded, isFullHeight && styles.modifiers.fullHeight, className), ref: this.baseComponentRef }, getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)),
|
55 | React.Children.map(toggle, oneToggle => React.cloneElement(oneToggle, {
|
56 | parentRef: this.baseComponentRef,
|
57 | getMenuRef: this.getMenuComponentRef,
|
58 | isOpen,
|
59 | id,
|
60 | isPlain,
|
61 | isText,
|
62 | 'aria-haspopup': ariaHasPopup,
|
63 | onEnter: () => {
|
64 | this.onEnter();
|
65 | oneToggle.props.onEnter && oneToggle.props.onEnter();
|
66 | }
|
67 | })),
|
68 | menuAppendTo === 'inline' && isOpen && menuContainer));
|
69 | const getParentElement = () => {
|
70 | if (this.baseComponentRef && this.baseComponentRef.current) {
|
71 | return this.baseComponentRef.current.parentElement;
|
72 | }
|
73 | return null;
|
74 | };
|
75 | return menuAppendTo === 'inline' ? (mainContainer) : (React.createElement(Popper, { trigger: mainContainer, popper: popperContainer, direction: direction, position: position, appendTo: menuAppendTo === 'parent' ? getParentElement() : menuAppendTo, isVisible: isOpen }));
|
76 | }));
|
77 | }
|
78 | }
|
79 | DropdownWithContext.displayName = 'DropdownWithContext';
|
80 |
|
81 | DropdownWithContext.currentId = 0;
|
82 | DropdownWithContext.defaultProps = {
|
83 | className: '',
|
84 | dropdownItems: [],
|
85 | isOpen: false,
|
86 | isPlain: false,
|
87 | isText: false,
|
88 | isGrouped: false,
|
89 | position: DropdownPosition.left,
|
90 | direction: DropdownDirection.down,
|
91 | onSelect: () => undefined,
|
92 | autoFocus: true,
|
93 | menuAppendTo: 'inline'
|
94 | };
|
95 |
|
\ | No newline at end of file |