@randy.tarampi/jsx/esm/lib/components/emoji.js

Some common JSX components for www.randytarampi.ca

import PropTypes from "prop-types";
import React, { Fragment, PureComponent } from "react";
export class Emoji extends PureComponent {
  constructor(props, context, updater) {
    super(props, context, updater);

    if (this.props.instantiateEmoji) {
      this.props.instantiateEmoji(props.emoji);
    }
  }

  componentWillUnmount() {
    if (!this.props.persistentEmoji) {
      if (this.props.clearEmoji) {
        this.props.clearEmoji(this.props.emoji);
      }
    }
  }

  render() {
    var emoji = this.props.emoji;
    var emojiString = emoji.toString();
    var TextEffectWrapper = this.props.textEffect ? props => /*#__PURE__*/React.createElement("span", {
      className: "text"
    }, props.children) : Fragment;
    return /*#__PURE__*/React.createElement("div", {
      id: this.props.htmlId || emoji.id,
      className: [emoji.type, "".concat(emoji.type, "--").concat(emojiString)].join(" ")
    }, /*#__PURE__*/React.createElement(TextEffectWrapper, null, emoji.components.map(component => /*#__PURE__*/React.createElement("span", {
      key: component.id,
      "data-metrics-event-name": "emoji-component",
      "data-metrics-type": "onClick",
      "data-metrics-name": "".concat(emoji.id, "__").concat(component.id),
      "data-metrics-label": component.character,
      "data-metrics-value": this.props.onComponentClick && this.props.onComponentClick.name,
      className: ["".concat(emoji.id, "__").concat(component.id), "".concat(emoji.type, "__").concat(component.id), "".concat(emoji.type, "__").concat(component.id, "--").concat(emojiString)].join(" "),
      onClick: event => this.props.onComponentClick && this.props.onComponentClick(component.id, event)
    }, component.character))), this.props.children ? /*#__PURE__*/React.createElement("div", {
      className: ["".concat(emoji.type, "__children"), "".concat(emoji.type, "__children--").concat(emojiString)].join(" ")
    }, this.props.children) : null);
  }

}
Emoji.propTypes = {
  htmlId: PropTypes.string,
  id: PropTypes.string,
  emoji: PropTypes.object.isRequired,
  persistentEmoji: PropTypes.bool,
  instantiateEmoji: PropTypes.func,
  clearEmoji: PropTypes.func,
  onComponentClick: PropTypes.func,
  textEffect: PropTypes.bool
};
Emoji.defaultProps = {
  persistentEmoji: true,
  textEffect: false
};
export default Emoji;