2016-05-31 14:36:52 +00:00
|
|
|
import React from 'react'
|
2017-05-05 01:38:03 +00:00
|
|
|
import PropTypes from 'prop-types'
|
2017-09-28 23:24:17 +00:00
|
|
|
import data from '../data'
|
2016-05-31 14:36:52 +00:00
|
|
|
|
2016-11-01 15:54:25 +00:00
|
|
|
import { getData, getSanitizedData, unifiedToNative } from '../utils'
|
2016-07-19 16:27:24 +00:00
|
|
|
|
2017-12-15 20:12:50 +00:00
|
|
|
const SHEET_COLUMNS = 52
|
2016-05-31 14:36:52 +00:00
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
const _getPosition = props => {
|
2017-04-23 15:46:00 +00:00
|
|
|
var { sheet_x, sheet_y } = _getData(props),
|
2017-10-07 04:02:02 +00:00
|
|
|
multiply = 100 / (SHEET_COLUMNS - 1)
|
2016-05-31 23:36:50 +00:00
|
|
|
|
2017-04-23 15:46:00 +00:00
|
|
|
return `${multiply * sheet_x}% ${multiply * sheet_y}%`
|
|
|
|
}
|
2016-05-31 23:36:50 +00:00
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
const _getData = props => {
|
2017-04-23 15:46:00 +00:00
|
|
|
var { emoji, skin, set } = props
|
|
|
|
return getData(emoji, skin, set)
|
|
|
|
}
|
2016-05-31 14:36:52 +00:00
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
const _getSanitizedData = props => {
|
2017-04-23 15:46:00 +00:00
|
|
|
var { emoji, skin, set } = props
|
|
|
|
return getSanitizedData(emoji, skin, set)
|
|
|
|
}
|
2016-05-31 23:36:50 +00:00
|
|
|
|
2017-04-23 15:46:00 +00:00
|
|
|
const _handleClick = (e, props) => {
|
2017-10-07 04:02:02 +00:00
|
|
|
if (!props.onClick) {
|
|
|
|
return
|
|
|
|
}
|
2017-04-23 15:46:00 +00:00
|
|
|
var { onClick } = props,
|
2017-10-07 04:02:02 +00:00
|
|
|
emoji = _getSanitizedData(props)
|
2016-06-01 00:29:37 +00:00
|
|
|
|
2017-04-23 15:46:00 +00:00
|
|
|
onClick(emoji, e)
|
|
|
|
}
|
2016-05-31 23:36:50 +00:00
|
|
|
|
2017-04-23 15:46:00 +00:00
|
|
|
const _handleOver = (e, props) => {
|
2017-10-07 04:02:02 +00:00
|
|
|
if (!props.onOver) {
|
|
|
|
return
|
|
|
|
}
|
2017-04-23 15:46:00 +00:00
|
|
|
var { onOver } = props,
|
2017-10-07 04:02:02 +00:00
|
|
|
emoji = _getSanitizedData(props)
|
2016-05-31 23:35:46 +00:00
|
|
|
|
2017-04-23 15:46:00 +00:00
|
|
|
onOver(emoji, e)
|
|
|
|
}
|
2016-05-31 14:36:52 +00:00
|
|
|
|
2017-04-23 15:46:00 +00:00
|
|
|
const _handleLeave = (e, props) => {
|
2017-10-07 04:02:02 +00:00
|
|
|
if (!props.onLeave) {
|
|
|
|
return
|
|
|
|
}
|
2017-04-23 15:46:00 +00:00
|
|
|
var { onLeave } = props,
|
2017-10-07 04:02:02 +00:00
|
|
|
emoji = _getSanitizedData(props)
|
2016-05-31 14:36:52 +00:00
|
|
|
|
2017-04-23 15:46:00 +00:00
|
|
|
onLeave(emoji, e)
|
|
|
|
}
|
2016-06-01 00:29:37 +00:00
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
const Emoji = props => {
|
2017-04-23 15:46:00 +00:00
|
|
|
for (let k in Emoji.defaultProps) {
|
|
|
|
if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
|
|
|
|
props[k] = Emoji.defaultProps[k]
|
|
|
|
}
|
2016-06-01 00:29:37 +00:00
|
|
|
}
|
|
|
|
|
2017-11-10 01:04:13 +00:00
|
|
|
let data = _getData(props)
|
2017-12-15 20:31:49 +00:00
|
|
|
if (!data) {
|
|
|
|
return null
|
|
|
|
}
|
2017-11-10 01:04:13 +00:00
|
|
|
|
|
|
|
let { unified, custom, short_names, imageUrl } = data,
|
2017-10-07 04:02:02 +00:00
|
|
|
style = {},
|
|
|
|
children = props.children,
|
|
|
|
className = 'emoji-mart-emoji',
|
|
|
|
title = null
|
2016-07-19 16:27:24 +00:00
|
|
|
|
2017-05-27 15:26:59 +00:00
|
|
|
if (!unified && !custom) {
|
2017-04-23 15:46:00 +00:00
|
|
|
return null
|
2016-06-01 00:29:37 +00:00
|
|
|
}
|
|
|
|
|
2017-10-07 03:34:06 +00:00
|
|
|
if (props.tooltip) {
|
|
|
|
title = short_names[0]
|
|
|
|
}
|
|
|
|
|
2017-04-23 15:46:00 +00:00
|
|
|
if (props.native && unified) {
|
2017-09-29 23:26:04 +00:00
|
|
|
className += ' emoji-mart-emoji-native'
|
2017-04-23 15:46:00 +00:00
|
|
|
style = { fontSize: props.size }
|
|
|
|
children = unifiedToNative(unified)
|
2016-10-13 00:26:10 +00:00
|
|
|
|
2017-04-23 15:46:00 +00:00
|
|
|
if (props.forceSize) {
|
|
|
|
style.display = 'inline-block'
|
|
|
|
style.width = props.size
|
|
|
|
style.height = props.size
|
2016-10-13 00:26:10 +00:00
|
|
|
}
|
2017-05-27 15:26:59 +00:00
|
|
|
} else if (custom) {
|
2017-09-29 23:26:04 +00:00
|
|
|
className += ' emoji-mart-emoji-custom'
|
2017-05-27 15:26:59 +00:00
|
|
|
style = {
|
|
|
|
width: props.size,
|
|
|
|
height: props.size,
|
|
|
|
display: 'inline-block',
|
|
|
|
backgroundImage: `url(${imageUrl})`,
|
2017-09-30 15:01:03 +00:00
|
|
|
backgroundSize: 'contain',
|
2017-05-27 15:26:59 +00:00
|
|
|
}
|
2017-04-23 15:46:00 +00:00
|
|
|
} else {
|
2017-05-27 17:52:12 +00:00
|
|
|
let setHasEmoji = _getData(props)[`has_img_${props.set}`]
|
|
|
|
|
|
|
|
if (!setHasEmoji) {
|
2018-01-09 19:19:57 +00:00
|
|
|
if (props.fallback) {
|
|
|
|
style = { fontSize: props.size }
|
|
|
|
children = props.fallback(data)
|
|
|
|
} else {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
style = {
|
|
|
|
width: props.size,
|
|
|
|
height: props.size,
|
|
|
|
display: 'inline-block',
|
|
|
|
backgroundImage: `url(${props.backgroundImageFn(
|
|
|
|
props.set,
|
|
|
|
props.sheetSize
|
|
|
|
)})`,
|
|
|
|
backgroundSize: `${100 * SHEET_COLUMNS}%`,
|
|
|
|
backgroundPosition: _getPosition(props),
|
|
|
|
}
|
2016-11-01 15:54:25 +00:00
|
|
|
}
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|
2017-04-23 15:46:00 +00:00
|
|
|
|
2017-10-07 04:02:02 +00:00
|
|
|
return (
|
|
|
|
<span
|
|
|
|
key={props.emoji.id || props.emoji}
|
|
|
|
onClick={e => _handleClick(e, props)}
|
|
|
|
onMouseEnter={e => _handleOver(e, props)}
|
|
|
|
onMouseLeave={e => _handleLeave(e, props)}
|
|
|
|
title={title}
|
|
|
|
className={className}
|
|
|
|
>
|
|
|
|
<span style={style}>{children}</span>
|
|
|
|
</span>
|
|
|
|
)
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
Emoji.propTypes = {
|
2017-05-05 01:38:03 +00:00
|
|
|
onOver: PropTypes.func,
|
|
|
|
onLeave: PropTypes.func,
|
|
|
|
onClick: PropTypes.func,
|
2018-01-09 19:19:57 +00:00
|
|
|
fallback: PropTypes.func,
|
2017-05-05 01:38:03 +00:00
|
|
|
backgroundImageFn: PropTypes.func,
|
|
|
|
native: PropTypes.bool,
|
|
|
|
forceSize: PropTypes.bool,
|
2017-10-07 03:34:06 +00:00
|
|
|
tooltip: PropTypes.bool,
|
2017-05-05 01:38:03 +00:00
|
|
|
skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
|
|
|
|
sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
|
2017-10-07 04:02:02 +00:00
|
|
|
set: PropTypes.oneOf([
|
|
|
|
'apple',
|
|
|
|
'google',
|
|
|
|
'twitter',
|
|
|
|
'emojione',
|
|
|
|
'messenger',
|
|
|
|
'facebook',
|
|
|
|
]),
|
2017-05-05 01:38:03 +00:00
|
|
|
size: PropTypes.number.isRequired,
|
2017-10-07 04:02:02 +00:00
|
|
|
emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
Emoji.defaultProps = {
|
2016-05-31 23:36:50 +00:00
|
|
|
skin: 1,
|
2016-10-19 01:21:10 +00:00
|
|
|
set: 'apple',
|
2016-10-27 01:31:56 +00:00
|
|
|
sheetSize: 64,
|
2016-11-01 15:54:25 +00:00
|
|
|
native: false,
|
2017-02-17 15:36:50 +00:00
|
|
|
forceSize: false,
|
2017-10-07 03:34:06 +00:00
|
|
|
tooltip: false,
|
2017-10-07 04:02:02 +00:00
|
|
|
backgroundImageFn: (set, sheetSize) =>
|
2017-12-15 20:14:58 +00:00
|
|
|
`https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
|
2017-10-07 04:02:02 +00:00
|
|
|
onOver: () => {},
|
|
|
|
onLeave: () => {},
|
|
|
|
onClick: () => {},
|
2018-01-09 19:19:57 +00:00
|
|
|
fallback: (emoji) => {},
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|
2017-04-23 15:46:00 +00:00
|
|
|
|
|
|
|
export default Emoji
|