@corva/ui 0.34.0-rc.3 → 0.34.0

package/components/Comment/index.js

@@ -1,472 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { noop, includes, get } from 'lodash';
-import moment from 'moment';
-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 _createClass from '@babel/runtime/helpers/createClass';
-import { deleteFeedItemComment } from '../../clients/jsonApi/index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createRef, PureComponent } from 'react';
-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 Typography from '@material-ui/core/Typography';
-import UserCardPopover from '../UserCardPopover.js';
-import { formatMentionText } from '../UserMention/utils/index.js';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import ConfirmationDialog from '../ConfirmationDialog.js';
-import IconButton from '@material-ui/core/IconButton';
-import Attachment from '../Attachment/index.js';
-import CommentInput from '../CommentInput/index.js';
-import CommentWrapper from '../CommentWrapper.js';
-import CommentLoader from '../CommentLoader.js';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import styles from './styles.css.js';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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 = 'comment';
-var CREATED_AT_FORMAT = 'MM/DD/YY HH:mm';
-var CREATED_AT_FORMAT_NATIVE = 'MM/DD HH:mm';
-var style = {
-  chatAvatarWrapper: {
-    paddingTop: 2,
-    position: 'absolute',
-    top: 6,
-    left: -18
-  },
-  commentInfoContainer: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    width: '100%',
-    paddingTop: 5
-  },
-  userNameWrapper: {
-    overflow: 'hidden'
-  },
-  infoContainer: {
-    display: 'inline-block',
-    verticalAlign: 'top',
-    width: '100%',
-    paddingLeft: 10
-  }
-};
-var muiStyles = {
-  commentWrapper: {
-    width: 'calc(100% - 10px)'
-  },
-  timeRoot: {
-    color: grey[700],
-    float: 'right',
-    marginRight: 5,
-    marginLeft: 10,
-    fontSize: '10px'
-  },
-  textRoot: {
-    marginTop: 5,
-    color: '#CCC',
-    fontWeight: 'normal',
-    fontSize: '14px'
-  },
-  iconButtonRoot: {
-    float: 'right',
-    height: 40,
-    width: 40,
-    padding: 0,
-    visibility: 'hidden'
-  },
-  userName: {
-    fontSize: '12px'
-  }
-};
-
-var Comment = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Comment, _PureComponent);
-
-  var _super = _createSuper(Comment);
-
-  function Comment(props) {
-    var _this;
-
-    _classCallCheck(this, Comment);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "deleteComment", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(feedItemId, commentId) {
-        var commentResponse;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                _context.next = 3;
-                return deleteFeedItemComment(feedItemId, commentId);
-
-              case 3:
-                commentResponse = _context.sent;
-                _context.next = 9;
-                break;
-
-              case 6:
-                _context.prev = 6;
-                _context.t0 = _context["catch"](0);
-                console.error(_context.t0);
-
-              case 9:
-                return _context.abrupt("return", commentResponse);
-
-              case 10:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[0, 6]]);
-      }));
-
-      return function (_x, _x2) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-
-    _defineProperty(_assertThisInitialized(_this), "showIntoView", function () {
-      _this.props.handleShowOnMount();
-
-      _this.commentEl.current.scrollIntoView({
-        block: 'end'
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleToggleActionsMenu", function (event) {
-      var currentT = event.currentTarget;
-
-      _this.setState(function (_ref2) {
-        var actionsMenuAnchorEl = _ref2.actionsMenuAnchorEl;
-        return {
-          actionsMenuAnchorEl: actionsMenuAnchorEl ? null : currentT
-        };
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      if (event.keyCode === 27) {
-        _this.setState({
-          isEditing: false
-        });
-      }
-
-      document.removeEventListener('keydown', _this.handleKeyDown, false);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleEditMenuItem", function () {
-      document.addEventListener('keydown', _this.handleKeyDown, false);
-
-      _this.setState({
-        isEditing: true
-      }, function () {
-        if (_this.inputEl.current) _this.inputEl.current.focus();
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getEditCommentProps", function () {
-      var comment = _this.props.comment;
-      var editCommentId = comment.id;
-      var editComment = comment.body;
-      var editAttachment = comment.attachment;
-      var editFeedItemId = comment.feed_activity_id;
-      return {
-        editFeedItemId: editFeedItemId,
-        editCommentId: editCommentId,
-        editComment: editComment,
-        editAttachment: editAttachment
-      };
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onEditFinish", function () {
-      _this.setState({
-        isEditing: false,
-        isLoading: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDeleteMenuItem", function () {
-      _this.setState({
-        openDeleteDialog: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDelete", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var id, feedItemId, response;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              id = _this.props.comment.id;
-              feedItemId = _this.props.comment.feed_activity_id;
-
-              _this.setState({
-                isLoading: true
-              });
-
-              _context2.next = 5;
-              return _this.deleteComment(feedItemId, id);
-
-            case 5:
-              response = _context2.sent;
-
-              _this.setState({
-                isLoading: false,
-                openDeleteDialog: false
-              });
-
-              if (response) _this.props.handleDeleteCallback(id);
-
-            case 8:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    })));
-
-    _this.state = {
-      actionsMenuAnchorEl: null,
-      isLoading: false,
-      isEditing: false,
-      openDeleteDialog: false
-    };
-    _this.inputEl = createRef();
-    _this.commentEl = createRef();
-    return _this;
-  }
-
-  _createClass(Comment, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.showOnMount) {
-        this.showIntoView();
-      }
-    }
-  }, {
-    key: "renderMenuIcon",
-    value: function renderMenuIcon() {
-      var showEdit = this.isCurrentUserCommentCreator;
-      var showDelete = this.isCurrentUserCommentCreator || includes(this.props.comment.allowed_actions, 'destroy');
-      if (!(showDelete || showEdit)) return null;
-      return /*#__PURE__*/jsxs("div", {
-        className: styles.cCommentMenu,
-        children: [/*#__PURE__*/jsx(IconButton, {
-          "data-testid": "".concat(PAGE_NAME, "_menuButton"),
-          "aria-label": "Actions",
-          "aria-owns": this.state.actionsMenuAnchorEl ? 'c-comment__actions-menu' : undefined,
-          "aria-haspopup": "true",
-          classes: {
-            root: this.props.classes.iconButtonRoot
-          },
-          onClick: this.handleToggleActionsMenu,
-          children: /*#__PURE__*/jsx(MoreVertIcon, {
-            htmlColor: grey[400]
-          })
-        }), /*#__PURE__*/jsxs(Menu, {
-          id: "c-comment__actions-menu",
-          anchorOrigin: {
-            vertical: 'top',
-            horizontal: 'right'
-          },
-          transformOrigin: {
-            vertical: 'top',
-            horizontal: 'right'
-          },
-          anchorEl: this.state.actionsMenuAnchorEl,
-          open: !!this.state.actionsMenuAnchorEl,
-          onClick: this.handleToggleActionsMenu,
-          children: [showEdit && /*#__PURE__*/jsx(MenuItem, {
-            "data-testid": "".concat(PAGE_NAME, "_editMenuItem"),
-            onClick: this.handleEditMenuItem,
-            children: "Edit"
-          }), showDelete && /*#__PURE__*/jsx(MenuItem, {
-            "data-testid": "".concat(PAGE_NAME, "_deleteMenuItem"),
-            onClick: this.handleDeleteMenuItem,
-            children: "Delete"
-          })]
-        })]
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this,
-          _comment$attachment,
-          _comment$attachment2;
-
-      var _this$state = this.state,
-          isLoading = _this$state.isLoading,
-          isEditing = _this$state.isEditing;
-
-      if (isLoading) {
-        var _spaceAround = this.props.spaceAround;
-        return /*#__PURE__*/jsx(CommentLoader, {
-          spaceAround: _spaceAround
-        });
-      }
-
-      var _this$props = this.props,
-          comment = _this$props.comment,
-          classes = _this$props.classes,
-          spaceAround = _this$props.spaceAround,
-          isNative = _this$props.isNative,
-          patchCommentCallback = _this$props.patchCommentCallback,
-          companyId = _this$props.companyId;
-
-      if (isEditing) {
-        return /*#__PURE__*/jsx(CommentInput, _objectSpread({
-          inputRef: this.inputEl,
-          postComment: noop,
-          exitEditMode: this.onEditFinish,
-          setIsEditting: function setIsEditting() {
-            return _this2.setState({
-              isLoading: true
-            });
-          },
-          patchCommentCallback: patchCommentCallback,
-          companyId: companyId
-        }, this.getEditCommentProps()));
-      }
-
-      var userFullName = utils.getUserFullName(comment.user);
-      var format = isNative ? CREATED_AT_FORMAT_NATIVE : CREATED_AT_FORMAT;
-      var time = moment(comment.created_at).format(format);
-      var attachmentUrl = (comment === null || comment === void 0 ? void 0 : (_comment$attachment = comment.attachment) === null || _comment$attachment === void 0 ? void 0 : _comment$attachment.signed_url) || (comment === null || comment === void 0 ? void 0 : (_comment$attachment2 = comment.attachment) === null || _comment$attachment2 === void 0 ? void 0 : _comment$attachment2.url);
-
-      var attachmentSize = get(comment, ['attachment', 'size']);
-
-      return /*#__PURE__*/jsxs("div", {
-        "data-testid": "".concat(PAGE_NAME, "_commentItem_").concat(comment.body),
-        className: classNames(styles.cComment, _defineProperty({}, styles.cCommentNative, isNative)),
-        ref: this.commentEl,
-        children: [/*#__PURE__*/jsxs(CommentWrapper, {
-          spaceAround: spaceAround,
-          className: this.props.classes.commentWrapper,
-          children: [/*#__PURE__*/jsx("div", {
-            style: style.chatAvatarWrapper,
-            children: isNative ? /*#__PURE__*/jsx(Avatar, {
-              size: 26,
-              displayName: userFullName,
-              imgSrc: get(comment, ['user', 'profile_photo']),
-              className: this.props.classes.avatar
-            }) : /*#__PURE__*/jsx(UserCardPopover, {
-              user: comment.user,
-              currentUser: this.props.currentUser,
-              children: /*#__PURE__*/jsx(Avatar, {
-                size: 26,
-                displayName: userFullName,
-                imgSrc: get(comment, ['user', 'profile_photo']),
-                className: this.props.classes.avatar
-              })
-            })
-          }), /*#__PURE__*/jsxs("div", {
-            style: style.infoContainer,
-            children: [/*#__PURE__*/jsx("div", {
-              children: /*#__PURE__*/jsxs("div", {
-                style: style.commentInfoContainer,
-                children: [/*#__PURE__*/jsx("div", {
-                  style: style.userNameWrapper,
-                  children: /*#__PURE__*/jsx(Typography, {
-                    "data-testid": "".concat(PAGE_NAME, "_userName"),
-                    variant: "subtitle2",
-                    noWrap: true,
-                    className: classes.userName,
-                    children: userFullName
-                  })
-                }), /*#__PURE__*/jsx("div", {
-                  style: style.timeWrapper,
-                  children: /*#__PURE__*/jsx(Typography, {
-                    "data-testid": "".concat(PAGE_NAME, "_addTime"),
-                    variant: "caption",
-                    classes: {
-                      root: classes.timeRoot
-                    },
-                    children: time
-                  })
-                })]
-              })
-            }), /*#__PURE__*/jsxs("div", {
-              className: styles.cCommentBody,
-              children: [this.renderMenuIcon(), /*#__PURE__*/jsx(Typography, {
-                "data-testid": "".concat(PAGE_NAME, "_commentMessage"),
-                variant: "body1",
-                classes: {
-                  root: classes.textRoot
-                },
-                children: formatMentionText(comment.body, comment.mentioned_users, isNative, '#00bcd4', this.props.currentUser)
-              }), attachmentUrl && /*#__PURE__*/jsx(Attachment, {
-                attachmentUrl: attachmentUrl,
-                attachmentSize: attachmentSize,
-                size: "small"
-              })]
-            })]
-          })]
-        }), this.state.openDeleteDialog && /*#__PURE__*/jsx(ConfirmationDialog, {
-          open: this.state.openDeleteDialog,
-          text: "Do you really want to delete comment?",
-          handleClose: function handleClose() {
-            return _this2.setState({
-              openDeleteDialog: false
-            });
-          },
-          handleOk: this.handleDelete,
-          okText: "Delete"
-        })]
-      });
-    }
-  }, {
-    key: "isCurrentUserCommentCreator",
-    get: function get$1() {
-      return Number(get(this.props.comment, ['user', 'id'])) === Number(this.props.currentUser.id);
-    }
-  }]);
-
-  return Comment;
-}(PureComponent);
-
-Comment.propTypes = {
-  comment: PropTypes.shape({}).isRequired,
-  showOnMount: PropTypes.bool,
-  spaceAround: PropTypes.bool,
-  handleShowOnMount: PropTypes.func,
-  handleEdit: PropTypes.func,
-  handleDeleteCallback: PropTypes.func.isRequired,
-  patchCommentCallback: PropTypes.func.isRequired,
-  companyId: PropTypes.number,
-  currentUser: PropTypes.shape(),
-  classes: PropTypes.shape({}).isRequired,
-  isNative: PropTypes.bool
-};
-Comment.defaultProps = {
-  showOnMount: false,
-  spaceAround: false,
-  handleShowOnMount: noop,
-  handleEdit: noop,
-  companyId: null,
-  isNative: isNativeDetected,
-  currentUser: {}
-};
-var Comment$1 = withStyles(muiStyles)(Comment);
-
-export default Comment$1;
-//# sourceMappingURL=index.js.map
+import e from"@babel/runtime/helpers/asyncToGenerator";import t from"@babel/runtime/helpers/classCallCheck";import n from"@babel/runtime/helpers/createClass";import r from"@babel/runtime/helpers/assertThisInitialized";import o from"@babel/runtime/helpers/inherits";import i from"@babel/runtime/helpers/possibleConstructorReturn";import a from"@babel/runtime/helpers/getPrototypeOf";import s from"@babel/runtime/helpers/defineProperty";import c from"@babel/runtime/regenerator";import{createRef as m,PureComponent as l}from"react";import p from"prop-types";import u from"moment";import{get as d,includes as h,noop as f}from"lodash";import v from"classnames";import{withStyles as g}from"@material-ui/core/styles";import y from"@material-ui/core/Typography";import b from"@material-ui/core/IconButton";import C from"@material-ui/core/Menu";import D from"@material-ui/core/MenuItem";import M from"@material-ui/icons/MoreVert";import w from"@material-ui/core/colors/grey";import E from"../CommentWrapper.js";import O from"../CommentLoader.js";import I from"../CommentInput/index.js";import j from"../Avatar/index.js";import k from"../Attachment/index.js";import x from"../ConfirmationDialog.js";import A from"../UserCardPopover.js";import{formatMentionText as _}from"../UserMention/utils/index.js";import{isNativeDetected as N}from"../../utils/mobileDetect.js";import{deleteFeedItemComment as S}from"../../clients/jsonApi/index.js";import R from"../../utils/main.js";import P from"./styles.css.js";import{jsxs as T,jsx as U}from"react/jsx-runtime";function z(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function L(e){var t=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(e){return!1}}();return function(){var n,r=a(e);if(t){var o=a(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return i(this,n)}}var W={chatAvatarWrapper:{paddingTop:2,position:"absolute",top:6,left:-18},commentInfoContainer:{display:"inline-flex",alignItems:"center",width:"100%",paddingTop:5},userNameWrapper:{overflow:"hidden"},infoContainer:{display:"inline-block",verticalAlign:"top",width:"100%",paddingLeft:10}},B={commentWrapper:{width:"calc(100% - 10px)"},timeRoot:{color:w[700],float:"right",marginRight:5,marginLeft:10,fontSize:"10px"},textRoot:{marginTop:5,color:"#CCC",fontWeight:"normal",fontSize:"14px"},iconButtonRoot:{float:"right",height:40,width:40,padding:0,visibility:"hidden"},userName:{fontSize:"12px"}},q=function(i){o(p,l);var a=L(p);function p(n){var o,i;return t(this,p),o=a.call(this,n),s(r(o),"deleteComment",(i=e(c.mark((function e(t,n){var r;return c.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,S(t,n);case 3:r=e.sent,e.next=9;break;case 6:e.prev=6,e.t0=e.catch(0),console.error(e.t0);case 9:return e.abrupt("return",r);case 10:case"end":return e.stop()}}),e,null,[[0,6]])}))),function(e,t){return i.apply(this,arguments)})),s(r(o),"showIntoView",(function(){o.props.handleShowOnMount(),o.commentEl.current.scrollIntoView({block:"end"})})),s(r(o),"handleToggleActionsMenu",(function(e){var t=e.currentTarget;o.setState((function(e){return{actionsMenuAnchorEl:e.actionsMenuAnchorEl?null:t}}))})),s(r(o),"handleKeyDown",(function(e){27===e.keyCode&&o.setState({isEditing:!1}),document.removeEventListener("keydown",o.handleKeyDown,!1)})),s(r(o),"handleEditMenuItem",(function(){document.addEventListener("keydown",o.handleKeyDown,!1),o.setState({isEditing:!0},(function(){o.inputEl.current&&o.inputEl.current.focus()}))})),s(r(o),"getEditCommentProps",(function(){var e=o.props.comment,t=e.id,n=e.body,r=e.attachment;return{editFeedItemId:e.feed_activity_id,editCommentId:t,editComment:n,editAttachment:r}})),s(r(o),"onEditFinish",(function(){o.setState({isEditing:!1,isLoading:!1})})),s(r(o),"handleDeleteMenuItem",(function(){o.setState({openDeleteDialog:!0})})),s(r(o),"handleDelete",e(c.mark((function e(){var t,n,r;return c.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=o.props.comment.id,n=o.props.comment.feed_activity_id,o.setState({isLoading:!0}),e.next=5,o.deleteComment(n,t);case 5:r=e.sent,o.setState({isLoading:!1,openDeleteDialog:!1}),r&&o.props.handleDeleteCallback(t);case 8:case"end":return e.stop()}}),e)})))),o.state={actionsMenuAnchorEl:null,isLoading:!1,isEditing:!1,openDeleteDialog:!1},o.inputEl=m(),o.commentEl=m(),o}return n(p,[{key:"componentDidMount",value:function(){this.props.showOnMount&&this.showIntoView()}},{key:"isCurrentUserCommentCreator",get:function(){return Number(d(this.props.comment,["user","id"]))===Number(this.props.currentUser.id)}},{key:"renderMenuIcon",value:function(){var e=this.isCurrentUserCommentCreator,t=this.isCurrentUserCommentCreator||h(this.props.comment.allowed_actions,"destroy");return t||e?T("div",{className:P.cCommentMenu,children:[U(b,{"data-testid":"".concat("comment","_menuButton"),"aria-label":"Actions","aria-owns":this.state.actionsMenuAnchorEl?"c-comment__actions-menu":void 0,"aria-haspopup":"true",classes:{root:this.props.classes.iconButtonRoot},onClick:this.handleToggleActionsMenu,children:U(M,{htmlColor:w[400]})}),T(C,{id:"c-comment__actions-menu",anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},anchorEl:this.state.actionsMenuAnchorEl,open:!!this.state.actionsMenuAnchorEl,onClick:this.handleToggleActionsMenu,children:[e&&U(D,{"data-testid":"".concat("comment","_editMenuItem"),onClick:this.handleEditMenuItem,children:"Edit"}),t&&U(D,{"data-testid":"".concat("comment","_deleteMenuItem"),onClick:this.handleDeleteMenuItem,children:"Delete"})]})]}):null}},{key:"render",value:function(){var e,t,n=this,r=this.state,o=r.isLoading,i=r.isEditing;if(o){var a=this.props.spaceAround;return U(O,{spaceAround:a})}var c=this.props,m=c.comment,l=c.classes,p=c.spaceAround,h=c.isNative,g=c.patchCommentCallback,b=c.companyId;if(i)return U(I,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?z(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):z(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({inputRef:this.inputEl,postComment:f,exitEditMode:this.onEditFinish,setIsEditting:function(){return n.setState({isLoading:!0})},patchCommentCallback:g,companyId:b},this.getEditCommentProps()));var C=R.getUserFullName(m.user),D=h?"MM/DD HH:mm":"MM/DD/YY HH:mm",M=u(m.created_at).format(D),w=(null==m||null===(e=m.attachment)||void 0===e?void 0:e.signed_url)||(null==m||null===(t=m.attachment)||void 0===t?void 0:t.url),N=d(m,["attachment","size"]);return T("div",{"data-testid":"".concat("comment","_commentItem_").concat(m.body),className:v(P.cComment,s({},P.cCommentNative,h)),ref:this.commentEl,children:[T(E,{spaceAround:p,className:this.props.classes.commentWrapper,children:[U("div",{style:W.chatAvatarWrapper,children:h?U(j,{size:26,displayName:C,imgSrc:d(m,["user","profile_photo"]),className:this.props.classes.avatar}):U(A,{user:m.user,currentUser:this.props.currentUser,children:U(j,{size:26,displayName:C,imgSrc:d(m,["user","profile_photo"]),className:this.props.classes.avatar})})}),T("div",{style:W.infoContainer,children:[U("div",{children:T("div",{style:W.commentInfoContainer,children:[U("div",{style:W.userNameWrapper,children:U(y,{"data-testid":"".concat("comment","_userName"),variant:"subtitle2",noWrap:!0,className:l.userName,children:C})}),U("div",{style:W.timeWrapper,children:U(y,{"data-testid":"".concat("comment","_addTime"),variant:"caption",classes:{root:l.timeRoot},children:M})})]})}),T("div",{className:P.cCommentBody,children:[this.renderMenuIcon(),U(y,{"data-testid":"".concat("comment","_commentMessage"),variant:"body1",classes:{root:l.textRoot},children:_(m.body,m.mentioned_users,h,"#00bcd4",this.props.currentUser)}),w&&U(k,{attachmentUrl:w,attachmentSize:N,size:"small"})]})]})]}),this.state.openDeleteDialog&&U(x,{open:this.state.openDeleteDialog,text:"Do you really want to delete comment?",handleClose:function(){return n.setState({openDeleteDialog:!1})},handleOk:this.handleDelete,okText:"Delete"})]})}}]),p}();q.propTypes={comment:p.shape({}).isRequired,showOnMount:p.bool,spaceAround:p.bool,handleShowOnMount:p.func,handleEdit:p.func,handleDeleteCallback:p.func.isRequired,patchCommentCallback:p.func.isRequired,companyId:p.number,currentUser:p.shape(),classes:p.shape({}).isRequired,isNative:p.bool},q.defaultProps={showOnMount:!1,spaceAround:!1,handleShowOnMount:f,handleEdit:f,companyId:null,isNative:N,currentUser:{}};var F=g(B)(q);export{F as default};

