@corva/ui 0.34.0-rc.3 → 0.34.0

package/components/Annotations/components/AnnotationsList/components/AnnotationComments/index.js

@@ -1,270 +1 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import { postAnnotationComment, getAnnotationComments } from '../../../../../../clients/jsonApi/index.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button, Typography } from '@material-ui/core';
-import { useRef, useState, useEffect } from 'react';
-import { string, bool, number, func, shape } from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import LoadingIndicator from '../../../../../LoadingIndicator/LoadingIndicator.js';
-import CommentInput from '../../../../../CommentInput/index.js';
-import CommentLoader from '../../../../../CommentLoader.js';
-import Comment from '../../../../../Comment/index.js';
-import styles from './style.css.js';
-
-var PAGE_NAME = 'annotationComments';
-var INITIAL_VISIBLE_COMMENTS_COUNT = 3;
-var MORE_COMMENTS_FIRST_INCREMENT = 7;
-var MORE_COMMENTS_INCREMENT = 10;
-var muiStyles = {
-  showMore: {
-    textTransform: 'none',
-    backgroundColor: 'transparent!important',
-    padding: 0
-  }
-};
-
-var AnnotationComments = function AnnotationComments(_ref) {
-  var annotationId = _ref.annotationId,
-      commentInputIsOpen = _ref.commentInputIsOpen,
-      commentsCount = _ref.commentsCount,
-      setCommentsCount = _ref.setCommentsCount,
-      initialCommentsCount = _ref.initialCommentsCount,
-      classes = _ref.classes,
-      assetCompanyId = _ref.assetCompanyId,
-      currentUser = _ref.currentUser;
-  var inputRef = useRef();
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      comments = _useState2[0],
-      setComments = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isLoading = _useState4[0],
-      setIsLoading = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isPosting = _useState6[0],
-      setIsPosting = _useState6[1];
-
-  var _useState7 = useState(1),
-      _useState8 = _slicedToArray(_useState7, 2),
-      nextPageToRequest = _useState8[0],
-      setNextPageToRequest = _useState8[1];
-
-  var _useState9 = useState(INITIAL_VISIBLE_COMMENTS_COUNT),
-      _useState10 = _slicedToArray(_useState9, 2),
-      visibleCommentsСount = _useState10[0],
-      setVisibleCommentsCount = _useState10[1];
-
-  var activateInput = function activateInput() {
-    var current = inputRef.current;
-
-    if (current) {
-      current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'start'
-      });
-      current.focus();
-    }
-  };
-
-  var postCommentCallback = function postCommentCallback(comment) {
-    setComments([comment].concat(_toConsumableArray(comments)));
-    setCommentsCount(commentsCount + 1);
-  };
-
-  var patchCommentCallback = function patchCommentCallback(comment) {
-    var commentIndex = comments.findIndex(function (_ref2) {
-      var id = _ref2.id;
-      return id === comment.id;
-    });
-
-    var updatedComments = _toConsumableArray(comments);
-
-    updatedComments.splice(commentIndex, 1, comment);
-    setComments(updatedComments);
-  };
-
-  var deleteCommentCallback = function deleteCommentCallback(commentId) {
-    setComments(comments.filter(function (_ref3) {
-      var id = _ref3.id;
-      return id !== commentId;
-    }));
-    setCommentsCount(commentsCount - 1);
-  };
-
-  useEffect(function () {
-    function handleFetchComments() {
-      return _handleFetchComments.apply(this, arguments);
-    }
-
-    function _handleFetchComments() {
-      _handleFetchComments = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var response;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (annotationId) {
-                  _context.next = 2;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 2:
-                setIsLoading(true);
-                _context.prev = 3;
-                _context.next = 6;
-                return getAnnotationComments(annotationId, {
-                  page: nextPageToRequest,
-                  per_page: INITIAL_VISIBLE_COMMENTS_COUNT,
-                  order: 'desc'
-                });
-
-              case 6:
-                response = _context.sent;
-                setComments(response);
-                _context.next = 13;
-                break;
-
-              case 10:
-                _context.prev = 10;
-                _context.t0 = _context["catch"](3);
-                console.error(_context.t0);
-
-              case 13:
-                setIsLoading(false);
-
-              case 14:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[3, 10]]);
-      }));
-      return _handleFetchComments.apply(this, arguments);
-    }
-
-    handleFetchComments();
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  var handleShowMoreComments = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var isFirstIncrement, perPage, response;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              setIsLoading(true);
-              isFirstIncrement = visibleCommentsСount === INITIAL_VISIBLE_COMMENTS_COUNT;
-              perPage = isFirstIncrement ? MORE_COMMENTS_FIRST_INCREMENT : MORE_COMMENTS_INCREMENT;
-              setVisibleCommentsCount(perPage + visibleCommentsСount);
-              _context2.prev = 4;
-              _context2.next = 7;
-              return getAnnotationComments(annotationId, {
-                page: isFirstIncrement ? 1 : nextPageToRequest,
-                per_page: perPage,
-                order: 'desc',
-                offset: nextPageToRequest === 1 ? comments.length : MORE_COMMENTS_INCREMENT + (commentsCount - initialCommentsCount)
-              });
-
-            case 7:
-              response = _context2.sent;
-              setComments([].concat(_toConsumableArray(comments), _toConsumableArray(response)));
-              if (!isFirstIncrement) setNextPageToRequest(nextPageToRequest + 1);
-              _context2.next = 15;
-              break;
-
-            case 12:
-              _context2.prev = 12;
-              _context2.t0 = _context2["catch"](4);
-              console.error(_context2.t0);
-
-            case 15:
-              setIsLoading(false);
-
-            case 16:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, null, [[4, 12]]);
-    }));
-
-    return function handleShowMoreComments() {
-      return _ref4.apply(this, arguments);
-    };
-  }(); // NOTE: Slice and show recent comments last
-
-
-  var commentsToDisplay = comments.slice(0, visibleCommentsСount).reverse();
-  var showShowMore = commentsCount > visibleCommentsСount;
-  if (isLoading && !comments.length) return /*#__PURE__*/jsx(LoadingIndicator, {
-    fullscreen: false
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: styles.cAnnotationCommentsList,
-    children: [showShowMore && /*#__PURE__*/jsx(Button, {
-      "data-testid": "".concat(PAGE_NAME, "_viewMoreComments"),
-      className: classes.showMore,
-      onClick: handleShowMoreComments,
-      children: /*#__PURE__*/jsx(Typography, {
-        variant: "caption",
-        color: "primary",
-        children: "View more comments"
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: styles.cAnnotationCommentsListItems,
-      children: [isLoading && comments.length && /*#__PURE__*/jsx(LoadingIndicator, {
-        fullscreen: false,
-        size: 30
-      }), commentsToDisplay.map(function (c) {
-        return /*#__PURE__*/jsx(Comment, {
-          comment: c,
-          handleDeleteCallback: deleteCommentCallback,
-          patchCommentCallback: patchCommentCallback,
-          companyId: assetCompanyId,
-          currentUser: currentUser
-        }, c.id);
-      })]
-    }), isPosting && /*#__PURE__*/jsx(CommentLoader, {
-      spaceAround: true
-    }), commentInputIsOpen && /*#__PURE__*/jsx("div", {
-      className: styles.cAnnotationCommentsListInput,
-      children: /*#__PURE__*/jsx(CommentInput, {
-        inputRef: inputRef,
-        postComment: function postComment(comment) {
-          return postAnnotationComment(annotationId, comment);
-        },
-        setIsPosting: setIsPosting,
-        postCommentCallback: postCommentCallback,
-        onMount: activateInput,
-        companyId: assetCompanyId,
-        currentUser: currentUser
-      })
-    })]
-  });
-};
-
-AnnotationComments.propTypes = {
-  annotationId: string.isRequired,
-  commentInputIsOpen: bool.isRequired,
-  commentsCount: number.isRequired,
-  initialCommentsCount: number.isRequired,
-  setCommentsCount: func.isRequired,
-  classes: shape().isRequired,
-  assetCompanyId: number.isRequired,
-  currentUser: shape({}).isRequired
-};
-var AnnotationComments$1 = withStyles(muiStyles)(AnnotationComments);
-
-export default AnnotationComments$1;
-//# sourceMappingURL=index.js.map
+import e from"@babel/runtime/helpers/asyncToGenerator";import n from"@babel/runtime/helpers/toConsumableArray";import t from"@babel/runtime/helpers/slicedToArray";import r from"@babel/runtime/regenerator";import{useRef as o,useState as s,useEffect as i}from"react";import{string as a,bool as c,number as m,func as u,shape as p}from"prop-types";import{withStyles as l}from"@material-ui/core/styles";import{Button as d,Typography as f}from"@material-ui/core";import{getAnnotationComments as C,postAnnotationComment as h}from"../../../../../../clients/jsonApi/index.js";import v from"../../../../../LoadingIndicator/LoadingIndicator.js";import b from"../../../../../CommentInput/index.js";import I from"../../../../../CommentLoader.js";import y from"../../../../../Comment/index.js";import x from"./style.css.js";import{jsx as g,jsxs as k}from"react/jsx-runtime";var w=function(a){var c=a.annotationId,m=a.commentInputIsOpen,u=a.commentsCount,p=a.setCommentsCount,l=a.initialCommentsCount,w=a.classes,R=a.assetCompanyId,j=a.currentUser,q=o(),A=s([]),L=t(A,2),M=L[0],N=L[1],T=s(!1),U=t(T,2),_=U[0],O=U[1],V=s(!1),z=t(V,2),D=z[0],G=z[1],P=s(1),B=t(P,2),E=B[0],F=B[1],H=s(3),J=t(H,2),K=J[0],Q=J[1],S=function(e){var t=M.findIndex((function(n){return n.id===e.id})),r=n(M);r.splice(t,1,e),N(r)},W=function(e){N(M.filter((function(n){return n.id!==e}))),p(u-1)};i((function(){function n(){return(n=e(r.mark((function e(){var n;return r.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(c){e.next=2;break}return e.abrupt("return");case 2:return O(!0),e.prev=3,e.next=6,C(c,{page:E,per_page:3,order:"desc"});case 6:n=e.sent,N(n),e.next=13;break;case 10:e.prev=10,e.t0=e.catch(3),console.error(e.t0);case 13:O(!1);case 14:case"end":return e.stop()}}),e,null,[[3,10]])})))).apply(this,arguments)}!function(){n.apply(this,arguments)}()}),[]);var X,Y=(X=e(r.mark((function e(){var t,o,s;return r.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return O(!0),Q((o=(t=3===K)?7:10)+K),e.prev=4,e.next=7,C(c,{page:t?1:E,per_page:o,order:"desc",offset:1===E?M.length:u-l+10});case 7:s=e.sent,N([].concat(n(M),n(s))),t||F(E+1),e.next=15;break;case 12:e.prev=12,e.t0=e.catch(4),console.error(e.t0);case 15:O(!1);case 16:case"end":return e.stop()}}),e,null,[[4,12]])}))),function(){return X.apply(this,arguments)}),Z=M.slice(0,K).reverse(),$=u>K;return _&&!M.length?g(v,{fullscreen:!1}):k("div",{className:x.cAnnotationCommentsList,children:[$&&g(d,{"data-testid":"".concat("annotationComments","_viewMoreComments"),className:w.showMore,onClick:Y,children:g(f,{variant:"caption",color:"primary",children:"View more comments"})}),k("div",{className:x.cAnnotationCommentsListItems,children:[_&&M.length&&g(v,{fullscreen:!1,size:30}),Z.map((function(e){return g(y,{comment:e,handleDeleteCallback:W,patchCommentCallback:S,companyId:R,currentUser:j},e.id)}))]}),D&&g(I,{spaceAround:!0}),m&&g("div",{className:x.cAnnotationCommentsListInput,children:g(b,{inputRef:q,postComment:function(e){return h(c,e)},setIsPosting:G,postCommentCallback:function(e){N([e].concat(n(M))),p(u+1)},onMount:function(){var e=q.current;e&&(e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"start"}),e.focus())},companyId:R,currentUser:j})})]})};w.propTypes={annotationId:a.isRequired,commentInputIsOpen:c.isRequired,commentsCount:m.isRequired,initialCommentsCount:m.isRequired,setCommentsCount:u.isRequired,classes:p().isRequired,assetCompanyId:m.isRequired,currentUser:p({}).isRequired};var R=l({showMore:{textTransform:"none",backgroundColor:"transparent!important",padding:0}})(w);export{R as default};

