@corva/ui 3.1.0-rc.5 → 3.1.0

package/components/CommentInput/index.js

@@ -1,586 +1 @@
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
-import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
-import _inherits from '@babel/runtime/helpers/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import noop from 'lodash/noop';
-import { withStyles } from '@material-ui/core/styles';
-import { Paper, TextField, InputAdornment, Collapse, Typography } from '@material-ui/core';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import grey from '@material-ui/core/colors/grey';
-import { patchFeedItemComment } from '../../clients/jsonApi/index.js';
-import styles from './styles.css.js';
-import { AvatarComponent } from '../Avatar/index.js';
-import FileUploadIconButton from '../FileUploadIconButton.js';
-import EmojiIconButton from '../EmojiIconButton.js';
-import FailedFileUploading from '../FailedFileUploading.js';
-import UserMention from '../UserMention/index.js';
-import FilePreview from '../FilePreview/index.js';
-import IconButton from '../IconButton/index.js';
-import SendIcon from '../Icons/SendIcon.js';
-import { isSuggestionsListOpened } from '../UserMention/utils/index.js';
-import utils from '../../utils/main.js';
-import { isNativeDetected } from '../../utils/mobileDetect.js';
-import { notifyCommentEdit, notifyCommentPost } from '../../utils/nativeMessages.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var PAGE_NAME = 'commentInput';
-var INPUT_HEIGHT = 32;
-var AVATAR_SIZE = 32;
-var style = {
-  chatAvatarWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'absolute',
-    left: 0,
-    height: INPUT_HEIGHT
-  },
-  commentTextFieldContainer: {
-    position: 'relative',
-    margin: '0'
-  },
-  commentTextFieldContainerSpaceAround: {
-    position: 'relative',
-    margin: '20px 10px'
-  }
-};
-var muiStyles = function muiStyles(theme) {
-  return {
-    paperRoot: {
-      width: 'calc(100% - 48px)',
-      marginLeft: AVATAR_SIZE + 16,
-      display: 'inline-block',
-      height: INPUT_HEIGHT,
-      border: '0',
-      '&:focus-within': {
-        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.primary.main)
-      },
-      boxShadow: 'none',
-      background: '#4D4D4D'
-    },
-    input: {
-      paddingLeft: 5,
-      width: '100%'
-    },
-    inputRoot: {
-      height: INPUT_HEIGHT,
-      paddingRight: '8px',
-      lineHeight: '29px',
-      paddingLeft: '8px'
-    },
-    inputEl: {
-      padding: '0 0 0 6px',
-      height: '100%'
-    },
-    additionalActionButton: {
-      padding: '6px'
-    },
-    nativeActionButton: {
-      margin: '5px 10px',
-      cursor: 'pointer'
-    },
-    fileUploadingError: {
-      marginTop: 10,
-      marginLeft: 24
-    },
-    inputMain: {
-      marginBottom: 0,
-      fontSize: '11px',
-      color: theme.palette.primary.text8
-    },
-    inputHelper: {
-      display: 'flex',
-      paddingRight: 5
-    },
-    cancelText: {
-      cursor: 'pointer'
-    },
-    highlightedLabel: {
-      color: theme.palette.primary.main
-    },
-    iconTooltip: {
-      marginTop: '3px'
-    },
-    sendButton: {
-      '&:hover': {
-        backgroundColor: 'rgba(3,188,212, 0.1)'
-      },
-      '&.MuiButtonBase-root': {
-        padding: 7
-      }
-    },
-    inputAdornment: {
-      marginBottom: '0!important',
-      height: '100%'
-    }
-  };
-};
-var CommentInput = /*#__PURE__*/function (_PureComponent) {
-  _inherits(CommentInput, _PureComponent);
-  var _super = _createSuper(CommentInput);
-  function CommentInput(props) {
-    var _this;
-    _classCallCheck(this, CommentInput);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "handleSelectEmoji", function (emoji) {
-      return _this.setState(function (_ref) {
-        var comment = _ref.comment;
-        return {
-          comment: "".concat(comment).concat(emoji.native)
-        };
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "postComment", /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(comment) {
-        var commentResponse;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                _context.next = 3;
-                return _this.props.postComment(comment);
-              case 3:
-                commentResponse = _context.sent;
-                _context.next = 9;
-                break;
-              case 6:
-                _context.prev = 6;
-                _context.t0 = _context["catch"](0);
-                console.error(_context.t0.message);
-              case 9:
-                return _context.abrupt("return", commentResponse);
-              case 10:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[0, 6]]);
-      }));
-      return function (_x) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
-    _defineProperty(_assertThisInitialized(_this), "patchComment", /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(comment) {
-        var _this$props, editFeedItemId, editCommentId, commentResponse;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _this$props = _this.props, editFeedItemId = _this$props.editFeedItemId, editCommentId = _this$props.editCommentId;
-                _context2.prev = 1;
-                _context2.next = 4;
-                return patchFeedItemComment(editFeedItemId, editCommentId, comment);
-              case 4:
-                commentResponse = _context2.sent;
-                _context2.next = 10;
-                break;
-              case 7:
-                _context2.prev = 7;
-                _context2.t0 = _context2["catch"](1);
-                console.error(_context2.t0.message);
-              case 10:
-                return _context2.abrupt("return", commentResponse);
-              case 11:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, null, [[1, 7]]);
-      }));
-      return function (_x2) {
-        return _ref3.apply(this, arguments);
-      };
-    }());
-    _defineProperty(_assertThisInitialized(_this), "clearCommentField", function (callback) {
-      _this.setState({
-        comment: '',
-        attachmentUrl: null,
-        attachmentName: null,
-        attachmentSize: null
-      }, function () {
-        _this.focusOnRef();
-        if (callback && typeof callback === 'function') callback();
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      var key = event.key;
-      if (key === 'Escape') _this.props.exitEditMode();
-      if (key === 'Enter') {
-        if (!isSuggestionsListOpened()) {
-          event.preventDefault();
-          _this.handleSendComment();
-        }
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleAttachmentLoadingError", function (attachmentLoadingError) {
-      _this.setState({
-        attachmentUrl: null,
-        attachmentName: null,
-        attachmentSize: null,
-        attachmentLoadingError: attachmentLoadingError
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleFileUpload", function (attachmentUrl, attachmentName, attachmentSize) {
-      _this.setState({
-        attachmentUrl: attachmentUrl,
-        attachmentName: attachmentName,
-        attachmentSize: attachmentSize,
-        attachmentLoadingError: null
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleNativeFileUpload", function () {
-      var comment = _this.state.comment;
-      if (_this.isEditMode) {
-        notifyCommentEdit(comment);
-        _this.clearCommentField(_this.props.exitEditMode);
-      } else {
-        notifyCommentPost(comment);
-        _this.clearCommentField();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleFileDelete", function () {
-      return _this.setState({
-        attachmentUrl: null,
-        attachmentName: null,
-        attachmentSize: null
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleSendComment", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-      var textComment, comment, commentResponse;
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              textComment = _this.state.comment ? _this.state.comment.trim() : null;
-              if (!(!textComment && !_this.state.attachmentUrl)) {
-                _context3.next = 3;
-                break;
-              }
-              return _context3.abrupt("return");
-            case 3:
-              comment = {
-                comment: {
-                  body: textComment,
-                  attachment: {
-                    url: _this.state.attachmentUrl,
-                    size: _this.state.attachmentSize,
-                    file_name: _this.state.attachmentName
-                  }
-                }
-              };
-              if (!_this.isEditMode) {
-                _context3.next = 16;
-                break;
-              }
-              _this.props.setIsEditting(true);
-              _context3.next = 8;
-              return _this.patchComment(comment);
-            case 8:
-              commentResponse = _context3.sent;
-              _context3.next = 11;
-              return _this.props.patchCommentCallback(commentResponse);
-            case 11:
-              _this.props.setIsEditting(false);
-              _this.clearCommentField();
-              _this.props.exitEditMode();
-              _context3.next = 24;
-              break;
-            case 16:
-              _this.props.setIsPosting(true);
-              _context3.next = 19;
-              return _this.postComment(comment);
-            case 19:
-              commentResponse = _context3.sent;
-              _context3.next = 22;
-              return _this.props.postCommentCallback(commentResponse);
-            case 22:
-              _this.props.setIsPosting(false);
-              _this.clearCommentField();
-            case 24:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3);
-    })));
-    _defineProperty(_assertThisInitialized(_this), "handleCancelClick", function () {
-      _this.setState({
-        comment: '',
-        attachmentUrl: null,
-        attachmentName: null,
-        attachmentSize: null
-      }, _this.props.exitEditMode());
-    });
-    _this.state = {
-      comment: '',
-      attachmentUrl: null,
-      attachmentName: null,
-      attachmentSize: null,
-      attachmentLoadingError: null,
-      isInputFocused: false
-    };
-    return _this;
-  }
-  _createClass(CommentInput, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.isEditMode) {
-        this.setInitialCommentValue();
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var enteredEditMode = this.isEditMode && !prevProps.editFeedItemId;
-      if (enteredEditMode || this.props.editCommentId && this.props.editCommentId !== prevProps.editCommentId) {
-        this.setInitialCommentValue();
-      }
-    }
-  }, {
-    key: "isEditMode",
-    get: function get() {
-      return !!this.props.editFeedItemId;
-    }
-  }, {
-    key: "setInitialCommentValue",
-    value: function setInitialCommentValue() {
-      var attachmentUrl = this.props.editAttachment ? this.props.editAttachment.url : null;
-      this.setState({
-        comment: this.props.editComment,
-        attachmentUrl: attachmentUrl,
-        attachmentName: attachmentUrl ? this.props.editAttachment.file_name || utils.getFileNameWithExtensionFromPath(attachmentUrl) : null,
-        attachmentSize: this.props.editAttachment ? this.props.editAttachment.size : null
-      });
-    }
-  }, {
-    key: "focusOnRef",
-    value: function focusOnRef() {
-      if (this.props.inputRef) this.props.inputRef.current.focus();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$editAttac,
-        _this2 = this;
-      var _this$props2 = this.props,
-        classes = _this$props2.classes,
-        currentUser = _this$props2.currentUser;
-      var currentUserFullName = "".concat(get(currentUser, ['attributes', 'first_name']) || get(currentUser, 'first_name'), " ").concat(get(currentUser, ['attributes', 'last_name']) || get(currentUser, 'last_name'));
-      var isVisibleActionBar = this.state.isInputFocused || this.state.attachmentUrl || this.state.comment || this.props.editComment || ((_this$props$editAttac = this.props.editAttachment) === null || _this$props$editAttac === void 0 ? void 0 : _this$props$editAttac.url);
-      return /*#__PURE__*/jsxs("div", {
-        style: this.props.spaceAround ? style.commentTextFieldContainerSpaceAround : style.commentTextFieldContainer,
-        children: [/*#__PURE__*/jsx("div", {
-          style: style.chatAvatarWrapper,
-          children: /*#__PURE__*/jsx(AvatarComponent, {
-            displayName: currentUserFullName,
-            size: AVATAR_SIZE,
-            imgSrc: this.props.currentUser && this.props.currentUser.profile_photo
-          })
-        }), /*#__PURE__*/jsx(Paper, {
-          className: this.props.classes.paperRoot,
-          children: /*#__PURE__*/jsx(TextField, {
-            "data-testid": "".concat(PAGE_NAME, "_input"),
-            placeholder: "Type Comment",
-            FormHelperTextProps: {
-              component: 'div',
-              margin: 'dense'
-            },
-            InputProps: {
-              inputComponent: UserMention,
-              inputProps: {
-                onChange: function onChange(comment) {
-                  return _this2.setState({
-                    comment: comment
-                  });
-                },
-                singleLine: true,
-                value: this.state.comment || '',
-                inputRef: this.props.inputRef,
-                withLightTheme: false,
-                onMount: this.props.onMount,
-                companyId: this.props.companyId,
-                autoFocus: this.props.autoFocus,
-                disabled: this.props.disabled,
-                onFocus: function onFocus() {
-                  return _this2.setState({
-                    isInputFocused: true
-                  });
-                },
-                onBlur: function onBlur() {
-                  return _this2.setState({
-                    isInputFocused: false
-                  });
-                },
-                allowSuggestionsAboveCursor: true
-              },
-              endAdornment: !this.props.isNative && /*#__PURE__*/jsxs(InputAdornment, {
-                position: "end",
-                className: this.props.classes.inputAdornment,
-                children: [!this.state.attachmentUrl && /*#__PURE__*/jsx("div", {
-                  className: classNames(styles.cCommentInputIconContainer, styles.cCommentInputIconUpload),
-                  children: /*#__PURE__*/jsx(FileUploadIconButton, {
-                    openPreviewDialogOnUpload: false,
-                    disableRipple: true,
-                    onFinish: this.handleFileUpload,
-                    onError: this.handleAttachmentLoadingError,
-                    fileUploadIconClassName: this.props.classes.additionalActionButton,
-                    htmlColor: grey[400],
-                    inputId: "comment-attachment-".concat(this.props.editCommentId || this.props.parentId),
-                    tooltipProps: {
-                      title: 'Attach File',
-                      classes: {
-                        tooltip: classes.iconTooltip
-                      },
-                      placement: 'top'
-                    }
-                  })
-                }), /*#__PURE__*/jsx("div", {
-                  className: styles.cCommentInputIconContainer,
-                  children: /*#__PURE__*/jsx(EmojiIconButton, {
-                    "data-testid": "".concat(PAGE_NAME, "_emojiButton"),
-                    handleSelectEmoji: this.handleSelectEmoji,
-                    emojiIconClassName: this.props.classes.additionalActionButton,
-                    htmlColor: grey[400],
-                    disableRipple: true,
-                    tooltipProps: {
-                      title: 'Add Emoji',
-                      classes: {
-                        tooltip: classes.iconTooltip
-                      },
-                      placement: 'top'
-                    }
-                  })
-                })]
-              }),
-              disableUnderline: true,
-              classes: {
-                root: this.props.classes.inputRoot,
-                input: this.props.classes.inputEl
-              }
-            },
-            className: this.props.classes.input,
-            onKeyDown: this.handleKeyDown
-          })
-        }), this.state.attachmentLoadingError && /*#__PURE__*/jsx(FailedFileUploading, {
-          errorMessage: this.state.attachmentLoadingError,
-          className: this.props.classes.fileUploadingError
-        }), this.state.attachmentUrl && /*#__PURE__*/jsx(FilePreview, {
-          fileName: this.state.attachmentName,
-          fileUrl: this.state.attachmentUrl,
-          handleFileDelete: this.handleFileDelete,
-          classes: this.props.classes
-        }), /*#__PURE__*/jsx(Collapse, {
-          in: isVisibleActionBar,
-          mountOnEnter: true,
-          unmountOnExit: true,
-          children: /*#__PURE__*/jsxs("div", {
-            className: styles.cCommentInputSendContainer,
-            children: [/*#__PURE__*/jsx("div", {
-              className: styles.cCommentInputSendContainerCancel,
-              children: /*#__PURE__*/jsx(Typography, {
-                "data-testid": "".concat(PAGE_NAME, "_cancel"),
-                variant: "caption",
-                className: classNames(this.props.classes.inputMain, this.props.classes.cancelText, this.props.classes.highlightedLabel),
-                component: "div",
-                gutterBottom: true,
-                onClick: this.handleCancelClick,
-                children: "Cancel"
-              })
-            }), /*#__PURE__*/jsxs("div", {
-              className: styles.cCommentInputSendContainerSend,
-              children: [/*#__PURE__*/jsxs(Typography, {
-                variant: "caption",
-                className: classNames(this.props.classes.inputMain, this.props.classes.inputHelper),
-                component: "div",
-                gutterBottom: true,
-                children: ["Press\xA0", /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "primary",
-                  className: classNames(this.props.classes.inputMain, this.props.classes.highlightedLabel),
-                  children: "Enter"
-                }), "\xA0to send"]
-              }), /*#__PURE__*/jsx(IconButton, {
-                size: "large",
-                tooltipProps: {
-                  title: 'Send'
-                },
-                "data-testid": "".concat(PAGE_NAME, "_sendButton"),
-                onClick: this.handleSendComment,
-                classes: {
-                  root: this.props.classes.sendButton
-                },
-                children: /*#__PURE__*/jsx(SendIcon, {})
-              })]
-            })]
-          })
-        })]
-      });
-    }
-  }]);
-  return CommentInput;
-}(PureComponent);
-CommentInput.propTypes = {
-  inputRef: PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.shape({})
-    })
-  }),
-  editFeedItemId: PropTypes.number,
-  editCommentId: PropTypes.number,
-  editComment: PropTypes.string,
-  editAttachment: PropTypes.shape({
-    url: PropTypes.string,
-    size: PropTypes.number,
-    file_name: PropTypes.string
-  }),
-  spaceAround: PropTypes.bool,
-  postComment: PropTypes.func.isRequired,
-  postCommentCallback: PropTypes.func,
-  patchCommentCallback: PropTypes.func,
-  exitEditMode: PropTypes.func,
-  setIsPosting: PropTypes.func,
-  setIsEditting: PropTypes.func,
-  onMount: PropTypes.func,
-  autoFocus: PropTypes.bool,
-  disabled: PropTypes.bool,
-  classes: PropTypes.shape({}).isRequired,
-  currentUser: PropTypes.shape(),
-  isNative: PropTypes.bool,
-  companyId: PropTypes.number,
-  parentId: PropTypes.string
-};
-CommentInput.defaultProps = {
-  inputRef: null,
-  editFeedItemId: null,
-  editCommentId: null,
-  parentId: null,
-  editComment: null,
-  editAttachment: {},
-  spaceAround: false,
-  setIsPosting: noop,
-  setIsEditting: noop,
-  onMount: noop,
-  autoFocus: undefined,
-  disabled: false,
-  patchCommentCallback: noop,
-  postCommentCallback: noop,
-  exitEditMode: noop,
-  companyId: null,
-  currentUser: {},
-  isNative: isNativeDetected
-};
-var CommentInput$1 = withStyles(muiStyles)(CommentInput);
-
-export { CommentInput$1 as default };
-//# sourceMappingURL=index.js.map
+import t from"@babel/runtime/helpers/asyncToGenerator";import e from"@babel/runtime/helpers/classCallCheck";import n from"@babel/runtime/helpers/createClass";import o from"@babel/runtime/helpers/assertThisInitialized";import i from"@babel/runtime/helpers/inherits";import a from"@babel/runtime/helpers/possibleConstructorReturn";import r from"@babel/runtime/helpers/getPrototypeOf";import s from"@babel/runtime/helpers/defineProperty";import l from"@babel/runtime/regenerator";import{PureComponent as c}from"react";import p from"prop-types";import m from"lodash/noop";import{withStyles as u}from"@material-ui/core/styles";import{Paper as d,TextField as h,InputAdornment as f,Collapse as g,Typography as C}from"@material-ui/core";import b from"classnames";import{get as I}from"lodash";import v from"@material-ui/core/colors/grey";import{patchFeedItemComment as x}from"../../clients/jsonApi/index.js";import y from"./styles.css.js";import{AvatarComponent as E}from"../Avatar/index.js";import F from"../FileUploadIconButton.js";import S from"../EmojiIconButton.js";import U from"../FailedFileUploading.js";import N from"../UserMention/index.js";import k from"../FilePreview/index.js";import A from"../IconButton/index.js";import M from"../Icons/SendIcon.js";import{isSuggestionsListOpened as R}from"../UserMention/utils/index.js";import j from"../../utils/main.js";import{isNativeDetected as B}from"../../utils/mobileDetect.js";import{notifyCommentEdit as w,notifyCommentPost as P}from"../../utils/nativeMessages.js";import{jsxs as T,jsx as L}from"react/jsx-runtime";function z(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,o=r(t);if(e){var i=r(this).constructor;n=Reflect.construct(o,arguments,i)}else n=o.apply(this,arguments);return a(this,n)}}var D={chatAvatarWrapper:{display:"flex",alignItems:"center",position:"absolute",left:0,height:32},commentTextFieldContainer:{position:"relative",margin:"0"},commentTextFieldContainerSpaceAround:{position:"relative",margin:"20px 10px"}},_=function(a){i(p,c);var r=z(p);function p(n){var i,a,c;return e(this,p),i=r.call(this,n),s(o(i),"handleSelectEmoji",(function(t){return i.setState((function(e){var n=e.comment;return{comment:"".concat(n).concat(t.native)}}))})),s(o(i),"postComment",(a=t(l.mark((function t(e){var n;return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,i.props.postComment(e);case 3:n=t.sent,t.next=9;break;case 6:t.prev=6,t.t0=t.catch(0),console.error(t.t0.message);case 9:return t.abrupt("return",n);case 10:case"end":return t.stop()}}),t,null,[[0,6]])}))),function(t){return a.apply(this,arguments)})),s(o(i),"patchComment",(c=t(l.mark((function t(e){var n,o,a,r;return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n=i.props,o=n.editFeedItemId,a=n.editCommentId,t.prev=1,t.next=4,x(o,a,e);case 4:r=t.sent,t.next=10;break;case 7:t.prev=7,t.t0=t.catch(1),console.error(t.t0.message);case 10:return t.abrupt("return",r);case 11:case"end":return t.stop()}}),t,null,[[1,7]])}))),function(t){return c.apply(this,arguments)})),s(o(i),"clearCommentField",(function(t){i.setState({comment:"",attachmentUrl:null,attachmentName:null,attachmentSize:null},(function(){i.focusOnRef(),t&&"function"==typeof t&&t()}))})),s(o(i),"handleKeyDown",(function(t){var e=t.key;"Escape"===e&&i.props.exitEditMode(),"Enter"===e&&(R()||(t.preventDefault(),i.handleSendComment()))})),s(o(i),"handleAttachmentLoadingError",(function(t){i.setState({attachmentUrl:null,attachmentName:null,attachmentSize:null,attachmentLoadingError:t})})),s(o(i),"handleFileUpload",(function(t,e,n){i.setState({attachmentUrl:t,attachmentName:e,attachmentSize:n,attachmentLoadingError:null})})),s(o(i),"handleNativeFileUpload",(function(){var t=i.state.comment;i.isEditMode?(w(t),i.clearCommentField(i.props.exitEditMode)):(P(t),i.clearCommentField())})),s(o(i),"handleFileDelete",(function(){return i.setState({attachmentUrl:null,attachmentName:null,attachmentSize:null})})),s(o(i),"handleSendComment",t(l.mark((function t(){var e,n,o;return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if((e=i.state.comment?i.state.comment.trim():null)||i.state.attachmentUrl){t.next=3;break}return t.abrupt("return");case 3:if(n={comment:{body:e,attachment:{url:i.state.attachmentUrl,size:i.state.attachmentSize,file_name:i.state.attachmentName}}},!i.isEditMode){t.next=16;break}return i.props.setIsEditting(!0),t.next=8,i.patchComment(n);case 8:return o=t.sent,t.next=11,i.props.patchCommentCallback(o);case 11:i.props.setIsEditting(!1),i.clearCommentField(),i.props.exitEditMode(),t.next=24;break;case 16:return i.props.setIsPosting(!0),t.next=19,i.postComment(n);case 19:return o=t.sent,t.next=22,i.props.postCommentCallback(o);case 22:i.props.setIsPosting(!1),i.clearCommentField();case 24:case"end":return t.stop()}}),t)})))),s(o(i),"handleCancelClick",(function(){i.setState({comment:"",attachmentUrl:null,attachmentName:null,attachmentSize:null},i.props.exitEditMode())})),i.state={comment:"",attachmentUrl:null,attachmentName:null,attachmentSize:null,attachmentLoadingError:null,isInputFocused:!1},i}return n(p,[{key:"componentDidMount",value:function(){this.isEditMode&&this.setInitialCommentValue()}},{key:"componentDidUpdate",value:function(t){(this.isEditMode&&!t.editFeedItemId||this.props.editCommentId&&this.props.editCommentId!==t.editCommentId)&&this.setInitialCommentValue()}},{key:"isEditMode",get:function(){return!!this.props.editFeedItemId}},{key:"setInitialCommentValue",value:function(){var t=this.props.editAttachment?this.props.editAttachment.url:null;this.setState({comment:this.props.editComment,attachmentUrl:t,attachmentName:t?this.props.editAttachment.file_name||j.getFileNameWithExtensionFromPath(t):null,attachmentSize:this.props.editAttachment?this.props.editAttachment.size:null})}},{key:"focusOnRef",value:function(){this.props.inputRef&&this.props.inputRef.current.focus()}},{key:"render",value:function(){var t,e=this,n=this.props,o=n.classes,i=n.currentUser,a="".concat(I(i,["attributes","first_name"])||I(i,"first_name")," ").concat(I(i,["attributes","last_name"])||I(i,"last_name")),r=this.state.isInputFocused||this.state.attachmentUrl||this.state.comment||this.props.editComment||(null===(t=this.props.editAttachment)||void 0===t?void 0:t.url);return T("div",{style:this.props.spaceAround?D.commentTextFieldContainerSpaceAround:D.commentTextFieldContainer,children:[L("div",{style:D.chatAvatarWrapper,children:L(E,{displayName:a,size:32,imgSrc:this.props.currentUser&&this.props.currentUser.profile_photo})}),L(d,{className:this.props.classes.paperRoot,children:L(h,{"data-testid":"".concat("commentInput","_input"),placeholder:"Type Comment",FormHelperTextProps:{component:"div",margin:"dense"},InputProps:{inputComponent:N,inputProps:{onChange:function(t){return e.setState({comment:t})},singleLine:!0,value:this.state.comment||"",inputRef:this.props.inputRef,withLightTheme:!1,onMount:this.props.onMount,companyId:this.props.companyId,autoFocus:this.props.autoFocus,disabled:this.props.disabled,onFocus:function(){return e.setState({isInputFocused:!0})},onBlur:function(){return e.setState({isInputFocused:!1})},allowSuggestionsAboveCursor:!0},endAdornment:!this.props.isNative&&T(f,{position:"end",className:this.props.classes.inputAdornment,children:[!this.state.attachmentUrl&&L("div",{className:b(y.cCommentInputIconContainer,y.cCommentInputIconUpload),children:L(F,{openPreviewDialogOnUpload:!1,disableRipple:!0,onFinish:this.handleFileUpload,onError:this.handleAttachmentLoadingError,fileUploadIconClassName:this.props.classes.additionalActionButton,htmlColor:v[400],inputId:"comment-attachment-".concat(this.props.editCommentId||this.props.parentId),tooltipProps:{title:"Attach File",classes:{tooltip:o.iconTooltip},placement:"top"}})}),L("div",{className:y.cCommentInputIconContainer,children:L(S,{"data-testid":"".concat("commentInput","_emojiButton"),handleSelectEmoji:this.handleSelectEmoji,emojiIconClassName:this.props.classes.additionalActionButton,htmlColor:v[400],disableRipple:!0,tooltipProps:{title:"Add Emoji",classes:{tooltip:o.iconTooltip},placement:"top"}})})]}),disableUnderline:!0,classes:{root:this.props.classes.inputRoot,input:this.props.classes.inputEl}},className:this.props.classes.input,onKeyDown:this.handleKeyDown})}),this.state.attachmentLoadingError&&L(U,{errorMessage:this.state.attachmentLoadingError,className:this.props.classes.fileUploadingError}),this.state.attachmentUrl&&L(k,{fileName:this.state.attachmentName,fileUrl:this.state.attachmentUrl,handleFileDelete:this.handleFileDelete,classes:this.props.classes}),L(g,{in:r,mountOnEnter:!0,unmountOnExit:!0,children:T("div",{className:y.cCommentInputSendContainer,children:[L("div",{className:y.cCommentInputSendContainerCancel,children:L(C,{"data-testid":"".concat("commentInput","_cancel"),variant:"caption",className:b(this.props.classes.inputMain,this.props.classes.cancelText,this.props.classes.highlightedLabel),component:"div",gutterBottom:!0,onClick:this.handleCancelClick,children:"Cancel"})}),T("div",{className:y.cCommentInputSendContainerSend,children:[T(C,{variant:"caption",className:b(this.props.classes.inputMain,this.props.classes.inputHelper),component:"div",gutterBottom:!0,children:["Press ",L(C,{variant:"caption",color:"primary",className:b(this.props.classes.inputMain,this.props.classes.highlightedLabel),children:"Enter"})," to send"]}),L(A,{size:"large",tooltipProps:{title:"Send"},"data-testid":"".concat("commentInput","_sendButton"),onClick:this.handleSendComment,classes:{root:this.props.classes.sendButton},children:L(M,{})})]})]})})]})}}]),p}();_.propTypes={inputRef:p.shape({current:p.shape({focus:p.shape({})})}),editFeedItemId:p.number,editCommentId:p.number,editComment:p.string,editAttachment:p.shape({url:p.string,size:p.number,file_name:p.string}),spaceAround:p.bool,postComment:p.func.isRequired,postCommentCallback:p.func,patchCommentCallback:p.func,exitEditMode:p.func,setIsPosting:p.func,setIsEditting:p.func,onMount:p.func,autoFocus:p.bool,disabled:p.bool,classes:p.shape({}).isRequired,currentUser:p.shape(),isNative:p.bool,companyId:p.number,parentId:p.string},_.defaultProps={inputRef:null,editFeedItemId:null,editCommentId:null,parentId:null,editComment:null,editAttachment:{},spaceAround:!1,setIsPosting:m,setIsEditting:m,onMount:m,autoFocus:void 0,disabled:!1,patchCommentCallback:m,postCommentCallback:m,exitEditMode:m,companyId:null,currentUser:{},isNative:B};var O=u((function(t){return{paperRoot:{width:"calc(100% - 48px)",marginLeft:48,display:"inline-block",height:32,border:"0","&:focus-within":{boxShadow:"inset 0 0 0 2px ".concat(t.palette.primary.main)},boxShadow:"none",background:"#4D4D4D"},input:{paddingLeft:5,width:"100%"},inputRoot:{height:32,paddingRight:"8px",lineHeight:"29px",paddingLeft:"8px"},inputEl:{padding:"0 0 0 6px",height:"100%"},additionalActionButton:{padding:"6px"},nativeActionButton:{margin:"5px 10px",cursor:"pointer"},fileUploadingError:{marginTop:10,marginLeft:24},inputMain:{marginBottom:0,fontSize:"11px",color:t.palette.primary.text8},inputHelper:{display:"flex",paddingRight:5},cancelText:{cursor:"pointer"},highlightedLabel:{color:t.palette.primary.main},iconTooltip:{marginTop:"3px"},sendButton:{"&:hover":{backgroundColor:"rgba(3,188,212, 0.1)"},"&.MuiButtonBase-root":{padding:7}},inputAdornment:{marginBottom:"0!important",height:"100%"}}}))(_);export{O as default};

