51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
|
import React, { useRef } from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import {
|
||
|
|
openProfileHoverCard,
|
||
|
|
closeProfileHoverCard,
|
||
|
|
} from 'soapbox/actions/profile_hover_card';
|
||
|
|
import { useDispatch } from 'react-redux';
|
||
|
|
import { debounce } from 'lodash';
|
||
|
|
import { isMobile } from 'soapbox/is_mobile';
|
||
|
|
|
||
|
|
const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
|
||
|
|
dispatch(openProfileHoverCard(ref, accountId));
|
||
|
|
}, 1200);
|
||
|
|
|
||
|
|
const handleMouseEnter = (dispatch, ref, accountId) => {
|
||
|
|
return e => {
|
||
|
|
if (!isMobile(window.innerWidth))
|
||
|
|
showProfileHoverCard(dispatch, ref, accountId);
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleMouseLeave = (dispatch) => {
|
||
|
|
return e => {
|
||
|
|
showProfileHoverCard.cancel();
|
||
|
|
setTimeout(() => dispatch(closeProfileHoverCard()), 300);
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
export const HoverRefWrapper = ({ accountId, children }) => {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const ref = useRef();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className='hover-ref-wrapper'
|
||
|
|
onMouseEnter={handleMouseEnter(dispatch, ref, accountId)}
|
||
|
|
onMouseLeave={handleMouseLeave(dispatch)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
HoverRefWrapper.propTypes = {
|
||
|
|
accountId: PropTypes.string,
|
||
|
|
children: PropTypes.node,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default HoverRefWrapper;
|