@helpscout/hsds-react/components/EmojiPicker/EmojiPicker.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.EmojiPicker = EmojiPicker;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _DropList = _interopRequireDefault(require("../DropList"));

var _Emoji = _interopRequireDefault(require("../Emoji"));

var _EmojiPicker = require("./EmojiPicker.Toggler");

var _EmojiPicker2 = require("./EmojiPicker.css");

var _emojiSet = require("./emojiSet");

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

function EmojiPicker(_ref) {
  var _ref$animateOptions = _ref.animateOptions,
      animateOptions = _ref$animateOptions === void 0 ? {
    sequence: 'fade up',
    duration: 150
  } : _ref$animateOptions,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      _ref$dataCy = _ref['data-cy'],
      dataCy = _ref$dataCy === void 0 ? 'EmojiPicker' : _ref$dataCy,
      _ref$emojiSize = _ref.emojiSize,
      emojiSize = _ref$emojiSize === void 0 ? 'md' : _ref$emojiSize,
      _ref$items = _ref.items,
      items = _ref$items === void 0 ? _emojiSet.emojiSet : _ref$items,
      _ref$onTogglerClick = _ref.onTogglerClick,
      onTogglerClick = _ref$onTogglerClick === void 0 ? noop : _ref$onTogglerClick,
      _ref$tippyOptions = _ref.tippyOptions,
      tippyOptions = _ref$tippyOptions === void 0 ? {
    placement: 'top-start'
  } : _ref$tippyOptions,
      _ref$toggler = _ref.toggler,
      toggler = _ref$toggler === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmojiPicker.IconToggler, {
    className: "c-EmojiPickerToggler",
    onClick: onTogglerClick
  }) : _ref$toggler,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["animateOptions", "className", "data-cy", "emojiSize", "items", "onTogglerClick", "tippyOptions", "toggler"]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmojiPicker2.EmojiPickerUI, {
    className: (0, _classnames.default)('c-EmojiPicker', className),
    "data-cy": dataCy,
    emojiSize: emojiSize,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList.default, (0, _extends2.default)({
      animateOptions: animateOptions,
      enableLeftRightNavigation: true,
      items: items,
      tippyOptions: tippyOptions,
      toggler: toggler
    }, rest, {
      renderCustomListItem: function renderCustomListItem(_ref2) {
        var item = _ref2.item;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmojiPicker2.EmojiItemUI, {
          className: "c-EmojiPickerItem",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Emoji.default, {
            name: item.name,
            symbol: item.symbol
          })
        });
      }
    }))
  });
}

var itemShape = _propTypes.default.shape({
  colons: _propTypes.default.arrayOf(_propTypes.default.string),
  hoverBackgroundColor: _propTypes.default.string,
  name: _propTypes.default.string.isRequired,
  symbol: _propTypes.default.string.isRequired,
  unified: _propTypes.default.string,
  value: _propTypes.default.string.isRequired
});

EmojiPicker.propTypes = {
  /** The className of the component. */
  className: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** The size of the emoji. */
  emojiSize: _propTypes.default.oneOf(['sm', 'md', 'lg']),

  /** An array of emoji objects. */
  items: _propTypes.default.arrayOf(itemShape),

  /** Callback that fires when the default toggler is clicked */
  onTogglerClick: _propTypes.default.func
};
var _default = EmojiPicker;
exports.default = _default;