build

dist-es/components/anchors.js

@@ -0,0 +1,108 @@
+import _Object$getPrototypeOf from '../polyfills/objectGetPrototypeOf';
+import _classCallCheck from '../polyfills/classCallCheck';
+import _createClass from '../polyfills/createClass';
+import _possibleConstructorReturn from '../polyfills/possibleConstructorReturn';
+import _inherits from '../polyfills/inherits';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+var Anchors = function (_React$PureComponent) {
+  _inherits(Anchors, _React$PureComponent);
+
+  function Anchors(props) {
+    _classCallCheck(this, Anchors);
+
+    var _this = _possibleConstructorReturn(this, (Anchors.__proto__ || _Object$getPrototypeOf(Anchors)).call(this, props));
+
+    var defaultCategory = props.categories.filter(function (category) {
+      return category.first;
+    })[0];
+
+    _this.state = {
+      selected: defaultCategory.name
+    };
+
+    _this.handleClick = _this.handleClick.bind(_this);
+    return _this;
+  }
+
+  _createClass(Anchors, [{
+    key: 'handleClick',
+    value: function handleClick(e) {
+      var index = e.currentTarget.getAttribute('data-index');
+      var _props = this.props;
+      var categories = _props.categories;
+      var onAnchorClick = _props.onAnchorClick;
+
+
+      onAnchorClick(categories[index], index);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props2 = this.props;
+      var categories = _props2.categories;
+      var color = _props2.color;
+      var i18n = _props2.i18n;
+      var icons = _props2.icons;
+      var selected = this.state.selected;
+
+
+      return React.createElement(
+        'nav',
+        { className: 'emoji-mart-anchors', 'aria-label': i18n.categorieslabel },
+        categories.map(function (category, i) {
+          var id = category.id;
+          var name = category.name;
+          var anchor = category.anchor;
+          var isSelected = name == selected;
+
+          if (anchor === false) {
+            return null;
+          }
+
+          return React.createElement(
+            'button',
+            {
+              key: id,
+              'aria-label': i18n.categories[id],
+              title: i18n.categories[id],
+              'data-index': i,
+              onClick: _this2.handleClick,
+              className: 'emoji-mart-anchor ' + (isSelected ? 'emoji-mart-anchor-selected' : ''),
+              style: { color: isSelected ? color : null }
+            },
+            React.createElement(
+              'div',
+              { className: 'emoji-mart-anchor-icon' },
+              icons.categories[id]()
+            ),
+            React.createElement('span', {
+              className: 'emoji-mart-anchor-bar',
+              style: { backgroundColor: color }
+            })
+          );
+        })
+      );
+    }
+  }]);
+
+  return Anchors;
+}(React.PureComponent);
+
+export default Anchors;
+
+
+Anchors.propTypes /* remove-proptypes */ = {
+  categories: PropTypes.array,
+  onAnchorClick: PropTypes.func,
+  icons: PropTypes.object
+};
+
+Anchors.defaultProps = {
+  categories: [],
+  onAnchorClick: function onAnchorClick() {},
+  icons: {}
+};

dist-es/components/category.js

