educoder/public/react/src/modules/comment/CommentInput.js

import React, { Component } from 'react';

import Tooltip from '@material-ui/core/Tooltip';
import './Comment.css'
const $ = window.$;

function pasteListener(event) {
    if (event.clipboardData.types[0] === 'Files') {
        event.preventDefault();
    }
}
/*
*/
class CommentInput extends Component {

    componentDidMount() {
    }

    componentWillReceiveProps(newProps, newContext) {
        // TODO 暂没有切实训的场景
        if (newProps.challenge && newProps.challenge.shixun_id
            && (!this.props.challenge.shixun_id || newProps.challenge.shixun_id != this.props.challenge.shixun_id)) {
            setTimeout(() => {
                window.sd_create_editor_from_shixun_data(newProps.challenge.shixun_id, null, "100%", "Shixun");
                if ($.browser.mozilla) {
                    setTimeout(() => {
                        const _body = $('.ke-edit-iframe')[0].contentWindow.document.body;
                        _body.removeEventListener('paste', pasteListener)
                        _body.addEventListener('paste', pasteListener)
                    }, 4200)
                }
            }, 100)

        }

    }

    render() {
        const { createNewComment, editedComment, commentOnChange, challenge, shixun, loading, praisePlus, gotNewReply, showNewReply } = this.props;
        return (
            <li className="comment-input fl" id="shixun_comment_block">
                {!challenge.shixun_id ? '' :
                    <div nhname={`new_message_${challenge.shixun_id}`} className="fr" style={{ width: '99%' }}>
                        <form acceptCharset="UTF-8" action="/discusses?challenge_id=118&dis_id=61&dis_type=Shixun" className="df" data-remote="true" id="new_comment_form" method="post">
                            <div className="fl" style={{ flex: 1, marginTop: '7px' }} id="editor_panel">
                                <div nhname={`toolbar_container_${challenge.shixun_id}`}></div>
                                {/*有问题或有建议，请直接给我留言吧！*/}
                                <textarea id={`comment_news_${challenge.shixun_id}`}
                                    nhname={`new_message_textarea_${challenge.shixun_id}`} name="content"
                                    value={editedComment} onChange={commentOnChange} className="none">
                                </textarea>
                            </div>
                            <div className="tips"
                                style={{ 'float': 'left', 'marginTop': '6px', 'fontSize': '12px', 'color': '#ff6800' }}>
                                请勿粘贴答案，否则将造成账号禁用等后果！
                        </div>
                            <div className="fr buttons" style={{ minWidth: '25px', height: '32px' }}>
                                <a id={`new_message_submit_btn_${challenge.shixun_id}`} href="javascript:void(0)"
                                    style={{ display: 'none' }} onClick={createNewComment} className="commentsbtn task-btn task-btn-blue  fr">
                                    发送
                            </a>
                                <p className="fr ml10" style={{ minWidth: '25px' }} >
                                    <Tooltip title={challenge.user_praise ? "取消点赞" : "点赞"}>
                                        <span id="game_praise_tread" className="color-grey mr20" onClick={praisePlus}>
                                            <i className={`mr3  ${challenge.user_praise ? "iconfont icon-dianzan color-orange03" : "iconfont icon-dianzan-xian"} `} alt="赞" ></i>
                                            {challenge.praise_count ?
                                                <span className="font-16" id="game_praise_count">{challenge.praise_count}</span> : ''}
                                        </span>
                                    </Tooltip>
                                </p>
                                <p className="fr ml10" style={{ minWidth: '25px' }} >
                                    {gotNewReply ?
                                        <React.Fragment>
                                            <i className={`replyIcon newReplyIcon iconfont icon-tpixiaoxitixing`} onClick={showNewReply}></i>
                                            <span className="dot blink"></span>
                                        </React.Fragment>
                                        :
                                        <Tooltip title={"暂无新消息"}>
                                            <i className={`replyIcon iconfont icon-tpixiaoxitixing`}></i>
                                        </Tooltip>
                                    }
                                </p>
                            </div>
                        </form>
                    </div>
                }
            </li>
        )
    }
}

/*
    
                                    <img src={messagegreyImg}/>

    <span data-tip-top={ tread ? "踩" : "取消踩" }  id="game_tread" className="color-grey" style={{paddingTop:'7px'}}>
                              <i className={`fa fa-thumbs-down font-20 mr3 ${ tread ? "" : "color-orange03" } `} ></i>
                              <span className="font-12 font-bd" id="game_tread_count">{tread_count}</span>
                            </span>

    <div className="clearfix with100">
        <textarea className="commentTxt"></textarea>
        <p className="clearfix">
            <a href="javascript:void(0)" className="fl uploadImg mt2">
                <img src="/images/sendimg.svg" className="fl mr3 mt6"/><span className="up">上传图片</span>
            </a>
            <a href="javascript:void(0)" className="commentsbtn task-btn task-btn-blue fr">评论</a>
            <span className="fr mr15 mt3"><i className="fa fa-thumbs-up color-dark-grey mr3 font-18"></i>20</span>
           
            <img src="/images/message.svg" className="fr mr15 mt8"/>
        </p>
    </div>
*/
export default CommentInput;