z-react-ui/lib/emojicon-tab/TabsEmoji.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;

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

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

var _tabs = _interopRequireDefault(require("antd/es/tabs"));

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

var _config = require("../_utils/config");

var _defaultEmojicons = _interopRequireDefault(require("./defaultEmojicons"));

/**
 * @description: 表情库
 * @author: zs
 * @Date: 2020-11-05 19:56:57
 * @LastEditTime 2020-11-26 14:33:33
 * @LastEditors ronffy
 */
// #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------
var TabPane = _tabs.default.TabPane;
var defaultEmojiTabs = [0, 1, 2, 3];
var defaultArr = [];
var defaultColumns = [];

var TabsEmoji = function TabsEmoji(_ref) {
  var _ref$defaultActiveKey = _ref.defaultActiveKey,
      defaultActiveKey = _ref$defaultActiveKey === void 0 ? '0' : _ref$defaultActiveKey,
      activeKey = _ref.activeKey,
      onChange = _ref.onChange,
      _ref$emojiTabs = _ref.emojiTabs,
      emojiTabs = _ref$emojiTabs === void 0 ? defaultEmojiTabs : _ref$emojiTabs,
      _ref$emojiTextTabs = _ref.emojiTextTabs,
      emojiTextTabs = _ref$emojiTextTabs === void 0 ? defaultArr : _ref$emojiTextTabs,
      _ref$emojiColumns = _ref.emojiColumns,
      emojiColumns = _ref$emojiColumns === void 0 ? defaultColumns : _ref$emojiColumns,
      onEmojiChange = _ref.onEmojiChange,
      props = (0, _objectWithoutProperties2.default)(_ref, ["defaultActiveKey", "activeKey", "onChange", "emojiTabs", "emojiTextTabs", "emojiColumns", "onEmojiChange"]);
  var prefixCls = (0, _react.useMemo)(function () {
    return "".concat(_config.defaultPrefixCls, "-emoji-tab");
  }, []);
  var filterEmojiconsArr = (0, _react.useMemo)(function () {
    if (Array.isArray(emojiColumns) && emojiColumns.length) {
      return emojiColumns;
    }

    var filterResult = _defaultEmojicons.default.filter(function (_item, index) {
      return typeof emojiTabs === 'string' ? emojiTabs.split(',').includes(String(index)) : emojiTabs.includes(index);
    });

    if (Array.isArray(emojiTextTabs) && emojiTextTabs.length) {
      filterResult = filterResult.map(function (item, index) {
        if (emojiTextTabs[index]) {
          item.title = emojiTextTabs[index];
        }

        return item;
      });
    }

    return filterResult;
  }, [emojiTabs, emojiColumns, emojiTextTabs]);
  var filterTabsProps = (0, _react.useMemo)(function () {
    var propsObj = {};

    if (onChange) {
      propsObj.onChange = onChange;
    }

    if (!activeKey) {
      propsObj.defaultActiveKey = defaultActiveKey;
    }

    return propsObj;
  }, [onChange, activeKey]);
  return /*#__PURE__*/_react.default.createElement(_tabs.default, Object.assign({}, filterTabsProps, props), filterEmojiconsArr.map(function (item, i) {
    return /*#__PURE__*/_react.default.createElement(TabPane, {
      tab: item.title,
      key: i
    }, item.emoji.map(function (emoji) {
      return /*#__PURE__*/_react.default.createElement("span", {
        key: emoji.unifiedCode,
        className: "".concat(prefixCls, "-emoji"),
        onClick: function onClick() {
          return onEmojiChange(emoji.cnCode);
        }
      }, emoji.cnCode);
    }));
  }));
};

var _default = TabsEmoji;
exports.default = _default;