# Emoticon 表情符号

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/emoticon/freepass)
- 平台：PC
- 维护者：陈佳敏
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Emoticon]

## 代码演示

### 基础用法

```jsx
import { Component } from "react";
import { Emoticon, EmoticonItemConfigType } from "@weapp/ui";

export default class EmptyDemo extends Component {

  onClick = (data?: EmoticonItemConfigType) => {
    console.error('data', data);
  }

  render() {
    return (
      <Emoticon
       
        onClick={this.onClick}
      />
    );
  }
}
```

### 自定义分组

```jsx
import { Component } from "react";
import { Emoticon, EmoticonItemConfigType, EmoticonTabType } from "@weapp/ui";
import iconSrc from "../../../../assets/images/Icon-Number-of-contracts-png.png"

const iceEmotions = [
  {
    "tag": "🕒",
    "title": "离开",
    "labelId": "150990",
    "iconKey": ":clock3:",
    "iconName": "clock3",
    "oldName_e10": "leave",
    "oldName_e9": ""
  },
  {
    "tag": "✍️",
    "title": "忙碌",
    "labelId": "150991",
    "iconKey": ":be_busy:",
    "iconName": "be_busy",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "✈️",
    "title": "出差",
    "labelId": "16410",
    "iconKey": ":official_business:",
    "iconName": "official_business",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "😷",
    "title": "生病",
    "labelId": "150992",
    "iconKey": ":fall_ill:",
    "iconName": "fall_ill",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "meeting",
    "title": "会议中",
    "labelId": "150993",
    "iconKey": ":meeting:",
    "iconName": "meeting",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "🏝️",
    "title": "休假中",
    "labelId": "150994",
    "iconKey": ":on_holiday:",
    "iconName": "on_holiday",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "👍",
    "title": "赞",
    "labelId": "86328",
    "iconKey": ":thumbsup:",
    "iconName": "thumbsup",
    "oldName_e10": "thumbsup",
    "oldName_e9": "34_thumbs_up"
  },
  {
    "tag": "👌",
    "title": "OK",
    "labelId": "256948",
    "iconKey": ":ok_hand:",
    "iconName": "ok_hand",
    "oldName_e10": "ok_hand",
    "oldName_e9": "36_ok"
  },
  {
    "tag": "🙏",
    "title": "双手合十",
    "labelId": "256949",
    "iconKey": ":pray:",
    "iconName": "pray",
    "oldName_e10": "pray",
    "oldName_e9": "41_pray"
  },
  {
    "tag": "💪",
    "title": "加油",
    "labelId": "19481",
    "iconKey": ":muscle:",
    "iconName": "muscle",
    "oldName_e10": "muscle",
    "oldName_e9": "40_strong"
  },
  {
    "tag": "✌",
    "title": "胜利",
    "labelId": "30917",
    "iconKey": ":v:",
    "iconName": "v",
    "oldName_e10": "v",
    "oldName_e9": "37_yeah"
  },
  {
    "tag": "👏",
    "title": "鼓掌",
    "labelId": "81085",
    "iconKey": ":clap:",
    "iconName": "clap",
    "oldName_e10": "clap",
    "oldName_e9": "38_applaud"
  },
  {
    "tag": "🙌",
    "title": "扬手欢呼",
    "labelId": "256950",
    "iconKey": ":raised_hands:",
    "iconName": "raised_hands",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "🉑",
    "title": "可接受",
    "labelId": "256951",
    "iconKey": ":accept:",
    "iconName": "accept",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "💯",
    "title": "一百分",
    "labelId": "256952",
    "iconKey": ":100:",
    "iconName": "100",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "❓",
    "title": "疑问",
    "labelId": "28558",
    "iconKey": ":question:",
    "iconName": "question",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "❗",
    "title": "感叹",
    "labelId": "256953",
    "iconKey": ":exclamation:",
    "iconName": "exclamation",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "‼️",
    "title": "双感叹",
    "labelId": "256954",
    "iconKey": ":bangbang:",
    "iconName": "bangbang",
    "oldName_e10": "",
    "oldName_e9": ""
  },
  {
    "tag": "⁉️",
    "title": "感叹疑问",
    "labelId": "256955",
    "iconKey": ":interrobang:",
    "iconName": "interrobang",
    "oldName_e10": "",
    "oldName_e9": ""
  }
]

const pngEmotions = [{
  "title": "困",
  "iconKey": ":kun:",
  "url": 'https://weapp.eteams.cn/visitstatic/iconfont/icons/svgs/Icon-Lost-personnel-png',
}, {
  "title": "哭",
  "iconKey": ":ku:",
  "url": 'https://weapp.eteams.cn/visitstatic/iconfont/icons/svgs/Icon-leader-png'
},{
  "title": '拍手',
  iconKey: ':paishou:',
  url: '/api/file/preview?type=redirect&imgFormat=image&fileId=1107543444423401473&version=1'
}]

const tabs: EmoticonTabType[] = [
  {
    // 使用系统默认表情
    id: 'default',
  }, {
    id: 'ice',
    title: '冰球',
    groupLength: 6,
    icon: iconSrc,
    data: pngEmotions
  }, {
    id: 'word',
    title: '文件',
    groupLength: 10,
    icon: 'Icon-emoji-star-mcolor',
    data: iceEmotions
  }
]

export default class EmptyDemo extends Component {

  onClick = (data?: EmoticonItemConfigType) => {
    console.error('data', data);
  }

  render() {
    return (
      <Emoticon
       
        onClick={this.onClick}
        tabs={tabs}
      />
    );
  }
}
```