package/components/Annotations/components/AnnotationsList/components/AnnotationComments/style.css.js

@@ -1,8 +1 @@
-import styleInject from '../../../../../../ext-esm/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".style_cAnnotationCommentsList__2Sdol {\n  margin-top: 5px;\n}\n\n.style_cAnnotationCommentsListItems__3F9Uj {\n  margin-bottom: 5px;\n  padding: 0 0 5px 19px;\n}\n\n.style_cAnnotationCommentsListInput__rGUJu {\n  margin-left: 18px;\n  padding-bottom: 15px;\n}\n\n.style_cAnnotationCommentsListInput__rGUJu .c-user-mention {\n  font-size: 14px;\n}\n";
-var styles = {"cAnnotationCommentsList":"style_cAnnotationCommentsList__2Sdol","cAnnotationCommentsListItems":"style_cAnnotationCommentsListItems__3F9Uj","cAnnotationCommentsListInput":"style_cAnnotationCommentsListInput__rGUJu"};
-styleInject(css_248z);
-
-export default styles;
-//# sourceMappingURL=style.css.js.map
+import t from'./../../../../../../ext-esm/style-inject/dist/style-inject.es.js';var n={cAnnotationCommentsList:"style_cAnnotationCommentsList__QB1u0",cAnnotationCommentsListItems:"style_cAnnotationCommentsListItems__M9gf7",cAnnotationCommentsListInput:"style_cAnnotationCommentsListInput__jsIk6"};t(".style_cAnnotationCommentsList__QB1u0{margin-top:5px}.style_cAnnotationCommentsListItems__M9gf7{margin-bottom:5px;padding:0 0 5px 19px}.style_cAnnotationCommentsListInput__jsIk6{margin-left:18px;padding-bottom:15px}.style_cAnnotationCommentsListInput__jsIk6 .c-user-mention{font-size:14px}");export{n as default};

