1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
|
4 | import { DropdownContext } from './dropdownConstants';
|
5 | import { css } from '@patternfly/react-styles';
|
6 | import { KEY_CODES } from '../../helpers/constants';
|
7 | const buttonVariantStyles = {
|
8 | default: '',
|
9 | primary: styles.modifiers.primary,
|
10 | secondary: styles.modifiers.secondary
|
11 | };
|
12 | export class Toggle extends React.Component {
|
13 | constructor() {
|
14 | super(...arguments);
|
15 | this.buttonRef = React.createRef();
|
16 | this.componentDidMount = () => {
|
17 | document.addEventListener('click', this.onDocClick);
|
18 | document.addEventListener('touchstart', this.onDocClick);
|
19 | document.addEventListener('keydown', this.onEscPress);
|
20 | };
|
21 | this.componentWillUnmount = () => {
|
22 | document.removeEventListener('click', this.onDocClick);
|
23 | document.removeEventListener('touchstart', this.onDocClick);
|
24 | document.removeEventListener('keydown', this.onEscPress);
|
25 | };
|
26 | this.onDocClick = (event) => {
|
27 | const { isOpen, parentRef, onToggle, getMenuRef } = this.props;
|
28 | const menuRef = getMenuRef && getMenuRef();
|
29 | const clickedOnToggle = parentRef && parentRef.current && parentRef.current.contains(event.target);
|
30 | const clickedWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target);
|
31 | if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
|
32 | onToggle(false, event);
|
33 | }
|
34 | };
|
35 | this.onEscPress = (event) => {
|
36 | const { parentRef, getMenuRef } = this.props;
|
37 | const keyCode = event.keyCode || event.which;
|
38 | const menuRef = getMenuRef && getMenuRef();
|
39 | const escFromToggle = parentRef && parentRef.current && parentRef.current.contains(event.target);
|
40 | const escFromWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target);
|
41 | if (this.props.isOpen &&
|
42 | (keyCode === KEY_CODES.ESCAPE_KEY || event.key === 'Tab') &&
|
43 | (escFromToggle || escFromWithinMenu)) {
|
44 | this.props.onToggle(false, event);
|
45 | this.buttonRef.current.focus();
|
46 | }
|
47 | };
|
48 | this.onKeyDown = (event) => {
|
49 | if (event.key === 'Tab' && !this.props.isOpen) {
|
50 | return;
|
51 | }
|
52 | if ((event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') && this.props.isOpen) {
|
53 | if (!this.props.bubbleEvent) {
|
54 | event.stopPropagation();
|
55 | }
|
56 | event.preventDefault();
|
57 | this.props.onToggle(!this.props.isOpen, event);
|
58 | }
|
59 | else if ((event.key === 'Enter' || event.key === ' ') && !this.props.isOpen) {
|
60 | if (!this.props.bubbleEvent) {
|
61 | event.stopPropagation();
|
62 | }
|
63 | event.preventDefault();
|
64 | this.props.onToggle(!this.props.isOpen, event);
|
65 | this.props.onEnter();
|
66 | }
|
67 | };
|
68 | }
|
69 | render() {
|
70 | const _a = this.props, { className, children, isOpen, isDisabled, isPlain, isText, isPrimary, isSplitButton, toggleVariant, onToggle, 'aria-haspopup': ariaHasPopup,
|
71 |
|
72 | isActive, bubbleEvent, onEnter, parentRef, getMenuRef,
|
73 |
|
74 | id, type } = _a, props = __rest(_a, ["className", "children", "isOpen", "isDisabled", "isPlain", "isText", "isPrimary", "isSplitButton", "toggleVariant", "onToggle", 'aria-haspopup', "isActive", "bubbleEvent", "onEnter", "parentRef", "getMenuRef", "id", "type"]);
|
75 | return (React.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? styles.dropdownToggleButton : toggleClass || styles.dropdownToggle, isActive && styles.modifiers.active, isPlain && styles.modifiers.plain, isText && styles.modifiers.text, isPrimary && styles.modifiers.primary, buttonVariantStyles[toggleVariant], className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
|
76 | }
|
77 | }
|
78 | Toggle.displayName = 'Toggle';
|
79 | Toggle.defaultProps = {
|
80 | className: '',
|
81 | isOpen: false,
|
82 | isActive: false,
|
83 | isDisabled: false,
|
84 | isPlain: false,
|
85 | isText: false,
|
86 | isPrimary: false,
|
87 | isSplitButton: false,
|
88 | onToggle: () => { },
|
89 | onEnter: () => { },
|
90 | bubbleEvent: false
|
91 | };
|
92 |
|
\ | No newline at end of file |