All files / src/components Emoji.js

100% Statements 14/14
100% Branches 29/29
100% Functions 1/1
100% Lines 14/14
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66                              10x 1x         9x       2x           7x 1x 6x 1x     7x 7x 7x 7x           7x                         3x            
/**
 * @copyright   2016, Miles Johnson
 * @license     https://opensource.org/licenses/MIT
 * @flow
 */
 
import React, { PropTypes } from 'react';
import emojiData, { UNICODE_TO_SHORTNAME, SHORTNAME_TO_UNICODE } from '../data/emoji';
 
import type { EmojiProps } from '../types';
 
// http://git.emojione.com/demos/latest/sprites-png.html
// http://git.emojione.com/demos/latest/sprites-svg.html
// https://css-tricks.com/using-svg/
export default function Emoji({ shortName, unicode, emojiPath, enlargeEmoji = false }: EmojiProps) {
  if (!shortName && !unicode) {
    throw new Error('Emoji component requires a `unicode` character or a `shortName`.');
  }
 
  // Return the invalid value instead of throwing errors,
  // as this will avoid unnecessary noise in production.
  if (
    (unicode && !UNICODE_TO_SHORTNAME[unicode]) ||
    (shortName && !SHORTNAME_TO_UNICODE[shortName])
  ) {
    return (
      <span>{unicode || shortName}</span>
    );
  }
 
  // Retrieve any missing values
  if (!shortName && unicode) {
    shortName = UNICODE_TO_SHORTNAME[unicode];
  } else if (!unicode && shortName) {
    unicode = SHORTNAME_TO_UNICODE[shortName];
  }
 
  const emoji = emojiData[shortName];
  const path = emojiPath || '{{hexcode}}';
  const ext = emojiPath ? emojiPath.substr(-3).toLowerCase() : '';
  const className = [
    'interweave__emoji',
    ext && `interweave__emoji--${ext}`,
    enlargeEmoji && 'interweave__emoji--large',
  ].filter(Boolean).join(' ');
 
  return (
    <span
      className={className}
      data-unicode={unicode}
      data-hexcode={emoji.hexCode}
      data-codepoint={emoji.codePoint.join('-')}
      data-shortname={shortName}
    >
      <img src={path.replace('{{hexcode}}', emoji.hexCode)} alt={shortName} />
    </span>
  );
}
 
Emoji.propTypes = {
  shortName: PropTypes.string,
  unicode: PropTypes.string,
  emojiPath: PropTypes.string,
  enlargeEmoji: PropTypes.bool,
};