@forchange/aui/es/chat/input.js

ai-boss 业务 ui 组件库

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from 'react';
import message from 'antd/lib/message';
import Icon from 'antd/lib/icon';
import 'antd/lib/message/style/index.css';
import 'antd/lib/icon/style/index.css';
import { getPrefixCls } from '../style/config';
import EmojiPanel from '../emoji-panel/index';
import "./style/input.css";

class Input extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "onChange", event => {
      this.setState({
        content: event.target.value
      });
    });

    _defineProperty(this, "onKeyDown", event => {
      if (event.keyCode === 13 && !event.ctrlKey) {
        const content = this.state.content.trim();

        if (content.length > 0) {
          // 发送消息
          if (this.props.handleEnterSendMessage) {
            this.props.handleEnterSendMessage(content);
          }

          setTimeout(() => {
            this.setState({
              content: ''
            });
          }, 0);
        } else {
          message.info(`文本不能为空`);
        }

        event.preventDefault();
      }
    });

    _defineProperty(this, "onKeyUp", event => {
      if (event.keyCode === 13 && event.ctrlKey) {
        const content = this.state.content + `\n`;
        this.setState({
          content
        });
      }
    });

    _defineProperty(this, "showUploadFile", () => {
      this.setState({
        isShowPicturePanel: false
      });
    });

    _defineProperty(this, "onSelect", val => {
      const text = this.state.content;
      const el = this.state.textareaRef.current;

      try {
        const ret = text.substring(0, el.selectionStart) + val + text.substring(el.selectionStart, text.length);
        this.setState({
          content: ret
        });
      } catch (error) {
        console.log(error);
      }
    });

    this.state = {
      textareaRef: React.createRef(),
      className: 'chat-component-input',
      content: '',
      // 发送消息内容
      isShowPicturePanel: false // 显示上传图片

    };
  }

  render() {
    const {
      placeholder,
      placement
    } = this.props;
    const className = getPrefixCls(this.state.className);
    return React.createElement("div", {
      className: className
    }, React.createElement("div", {
      className: `${className}-operate`
    }, React.createElement("div", {
      className: `${className}-operate-left`
    }, React.createElement("div", {
      className: `${className}-operate-left-emoji`
    }, React.createElement(EmojiPanel, {
      onSelect: this.onSelect,
      placement: placement
    }, React.createElement(Icon, {
      type: "smile"
    }))), React.createElement("div", {
      className: `${className}-operate-left-emoji`,
      onClick: this.showUploadFile
    }, React.createElement("label", {
      htmlFor: "aui-file"
    }, React.createElement(Icon, {
      type: "picture"
    })), React.createElement("input", {
      id: "aui-file",
      name: "aui-file",
      type: "file",
      accept: "image/png, image/jpg",
      className: "aui-input-file"
    }))), React.createElement("div", {
      className: `${className}-operate-right`
    })), React.createElement("textarea", {
      ref: this.state.textareaRef,
      className: `${className}-textarea`,
      placeholder: placeholder,
      value: this.state.content,
      onChange: this.onChange,
      onKeyUp: this.onKeyUp,
      onKeyDown: this.onKeyDown
    }));
  }

}

export default Input;