gab-social/app/javascript/gabsocial/components/popover/popover_base.js

156 lines
4.0 KiB
JavaScript
Raw Normal View History

2020-05-01 06:50:27 +01:00
import detectPassiveEvents from 'detect-passive-events'
2020-02-28 15:20:47 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-03-11 23:56:18 +00:00
import { Manager, Reference, Popper } from 'react-popper'
2020-05-01 06:50:27 +01:00
import { CX } from '../../constants'
2020-02-28 15:20:47 +00:00
import { isUserTouching } from '../../utils/is_mobile'
2020-05-01 06:50:27 +01:00
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false
2020-02-28 15:20:47 +00:00
2020-04-11 23:29:19 +01:00
const mapStateToProps = (state) => ({
2020-05-01 06:50:27 +01:00
isModalOpen: !!state.getIn(['modal', 'modalType']),
2020-02-28 15:20:47 +00:00
popoverPlacement: state.getIn(['popover', 'placement']),
})
export default
@connect(mapStateToProps)
2020-02-28 15:20:47 +00:00
class PopoverBase extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object,
}
static propTypes = {
title: PropTypes.string,
disabled: PropTypes.bool,
status: ImmutablePropTypes.map,
isUserTouching: PropTypes.func,
isModalOpen: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
2020-03-11 23:56:18 +00:00
position: PropTypes.string,
2020-02-28 15:20:47 +00:00
visible: PropTypes.bool,
2020-03-11 23:56:18 +00:00
targetRef: PropTypes.node,
2020-04-23 07:13:29 +01:00
innerRef: PropTypes.oneOfType([
PropTypes.node,
PropTypes.func,
]),
2020-02-28 15:20:47 +00:00
}
static defaultProps = {
title: 'Menu',
2020-03-11 23:56:18 +00:00
position: 'bottom',
2020-02-28 15:20:47 +00:00
}
2020-05-01 06:50:27 +01:00
componentDidMount() {
document.addEventListener('click', this.handleDocumentClick, false)
document.addEventListener('keydown', this.handleKeyDown, false)
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions)
2020-02-28 15:20:47 +00:00
}
2020-05-01 06:50:27 +01:00
componentWillUnmount() {
document.removeEventListener('click', this.handleDocumentClick, false)
document.removeEventListener('keydown', this.handleKeyDown, false)
document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions)
}
handleDocumentClick = (e) => {
const { targetRef, visible, onClose } = this.props
const containsTargetRef = !targetRef ? false : targetRef.contains(e.target)
if (this.node && !this.node.contains(e.target) && !containsTargetRef && visible) {
onClose()
}
2020-02-28 15:20:47 +00:00
}
2020-05-01 06:50:27 +01:00
handleKeyDown = (e) => {
const items = Array.from(this.node.getElementsByTagName('a'))
const index = items.indexOf(document.activeElement)
let element
2020-02-28 15:20:47 +00:00
switch (e.key) {
2020-05-01 06:50:27 +01:00
case 'ArrowDown':
element = items[index + 1]
if (element) element.focus()
break
case 'ArrowUp':
element = items[index - 1]
if (element) element.focus()
break
case 'Home':
element = items[0]
if (element) element.focus()
break
case 'End':
element = items[items.length - 1]
if (element) element.focus()
break
2020-04-08 02:06:59 +01:00
case 'Escape':
this.handleClose()
break
2020-02-28 15:20:47 +00:00
}
}
2020-05-01 06:50:27 +01:00
handleItemClick = (e) => {
2020-02-28 15:20:47 +00:00
const i = Number(e.currentTarget.getAttribute('data-index'))
const { action, to } = this.props.items[i]
this.handleClose()
if (typeof action === 'function') {
e.preventDefault()
action()
} else if (to) {
e.preventDefault()
this.context.router.history.push(to)
}
}
2020-05-01 06:50:27 +01:00
handleClose = () => {
this.props.onClose()
2020-02-28 15:20:47 +00:00
}
2020-05-01 06:50:27 +01:00
setRef = (n) => {
try {
this.node = n
this.props.innerRef = n
} catch (error) {
//
2020-02-28 15:20:47 +00:00
}
}
render() {
2020-03-11 23:56:18 +00:00
const {
children,
visible,
position,
targetRef,
} = this.props
2020-02-28 15:20:47 +00:00
2020-05-01 06:50:27 +01:00
const containerClasses = CX({
2020-02-28 15:20:47 +00:00
default: 1,
z4: 1,
displayNone: !visible,
})
return (
2020-03-11 23:56:18 +00:00
<Manager>
<Popper
placement={position}
referenceElement={targetRef}
>
{({ ref, style, placement, arrowProps }) => (
2020-05-07 00:40:54 +01:00
<div ref={ref} style={style} data-placement={placement} className={[_s.z4, _s.mt5, _s.mb5, _s.boxShadowPopover].join(' ')}>
2020-03-11 23:56:18 +00:00
<div ref={arrowProps.ref} style={arrowProps.style} />
2020-05-01 06:50:27 +01:00
<div ref={this.setRef} data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
2020-03-14 17:31:29 +00:00
{children}
2020-03-11 23:56:18 +00:00
</div>
</div>
)}
</Popper>
</Manager>
2020-02-28 15:20:47 +00:00
)
}
}