zp-bee/es/emojicon-tab/TabsEmoji.js

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

import "antd/es/tabs/style";
import _Tabs from "antd/es/tabs";

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
/**
 * @description: 表情库
 * @author: zs
 * @Date: 2020-11-05 19:56:57
 * @LastEditTime 2020-11-26 14:33:33
 * @LastEditors ronffy
 */


import React, { useMemo } from 'react';
import { defaultPrefixCls } from '../_utils/config';
import emojiconsArr from './defaultEmojicons'; // #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------

var TabPane = _Tabs.TabPane;
var defaultEmojiTabs = [0, 1, 2, 3];
var defaultArr = [];
var defaultColumns = [];

var TabsEmoji = function TabsEmoji(_a) {
  var _a$defaultActiveKey = _a.defaultActiveKey,
      defaultActiveKey = _a$defaultActiveKey === void 0 ? '0' : _a$defaultActiveKey,
      activeKey = _a.activeKey,
      onChange = _a.onChange,
      _a$emojiTabs = _a.emojiTabs,
      emojiTabs = _a$emojiTabs === void 0 ? defaultEmojiTabs : _a$emojiTabs,
      _a$emojiTextTabs = _a.emojiTextTabs,
      emojiTextTabs = _a$emojiTextTabs === void 0 ? defaultArr : _a$emojiTextTabs,
      _a$emojiColumns = _a.emojiColumns,
      emojiColumns = _a$emojiColumns === void 0 ? defaultColumns : _a$emojiColumns,
      onEmojiChange = _a.onEmojiChange,
      props = __rest(_a, ["defaultActiveKey", "activeKey", "onChange", "emojiTabs", "emojiTextTabs", "emojiColumns", "onEmojiChange"]);

  var prefixCls = useMemo(function () {
    return "".concat(defaultPrefixCls, "-emoji-tab");
  }, []);
  var filterEmojiconsArr = useMemo(function () {
    if (Array.isArray(emojiColumns) && emojiColumns.length) {
      return emojiColumns;
    }

    var filterResult = emojiconsArr.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 = useMemo(function () {
    var propsObj = {};

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

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

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

export default TabsEmoji;