39 lines
1 KiB
TypeScript
39 lines
1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
|
||
|
|
import { Emoji } from './emoji-picker-dropdown';
|
||
|
|
import ModifierPickerMenu from './modifier-picker-menu';
|
||
|
|
|
||
|
|
const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
|
||
|
|
|
||
|
|
interface IModifierPicker {
|
||
|
|
active: boolean,
|
||
|
|
modifier?: number,
|
||
|
|
onOpen: () => void,
|
||
|
|
onClose: () => void,
|
||
|
|
onChange: (skinTone: number) => void,
|
||
|
|
}
|
||
|
|
|
||
|
|
const ModifierPicker: React.FC<IModifierPicker> = ({ active, modifier, onOpen, onClose, onChange }) => {
|
||
|
|
const handleClick = () => {
|
||
|
|
if (active) {
|
||
|
|
onClose();
|
||
|
|
} else {
|
||
|
|
onOpen();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSelect = (modifier: number) => {
|
||
|
|
onChange(modifier);
|
||
|
|
onClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='emoji-picker-dropdown__modifiers'>
|
||
|
|
<Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={handleClick} backgroundImageFn={backgroundImageFn} />
|
||
|
|
<ModifierPickerMenu active={active} onSelect={handleSelect} onClose={onClose} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ModifierPicker;
|