@corva/ui 0.65.0-0 → 0.65.0-1-test

package/components/CommentInput/index.js

@@ -1 +1,586 @@
-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 x from"../Avatar/index.js";import y from"../FileUploadIconButton.js";import E from"../EmojiIconButton.js";import F from"../FailedFileUploading.js";import S from"../UserMention/index.js";import U from"../FilePreview/index.js";import N from"../IconButton/index.js";import k from"../Icons/SendIcon.js";import{isSuggestionsListOpened as A}from"../UserMention/utils/index.js";import M from"../../utils/main.js";import{isNativeDetected as R}from"../../utils/mobileDetect.js";import{notifyCommentEdit as j,notifyCommentPost as B}from"../../utils/nativeMessages.js";import{patchFeedItemComment as w}from"../../clients/jsonApi/index.js";import P from"./styles.css.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,w(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&&(A()||(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?(j(t),i.clearCommentField(i.props.exitEditMode)):(B(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||M.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(x,{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:S,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(P.cCommentInputIconContainer,P.cCommentInputIconUpload),children:L(y,{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:P.cCommentInputIconContainer,children:L(E,{"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(F,{errorMessage:this.state.attachmentLoadingError,className:this.props.classes.fileUploadingError}),this.state.attachmentUrl&&L(U,{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:P.cCommentInputSendContainer,children:[L("div",{className:P.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:P.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(N,{size:"large",tooltipProps:{title:"Send"},"data-testid":"".concat("commentInput","_sendButton"),onClick:this.handleSendComment,classes:{root:this.props.classes.sendButton},children:L(k,{})})]})]})})]})}}]),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:R};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};
+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 Avatar 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 { patchFeedItemComment } from '../../clients/jsonApi/index.js';
+import styles from './styles.css.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(Avatar, {
+            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