z-react-ui/es/emojicon-tab/TabsEmoji.js

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

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import "antd/es/tabs/style";
import _Tabs from "antd/es/tabs";

/**
 * @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(_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 = _objectWithoutProperties(_ref, ["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;