@@ -0,0 +1,275 @@
+import _extends from '../polyfills/extends';
+import _Object$getPrototypeOf from '../polyfills/objectGetPrototypeOf';
+import _classCallCheck from '../polyfills/classCallCheck';
+import _createClass from '../polyfills/createClass';
+import _possibleConstructorReturn from '../polyfills/possibleConstructorReturn';
+import _inherits from '../polyfills/inherits';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import frequently from '../utils/frequently';
+import { getData } from '../utils';
+import NimbleEmoji from './emoji/nimble-emoji';
+import NotFound from './not-found';
+
+var Category = function (_React$Component) {
+  _inherits(Category, _React$Component);
+
+  function Category(props) {
+    _classCallCheck(this, Category);
+
+    var _this = _possibleConstructorReturn(this, (Category.__proto__ || _Object$getPrototypeOf(Category)).call(this, props));
+
+    _this.data = props.data;
+    _this.setContainerRef = _this.setContainerRef.bind(_this);
+    _this.setLabelRef = _this.setLabelRef.bind(_this);
+    return _this;
+  }
+
+  _createClass(Category, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.margin = 0;
+      this.minMargin = 0;
+
+      this.memoizeSize();
+    }
+  }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var _props = this.props;
+      var name = _props.name;
+      var perLine = _props.perLine;
+      var native = _props.native;
+      var hasStickyPosition = _props.hasStickyPosition;
+      var emojis = _props.emojis;
+      var emojiProps = _props.emojiProps;
+      var skin = emojiProps.skin;
+      var size = emojiProps.size;
+      var set = emojiProps.set;
+      var nextPerLine = nextProps.perLine;
+      var nextNative = nextProps.native;
+      var nextHasStickyPosition = nextProps.hasStickyPosition;
+      var nextEmojis = nextProps.emojis;
+      var nextEmojiProps = nextProps.emojiProps;
+      var nextSkin = nextEmojiProps.skin;
+      var nextSize = nextEmojiProps.size;
+      var nextSet = nextEmojiProps.set;
+      var shouldUpdate = false;
+
+      if (name == 'Recent' && perLine != nextPerLine) {
+        shouldUpdate = true;
+      }
+
+      if (name == 'Search') {
+        shouldUpdate = !(emojis == nextEmojis);
+      }
+
+      if (skin != nextSkin || size != nextSize || native != nextNative || set != nextSet || hasStickyPosition != nextHasStickyPosition) {
+        shouldUpdate = true;
+      }
+
+      return shouldUpdate;
+    }
+  }, {
+    key: 'memoizeSize',
+    value: function memoizeSize() {
+      var parent = this.container.parentElement;
+
+      var _container$getBoundin = this.container.getBoundingClientRect();
+
+      var top = _container$getBoundin.top;
+      var height = _container$getBoundin.height;
+
+      var _parent$getBoundingCl = parent.getBoundingClientRect();
+
+      var parentTop = _parent$getBoundingCl.top;
+
+      var _label$getBoundingCli = this.label.getBoundingClientRect();
+
+      var labelHeight = _label$getBoundingCli.height;
+
+
+      this.top = top - parentTop + parent.scrollTop;
+
+      if (height == 0) {
+        this.maxMargin = 0;
+      } else {
+        this.maxMargin = height - labelHeight;
+      }
+    }
+  }, {
+    key: 'handleScroll',
+    value: function handleScroll(scrollTop) {
+      var margin = scrollTop - this.top;
+      margin = margin < this.minMargin ? this.minMargin : margin;
+      margin = margin > this.maxMargin ? this.maxMargin : margin;
+
+      if (margin == this.margin) return;
+
+      if (!this.props.hasStickyPosition) {
+        this.label.style.top = margin + 'px';
+      }
+
+      this.margin = margin;
+      return true;
+    }
+  }, {
+    key: 'getEmojis',
+    value: function getEmojis() {
+      var _this2 = this;
+
+      var _props2 = this.props;
+      var name = _props2.name;
+      var emojis = _props2.emojis;
+      var recent = _props2.recent;
+      var perLine = _props2.perLine;
+
+
+      if (name == 'Recent') {
+        var custom = this.props.custom;
+
+        var frequentlyUsed = recent || frequently.get(perLine);
+
+        if (frequentlyUsed.length) {
+          emojis = frequentlyUsed.map(function (id) {
+            var emoji = custom.filter(function (e) {
+              return e.id === id;
+            })[0];
+            if (emoji) {
+              return emoji;
+            }
+
+            return id;
+          }).filter(function (id) {
+            return !!getData(id, null, null, _this2.data);
+          });
+        }
+
+        if (emojis.length === 0 && frequentlyUsed.length > 0) {
+          return null;
+        }
+      }
+
+      if (emojis) {
+        emojis = emojis.slice(0);
+      }
+
+      return emojis;
+    }
+  }, {
+    key: 'updateDisplay',
+    value: function updateDisplay(display) {
+      var emojis = this.getEmojis();
+
+      if (!emojis) {
+        return;
+      }
+
+      this.container.style.display = display;
+    }
+  }, {
+    key: 'setContainerRef',
+    value: function setContainerRef(c) {
+      this.container = c;
+    }
+  }, {
+    key: 'setLabelRef',
+    value: function setLabelRef(c) {
+      this.label = c;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this3 = this;
+
+      var _props3 = this.props;
+      var id = _props3.id;
+      var name = _props3.name;
+      var hasStickyPosition = _props3.hasStickyPosition;
+      var emojiProps = _props3.emojiProps;
+      var i18n = _props3.i18n;
+      var notFound = _props3.notFound;
+      var notFoundEmoji = _props3.notFoundEmoji;
+      var emojis = this.getEmojis();
+      var labelStyles = {};
+      var labelSpanStyles = {};
+      var containerStyles = {};
+
+      if (!emojis) {
+        containerStyles = {
+          display: 'none'
+        };
+      }
+
+      if (!hasStickyPosition) {
+        labelStyles = {
+          height: 28
+        };
+
+        labelSpanStyles = {
+          position: 'absolute'
+        };
+      }
+
+      return React.createElement(
+        'section',
+        {
+          ref: this.setContainerRef,
+          className: 'emoji-mart-category',
+          'aria-label': i18n.categories[id],
+          style: containerStyles
+        },
+        React.createElement(
+          'div',
+          {
+            style: labelStyles,
+            'data-name': name,
+            className: 'emoji-mart-category-label'
+          },
+          React.createElement(
+            'span',
+            {
+              style: labelSpanStyles,
+              ref: this.setLabelRef,
+              'aria-hidden': true /* already labeled by the section aria-label */
+            },
+            i18n.categories[id]
+          )
+        ),
+        emojis && emojis.map(function (emoji) {
+          return NimbleEmoji(_extends({ emoji: emoji, data: _this3.data }, emojiProps));
+        }),
+        emojis && !emojis.length && React.createElement(NotFound, {
+          i18n: i18n,
+          notFound: notFound,
+          notFoundEmoji: notFoundEmoji,
+          data: this.data,
+          emojiProps: emojiProps
+        })
+      );
+    }
+  }]);
+
+  return Category;
+}(React.Component);
+
+export default Category;
+
+
+Category.propTypes /* remove-proptypes */ = {
+  emojis: PropTypes.array,
+  hasStickyPosition: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  native: PropTypes.bool.isRequired,
+  perLine: PropTypes.number.isRequired,
+  emojiProps: PropTypes.object.isRequired,
+  recent: PropTypes.arrayOf(PropTypes.string),
+  notFound: PropTypes.func,
+  notFoundEmoji: PropTypes.string.isRequired
+};
+
+Category.defaultProps = {
+  emojis: [],
+  hasStickyPosition: true
+};