@risecx/carespace-chat-ui/lib/components/UserInput.js

carespace-chat-ui React component

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _QuickMenu = require("./QuickMenu");

var _ActionMenu = _interopRequireDefault(require("./ActionMenu"));

var _SendIcon = _interopRequireDefault(require("./icons/SendIcon"));

var _FileIcon = _interopRequireDefault(require("./icons/FileIcon"));

var _EmojiIcon = _interopRequireDefault(require("./icons/EmojiIcon"));

var _PopupWindow = _interopRequireDefault(require("./popups/PopupWindow"));

var _EmojiPicker = _interopRequireDefault(require("./emoji-picker/EmojiPicker"));

var _uuid = require("uuid");

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

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

var UserInput = /*#__PURE__*/function (_Component) {
  _inheritsLoose(UserInput, _Component);

  function UserInput() {
    var _this;

    _this = _Component.call(this) || this;

    _defineProperty(_assertThisInitialized(_this), "toggleEmojiPicker", function (e) {
      e.preventDefault();

      if (!_this.state.emojiPickerIsOpen) {
        _this.setState({
          emojiPickerIsOpen: true
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "closeEmojiPicker", function (e) {
      if (_this.emojiPickerButton.contains(e.target)) {
        e.stopPropagation();
        e.preventDefault();
      }

      _this.setState({
        emojiPickerIsOpen: false
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_handleEmojiPicked", function (emoji) {
      _this.setState({
        emojiPickerIsOpen: false
      });

      if (_this.state.inputHasText) {
        _this.userInput.innerHTML += emoji;
      } else {
        _this.props.onSubmit({
          author: 'me',
          type: 'emoji',
          data: {
            emoji: emoji
          }
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleEmojiFilterChange", function (event) {
      var emojiFilter = event.target.value;

      _this.setState({
        emojiFilter: emojiFilter
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleActionMenuActive", function (isActive) {
      _this.setState({
        actionMenuIsOpen: isActive
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_renderEmojiPopup", function () {
      return /*#__PURE__*/_react["default"].createElement(_PopupWindow["default"], {
        isOpen: _this.state.emojiPickerIsOpen,
        onClickedOutside: _this.closeEmojiPicker,
        onInputChange: _this.handleEmojiFilterChange
      }, /*#__PURE__*/_react["default"].createElement(_EmojiPicker["default"], {
        onEmojiPicked: _this._handleEmojiPicked,
        filter: _this.state.emojiFilter
      }));
    });

    _this.state = {
      inputActive: false,
      inputHasText: false,
      emojiPickerIsOpen: false,
      emojiFilter: '',
      quickMenuIsOpen: false,
      actionMenuIsOpen: false
    };
    return _this;
  }

  var _proto = UserInput.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.emojiPickerButton = document.querySelector('#sc-emoji-picker-button');
  };

  _proto.handleKeyDown = function handleKeyDown(event) {
    if (event.keyCode === 13 && !event.shiftKey) {
      return this._submitText(event);
    }
  };

  _proto.handleKeyUp = function handleKeyUp(event) {
    var inputHasText = event.target.innerHTML.length !== 0 && event.target.innerText !== '\n';
    this.setState({
      inputHasText: inputHasText
    });
  };

  _proto._showFilePicker = function _showFilePicker() {
    this._fileUploadButton.click();
  };

  _proto.toggleQuickMenu = function toggleQuickMenu(e) {
    e.preventDefault();

    if (!this.state.quickMenuIsOpen) {
      this.setState({
        quickMenuIsOpen: true
      });
    } else {
      this.setState({
        quickMenuIsOpen: false
      });
    }
  };

  _proto._submitText = function _submitText(event) {
    event.preventDefault();
    var text = this.userInput.textContent;

    if (text && text.length > 0) {
      this.props.onSubmit({
        author: 'me',
        type: 'text',
        sent_timestamp: new Date().getTime(),
        _id: (0, _uuid.v4)(),
        data: {
          text: text
        }
      });
      this.userInput.innerHTML = '';
    }
  };

  _proto._onFilesSelected = function _onFilesSelected(event) {
    if (event.target.files && event.target.files.length > 0) {
      this.props.onFilesSelected(event.target.files);
    }
  };

  _proto._renderSendOrFileIcon = function _renderSendOrFileIcon() {
    if (this.state.inputHasText) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "sc-user-input--button"
      }, /*#__PURE__*/_react["default"].createElement(_SendIcon["default"], {
        onClick: this._submitText.bind(this)
      }));
    }

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "sc-user-input--button"
    }, /*#__PURE__*/_react["default"].createElement(_ActionMenu["default"], _extends({
      onActive: this.handleActionMenuActive
    }, this.props)));
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$state = this.state,
        emojiPickerIsOpen = _this$state.emojiPickerIsOpen,
        inputActive = _this$state.inputActive,
        quickMenuIsOpen = _this$state.quickMenuIsOpen,
        actionMenuIsOpen = _this$state.actionMenuIsOpen;
    return /*#__PURE__*/_react["default"].createElement("form", {
      className: "sc-user-input " + (inputActive ? 'active' : '') + " \n        " + (actionMenuIsOpen ? 'active-action-menu' : '') + "\n        " + (quickMenuIsOpen ? 'active-quick-menu' : '') + "\n        \n        "
    }, /*#__PURE__*/_react["default"].createElement(_QuickMenu.QuickMenu, this.props), /*#__PURE__*/_react["default"].createElement("div", {
      role: "button",
      tabIndex: "0",
      onFocus: function onFocus() {
        _this2.setState({
          inputActive: true
        });
      },
      onBlur: function onBlur() {
        _this2.setState({
          inputActive: false
        });
      },
      ref: function ref(e) {
        _this2.userInput = e;
      },
      onKeyDown: this.handleKeyDown.bind(this),
      onKeyUp: this.handleKeyUp.bind(this),
      contentEditable: "true",
      placeholder: "Write a reply...",
      className: "sc-user-input--text"
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: "sc-user-input--buttons"
    }, this.props.showEmoji && /*#__PURE__*/_react["default"].createElement("div", {
      className: "sc-user-input--button"
    }, /*#__PURE__*/_react["default"].createElement(_EmojiIcon["default"], {
      onClick: this.toggleEmojiPicker,
      isActive: emojiPickerIsOpen,
      tooltip: this._renderEmojiPopup()
    })), this._renderSendOrFileIcon()));
  };

  return UserInput;
}(_react.Component);

UserInput.propTypes = process.env.NODE_ENV !== "production" ? {
  onSubmit: _propTypes["default"].func.isRequired,
  onFilesSelected: _propTypes["default"].func.isRequired,
  showEmoji: _propTypes["default"].bool
} : {};
var _default = UserInput;
exports["default"] = _default;
module.exports = exports.default;