## API

### 参数说明如下：

Emoticon 继承 Popover 所有属性

| 参数 | 说明 | 类型 | 是否必填 |  |
| --- | --- | --- | --- | --- |
| className | class 名 | string | 否 |  |
| overlayClassName | 弹层 class 名 | string | 否 |  |
| preficCls | 默认组件 class 名 | string | 否 |  |
| style | 样式 | CSSProperties | 否 |  |
| customRender | 自定义组件渲染 (props: any, ele: ReactElement) => ReactElement | 否 |  |  |
| children | 自定义内部渲染 | ReactNode | 否 |  |
| onClick | 图标点击事件 | (data: EmoticonItemConfigType, e?: React.MouseEventL) => void | 否 |  |
| groupLength | 一行显示几张图 | number | 否 | 10 |
| popoverProps | popover 组件的属性 | PopoverProps | 否 |  |
| tabs | 自定义表情面板 | EmoticonTabType[] | 否 |  |
### EmoticonItemConfigType 属性说明

| 参数 | 说明 | 类型 |  |
| --- | --- | --- | --- |
| url | 表情图片的 url 地址 | string |  |
| tag | emoji表情字符 | string |  |
| title | 表情图片的提示文本 | string |  |
| labelId | 表情图片提示文本的多语言id | string |  |
| iconKey | 表情图片的简短代码 | string |  |
| iconName | 表情图片的名称 | string |  |
| oldName_e10 | E10老数据表情图片的名称 | string | index.tsx |
| oldName_e9 | E9老数据表情图片的名称 | string |  |
### EmoticonTabType 属性说明

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| id | tab 的 id | string |
| title | tab 的提示文本 | string |
| icon | tab 的图标（支持 iconName 和图片地址） | string \| React.ReactNode |
| data | 对应 tab 的表情集合 | EmoticonItemConfigType[] \| EmoticonItemConfigGroupType[] |
| groupLength | tab 一行展示几个表情（默认 10 个一行） | EmoticonItemConfigType[] \| EmoticonItemConfigGroupType[] |
### EmoticonItemConfigGroupType 属性说明

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| id | 分组 id | string |
| title | 分组的提示文本 | string |
| labelId | 分组的提示文本多语言 id | string \| React.ReactNode |
| data | 对应分组的表情集合 | EmoticonItemConfigType[] |
