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

ai-boss 业务 ui 组件库

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _message = _interopRequireDefault(require("antd/lib/message"));

var _icon = _interopRequireDefault(require("antd/lib/icon"));

require("antd/lib/message/style/index.css");

require("antd/lib/icon/style/index.css");

var _config = require("../style/config");

var _index3 = _interopRequireDefault(require("../emoji-panel/index"));

require("./style/input.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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;
}

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.default.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 = (0, _config.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(_index3.default, {
      onSelect: this.onSelect,
      placement: placement
    }, React.createElement(_icon.default, {
      type: "smile"
    }))), React.createElement("div", {
      className: `${className}-operate-left-emoji`,
      onClick: this.showUploadFile
    }, React.createElement("label", {
      htmlFor: "aui-file"
    }, React.createElement(_icon.default, {
      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
    }));
  }

}

var _default = Input;
exports.default = _default;