package/components/Comment/styles.css.js

@@ -1,8 +1 @@
-import styleInject from '../../ext-esm/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".styles_cComment__OCVrC {\n  display: flex;\n  align-items: flex-start;\n}\n\n.styles_cCommentBody__3wau0 {\n  position: relative;\n}\n\n.styles_cCommentNative__1IZAD .styles_cCommentMenu__1P7Ia button,\n.styles_cComment__OCVrC:hover .styles_cCommentMenu__1P7Ia button {\n  visibility: visible;\n}\n\n.styles_cCommentMenu__1P7Ia {\n  position: absolute;\n  right: -30px;\n  top: -12px;\n}\n";
-var styles = {"cComment":"styles_cComment__OCVrC","cCommentBody":"styles_cCommentBody__3wau0","cCommentNative":"styles_cCommentNative__1IZAD","cCommentMenu":"styles_cCommentMenu__1P7Ia"};
-styleInject(css_248z);
-
-export default styles;
-//# sourceMappingURL=styles.css.js.map
+import e from'./../../ext-esm/style-inject/dist/style-inject.es.js';var t={cComment:"styles_cComment__YNkXC",cCommentBody:"styles_cCommentBody__9DkEd",cCommentNative:"styles_cCommentNative__lh-sb",cCommentMenu:"styles_cCommentMenu__XRA2A"};e(".styles_cComment__YNkXC{align-items:flex-start;display:flex}.styles_cCommentBody__9DkEd{position:relative}.styles_cCommentNative__lh-sb .styles_cCommentMenu__XRA2A button,.styles_cComment__YNkXC:hover .styles_cCommentMenu__XRA2A button{visibility:visible}.styles_cCommentMenu__XRA2A{position:absolute;right:-30px;top:-12px}");export{t as default};