Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 68x 68x 158x 68x 158x 68x 4x 200x 200x 200x 200x 355x 375x 158x 21x 21x 1x 20x 158x 20x 20x 20x 20x 158x 3x 3x 3x 3x 68x | import { Placement } from 'popper.js';
import React, { Component, MouseEventHandler, ReactNode } from 'react';
import { Manager, Popper, Reference } from 'react-popper';
export interface DropdownTriggerProps {
placement?: Placement;
dropdown: ReactNode;
}
export interface DropdownTriggerState {
shouldShow: boolean;
}
export default class DropdownTrigger extends Component<DropdownTriggerProps, DropdownTriggerState> {
static defaultProps = {
placement: 'bottom-start',
};
state: Readonly<DropdownTriggerState> = {
shouldShow: false,
};
componentWillUnmount(): void {
document.removeEventListener('click', this.handleClose);
}
render() {
const { children, placement, dropdown } = this.props;
const { shouldShow } = this.state;
return (
<Manager>
<Reference>
{ ({ ref }) => (
<div
className="dropdownTrigger"
onClick={ this.handleClick }
ref={ ref }
>
{ children }
</div>
) }
</Reference>
<Popper
modifiers={ {
hide: { enabled: false },
flip: { enabled: false },
preventOverflow: { enabled: false },
} }
placement={ placement }
>
{ ({ ref, style }) => !shouldShow ? null : (
<div
className="dropdownMenu"
ref={ ref }
style={ {
...style,
width: '100%',
zIndex: 1,
} }
>
{ dropdown }
</div>
) }
</Popper>
</Manager>
);
}
private handleClick: MouseEventHandler<HTMLElement> = event => {
const { shouldShow } = this.state;
if (shouldShow) {
this.handleClose(event.nativeEvent);
} else {
this.handleOpen(event.nativeEvent);
}
};
private handleOpen: (event: MouseEvent) => void = () => {
const { shouldShow } = this.state;
Iif (shouldShow) {
return;
}
this.setState({ shouldShow: true }, () => {
document.addEventListener('click', this.handleClose);
});
};
private handleClose: (event: MouseEvent) => void = () => {
const { shouldShow } = this.state;
Iif (!shouldShow) {
return;
}
this.setState({ shouldShow: false }, () => {
document.removeEventListener('click', this.handleClose);
});
};
}
|