frc-ui/es/chat/tool/Emoji.js

React Web UI

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import React from 'react';
import Icon from '../../icon';
import message from '../../message';
import EmojiOne from '../../emoji-one';
import { Consumer } from '../common/Hoc';
import { FsType } from '../interfaces';
import { v1 } from 'uuid';
let Emoji = class Emoji extends React.PureComponent {
    constructor(props) {
        super(props);
        this.deleteEmoji = '';
        this.uploadFiles = {};
        this.load = () => {
            const { emit, channel } = this.props;
            if (emit) {
                emit('emoji.list', {
                    current: 0,
                    size: 30,
                    code: channel
                });
            }
        };
        this.collectEmoji = (uploadEmo) => {
            this.uploadFiles[uploadEmo.payload.fileName] = uploadEmo.url;
            let success = true;
            let uploadUrls = [];
            Object.keys(this.uploadFiles).forEach((key) => {
                const value = this.uploadFiles[key];
                if (!value) {
                    success = false;
                }
                else {
                    uploadUrls.push({ emojiUrl: value });
                }
            });
            return success ? uploadUrls : [];
        };
        this.handleCollectEmo = (data) => {
            const { locale } = this.props;
            let illegalFiles = Array.from(data.files || []).filter((file) => {
                return file.size > 512000 || !(file.type || '').startsWith('image/');
            });
            const { collectEmoji } = this.state;
            if (collectEmoji.length + data.files.length > 30) {
                message.info(locale && locale.collectOftenError);
                return;
            }
            if (illegalFiles && illegalFiles.length > 0) {
                message.info(locale && locale.collectFileError);
                return;
            }
            let filesData = Array.from(data.files || []).map((file) => {
                const formData = new FormData();
                let fileName = v1();
                formData.append('file', file, fileName);
                this.uploadFiles[fileName] = undefined;
                return {
                    type: FsType.EMO,
                    file: formData,
                    fileName: fileName,
                    messageKey: data.key
                };
            });
            const { emit } = this.props;
            if (emit) {
                filesData.forEach((data) => {
                    emit('chatFile', data);
                });
            }
        };
        this.onShow = (event) => {
            event.stopPropagation();
            if (!this.ele)
                return;
            const { track } = this.props;
            const rect = this.ele.getBoundingClientRect();
            this.setState({ show: true, x: rect.left, y: rect.top });
            if (track)
                track('聊天室.表情');
        };
        this.onHide = () => {
            this.setState({ show: false });
        };
        this.onChange = (emo) => {
            const { channel, emit } = this.props;
            if (emo.isDelete) {
                this.deleteEmoji = emo.emo;
                emit && emit('emoji.remove', { url: emo.emo, code: channel });
            }
            else {
                emit && emit('chat', { emo, id: v1() });
            }
        };
        this.ref = (ele) => {
            this.ele = ele;
        };
        this.state = {
            show: false,
            x: 0,
            y: 0,
            collectEmoji: []
        };
    }
    componentDidMount() {
        this.load();
    }
    componentWillReceiveProps(nextProps) {
        const { emit, channel } = nextProps;
        let emoji = [...(this.state.collectEmoji || [])];
        let change = false;
        if (nextProps.uploadEmo !== this.props.uploadEmo && nextProps.uploadEmo && nextProps.uploadEmo.url) {
            let urls = this.collectEmoji(nextProps.uploadEmo);
            if (urls.length > 0) {
                this.uploadFiles = [];
                urls.forEach((u) => {
                    if (!emoji.some((e) => e === u))
                        emoji.push(u);
                });
                emit && emit('emoji.save', { code: channel, url: urls.map((e) => e.emojiUrl) });
                change = true;
            }
        }
        if (nextProps.cEmoji !== this.props.cEmoji && nextProps.cEmoji.result) {
            emoji = (nextProps.cEmoji.result || {}).content || [];
            change = true;
        }
        if (nextProps.removeEmoji !== this.props.removeEmoji && nextProps.removeEmoji.success) {
            this.load();
        }
        if (change)
            this.setState({ collectEmoji: emoji });
    }
    render() {
        const { show, x, y, collectEmoji } = this.state;
        const { prefix } = this.props;
        const cls = `${prefix}-tool-emoji`;
        let defaultCollectEmoji = [];
        let customCollectEmoji = [];
        collectEmoji.forEach((e) => {
            return e.default ? defaultCollectEmoji.push(e.emojiUrl) : customCollectEmoji.push(e.emojiUrl);
        });
        return (
        // <div className={cls} onClick={this.onShow} ref={this.ref}>
        React.createElement("div", { className: cls, ref: this.ref },
            React.createElement(Icon, { type: 'smile-o', className: `${cls}-icon` }),
            React.createElement(EmojiOne, { show: show, onHide: this.onHide, onChange: this.onChange, collectEmo: this.handleCollectEmo, customEmo: customCollectEmoji, defaultEmo: defaultCollectEmoji, x: x, y: y })));
    }
};
Emoji = __decorate([
    Consumer(['uploadEmo', 'cEmoji', 'removeEmoji'])
], Emoji);
export default Emoji;