z-react-ui/lib/send-msg/Toolbar/Emoji.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/es/popover/style");

var _popover = _interopRequireDefault(require("antd/es/popover"));

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

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

var _hooks = require("@/_hooks");

var _emoji = require("@/_config/emoji");

var _config = require("@/_config");

// #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------
var Emoji = function Emoji(_ref) {
  var onClick = _ref.onClick,
      onEmojiBtnClick = _ref.onEmojiBtnClick;
  var prefixCls = (0, _hooks.usePrefixCls)('chat-emoji');

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1]; // 鼠标划过和离开表情


  var handleEmojiConversion = (0, _react.useCallback)(function (e, path) {
    var target = e.target;
    target.src = "".concat(_config.chatEmojiPrefix, "/").concat(path);
  }, []); // 点击表情

  var handleClick = (0, _react.useCallback)(function (e, emoji) {
    onClick && onClick(emoji);
    setVisible(false);
  }, [onClick]); // 鼠标划过和离开表情按钮

  var handleEmojiBtn = (0, _react.useCallback)(function (e, path) {
    var target = e.target;
    target.src = "".concat(_config.chatPrefix, "/").concat(path);
  }, []); // 点击表情按钮

  var handleEmojiClick = (0, _react.useCallback)(function (e) {
    handleEmojiBtn(e, 'toolbar_emoticon_down@2x.png');
    onEmojiBtnClick && onEmojiBtnClick(e);
  }, [onEmojiBtnClick]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: prefixCls
  }, /*#__PURE__*/_react.default.createElement(_popover.default, {
    visible: visible,
    onVisibleChange: function onVisibleChange(visible) {
      return setVisible(visible);
    },
    content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _emoji.EmojiArr.map(function (item) {
      return /*#__PURE__*/_react.default.createElement("img", {
        className: "".concat(prefixCls, "-img"),
        key: item.src,
        src: "".concat(_config.chatEmojiPrefix, "/").concat(item.src),
        alt: item.info,
        onMouseEnter: function onMouseEnter(e) {
          return handleEmojiConversion(e, item.hover);
        },
        onMouseLeave: function onMouseLeave(e) {
          return handleEmojiConversion(e, item.src);
        },
        onClick: function onClick(e) {
          return handleClick(e, item);
        }
      });
    })),
    overlayClassName: "".concat(prefixCls, "-overlay"),
    trigger: "click",
    placement: "top"
  }, /*#__PURE__*/_react.default.createElement("img", {
    className: "".concat(prefixCls, "-img"),
    onClick: handleEmojiClick,
    onMouseEnter: function onMouseEnter(e) {
      return handleEmojiBtn(e, 'toolbar_emoticon_hover@2x.png');
    },
    onMouseLeave: function onMouseLeave(e) {
      return handleEmojiBtn(e, 'toolbar_emoticon_normal@2x.png');
    },
    src: "".concat(_config.chatPrefix, "/toolbar_emoticon_normal@2x.png")
  })));
};

var _default = Emoji;
exports.default = _default;