package/components/Annotations/components/AnnotationsList/components/AnnotationInput/StyledSelect.js

@@ -1,42 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { jsx } from 'react/jsx-runtime';
-import { Select } from '@material-ui/core';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-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; }
-var muiStyles = {
-  rootParent: {
-    overflow: 'hidden'
-  },
-  root: {
-    fontSize: '10px',
-    lineHeight: '12px'
-  },
-  select: {
-    padding: '0 40px 0 0'
-  }
-};
-
-function StyledSelect(_ref) {
-  var classes = _ref.classes,
-      props = _objectWithoutProperties(_ref, ["classes"]);
-
-  return /*#__PURE__*/jsx(Select, _objectSpread({
-    classes: classes,
-    className: classes.rootParent
-  }, props));
-}
-
-StyledSelect.propTypes = {
-  classes: PropTypes.shape().isRequired
-};
-var StyledSelect$1 = withStyles(muiStyles, {
-  withTheme: true
-})(StyledSelect);
-
-export default StyledSelect$1;
-//# sourceMappingURL=StyledSelect.js.map
+import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/objectWithoutProperties";import t from"prop-types";import{Select as o}from"@material-ui/core";import{withStyles as i}from"@material-ui/core/styles";import{jsx as n}from"react/jsx-runtime";var p=["classes"];function s(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function c(t){var i=t.classes,c=r(t,p);return n(o,function(r){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?s(Object(o),!0).forEach((function(t){e(r,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):s(Object(o)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}))}return r}({classes:i,className:i.rootParent},c))}c.propTypes={classes:t.shape().isRequired};var a=i({rootParent:{overflow:"hidden"},root:{fontSize:"10px",lineHeight:"12px"},select:{padding:"0 40px 0 0"}},{withTheme:!0})(c);export{a as default};

