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'
|
2016-05-31 14:36:52 +00:00
|
|
|
|
2018-04-26 15:47:30 +00:00
|
|
|
import { getData, getSanitizedData, unifiedToNative } from '../../utils'
|
2018-04-30 00:55:13 +00:00
|
|
|
import { uncompress } from '../../utils/data'
|
2018-12-18 19:24:52 +00:00
|
|
|
import { EmojiPropTypes } from '../../utils/shared-props'
|
|
|
|
import { EmojiDefaultProps } from '../../utils/shared-default-props'
|
2016-07-19 16:27:24 +00:00
|
|
|
|
2018-03-28 21:30:47 +00:00
|
|
|
const _getData = (props) => {
|
|
|
|
var { emoji, skin, set, data } = props
|
|
|
|
return getData(emoji, skin, set, data)
|
|
|
|
}
|
|
|
|
|
2018-03-27 18:51:26 +00:00
|
|
|
const _getPosition = (props) => {
|
2017-04-23 15:46:00 +00:00
|
|
|
var { sheet_x, sheet_y } = _getData(props),
|
2018-08-06 21:31:02 +00:00
|
|
|
multiplyX = 100 / (props.sheetColumns - 1),
|
|
|
|
multiplyY = 100 / (props.sheetRows - 1)
|
2016-05-31 23:36:50 +00:00
|
|
|
|
2018-08-06 21:31:02 +00:00
|
|
|
return `${multiplyX * sheet_x}% ${multiplyY * sheet_y}%`
|
2017-04-23 15:46:00 +00:00
|
|
|
}
|
2016-05-31 23:36:50 +00:00
|
|
|
|
2018-03-27 18:51:26 +00:00
|
|
|
const _getSanitizedData = (props) => {
|
2018-03-28 21:30:47 +00:00
|
|
|
var { emoji, skin, set, data } = props
|
|
|
|
return getSanitizedData(emoji, skin, set, data)
|
2017-04-23 15:46:00 +00:00
|
|
|
}
|
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
|
|
|
|
2018-03-27 18:51:26 +00:00
|
|
|
const _isNumeric = (value) => {
|
2018-01-09 20:14:54 +00:00
|
|
|
return !isNaN(value - parseFloat(value))
|
|
|
|
}
|
|
|
|
|
2018-03-27 18:51:26 +00:00
|
|
|
const _convertStyleToCSS = (style) => {
|
2018-01-09 20:14:54 +00:00
|
|
|
let div = document.createElement('div')
|
|
|
|
|
|
|
|
for (let key in style) {
|
|
|
|
let value = style[key]
|
|
|
|
|
|
|
|
if (_isNumeric(value)) {
|
|
|
|
value += 'px'
|
|
|
|
}
|
|
|
|
|
|
|
|
div.style[key] = value
|
|
|
|
}
|
|
|
|
|
|
|
|
return div.getAttribute('style')
|
|
|
|
}
|
|
|
|
|
2018-03-28 21:30:47 +00:00
|
|
|
const NimbleEmoji = (props) => {
|
2018-04-30 00:55:13 +00:00
|
|
|
if (props.data.compressed) {
|
|
|
|
uncompress(props.data)
|
|
|
|
}
|
|
|
|
|
2018-03-28 21:30:47 +00:00
|
|
|
for (let k in NimbleEmoji.defaultProps) {
|
|
|
|
if (props[k] == undefined && NimbleEmoji.defaultProps[k] != undefined) {
|
|
|
|
props[k] = NimbleEmoji.defaultProps[k]
|
2017-04-23 15:46:00 +00:00
|
|
|
}
|
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) {
|
2018-07-31 18:02:56 +00:00
|
|
|
if (props.fallback) {
|
|
|
|
return props.fallback(null, props)
|
|
|
|
} else {
|
|
|
|
return null
|
|
|
|
}
|
2017-12-15 20:31:49 +00:00
|
|
|
}
|
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) {
|
2018-07-31 18:02:56 +00:00
|
|
|
if (props.fallback) {
|
|
|
|
return props.fallback(data, props)
|
|
|
|
} else {
|
|
|
|
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
|
2019-01-17 15:25:22 +00:00
|
|
|
style.wordBreak = 'keep-all'
|
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',
|
2018-11-30 14:17:45 +00:00
|
|
|
}
|
|
|
|
if (data.spriteUrl) {
|
|
|
|
style = {
|
|
|
|
...style,
|
|
|
|
backgroundImage: `url(${data.spriteUrl})`,
|
|
|
|
backgroundSize: `${100 * props.sheetColumns}% ${100 *
|
|
|
|
props.sheetRows}%`,
|
|
|
|
backgroundPosition: _getPosition(props),
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
style = {
|
|
|
|
...style,
|
|
|
|
backgroundImage: `url(${imageUrl})`,
|
|
|
|
backgroundSize: 'contain',
|
|
|
|
}
|
2017-05-27 15:26:59 +00:00
|
|
|
}
|
2017-04-23 15:46:00 +00:00
|
|
|
} else {
|
2018-04-30 00:55:13 +00:00
|
|
|
let setHasEmoji =
|
|
|
|
data[`has_img_${props.set}`] == undefined || data[`has_img_${props.set}`]
|
2017-05-27 17:52:12 +00:00
|
|
|
|
|
|
|
if (!setHasEmoji) {
|
2018-01-09 19:19:57 +00:00
|
|
|
if (props.fallback) {
|
2018-07-31 18:02:56 +00:00
|
|
|
return props.fallback(data, props)
|
2018-01-09 19:19:57 +00:00
|
|
|
} else {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
style = {
|
|
|
|
width: props.size,
|
|
|
|
height: props.size,
|
|
|
|
display: 'inline-block',
|
|
|
|
backgroundImage: `url(${props.backgroundImageFn(
|
|
|
|
props.set,
|
2018-03-27 18:51:26 +00:00
|
|
|
props.sheetSize,
|
2018-01-09 19:19:57 +00:00
|
|
|
)})`,
|
2018-11-30 14:17:45 +00:00
|
|
|
backgroundSize: `${100 * props.sheetColumns}% ${100 *
|
|
|
|
props.sheetRows}%`,
|
2018-01-09 19:19:57 +00:00
|
|
|
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
|
|
|
|
2018-01-09 20:14:54 +00:00
|
|
|
if (props.html) {
|
|
|
|
style = _convertStyleToCSS(style)
|
2018-03-27 18:51:26 +00:00
|
|
|
return `<span style='${style}' ${
|
|
|
|
title ? `title='${title}'` : ''
|
|
|
|
} class='${className}'>${children || ''}</span>`
|
2018-01-09 20:14:54 +00:00
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<span
|
|
|
|
key={props.emoji.id || props.emoji}
|
2018-03-27 18:51:26 +00:00
|
|
|
onClick={(e) => _handleClick(e, props)}
|
|
|
|
onMouseEnter={(e) => _handleOver(e, props)}
|
|
|
|
onMouseLeave={(e) => _handleLeave(e, props)}
|
2018-01-09 20:14:54 +00:00
|
|
|
title={title}
|
|
|
|
className={className}
|
|
|
|
>
|
|
|
|
<span style={style}>{children}</span>
|
|
|
|
</span>
|
|
|
|
)
|
|
|
|
}
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|
|
|
|
|
2018-12-18 19:24:52 +00:00
|
|
|
NimbleEmoji.propTypes /* remove-proptypes */ = {
|
|
|
|
...EmojiPropTypes,
|
|
|
|
data: PropTypes.object.isRequired,
|
|
|
|
}
|
2018-03-28 21:30:47 +00:00
|
|
|
NimbleEmoji.defaultProps = EmojiDefaultProps
|
2017-04-23 15:46:00 +00:00
|
|
|
|
2018-03-28 21:30:47 +00:00
|
|
|
export default NimbleEmoji
|