@corva/ui 0.34.0-rc.3 → 0.34.0

package/components/CommentInput/index.js

@@ -1,602 +1 @@
-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
+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};

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__3isC6 {\n  display: flex;\n  justify-content: space-between;\n  padding-right: 6px;\n  margin-left: 25px;\n}\n\n.styles_cCommentInputSendContainerSend__3FSoU,\n.styles_cCommentInputSendContainerCancel__1JpEs {\n  display: flex;\n  align-items: center;\n}\n\n.styles_cCommentInputIconContainer__1E43C {\n  border-radius: 20px;\n  text-align: center;\n  padding: 5px;\n  height: 40px;\n  margin-right: -10px;\n}\n\n.styles_cCommentInputIconContainer__1E43C:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.styles_cCommentInputIconUpload__2uM_u {\n  display: flex;\n  align-items: center;\n}\n";
-var styles = {"cCommentInputSendContainer":"styles_cCommentInputSendContainer__3isC6","cCommentInputSendContainerSend":"styles_cCommentInputSendContainerSend__3FSoU","cCommentInputSendContainerCancel":"styles_cCommentInputSendContainerCancel__1JpEs","cCommentInputIconContainer":"styles_cCommentInputIconContainer__1E43C","cCommentInputIconUpload":"styles_cCommentInputIconUpload__2uM_u"};
-styleInject(css_248z);
-
-export default styles;
-//# 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:25px;padding-right:6px}.styles_cCommentInputSendContainerCancel__ihM5z,.styles_cCommentInputSendContainerSend__v2QuS{align-items:center;display:flex}.styles_cCommentInputIconContainer__GI8uz{border-radius:20px;height:40px;margin-right:-10px;padding:5px;text-align:center}.styles_cCommentInputIconContainer__GI8uz:hover{background:hsla(0,0%,100%,.1)}.styles_cCommentInputIconUpload__-4I0T{align-items:center;display:flex}");export{e as default};