74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
|
import { supportsPassiveEvents } from 'detect-passive-events';
|
||
|
|
import React, { useCallback, useEffect, useRef } from 'react';
|
||
|
|
|
||
|
|
import { Emoji } from './emoji-picker-dropdown';
|
||
|
|
|
||
|
|
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
||
|
|
const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
|
||
|
|
|
||
|
|
interface IModifierPickerMenu {
|
||
|
|
active: boolean,
|
||
|
|
onSelect: (modifier: number) => void,
|
||
|
|
onClose: () => void,
|
||
|
|
}
|
||
|
|
|
||
|
|
const ModifierPickerMenu: React.FC<IModifierPickerMenu> = ({ active, onSelect, onClose }) => {
|
||
|
|
const node = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
const handleClick: React.MouseEventHandler<HTMLButtonElement> = e => {
|
||
|
|
onSelect(+e.currentTarget.getAttribute('data-index')! * 1);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDocumentClick = useCallback((e => {
|
||
|
|
if (node.current && !node.current.contains(e.target)) {
|
||
|
|
onClose();
|
||
|
|
}
|
||
|
|
}), []);
|
||
|
|
|
||
|
|
const attachListeners = () => {
|
||
|
|
document.addEventListener('click', handleDocumentClick, false);
|
||
|
|
document.addEventListener('touchend', handleDocumentClick, listenerOptions);
|
||
|
|
};
|
||
|
|
|
||
|
|
const removeListeners = () => {
|
||
|
|
document.removeEventListener('click', handleDocumentClick, false);
|
||
|
|
document.removeEventListener('touchend', handleDocumentClick, listenerOptions as any);
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
return () => {
|
||
|
|
removeListeners();
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (active) attachListeners();
|
||
|
|
else removeListeners();
|
||
|
|
}, [active]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={node}>
|
||
|
|
<button onClick={handleClick} data-index={1}>
|
||
|
|
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} />
|
||
|
|
</button>
|
||
|
|
<button onClick={handleClick} data-index={2}>
|
||
|
|
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} />
|
||
|
|
</button>
|
||
|
|
<button onClick={handleClick} data-index={3}>
|
||
|
|
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} />
|
||
|
|
</button>
|
||
|
|
<button onClick={handleClick} data-index={4}>
|
||
|
|
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} />
|
||
|
|
</button>
|
||
|
|
<button onClick={handleClick} data-index={5}>
|
||
|
|
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} />
|
||
|
|
</button>
|
||
|
|
<button onClick={handleClick} data-index={6}>
|
||
|
|
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ModifierPickerMenu;
|