Functional Emoji component

src/components/emoji.js

@@ -6,102 +6,90 @@ import { getData, getSanitizedData, unifiedToNative } from '../utils'
 
 const SHEET_COLUMNS = 49
 
-export default class Emoji extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.hasSkinVariations = !!this.getData().skin_variations
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.hasSkinVariations && nextProps.skin != this.props.skin ||
-      nextProps.size != this.props.size ||
-      nextProps.native != this.props.native ||
-      nextProps.set != this.props.set ||
-      nextProps.emoji != this.props.emoji
-    )
-  }
-
-  getPosition() {
-    var { sheet_x, sheet_y } = this.getData(),
+const _getPosition = (props) => {
+  var { sheet_x, sheet_y } = _getData(props),
       multiply = 100 / (SHEET_COLUMNS - 1)
 
   return `${multiply * sheet_x}% ${multiply * sheet_y}%`
-  }
+}
 
-  getData() {
-    var { emoji, skin, set } = this.props
+const _getData = (props) => {
+  var { emoji, skin, set } = props
   return getData(emoji, skin, set)
-  }
+}
 
-  getSanitizedData() {
-    var { emoji, skin, set } = this.props
+const _getSanitizedData = (props) => {
+  var { emoji, skin, set } = props
   return getSanitizedData(emoji, skin, set)
-  }
+}
 
-  handleClick(e) {
-    if (!this.props.onClick) { return }
-    var { onClick } = this.props,
-        emoji = this.getSanitizedData()
+const _handleClick = (e, props) => {
+  if (!props.onClick) { return }
+  var { onClick } = props,
+      emoji = _getSanitizedData(props)
 
   onClick(emoji, e)
-  }
+}
 
-  handleOver(e) {
-    if (!this.props.onOver) { return }
-    var { onOver } = this.props,
-        emoji = this.getSanitizedData()
+const _handleOver = (e, props) => {
+  if (!props.onOver) { return }
+  var { onOver } = props,
+      emoji = _getSanitizedData(props)
 
   onOver(emoji, e)
-  }
+}
 
-  handleLeave(e) {
-    if (!this.props.onLeave) { return }
-    var { onLeave } = this.props,
-        emoji = this.getSanitizedData()
+const _handleLeave = (e, props) => {
+  if (!props.onLeave) { return }
+  var { onLeave } = props,
+      emoji = _getSanitizedData(props)
 
   onLeave(emoji, e)
+}
+
+const Emoji = (props) => {
+  for (let k in Emoji.defaultProps) {
+    if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
+      props[k] = Emoji.defaultProps[k]
+    }
   }
 
-  render() {
-    var { set, size, sheetSize, native, forceSize, onOver, onLeave, backgroundImageFn } = this.props,
-        { unified } = this.getData(),
+  var { unified } = _getData(props),
       style = {},
-        children = this.props.children
+      children = props.children
 
   if (!unified) {
     return null
   }
 
-    if (native && unified) {
-      style = { fontSize: size }
+  if (props.native && unified) {
+    style = { fontSize: props.size }
     children = unifiedToNative(unified)
 
-      if (forceSize) {
+    if (props.forceSize) {
       style.display = 'inline-block'
-        style.width = size
-        style.height = size
+      style.width = props.size
+      style.height = props.size
     }
   } else {
     style = {
-        width: size,
-        height: size,
+      width: props.size,
+      height: props.size,
       display: 'inline-block',
-        backgroundImage: `url(${backgroundImageFn(set, sheetSize)})`,
+      backgroundImage: `url(${props.backgroundImageFn(props.set, props.sheetSize)})`,
       backgroundSize: `${100 * SHEET_COLUMNS}%`,
-        backgroundPosition: this.getPosition(),
+      backgroundPosition: _getPosition(props),
     }
   }
 
   return <span
-      onClick={this.handleClick.bind(this)}
-      onMouseEnter={this.handleOver.bind(this)}
-      onMouseLeave={this.handleLeave.bind(this)}
+    key={props.emoji.id || props.emoji}
+    onClick={(e) => _handleClick(e, props)}
+    onMouseEnter={(e) => _handleOver(e, props)}
+    onMouseLeave={(e) => _handleLeave(e, props)}
     className='emoji-mart-emoji'>
     <span style={style}>{children}</span>
   </span>
-  }
 }
 
 Emoji.propTypes = {
@@ -132,3 +120,5 @@ Emoji.defaultProps = {
   onLeave: (() => {}),
   onClick: (() => {}),
 }
+
+export default Emoji