package/components/CommentInput/styles.css.js

@@ -1,8 +1 @@
-import styleInject from './../../ext-esm/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".styles_cCommentInputSendContainer__YGdyj {\n  display: flex;\n  justify-content: space-between;\n  margin-left: 48px;\n  margin-top: 4px;\n}\n\n.styles_cCommentInputSendContainerSend__v2QuS,\n.styles_cCommentInputSendContainerCancel__ihM5z {\n  display: flex;\n  align-items: center;\n  height: 36px;\n}\n\n.styles_cCommentInputIconContainer__GI8uz {\n  border-radius: 20px;\n}\n\n.styles_cCommentInputIconContainer__GI8uz:hover {\n  background: #414141;\n}\n\n.styles_cCommentInputIconUpload__-4I0T {\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 28px;\n}\n";
-var styles = {"cCommentInputSendContainer":"styles_cCommentInputSendContainer__YGdyj","cCommentInputSendContainerSend":"styles_cCommentInputSendContainerSend__v2QuS","cCommentInputSendContainerCancel":"styles_cCommentInputSendContainerCancel__ihM5z","cCommentInputIconContainer":"styles_cCommentInputIconContainer__GI8uz","cCommentInputIconUpload":"styles_cCommentInputIconUpload__-4I0T"};
-styleInject(css_248z);
-
-export { styles as default };
-//# sourceMappingURL=styles.css.js.map
+import n from'./../../ext-esm/style-inject/dist/style-inject.es.js';var e={cCommentInputSendContainer:"styles_cCommentInputSendContainer__YGdyj",cCommentInputSendContainerSend:"styles_cCommentInputSendContainerSend__v2QuS",cCommentInputSendContainerCancel:"styles_cCommentInputSendContainerCancel__ihM5z",cCommentInputIconContainer:"styles_cCommentInputIconContainer__GI8uz",cCommentInputIconUpload:"styles_cCommentInputIconUpload__-4I0T"};n(".styles_cCommentInputSendContainer__YGdyj{display:flex;justify-content:space-between;margin-left:48px;margin-top:4px}.styles_cCommentInputSendContainerCancel__ihM5z,.styles_cCommentInputSendContainerSend__v2QuS{align-items:center;display:flex;height:36px}.styles_cCommentInputIconContainer__GI8uz{border-radius:20px}.styles_cCommentInputIconContainer__GI8uz:hover{background:#414141}.styles_cCommentInputIconUpload__-4I0T{align-items:center;display:flex;height:28px;width:28px}");export{e as default};