Revert Emoji back to a functional component

src/components/category.js

@@ -146,20 +146,20 @@ export default class Category extends React.Component {
       </div>
 
       {emojis && emojis.map((emoji) =>
-        <Emoji emoji={emoji} {...emojiProps} />
+        Emoji({ emoji: emoji, ...emojiProps })
       )}
 
       {emojis && !emojis.length &&
         <div>
           <div>
-            <Emoji
+            {Emoji({
-              {...emojiProps}
+              ...emojiProps,
-              size={38}
+              size: 38,
-              emoji='sleuth_or_spy'
+              emoji: 'sleuth_or_spy',
-              onOver={null}
+              onOver: null,
-              onLeave={null}
+              onLeave: null,
-              onClick={null}
+              onClick: null,
-            />
+            })}
           </div>
 
           <div className='emoji-mart-no-results-label'>

src/components/emoji.js

@@ -23,45 +23,36 @@ const _getSanitizedData = (props) => {
   return getSanitizedData(emoji, skin, set)
 }
 
-export default class Emoji extends React.PureComponent {
+const _handleClick = (e, props) => {
-
+  if (!props.onClick) { return }
-  constructor (props) {
+  var { onClick } = props,
-    super(props)
+      emoji = _getSanitizedData(props)
-
-    this.handleClick = this.handleClick.bind(this)
-    this.handleEnter = this.handleEnter.bind(this)
-    this.handleLeave = this.handleLeave.bind(this)
-  }
-
-  handleClick (e) {
-    if (!this.props.onClick) { return }
-
-    const { onClick } = this.props,
-        emoji = _getSanitizedData(this.props)
 
   onClick(emoji, e)
-  }
+}
 
-  handleEnter (e) {
+const _handleOver = (e, props) => {
-    if (!this.props.onOver) { return }
+  if (!props.onOver) { return }
-
+  var { onOver } = props,
-    const { onOver } = this.props,
+      emoji = _getSanitizedData(props)
-        emoji = _getSanitizedData(this.props)
 
   onOver(emoji, e)
-  }
+}
 
-  handleLeave (e) {
+const _handleLeave = (e, props) => {
-    if (!this.props.onLeave) { return }
+  if (!props.onLeave) { return }
-
+  var { onLeave } = props,
-    const { onLeave } = this.props,
+      emoji = _getSanitizedData(props)
-        emoji = _getSanitizedData(this.props)
 
   onLeave(emoji, e)
-  }
+}
 
-  render () {
+const Emoji = (props) => {
-    var props = this.props;
+  for (let k in Emoji.defaultProps) {
+    if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
+      props[k] = Emoji.defaultProps[k]
+    }
+  }
 
   var { unified, custom, imageUrl } = _getData(props),
       style = {},
@@ -107,14 +98,12 @@ export default class Emoji extends React.PureComponent {
 
   return <span
     key={props.emoji.id || props.emoji}
-      onClick={this.handleClick}
+    onClick={(e) => _handleClick(e, props)}
-      onMouseEnter={this.handleEnter}
+    onMouseEnter={(e) => _handleOver(e, props)}
-      onMouseLeave={this.handleLeave}
+    onMouseLeave={(e) => _handleLeave(e, props)}
     className='emoji-mart-emoji'>
     <span style={style}>{children}</span>
   </span>
-  }
-
 }
 
 Emoji.propTypes = {
@@ -145,3 +134,5 @@ Emoji.defaultProps = {
   onLeave: (() => {}),
   onClick: (() => {}),
 }
+
+export default Emoji

src/components/preview.js

@@ -31,7 +31,7 @@ export default class Preview extends React.PureComponent {
 
       return <div className='emoji-mart-preview'>
         <div className='emoji-mart-preview-emoji'>
-          <Emoji key={emoji.id} emoji={emoji} {...emojiProps} />
+          {Emoji({ key: emoji.id, emoji: emoji, ...emojiProps })}
         </div>
 
         <div className='emoji-mart-preview-data'>
@@ -51,7 +51,7 @@ export default class Preview extends React.PureComponent {
     } else {
       return <div className='emoji-mart-preview'>
         <div className='emoji-mart-preview-emoji'>
-          {idleEmoji && idleEmoji.length && <Emoji emoji={idleEmoji} {...emojiProps} />}
+          {idleEmoji && idleEmoji.length && Emoji({ emoji: idleEmoji, ...emojiProps })}
         </div>
 
         <div className='emoji-mart-preview-data'>