emoji-mart/dist-modern/components/skins-emoji.js

Customizable Slack-like emoji picker for React

import React from 'react';
import PropTypes from 'prop-types';
import NimbleEmoji from './emoji/nimble-emoji';
import Skins from './skins';
export default class SkinsEmoji extends Skins {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    const {
      skin,
      emojiProps,
      data,
      skinEmoji,
      i18n
    } = this.props;
    const {
      opened
    } = this.state;
    const skinToneNodes = [];

    for (let skinTone = 1; skinTone <= 6; skinTone++) {
      const selected = skinTone === skin;
      skinToneNodes.push(React.createElement("span", {
        key: `skin-tone-${skinTone}`,
        className: `emoji-mart-skin-swatch custom${selected ? ' selected' : ''}`
      }, React.createElement("span", {
        onClick: this.handleClick,
        "data-skin": skinTone,
        className: `emoji-mart-skin-tone-${skinTone}`
      }, NimbleEmoji({
        emoji: skinEmoji,
        data: data,
        skin: skinTone,
        backgroundImageFn: emojiProps.backgroundImageFn,
        native: emojiProps.native,
        set: emojiProps.set,
        sheetSize: emojiProps.sheetSize,
        size: 23
      }))));
    }

    return React.createElement("div", {
      className: `emoji-mart-skin-swatches custom${opened ? ' opened' : ''}`
    }, React.createElement("div", {
      className: `emoji-mart-skin-text${opened ? ' opened' : ''}`
    }, i18n.skintext), skinToneNodes);
  }

}
SkinsEmoji.propTypes
/* remove-proptypes */
= {
  onChange: PropTypes.func,
  skin: PropTypes.number.isRequired,
  emojiProps: PropTypes.object.isRequired,
  skinTone: PropTypes.number,
  skinEmoji: PropTypes.string.isRequired,
  i18n: PropTypes.object
};
SkinsEmoji.defaultProps = {
  onChange: () => {},
  skinTone: null
};