import React , { Component , ReactElement , ReactNode } from 'react' ; import { EditorState } from 'draft-js' ; import StickerOption from './StickerOption' ; import addSticker from '../modifiers/addSticker' ; import { StickerPluginTheme } from '../theme' ; import { ImmutableDataStickerPluginItem , ImmutableStickerPluginItem } from '..' ; /**
 * Sets the CSS overflow value to newValue
 * Use like this: setOverflow('auto', document.body);
 */ function setOverflow ( newValue , element ) { element . style . overflow = newValue ; } export interface StickerSelectPubParams { editor : { onChange ( state ) : void ; state : { editorState : EditorState ; } ; } ; } interface StickerSelectParams extends StickerSelectPubParams { theme ? : StickerPluginTheme ; stickers : ImmutableDataStickerPluginItem ; selectButtonContent : ReactNode ; } /**
 * Sticker Selector Component
 */ export default class StickerSelect extends Component < StickerSelectParams > { state = { open : false , } ; preventNextClose ? : boolean ; componentDidMount ( ) { document . addEventListener ( 'click' , this . closePopover ) ; } componentWillUnmount ( ) { document . removeEventListener ( 'click' , this . closePopover ) ; } onMouseEnter = ( ) : void => { setOverflow ( 'hidden' , document . body ) ; } ; onMouseLeave = ( ) : void => { setOverflow ( 'auto' , document . body ) ; } ; openPopover = ( ) : void => { if ( ! this . state . open ) { this . preventNextClose = true ; this . setState ( { open : true , } ) ; } } ; closePopover = ( ) : void => { if ( ! this . preventNextClose && this . state . open ) { this . setState ( { open : false , } ) ; } this . preventNextClose = false ; } ; add = ( id ) : void => { const { editor } = this . props ; editor . onChange ( addSticker ( editor . state . editorState , id ) ) ; } ; render ( ) { const data = this . props . stickers . get ( 'data' ) as ImmutableStickerPluginItem ; const stickerElements = data . map ( ( sticker ) => { const id = sticker ! . get ( 'id' ) ; const url = sticker ! . get ( 'url' ) ; return ( < StickerOption theme = { this . props . theme } key = { id } onClick = { this . add } id = { id } url = { url } / > ) ; } ) ; const { theme = { } } = this . props ; const popoverClassName = this . state . open ? theme . selectPopover : theme . selectClosedPopover ; const buttonClassName = this . state . open ? theme . selectPressedButton : theme . selectButton ; return ( < div className = { theme . select } > < button className = { buttonClassName } onMouseUp = { this . openPopover } type = "button" > { this . props . selectButtonContent } < /button> < div className = { popoverClassName } onMouseEnter = { this . onMouseEnter } onMouseLeave = { this . onMouseLeave } > < div className = { theme . selectStickerList } > { stickerElements . toList ( ) . toJS ( ) } < /div> < div className = { theme . selectBottomGradient } / > < /div> < /div>); } }