react-emojipicker
Version:
A react emoji picker
206 lines (186 loc) âĒ 12.5 kB
JavaScript
import React, { Component } from 'react'
import styled from 'styled-components'
import emojione from 'emojione'
import PropTypes from 'prop-types'
/* list of emoji's sourced from http://getemoji.com */
const PEOPLE_EMOJIS = ['ð', 'ð', 'ð', 'ð', 'ð', 'ð
', 'ð', 'ð', 'ðĪĢ', 'âšïļ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðĪ', 'ðĪ', 'ðĪ', 'ð', 'ðĪĄ', 'ðĪ ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'âđïļ', 'ðĢ', 'ð', 'ðŦ', 'ðĐ', 'ðĪ', 'ð ', 'ðĄ', 'ðķ', 'ð', 'ð', 'ðŊ', 'ðĶ', 'ð§', 'ðŪ', 'ðē', 'ðĩ', 'ðģ', 'ðą', 'ðĻ', 'ð°', 'ðĒ', 'ðĨ', 'ðĪĪ', 'ð', 'ð', 'ðŠ', 'ðī', 'ð', 'ðĪ', 'ðĪĨ', 'ðŽ', 'ðĪ', 'ðĪĒ', 'ðĪ§', 'ð·', 'ðĪ', 'ðĪ', 'ð', 'ðŋ', 'ðđ', 'ðš', 'ðĐ', 'ðŧ', 'ð', 'â ïļ', 'ð―', 'ðū', 'ðĪ', 'ð', 'ðš', 'ðļ', 'ðđ', 'ðŧ', 'ðž', 'ð―', 'ð', 'ðŋ', 'ðū', 'ð', 'ð', 'ð', 'ð', 'ðĪ', 'ð', 'ð', 'ð', 'â', 'ðĪ', 'ðĪ', 'ðĪ', 'âïļ', 'ðĪ', 'ð', 'ð', 'ð', 'ð', 'ð', 'âïļ', 'â', 'ðĪ', 'ð', 'ð', 'ð', 'ðĪ', 'ðŠ', 'ð', 'âïļ', 'ðĪģ', 'ð
', 'ð', 'ð', 'ð', 'ð', 'ð
', 'ð', 'ð', 'ðĢ', 'ð', 'ð', 'ð', 'ð ', 'ð', 'ð', 'ð', 'ðĐ', 'ð', 'ð', 'â', 'ð', 'ð', 'ð', 'ð', 'ðž', 'ð', 'ðķ', 'âïļ']
const ANIMALS_NATURE_EMOJIS = ['ðķ', 'ðą', 'ð', 'ðđ', 'ð°', 'ðĶ', 'ðŧ', 'ðž', 'ðĻ', 'ðŊ', 'ðĶ', 'ðŪ', 'ð·', 'ð―', 'ðļ', 'ðĩ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð§', 'ðĶ', 'ðĪ', 'ðĢ', 'ðĨ', 'ðĶ', 'ðĶ
', 'ðĶ', 'ðĶ', 'ðš', 'ð', 'ðī', 'ðĶ', 'ð', 'ð', 'ðĶ', 'ð', 'ð', 'ð', 'ð', 'ð·', 'ðļ', 'ðĒ', 'ð', 'ðĶ', 'ðĶ', 'ðĶ', 'ðĶ', 'ð', 'ðĶ', 'ð ', 'ð', 'ðĄ', 'ðŽ', 'ðĶ', 'ðģ', 'ð', 'ð', 'ð', 'ð
', 'ð', 'ð', 'ð', 'ðĶ', 'ðŠ', 'ðŦ', 'ð', 'ðĶ', 'ðĶ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðĐ', 'ð', 'ð', 'ðĶ', 'ð', 'ð', 'ð', 'ð', 'ðŋ', 'ðū', 'ð', 'ðē', 'ðĩ', 'ð', 'ðē', 'ðģ', 'ðī', 'ðą', 'ðŋ', 'âïļ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðū', 'ð', 'ð·', 'ðđ', 'ðĨ', 'ðŧ', 'ðž', 'ðļ', 'ðš', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðŦ', 'âïļ', 'ð', 'âĻ', 'âĄïļ', 'ðĨ', 'ðĨ', 'âïļ', 'âïļ', 'ðĪ', 'â
ïļ', 'ðĨ', 'ðĶ', 'ð', 'âïļ', 'ð§', 'â', 'ðĐ', 'ðĻ', 'âïļ', 'âïļ', 'âïļ', 'ðŽ', 'ðĻ', 'ðŠ', 'ðŦ', 'ð', 'ð§', 'ðĶ', 'âïļ']
const FOOD_SPORTS_EMOJIS = ['ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðĨ', 'ðĨ', 'ð
', 'ð', 'ðĨ', 'ðĨ', 'ð―', 'ðķ', 'ðĨ', 'ð ', 'ð°', 'ðĨ', 'ðŊ', 'ðĨ', 'ð', 'ðĨ', 'ð§', 'ðĨ', 'ðģ', 'ðĨ', 'ðĨ', 'ðĪ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðĨ', 'ðŪ', 'ðŊ', 'ðĨ', 'ðĨ', 'ð', 'ð', 'ðē', 'ðĨ', 'ðĢ', 'ðą', 'ð', 'ð', 'ð', 'ð', 'ðĒ', 'ðĄ', 'ð§', 'ðĻ', 'ðĶ', 'ð°', 'ð', 'ðŪ', 'ð', 'ðŽ', 'ðŦ', 'ðŋ', 'ðĐ', 'ðŠ', 'ðĨ', 'ðž', 'âïļ', 'ðĩ', 'ðķ', 'ðš', 'ðŧ', 'ðĨ', 'ð·', 'ðĨ', 'ðļ', 'ðđ', 'ðū', 'ðĨ', 'ðī', 'ð―', 'â―ïļ', 'ð', 'ð', 'âūïļ', 'ðū', 'ð', 'ð', 'ðą', 'ð', 'ðļ', 'ðĨ
', 'ð', 'ð', 'ð', 'âģïļ', 'ðđ', 'ðĢ', 'ðĨ', 'ðĨ', 'âļ', 'ðŋ', 'â·', 'ð', 'ð', 'ðĪš', 'âđïļ', 'ð', 'ð', 'ð', 'ðĪ―', 'ðĢ', 'ð', 'ðī', 'ðĩ', 'ðŽ', 'ðĪ', 'ð§', 'ðž', 'ðđ', 'ðĨ', 'ð·', 'ðš', 'ðļ', 'ðŧ', 'ðē', 'ðŊ', 'ðģ', 'ðŪ', 'ðģ', 'ðī', 'ð', 'ðĐ', 'ð―', 'ðĨ', 'ðĨ', 'ðĨ', 'ð']
const TRAVEL_PLACES_EMOJIS = ['ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðī', 'ðē', 'ðĩ', 'ð', 'ðĻ', 'ð', 'ð', 'ð', 'ð', 'ðĄ', 'ð ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð
', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðĐ', 'âïļ', 'ðŦ', 'ðŽ', 'ð', 'ð°', 'ðš', 'ðķ', 'âĩïļ', 'ðĨ', 'ðĪ', 'ðģ', 'âī', 'ðĒ', 'âïļ', 'ð§', 'â―ïļ', 'ð', 'ðĶ', 'ðĨ', 'ðš', 'ðŋ', 'ð―', 'âēïļ', 'ðž', 'ð°', 'ðŊ', 'ð', 'ðĄ', 'ðĒ', 'ð ', 'âą', 'ð', 'ð', 'â°', 'ð', 'ðŧ', 'ð', 'ð', 'ð', 'âšïļ', 'ðĪ', 'ðĢ', 'ð', 'ð', 'ð ', 'ðĄ', 'ð', 'ð', 'ðĒ', 'ðŽ', 'ðĢ', 'ðĪ', 'ðĨ', 'ðĶ', 'ðĻ', 'ðŠ', 'ðŦ', 'ðĐ', 'ð', 'ð', 'âŠïļ', 'ð', 'ð', 'ð', 'âĐ', 'ðū', 'ð', 'ð', 'ð
', 'ð', 'ð ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðĻ']
const OBJECTS_EMOJIS = ['ð', 'ð', 'ð', 'âïļ', 'ðą', 'ðē', 'ðŧ', 'âĻïļ', 'ðĨ', 'ðĻ', 'ðą', 'ðē', 'ðđ', 'ð', 'ð―', 'ðū', 'ðŋ', 'ð', 'ðž', 'ð·', 'ðļ', 'ðđ', 'ðĨ', 'ð―', 'ð', 'ð', 'âïļ', 'ð', 'ð ', 'ðš', 'ðŧ', 'ð', 'ð', 'ð', 'âą', 'âē', 'â°', 'ð°', 'âïļ', 'âģ', 'ðĄ', 'ð', 'ð', 'ðĄ', 'ðĶ', 'ðŊ', 'ð', 'ðĒ', 'ðļ', 'ðĩ', 'ðī', 'ðķ', 'ð·', 'ð°', 'ðģ', 'ð', 'âïļ', 'ð§', 'ðĻ', 'â', 'â', 'âïļ', 'ðĢ', 'ðŠ', 'ðĄ', 'âïļ', 'ðĄ', 'ðŽ', 'â°ïļ', 'âąïļ', 'ðš', 'ðŪ', 'ðŋ', 'ð', 'âïļ', 'ð', 'ðŽ', 'ðģ', 'ð', 'ð', 'ðĄ', 'ð―', 'ð°', 'ðŋ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðŠ', 'ð', 'ð', 'ðž', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðŪ', 'ð', 'âïļ', 'ðŠ', 'ðŪ', 'ðŊ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð
', 'ð', 'ð', 'ðģ', 'ð', 'ð', 'ð', 'ð°', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'âïļ', 'ð', 'ð']
const SYMBOLS_FLAGS_EMOJIS = ['âĪïļ', 'ð', 'ð', 'ð', 'ð', 'ðĪ', 'ð', 'âĢïļ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'âŪïļ', 'âïļ', 'âŠïļ', 'ð', 'âļïļ', 'âĄïļ', 'ðŊ', 'ð', 'âŊïļ', 'âĶïļ', 'ð', 'â', 'âïļ', 'âïļ', 'âïļ', 'âïļ', 'âïļ', 'âïļ', 'âïļ', 'âïļ', 'âïļ', 'âïļ', 'âïļ', 'âïļ', 'ð', 'âïļ', 'ð', 'âĒïļ', 'âĢïļ', 'ðī', 'ðģ', 'ðķ', 'ð', 'ðļ', 'ðš', 'ð·', 'âīïļ', 'ð', 'ðŪ', 'ð', 'ãïļ', 'ãïļ', 'ðī', 'ðĩ', 'ðđ', 'ðē', 'â', 'âïļ', 'ð', 'âïļ', 'ð', 'ðŦ', 'ðŊ', 'ðĒ', 'âĻïļ', 'ð·', 'ðŊ', 'ðģ', 'ðą', 'ð', 'ðĩ', 'ð', 'â', 'â', 'âžïļ', 'âïļ', 'ð
', 'ð', 'ã―ïļ', 'â ïļ', 'ðļ', 'ðą', 'âïļ', 'ð°', 'âŧïļ', 'â
', 'ðŊ', 'ðđ', 'âïļ', 'âģïļ', 'â', 'ð', 'ð ', 'âïļ', 'ð', 'ðĪ', 'ðš', 'ðž', 'ðĩ', 'ðķ', 'â', 'â', 'â', 'âïļ', 'ðē', 'ðą', 'âĒïļ', 'ÂĐïļ', 'ÂŪïļ', 'ã°ïļ', 'â°', 'âŋ', 'ð', 'ð', 'ð', 'ð', 'âïļ', 'âïļ', 'ð', 'ð', 'ð', 'ð', 'ð', 'ð', 'ðĢ', 'ðĒ', 'ðĻ', 'ðŽ', 'ð', 'ðŊ', 'â ïļ', 'âĢïļ', 'âĨïļ', 'âĶïļ', 'ð', 'ðī', 'ð']
export default class extends Component {
constructor (props) {
super(props)
this.state = {
emojis: PEOPLE_EMOJIS,
emojiCategory: 'PEOPLE_EMOJIS'
}
}
static get propTypes () {
return {
onEmojiSelected: PropTypes.func.isRequired,
visible: PropTypes.bool,
modal: PropTypes.bool
}
}
static get defaultProps () {
return {
visible: true,
modal: false
}
}
toggleEmojis (emoji) {
switch (emoji) {
case 'PEOPLE_EMOJIS':
this.setState({emojis: PEOPLE_EMOJIS, emojiCategory: 'PEOPLE_EMOJIS'})
break;
case 'ANIMALS_NATURE_EMOJIS':
this.setState({emojis: ANIMALS_NATURE_EMOJIS, emojiCategory: 'ANIMALS_NATURE_EMOJIS'})
break;
case 'FOOD_SPORTS_EMOJIS':
this.setState({emojis: FOOD_SPORTS_EMOJIS, emojiCategory: 'FOOD_SPORTS_EMOJIS'})
break;
case 'TRAVEL_PLACES_EMOJIS':
this.setState({emojis: TRAVEL_PLACES_EMOJIS, emojiCategory: 'TRAVEL_PLACES_EMOJIS'})
break;
case 'OBJECTS_EMOJIS':
this.setState({emojis: OBJECTS_EMOJIS, emojiCategory: 'OBJECTS_EMOJIS'})
break;
case 'SYMBOLS_FLAGS_EMOJIS':
this.setState({emojis: SYMBOLS_FLAGS_EMOJIS, emojiCategory: 'SYMBOLS_FLAGS_EMOJIS'})
break;
default:
this.setState({emojis: PEOPLE_EMOJIS, emojiCategory: 'PEOPLE_EMOJIS'})
}
}
onEmojiSelect (e) {
if(e.target.alt === undefined) { return }
let emoji = {
image: e.target,
unicode: e.target.alt,
shortname: e.target.title
}
this.props.onEmojiSelected(emoji)
}
renderTabs () {
const {emojiCategory} = this.state
return (
<Tabs>
<Title
selected={emojiCategory === 'PEOPLE_EMOJIS'}
onClick={() => {this.toggleEmojis('PEOPLE_EMOJIS')}}
dangerouslySetInnerHTML={{__html: emojione.unicodeToImage('ð')}} />
<Title
selected={emojiCategory === 'ANIMALS_NATURE_EMOJIS'}
onClick={() => {this.toggleEmojis('ANIMALS_NATURE_EMOJIS')}}
dangerouslySetInnerHTML={{__html: emojione.unicodeToImage('ðĶ')}} />
<Title
selected={emojiCategory === 'FOOD_SPORTS_EMOJIS'}
onClick={() => {this.toggleEmojis('FOOD_SPORTS_EMOJIS')}}
dangerouslySetInnerHTML={{__html: emojione.unicodeToImage('ð')}} />
<Title
selected={emojiCategory === 'TRAVEL_PLACES_EMOJIS'}
onClick={() => {this.toggleEmojis('TRAVEL_PLACES_EMOJIS')}}
dangerouslySetInnerHTML={{__html: emojione.unicodeToImage('ð')}} />
<Title
selected={emojiCategory === 'OBJECTS_EMOJIS'}
onClick={() => {this.toggleEmojis('OBJECTS_EMOJIS')}}
dangerouslySetInnerHTML={{__html: emojione.unicodeToImage('ð')}} />
<Title
selected={emojiCategory === 'SYMBOLS_FLAGS_EMOJIS'}
onClick={() => {this.toggleEmojis('SYMBOLS_FLAGS_EMOJIS')}}
dangerouslySetInnerHTML={{__html: emojione.unicodeToImage('âĪïļ')}} />
</Tabs>
)
}
render() {
const {emojis} = this.state
const {visible, modal} = this.props
return (
<Wrapper>
<EmojiPickerWrapper visible={visible} modal={modal}>
{this.renderTabs()}
<EmojiWrapper>
{
emojis.map((emoji, index) => (
<Emoji
className='ld-emoji'
key={index}
role='presentation'
onClick={this.onEmojiSelect.bind(this)}
dangerouslySetInnerHTML={{__html: emojione.unicodeToImage(emoji)}} />
))
}
</EmojiWrapper>
</EmojiPickerWrapper>
</Wrapper>
)
}
}
const Wrapper = styled.div`
position: relative;
`
const EmojiPickerWrapper = styled.div`
position: ${props => props.modal ? 'absolute' : 'static'};
opacity: ${props => props.visible ? 1 : 0};
transition: opacity 300ms linear;
margin-top: 1rem;
border: 1px solid #F1F1F1;
border-radius: 2px;
background: white;
box-shadow: 3px 3px 5px #BFBDBD;
width: 340px;
height: 350px;
overflow-y: scroll;
z-index: 100;
`
const EmojiPicker = styled.div`
cursor: pointer;
border: 1px solid #eee;
padding: 0.4rem 0.8rem;
margin: 0;
border-radius: 2px;
&:hover {
background: rgba(0, 0, 0, 0.1);
}
`
const EmojiWrapper = styled.div`
display: flex;
flex-wrap: wrap;
padding: 0.8rem;
padding-right: 0;
border-radius: 2px;
align-items: baseline;
float: left;
width: 75%;
`
const Emoji = styled.span`
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 0.21rem;
img {
height: 16px !important;
width: 16px !important;
}
`
const Tabs = styled.div`
flex-direction: column;
float: left;
width: 15%;
height: 100%;
border-right: 1px solid rgba(0, 0, 0, 0.1);
`
const Title = styled.p`
padding-left: 0.35rem;
padding: 0.8rem
margin: 0;
cursor: pointer;
img {
opacity: ${props => props.selected ? '1' : '0.5'};
height: 24px !important;
width: 24px !important;
}
`