package/components/Annotations/components/AnnotationsList/components/AnnotationInput/index.js

@@ -1,307 +1 @@
-import moment from 'moment';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import grey from '@material-ui/core/colors/grey';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Paper, Input, Tooltip, FormControl, InputLabel, MenuItem, Typography, IconButton } from '@material-ui/core';
-import { useState } from 'react';
-import useEscPress from '../../../../../../effects/useEscPress.js';
-import { string, shape, func, bool, number } from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { ANNOTATION_ACTIVE_PERIODS } from '../../../../constants.js';
-import SendIcon from '@material-ui/icons/Send';
-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 StyledSelect from './StyledSelect.js';
-import styles from './style.css.js';
-
-var PAGE_NAME = 'AppAnnotationsPo';
-var ANNOTATION_ACTIVE_PERIODS_KEYS = Object.keys(ANNOTATION_ACTIVE_PERIODS);
-var ANNOTATION_PLACEHOLDER = 'Type annotation here';
-
-var muiStyles = function muiStyles(theme) {
-  return {
-    inputLabel: {
-      color: theme.palette.grey[700],
-      fontWeight: 200,
-      width: '100%'
-    },
-    inputRoot: {
-      lineHeight: 15
-    },
-    sendLabel: {
-      display: 'flex',
-      alignItems: 'center',
-      fontWeight: 200,
-      color: theme.palette.grey[700],
-      marginRight: 22,
-      fontSize: 10
-    },
-    sendButton: {
-      padding: 5
-    },
-    labelHighlighter: {
-      fontWeight: 200,
-      fontSize: 10
-    },
-    selectLabel: {
-      fontSize: 10,
-      lineHeight: '14px',
-      color: theme.palette.grey[500]
-    },
-    uploadingError: {
-      paddingTop: '10px'
-    }
-  };
-};
-
-var getAnnotationActiveUntil = function getAnnotationActiveUntil(value, initialPeriod) {
-  if (value === 'forever') return null;
-  var period = ANNOTATION_ACTIVE_PERIODS[value];
-  return moment(initialPeriod).add(period.time.amount, period.time.key).format();
-};
-
-var AnnotationInput = function AnnotationInput(_ref) {
-  var initialText = _ref.initialText,
-      initialPeriod = _ref.initialPeriod,
-      onSend = _ref.onSend,
-      onClose = _ref.onClose,
-      closeOnEsc = _ref.closeOnEsc,
-      classes = _ref.classes,
-      initialAttachment = _ref.initialAttachment,
-      assetCompanyId = _ref.assetCompanyId,
-      currentUser = _ref.currentUser;
-
-  var _useState = useState(initialText),
-      _useState2 = _slicedToArray(_useState, 2),
-      annotationText = _useState2[0],
-      setAnnotationText = _useState2[1];
-
-  var _useState3 = useState(function () {
-    return initialAttachment ? {
-      attachmentName: initialAttachment.file_name,
-      attachmentUrl: initialAttachment.s3_link
-    } : null;
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      attachment = _useState4[0],
-      setAttachment = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      uploadError = _useState6[0],
-      setUploadError = _useState6[1];
-
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isShiftKeyDown = _useState8[0],
-      setIsShiftKeyDown = _useState8[1];
-
-  var _useState9 = useState(ANNOTATION_ACTIVE_PERIODS_KEYS[0]),
-      _useState10 = _slicedToArray(_useState9, 2),
-      period = _useState10[0],
-      setPeriod = _useState10[1];
-
-  useEscPress(function () {
-    if (closeOnEsc) onClose();
-  });
-
-  var handleSend = function handleSend() {
-    if (annotationText) {
-      var formattedPeriod = getAnnotationActiveUntil(period, initialPeriod);
-      onSend(annotationText, formattedPeriod, attachment);
-    }
-  };
-
-  var handlePeriodChange = function handlePeriodChange(e) {
-    return setPeriod(e.target.value);
-  };
-
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Shift') setIsShiftKeyDown(true);
-
-    if (e.key === 'Enter' && !isShiftKeyDown && !isSuggestionsListOpened()) {
-      e.preventDefault(); // NOTE: Don't add linebreak to the post
-
-      handleSend();
-    }
-  };
-
-  var handleKeyUp = function handleKeyUp(e) {
-    if (e.key === 'Shift') setIsShiftKeyDown(false);
-  };
-
-  var handleSelectEmoji = function handleSelectEmoji(emoji) {
-    return setAnnotationText("".concat(annotationText).concat(emoji.native));
-  };
-
-  var handleAnnotationTextChange = function handleAnnotationTextChange(text) {
-    return setAnnotationText(text);
-  };
-
-  var onFileUploaded = function onFileUploaded(attachmentUrl, attachmentName, attachmentSize) {
-    setAttachment({
-      attachmentUrl: attachmentUrl,
-      attachmentName: attachmentName,
-      attachmentSize: attachmentSize
-    });
-    setUploadError(null);
-  };
-
-  var onUploadingError = function onUploadingError(error) {
-    setAttachment(null);
-    setUploadError(error);
-  };
-
-  var onAttachmentDelete = function onAttachmentDelete() {
-    setAttachment(null);
-    setUploadError(null);
-  };
-
-  return /*#__PURE__*/jsxs("div", {
-    className: styles.cAnnotationInput,
-    children: [/*#__PURE__*/jsxs(Paper, {
-      className: styles.cAnnotationInputContent,
-      children: [/*#__PURE__*/jsx(Input, {
-        "data-testid": "".concat(PAGE_NAME, "_annotationsInput"),
-        inputComponent: UserMention,
-        inputProps: {
-          withLightTheme: false,
-          onChange: handleAnnotationTextChange,
-          onKeyDown: handleKeyDown,
-          onKeyUp: handleKeyUp,
-          companyId: assetCompanyId,
-          currentUser: currentUser
-        },
-        placeholder: ANNOTATION_PLACEHOLDER,
-        fullWidth: true,
-        disableUnderline: true,
-        multiline: true,
-        rows: "3",
-        className: classes.inputRoot,
-        value: annotationText
-      }), /*#__PURE__*/jsxs("div", {
-        className: styles.cAnnotationInputContentActions,
-        children: [/*#__PURE__*/jsx(Tooltip, {
-          title: "Attach File",
-          placement: "bottom",
-          children: /*#__PURE__*/jsx("div", {
-            className: styles.cAnnotationInputContentActionsButton,
-            children: /*#__PURE__*/jsx(FileUploadIconButton, {
-              "data-testid": "".concat(PAGE_NAME, "_attachFileButton"),
-              openPreviewDialogOnUpload: false,
-              disableRipple: true,
-              onFinish: onFileUploaded,
-              onError: onUploadingError,
-              htmlColor: "action"
-            })
-          })
-        }), /*#__PURE__*/jsx(Tooltip, {
-          title: "Add Emoji",
-          placement: "bottom",
-          children: /*#__PURE__*/jsx("div", {
-            className: styles.cAnnotationInputContentActionsButton,
-            children: /*#__PURE__*/jsx(EmojiIconButton, {
-              "data-testid": "".concat(PAGE_NAME, "_emojiButton"),
-              htmlColor: grey[400],
-              handleSelectEmoji: handleSelectEmoji
-            })
-          })
-        })]
-      })]
-    }), uploadError && /*#__PURE__*/jsx(FailedFileUploading, {
-      className: classes.uploadingError,
-      errorMessage: uploadError
-    }), attachment && attachment.attachmentUrl && /*#__PURE__*/jsx(FilePreview, {
-      fileName: attachment.attachmentName,
-      fileUrl: attachment.attachmentUrl,
-      handleFileDelete: onAttachmentDelete
-    }), /*#__PURE__*/jsxs("div", {
-      className: styles.cAnnotationInputActions,
-      children: [/*#__PURE__*/jsxs(FormControl, {
-        className: classes.formControl,
-        children: [/*#__PURE__*/jsx(InputLabel, {
-          shrink: true,
-          id: "periods-label-label",
-          className: classes.selectLabel,
-          children: "Active"
-        }), /*#__PURE__*/jsx(StyledSelect, {
-          "data-testid": "".concat(PAGE_NAME, "_periodDropdown"),
-          labelId: "periods-label-label",
-          id: "periods-label",
-          value: period,
-          disableUnderline: true,
-          onChange: handlePeriodChange,
-          children: ANNOTATION_ACTIVE_PERIODS_KEYS.map(function (key) {
-            return /*#__PURE__*/jsx(MenuItem, {
-              "data-testid": "".concat(PAGE_NAME, "_period_").concat(ANNOTATION_ACTIVE_PERIODS[key].label, "MenuItem"),
-              value: key,
-              children: ANNOTATION_ACTIVE_PERIODS[key].label
-            }, key);
-          })
-        })]
-      }), /*#__PURE__*/jsxs("div", {
-        className: styles.cAnnotationInputActionsSend,
-        children: [/*#__PURE__*/jsxs(Typography, {
-          variant: "caption",
-          className: classes.sendLabel,
-          children: ["Press\xA0", /*#__PURE__*/jsx(Typography, {
-            variant: "caption",
-            color: "primary",
-            component: "span",
-            className: classes.labelHighlighter,
-            children: "Enter\xA0"
-          }), "to send\xA0"]
-        }), /*#__PURE__*/jsx(Tooltip, {
-          title: "Send",
-          placement: "bottom",
-          children: /*#__PURE__*/jsx("div", {
-            children: /*#__PURE__*/jsx(IconButton, {
-              "data-testid": "".concat(PAGE_NAME, "_sendButton"),
-              className: classes.sendButton,
-              onClick: handleSend,
-              disabled: !annotationText,
-              children: /*#__PURE__*/jsx(SendIcon, {
-                color: "primary"
-              })
-            })
-          })
-        })]
-      })]
-    })]
-  });
-};
-
-AnnotationInput.propTypes = {
-  initialText: string,
-  initialPeriod: string,
-  initialAttachment: shape({
-    file_name: string,
-    s3_link: string
-  }),
-  onSend: func,
-  onClose: func,
-  closeOnEsc: bool,
-  assetCompanyId: number.isRequired,
-  currentUser: shape().isRequired,
-  classes: shape().isRequired
-};
-AnnotationInput.defaultProps = {
-  initialText: '',
-  initialPeriod: undefined,
-  initialAttachment: null,
-  onSend: function onSend() {
-    return undefined;
-  },
-  onClose: function onClose() {
-    return undefined;
-  },
-  closeOnEsc: false
-};
-var AnnotationInput$1 = withStyles(muiStyles)(AnnotationInput);
-
-export default AnnotationInput$1;
-//# sourceMappingURL=index.js.map
+import t from"@babel/runtime/helpers/slicedToArray";import{useState as e}from"react";import n from"moment";import{string as i,shape as o,func as a,bool as l,number as r}from"prop-types";import{withStyles as c}from"@material-ui/core/styles";import{Paper as s,Input as m,Tooltip as d,FormControl as p,InputLabel as u,MenuItem as f,Typography as h,IconButton as g}from"@material-ui/core";import v from"@material-ui/icons/Send";import b from"@material-ui/core/colors/grey";import y from"../../../../../UserMention/index.js";import A from"../../../../../EmojiIconButton.js";import N from"../../../../../FileUploadIconButton.js";import j from"../../../../../FailedFileUploading.js";import C from"../../../../../FilePreview/index.js";import{isSuggestionsListOpened as I}from"../../../../../UserMention/utils/index.js";import U from"../../../../../../effects/useEscPress.js";import{ANNOTATION_ACTIVE_PERIODS as S}from"../../../../constants.js";import E from"./StyledSelect.js";import x from"./style.css.js";import{jsxs as _,jsx as P}from"react/jsx-runtime";var k="AppAnnotationsPo",B=Object.keys(S),F=function(i){var o=i.initialText,a=i.initialPeriod,l=i.onSend,r=i.onClose,c=i.closeOnEsc,F=i.classes,T=i.initialAttachment,w=i.assetCompanyId,R=i.currentUser,L=e(o),D=t(L,2),O=D[0],z=D[1],H=e((function(){return T?{attachmentName:T.file_name,attachmentUrl:T.s3_link}:null})),M=t(H,2),W=M[0],q=M[1],K=e(null),G=t(K,2),J=G[0],Q=G[1],V=e(!1),X=t(V,2),Y=X[0],Z=X[1],$=e(B[0]),tt=t($,2),et=tt[0],nt=tt[1];U((function(){c&&r()}));var it=function(){if(O){var t=function(t,e){if("forever"===t)return null;var i=S[t];return n(e).add(i.time.amount,i.time.key).format()}(et,a);l(O,t,W)}};return _("div",{className:x.cAnnotationInput,children:[_(s,{className:x.cAnnotationInputContent,children:[P(m,{"data-testid":"".concat(k,"_annotationsInput"),inputComponent:y,inputProps:{withLightTheme:!1,onChange:function(t){return z(t)},onKeyDown:function(t){"Shift"===t.key&&Z(!0),"Enter"!==t.key||Y||I()||(t.preventDefault(),it())},onKeyUp:function(t){"Shift"===t.key&&Z(!1)},companyId:w,currentUser:R},placeholder:"Type annotation here",fullWidth:!0,disableUnderline:!0,multiline:!0,rows:"3",className:F.inputRoot,value:O}),_("div",{className:x.cAnnotationInputContentActions,children:[P(d,{title:"Attach File",placement:"bottom",children:P("div",{className:x.cAnnotationInputContentActionsButton,children:P(N,{"data-testid":"".concat(k,"_attachFileButton"),openPreviewDialogOnUpload:!1,disableRipple:!0,onFinish:function(t,e,n){q({attachmentUrl:t,attachmentName:e,attachmentSize:n}),Q(null)},onError:function(t){q(null),Q(t)},htmlColor:"action"})})}),P(d,{title:"Add Emoji",placement:"bottom",children:P("div",{className:x.cAnnotationInputContentActionsButton,children:P(A,{"data-testid":"".concat(k,"_emojiButton"),htmlColor:b[400],handleSelectEmoji:function(t){return z("".concat(O).concat(t.native))}})})})]})]}),J&&P(j,{className:F.uploadingError,errorMessage:J}),W&&W.attachmentUrl&&P(C,{fileName:W.attachmentName,fileUrl:W.attachmentUrl,handleFileDelete:function(){q(null),Q(null)}}),_("div",{className:x.cAnnotationInputActions,children:[_(p,{className:F.formControl,children:[P(u,{shrink:!0,id:"periods-label-label",className:F.selectLabel,children:"Active"}),P(E,{"data-testid":"".concat(k,"_periodDropdown"),labelId:"periods-label-label",id:"periods-label",value:et,disableUnderline:!0,onChange:function(t){return nt(t.target.value)},children:B.map((function(t){return P(f,{"data-testid":"".concat(k,"_period_").concat(S[t].label,"MenuItem"),value:t,children:S[t].label},t)}))})]}),_("div",{className:x.cAnnotationInputActionsSend,children:[_(h,{variant:"caption",className:F.sendLabel,children:["Press ",P(h,{variant:"caption",color:"primary",component:"span",className:F.labelHighlighter,children:"Enter "}),"to send "]}),P(d,{title:"Send",placement:"bottom",children:P("div",{children:P(g,{"data-testid":"".concat(k,"_sendButton"),className:F.sendButton,onClick:it,disabled:!O,children:P(v,{color:"primary"})})})})]})]})]})};F.propTypes={initialText:i,initialPeriod:i,initialAttachment:o({file_name:i,s3_link:i}),onSend:a,onClose:a,closeOnEsc:l,assetCompanyId:r.isRequired,currentUser:o().isRequired,classes:o().isRequired},F.defaultProps={initialText:"",initialPeriod:void 0,initialAttachment:null,onSend:function(){},onClose:function(){},closeOnEsc:!1};var T=c((function(t){return{inputLabel:{color:t.palette.grey[700],fontWeight:200,width:"100%"},inputRoot:{lineHeight:15},sendLabel:{display:"flex",alignItems:"center",fontWeight:200,color:t.palette.grey[700],marginRight:22,fontSize:10},sendButton:{padding:5},labelHighlighter:{fontWeight:200,fontSize:10},selectLabel:{fontSize:10,lineHeight:"14px",color:t.palette.grey[500]},uploadingError:{paddingTop:"10px"}}}))(F);export{T as default};

package/components/Annotations/components/AnnotationsList/components/AnnotationInput/style.css.js

@@ -1,8 +1 @@
-import styleInject from '../../../../../../ext-esm/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".style_cAnnotationInput__1Xf5Q {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n/* question here  */\n\n.style_cAnnotationInput__1Xf5Q .c-component-file-preview {\n  margin-left: 0;\n  width: 100%;\n}\n\n.style_cAnnotationInputContent__31kXR {\n  width: 100%;\n  height: 147px;\n  border: 2px solid #03bcd4;\n  padding: 6px 13px;\n  box-shadow: none;\n}\n\n.style_cAnnotationInputContentActions__g6D90 {\n  display: flex;\n  width: 100%;\n  justify-content: flex-end;\n}\n\n.style_cAnnotationInputContentActionsButton__1gexY {\n  display: inline-block;\n  vertical-align: top;\n}\n\n.style_cAnnotationInputActions__rg5U7 {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n}\n\n.style_cAnnotationInputActionsSend__2rNIJ {\n  display: flex;\n  align-items: center;\n}\n";
-var styles = {"cAnnotationInput":"style_cAnnotationInput__1Xf5Q","cAnnotationInputContent":"style_cAnnotationInputContent__31kXR","cAnnotationInputContentActions":"style_cAnnotationInputContentActions__g6D90","cAnnotationInputContentActionsButton":"style_cAnnotationInputContentActionsButton__1gexY","cAnnotationInputActions":"style_cAnnotationInputActions__rg5U7","cAnnotationInputActionsSend":"style_cAnnotationInputActionsSend__2rNIJ"};
-styleInject(css_248z);
-
-export default styles;
-//# sourceMappingURL=style.css.js.map
+import t from'./../../../../../../ext-esm/style-inject/dist/style-inject.es.js';var n={cAnnotationInput:"style_cAnnotationInput__yG50Z",cAnnotationInputContent:"style_cAnnotationInputContent__IiRy4",cAnnotationInputContentActions:"style_cAnnotationInputContentActions__agaLg",cAnnotationInputContentActionsButton:"style_cAnnotationInputContentActionsButton__v0-tn",cAnnotationInputActions:"style_cAnnotationInputActions__t25CL",cAnnotationInputActionsSend:"style_cAnnotationInputActionsSend__C8bHa"};t(".style_cAnnotationInput__yG50Z{display:flex;flex-direction:column;position:relative;width:100%}.style_cAnnotationInput__yG50Z .c-component-file-preview{margin-left:0;width:100%}.style_cAnnotationInputContent__IiRy4{border:2px solid #03bcd4;box-shadow:none;height:147px;padding:6px 13px;width:100%}.style_cAnnotationInputContentActions__agaLg{display:flex;justify-content:flex-end;width:100%}.style_cAnnotationInputContentActionsButton__v0-tn{display:inline-block;vertical-align:top}.style_cAnnotationInputActions__t25CL{display:flex;justify-content:space-between;margin-top:10px}.style_cAnnotationInputActionsSend__C8bHa{align-items:center;display:flex}");export{n as default};