@corva/ui 0.34.0-rc.2 → 0.34.0-rc.3

package/components/CommentInput/index.js

@@ -1 +1,602 @@
-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 m from"prop-types";import p from"lodash/noop";import{withStyles as d}from"@material-ui/core/styles";import u from"classnames";import{get as h}from"lodash";import{Paper as f,TextField as C,InputAdornment as g,Tooltip as b,Typography as v,IconButton as x}from"@material-ui/core";import I from"@material-ui/core/colors/grey";import y from"../Avatar/index.js";import E from"../FileUploadIconButton.js";import F from"../EmojiIconButton.js";import S from"../FailedFileUploading.js";import U from"../UserMention/index.js";import N from"../FilePreview/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 w}from"../../utils/nativeMessages.js";import{patchFeedItemComment as L}from"../../clients/jsonApi/index.js";import T from"./styles.css.js";import{jsxs as P,jsx as B}from"react/jsx-runtime";function D(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 z={chatAvatarWrapper:{display:"inline-block",verticalAlign:"top",position:"absolute",left:-18},commentTextFieldContainer:{position:"relative",margin:"0"},commentTextFieldContainerSpaceAround:{position:"relative",margin:"20px 10px"}},_=function(a){i(m,c);var r=D(m);function m(n){var i,a,c;return e(this,m),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,L(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)):(w(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),"handleCloseEditClick",(function(){i.setState({comment:""}),i.props.exitEditMode()})),i.state={comment:"",attachmentUrl:null,attachmentName:null,attachmentSize:null,attachmentLoadingError:null},i}return n(m,[{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?M.getFileNameWithExtensionFromPath(t):null,attachmentSize:this.props.editAttachment?this.props.editAttachment.url:null})}},{key:"focusOnRef",value:function(){this.props.inputRef&&this.props.inputRef.current.focus()}},{key:"render",value:function(){var t=this,e=this.props,n=e.classes,o=e.currentUser,i="".concat(h(o,["attributes","first_name"])," ").concat(h(o,["attributes","last_name"]));return P("div",{style:this.props.spaceAround?z.commentTextFieldContainerSpaceAround:z.commentTextFieldContainer,children:[B("div",{style:z.chatAvatarWrapper,children:B(y,{displayName:i,imgSrc:this.props.currentUser&&this.props.currentUser.profile_photo})}),B(f,{className:this.props.classes.paperRoot,children:B(C,{"data-testid":"".concat("commentInput","_input"),placeholder:"Add Comment...",FormHelperTextProps:{component:"div",margin:"dense"},InputProps:{inputComponent:U,inputProps:{onChange:function(e){return t.setState({comment:e})},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},endAdornment:!this.props.isNative&&P(g,{position:"end",className:this.props.classes.iconsContainer,children:[!this.state.attachmentUrl&&B(b,{title:"Attach File",placement:"bottom",classes:{tooltip:n.iconTooltip},children:B("div",{className:u(T.cCommentInputIconContainer,T.cCommentInputIconUpload),children:B(E,{openPreviewDialogOnUpload:!1,disableRipple:!0,onFinish:this.handleFileUpload,onError:this.handleAttachmentLoadingError,fileUploadIconClassName:this.props.classes.additionalActionButton,htmlColor:I[400],inputId:"comment-attachment-".concat(this.props.editCommentId)})})}),B(b,{title:"Add Emoji",placement:"bottom",classes:{tooltip:n.iconTooltip},children:B("div",{className:T.cCommentInputIconContainer,children:B(F,{"data-testid":"".concat("commentInput","_emojiButton"),handleSelectEmoji:this.handleSelectEmoji,emojiIconClassName:this.props.classes.additionalActionButton,htmlColor:I[400],disableRipple:!0})})})]}),disableUnderline:!0,classes:{root:this.props.classes.inputRoot,input:this.props.classes.inputEl}},className:this.props.classes.input,onKeyDown:this.handleKeyDown})}),this.state.attachmentLoadingError&&B(S,{errorMessage:this.state.attachmentLoadingError,className:this.props.classes.fileUploadingError}),this.state.attachmentUrl&&B(N,{fileName:this.state.attachmentName,fileUrl:this.state.attachmentUrl,handleFileDelete:this.handleFileDelete,classes:this.props.classes}),P("div",{className:T.cCommentInputSendContainer,children:[B("div",{className:T.cCommentInputSendContainerCancel,children:this.isEditMode&&B(v,{variant:"caption",className:u(this.props.classes.inputMain,this.props.classes.cancelText,this.props.classes.highlightedLabel),component:"div",gutterBottom:!0,onClick:this.props.exitEditMode,children:"Cancel"})}),P("div",{className:T.cCommentInputSendContainerSend,children:[P(v,{variant:"caption",className:u(this.props.classes.inputMain,this.props.classes.inputHelper),component:"div",gutterBottom:!0,children:["Press ",B(v,{variant:"caption",color:"primary",className:u(this.props.classes.inputMain,this.props.classes.highlightedLabel),children:"Enter"})," to send"]}),B(x,{"data-testid":"".concat("commentInput","_sendButton"),onClick:this.handleSendComment,children:B(k,{})})]})]})]})}}]),m}();_.propTypes={inputRef:m.shape({current:m.shape({focus:m.shape({})})}),editFeedItemId:m.number,editCommentId:m.number,editComment:m.string,editAttachment:m.shape({url:m.string}),spaceAround:m.bool,postComment:m.func.isRequired,postCommentCallback:m.func,patchCommentCallback:m.func,exitEditMode:m.func,setIsPosting:m.func,setIsEditting:m.func,onMount:m.func,autoFocus:m.bool,disabled:m.bool,classes:m.shape({}).isRequired,currentUser:m.shape(),isNative:m.bool,companyId:m.number},_.defaultProps={inputRef:null,editFeedItemId:null,editCommentId:null,editComment:null,editAttachment:{},spaceAround:!1,setIsPosting:p,setIsEditting:p,onMount:p,autoFocus:void 0,disabled:!1,patchCommentCallback:p,postCommentCallback:p,exitEditMode:p,companyId:null,currentUser:{},isNative:R};var O=d((function(t){return{paperRoot:{width:"calc(100% - 28px)",marginLeft:25,display:"inline-block",height:35,border:"0","&:focus-within":{boxShadow:"inset 0 0 0 2px ".concat(t.palette.primary.main)},boxShadow:"none"},input:{paddingLeft:5,width:"100%"},inputRoot:{height:35,paddingRight:"10px",lineHeight:"29px",paddingLeft:"10px"},inputEl:{padding:"0 0 0 6px",height:"100%"},additionalActionButton:{padding:"5px","&:hover":{backgroundColor:"transparent"}},nativeActionButton:{margin:"5px 10px",cursor:"pointer"},fileUploadingError:{marginTop:10,marginLeft:24},inputMain:{marginBottom:0,fontSize:".7rem",color:t.palette.grey[700]},inputHelper:{display:"flex",paddingRight:5},cancelText:{cursor:"pointer"},highlightedLabel:{color:t.palette.primary.main},iconsContainer:{marginRight:"8px"},iconTooltip:{marginTop:"3px"}}}))(_);export{O as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { get } from 'lodash';
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import grey from '@material-ui/core/colors/grey';
+import utils from '../../utils/main.js';
+import { isNativeDetected } from '../../utils/mobileDetect.js';
+import { notifyCommentEdit, notifyCommentPost } from '../../utils/nativeMessages.js';
+import _createClass from '@babel/runtime/helpers/createClass';
+import { patchFeedItemComment } from '../../clients/jsonApi/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Paper, TextField, InputAdornment, Tooltip, Typography, IconButton } from '@material-ui/core';
+import { PureComponent } from 'react';
+import noop from 'lodash/noop';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+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 Avatar from '../Avatar/index.js';
+import { isSuggestionsListOpened } from '../UserMention/utils/index.js';
+import UserMention from '../UserMention/index.js';
+import EmojiIconButton from '../EmojiIconButton.js';
+import FailedFileUploading from '../FailedFileUploading.js';
+import FileUploadIconButton from '../FileUploadIconButton.js';
+import FilePreview from '../FilePreview/index.js';
+import SendIcon from '../Icons/SendIcon.js';
+import styles from './styles.css.js';
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+var PAGE_NAME = 'commentInput';
+var style = {
+  chatAvatarWrapper: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    position: 'absolute',
+    left: -18
+  },
+  commentTextFieldContainer: {
+    position: 'relative',
+    margin: '0'
+  },
+  commentTextFieldContainerSpaceAround: {
+    position: 'relative',
+    margin: '20px 10px'
+  }
+};
+
+var muiStyles = function muiStyles(theme) {
+  return {
+    paperRoot: {
+      width: 'calc(100% - 28px)',
+      // NOTE: 28 is a settings icon size.
+      marginLeft: 25,
+      display: 'inline-block',
+      height: 35,
+      border: '0',
+      '&:focus-within': {
+        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.primary.main)
+      },
+      boxShadow: 'none'
+    },
+    input: {
+      paddingLeft: 5,
+      width: '100%'
+    },
+    inputRoot: {
+      height: 35,
+      paddingRight: '10px',
+      lineHeight: '29px',
+      paddingLeft: '10px'
+    },
+    inputEl: {
+      padding: '0 0 0 6px',
+      height: '100%'
+    },
+    additionalActionButton: {
+      padding: '5px',
+      '&:hover': {
+        backgroundColor: 'transparent'
+      }
+    },
+    nativeActionButton: {
+      margin: '5px 10px',
+      cursor: 'pointer'
+    },
+    fileUploadingError: {
+      marginTop: 10,
+      marginLeft: 24
+    },
+    inputMain: {
+      marginBottom: 0,
+      fontSize: '.7rem',
+      color: theme.palette.grey[700]
+    },
+    inputHelper: {
+      display: 'flex',
+      paddingRight: 5
+    },
+    cancelText: {
+      cursor: 'pointer'
+    },
+    highlightedLabel: {
+      color: theme.palette.primary.main
+    },
+    iconsContainer: {
+      marginRight: '8px'
+    },
+    iconTooltip: {
+      marginTop: '3px'
+    }
+  };
+};
+
+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), "handleCloseEditClick", function () {
+      _this.setState({
+        comment: ''
+      });
+
+      _this.props.exitEditMode();
+    });
+
+    _this.state = {
+      comment: '',
+      attachmentUrl: null,
+      attachmentName: null,
+      attachmentSize: null,
+      attachmentLoadingError: null
+    };
+    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: "setInitialCommentValue",
+    value: function setInitialCommentValue() {
+      var attachmentUrl = this.props.editAttachment ? this.props.editAttachment.url : null;
+      this.setState({
+        comment: this.props.editComment,
+        attachmentUrl: attachmentUrl,
+        attachmentName: attachmentUrl ? utils.getFileNameWithExtensionFromPath(attachmentUrl) : null,
+        attachmentSize: this.props.editAttachment ? this.props.editAttachment.url : null
+      });
+    }
+  }, {
+    key: "focusOnRef",
+    value: function focusOnRef() {
+      if (this.props.inputRef) this.props.inputRef.current.focus();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          currentUser = _this$props2.currentUser;
+      var currentUserFullName = "".concat(get(currentUser, ['attributes', 'first_name']), " ").concat(get(currentUser, ['attributes', 'last_name']));
+      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 // imgSrc={this.props.currentUser.get('profile_photo')}
+            ,
+            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: "Add 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
+              },
+              endAdornment: !this.props.isNative && /*#__PURE__*/jsxs(InputAdornment, {
+                position: "end",
+                className: this.props.classes.iconsContainer,
+                children: [!this.state.attachmentUrl && /*#__PURE__*/jsx(Tooltip, {
+                  title: "Attach File",
+                  placement: "bottom",
+                  classes: {
+                    tooltip: classes.iconTooltip
+                  },
+                  children: /*#__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)
+                    })
+                  })
+                }), /*#__PURE__*/jsx(Tooltip, {
+                  title: "Add Emoji",
+                  placement: "bottom",
+                  classes: {
+                    tooltip: classes.iconTooltip
+                  },
+                  children: /*#__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
+                    })
+                  })
+                })]
+              }),
+              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__*/jsxs("div", {
+          className: styles.cCommentInputSendContainer,
+          children: [/*#__PURE__*/jsx("div", {
+            className: styles.cCommentInputSendContainerCancel,
+            children: this.isEditMode && /*#__PURE__*/jsx(Typography, {
+              variant: "caption",
+              className: classNames(this.props.classes.inputMain, this.props.classes.cancelText, this.props.classes.highlightedLabel),
+              component: "div",
+              gutterBottom: true,
+              onClick: this.props.exitEditMode,
+              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, {
+              "data-testid": "".concat(PAGE_NAME, "_sendButton"),
+              onClick: this.handleSendComment,
+              children: /*#__PURE__*/jsx(SendIcon, {})
+            })]
+          })]
+        })]
+      });
+    }
+  }, {
+    key: "isEditMode",
+    get: function get() {
+      return !!this.props.editFeedItemId;
+    }
+  }]);
+
+  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
+  }),
+  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
+};
+CommentInput.defaultProps = {
+  inputRef: null,
+  editFeedItemId: null,
+  editCommentId: 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 default CommentInput$1;
+//# sourceMappingURL=index.js.map