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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/Annotations/components/AnnotationsList/components/AnnotationInput/index.js"],"sourcesContent":["import { useState } from 'react';\nimport moment from 'moment';\nimport { string, bool, shape, func, number } from 'prop-types';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport {\n  Paper,\n  Input,\n  Tooltip,\n  Typography,\n  IconButton,\n  FormControl,\n  InputLabel,\n  MenuItem,\n} from '@material-ui/core';\n\nimport SendIcon from '@material-ui/icons/Send';\nimport grey from '@material-ui/core/colors/grey';\n\nimport UserMention from '~components/UserMention';\nimport EmojiIconButton from '~components/EmojiIconButton';\nimport FileUploadIconButton from '~components/FileUploadIconButton';\nimport FailedFileUploading from '~components/FailedFileUploading';\nimport FilePreview from '~components/FilePreview';\n\nimport { isSuggestionsListOpened } from '~components/UserMention/utils';\n\nimport useEscPress from '~/effects/useEscPress';\n\nimport { ANNOTATION_ACTIVE_PERIODS } from '../../../../constants';\n\nimport StyledSelect from './StyledSelect';\nimport styles from './style.css';\n\nconst PAGE_NAME = 'AppAnnotationsPo';\n\nconst ANNOTATION_ACTIVE_PERIODS_KEYS = Object.keys(ANNOTATION_ACTIVE_PERIODS);\nconst ANNOTATION_PLACEHOLDER = 'Type annotation here';\n\nconst muiStyles = theme => ({\n  inputLabel: {\n    color: theme.palette.grey[700],\n    fontWeight: 200,\n    width: '100%',\n  },\n  inputRoot: {\n    lineHeight: 15,\n  },\n  sendLabel: {\n    display: 'flex',\n    alignItems: 'center',\n    fontWeight: 200,\n    color: theme.palette.grey[700],\n    marginRight: 22,\n    fontSize: 10,\n  },\n  sendButton: {\n    padding: 5,\n  },\n  labelHighlighter: {\n    fontWeight: 200,\n    fontSize: 10,\n  },\n  selectLabel: {\n    fontSize: 10,\n    lineHeight: '14px',\n    color: theme.palette.grey[500],\n  },\n  uploadingError: {\n    paddingTop: '10px',\n  },\n});\n\nconst getAnnotationActiveUntil = (value, initialPeriod) => {\n  if (value === 'forever') return null;\n\n  const period = ANNOTATION_ACTIVE_PERIODS[value];\n  return moment(initialPeriod).add(period.time.amount, period.time.key).format();\n};\n\nconst AnnotationInput = ({\n  initialText,\n  initialPeriod,\n  onSend,\n  onClose,\n  closeOnEsc,\n  classes,\n  initialAttachment,\n  assetCompanyId,\n  currentUser,\n}) => {\n  const [annotationText, setAnnotationText] = useState(initialText);\n  const [attachment, setAttachment] = useState(() =>\n    initialAttachment\n      ? {\n          attachmentName: initialAttachment.file_name,\n          attachmentUrl: initialAttachment.s3_link,\n        }\n      : null\n  );\n  const [uploadError, setUploadError] = useState(null);\n  const [isShiftKeyDown, setIsShiftKeyDown] = useState(false);\n  const [period, setPeriod] = useState(ANNOTATION_ACTIVE_PERIODS_KEYS[0]);\n\n  useEscPress(() => {\n    if (closeOnEsc) onClose();\n  });\n\n  const handleSend = () => {\n    if (annotationText) {\n      const formattedPeriod = getAnnotationActiveUntil(period, initialPeriod);\n      onSend(annotationText, formattedPeriod, attachment);\n    }\n  };\n\n  const handlePeriodChange = e => setPeriod(e.target.value);\n\n  const handleKeyDown = e => {\n    if (e.key === 'Shift') setIsShiftKeyDown(true);\n\n    if (e.key === 'Enter' && !isShiftKeyDown && !isSuggestionsListOpened()) {\n      e.preventDefault(); // NOTE: Don't add linebreak to the post\n      handleSend();\n    }\n  };\n\n  const handleKeyUp = e => {\n    if (e.key === 'Shift') setIsShiftKeyDown(false);\n  };\n\n  const handleSelectEmoji = emoji => setAnnotationText(`${annotationText}${emoji.native}`);\n\n  const handleAnnotationTextChange = text => setAnnotationText(text);\n\n  const onFileUploaded = (attachmentUrl, attachmentName, attachmentSize) => {\n    setAttachment({ attachmentUrl, attachmentName, attachmentSize });\n    setUploadError(null);\n  };\n\n  const onUploadingError = error => {\n    setAttachment(null);\n    setUploadError(error);\n  };\n\n  const onAttachmentDelete = () => {\n    setAttachment(null);\n    setUploadError(null);\n  };\n\n  return (\n    <div className={styles.cAnnotationInput}>\n      <Paper className={styles.cAnnotationInputContent}>\n        <Input\n          data-testid={`${PAGE_NAME}_annotationsInput`}\n          inputComponent={UserMention}\n          inputProps={{\n            withLightTheme: false,\n            onChange: handleAnnotationTextChange,\n            onKeyDown: handleKeyDown,\n            onKeyUp: handleKeyUp,\n            companyId: assetCompanyId,\n            currentUser,\n          }}\n          placeholder={ANNOTATION_PLACEHOLDER}\n          fullWidth\n          disableUnderline\n          multiline\n          rows=\"3\"\n          className={classes.inputRoot}\n          value={annotationText}\n        />\n        <div className={styles.cAnnotationInputContentActions}>\n          <Tooltip title=\"Attach File\" placement=\"bottom\">\n            <div className={styles.cAnnotationInputContentActionsButton}>\n              <FileUploadIconButton\n                data-testid={`${PAGE_NAME}_attachFileButton`}\n                openPreviewDialogOnUpload={false}\n                disableRipple\n                onFinish={onFileUploaded}\n                onError={onUploadingError}\n                htmlColor=\"action\"\n              />\n            </div>\n          </Tooltip>\n          <Tooltip title=\"Add Emoji\" placement=\"bottom\">\n            <div className={styles.cAnnotationInputContentActionsButton}>\n              <EmojiIconButton\n                data-testid={`${PAGE_NAME}_emojiButton`}\n                htmlColor={grey[400]}\n                handleSelectEmoji={handleSelectEmoji}\n              />\n            </div>\n          </Tooltip>\n        </div>\n      </Paper>\n      {uploadError && (\n        <FailedFileUploading className={classes.uploadingError} errorMessage={uploadError} />\n      )}\n      {attachment && attachment.attachmentUrl && (\n        <FilePreview\n          fileName={attachment.attachmentName}\n          fileUrl={attachment.attachmentUrl}\n          handleFileDelete={onAttachmentDelete}\n        />\n      )}\n      <div className={styles.cAnnotationInputActions}>\n        <FormControl className={classes.formControl}>\n          <InputLabel shrink id=\"periods-label-label\" className={classes.selectLabel}>\n            Active\n          </InputLabel>\n          <StyledSelect\n            data-testid={`${PAGE_NAME}_periodDropdown`}\n            labelId=\"periods-label-label\"\n            id=\"periods-label\"\n            value={period}\n            disableUnderline\n            onChange={handlePeriodChange}\n          >\n            {ANNOTATION_ACTIVE_PERIODS_KEYS.map(key => (\n              <MenuItem\n                data-testid={`${PAGE_NAME}_period_${ANNOTATION_ACTIVE_PERIODS[key].label}MenuItem`}\n                key={key}\n                value={key}\n              >\n                {ANNOTATION_ACTIVE_PERIODS[key].label}\n              </MenuItem>\n            ))}\n          </StyledSelect>\n        </FormControl>\n        <div className={styles.cAnnotationInputActionsSend}>\n          <Typography variant=\"caption\" className={classes.sendLabel}>\n            Press&nbsp;\n            <Typography\n              variant=\"caption\"\n              color=\"primary\"\n              component=\"span\"\n              className={classes.labelHighlighter}\n            >\n              Enter&nbsp;\n            </Typography>\n            to send&nbsp;\n          </Typography>\n          <Tooltip title=\"Send\" placement=\"bottom\">\n            <div>\n              {/* div to display label since button is disabled */}\n              <IconButton\n                data-testid={`${PAGE_NAME}_sendButton`}\n                className={classes.sendButton}\n                onClick={handleSend}\n                disabled={!annotationText}\n              >\n                <SendIcon color=\"primary\" />\n              </IconButton>\n            </div>\n          </Tooltip>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nAnnotationInput.propTypes = {\n  initialText: string,\n  initialPeriod: string,\n  initialAttachment: shape({\n    file_name: string,\n    s3_link: string,\n  }),\n  onSend: func,\n  onClose: func,\n  closeOnEsc: bool,\n  assetCompanyId: number.isRequired,\n  currentUser: shape().isRequired,\n\n  classes: shape().isRequired,\n};\n\nAnnotationInput.defaultProps = {\n  initialText: '',\n  initialPeriod: undefined,\n  initialAttachment: null,\n  onSend: () => undefined,\n  onClose: () => undefined,\n  closeOnEsc: false,\n};\n\nexport default withStyles(muiStyles)(AnnotationInput);\n"],"names":["PAGE_NAME","ANNOTATION_ACTIVE_PERIODS_KEYS","Object","keys","ANNOTATION_ACTIVE_PERIODS","ANNOTATION_PLACEHOLDER","muiStyles","theme","inputLabel","color","palette","grey","fontWeight","width","inputRoot","lineHeight","sendLabel","display","alignItems","marginRight","fontSize","sendButton","padding","labelHighlighter","selectLabel","uploadingError","paddingTop","getAnnotationActiveUntil","value","initialPeriod","period","moment","add","time","amount","key","format","AnnotationInput","initialText","onSend","onClose","closeOnEsc","classes","initialAttachment","assetCompanyId","currentUser","useState","annotationText","setAnnotationText","attachmentName","file_name","attachmentUrl","s3_link","attachment","setAttachment","uploadError","setUploadError","isShiftKeyDown","setIsShiftKeyDown","setPeriod","useEscPress","handleSend","formattedPeriod","handlePeriodChange","e","target","handleKeyDown","isSuggestionsListOpened","preventDefault","handleKeyUp","handleSelectEmoji","emoji","native","handleAnnotationTextChange","text","onFileUploaded","attachmentSize","onUploadingError","error","onAttachmentDelete","_jsxs","styles","cAnnotationInput","cAnnotationInputContent","_jsx","UserMention","withLightTheme","onChange","onKeyDown","onKeyUp","companyId","cAnnotationInputContentActions","cAnnotationInputContentActionsButton","cAnnotationInputActions","formControl","map","label","cAnnotationInputActionsSend","propTypes","string","shape","func","bool","number","isRequired","defaultProps","undefined","withStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,IAAMA,SAAS,GAAG,kBAAlB;AAEA,IAAMC,8BAA8B,GAAGC,MAAM,CAACC,IAAP,CAAYC,yBAAZ,CAAvC;AACA,IAAMC,sBAAsB,GAAG,sBAA/B;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,KAAK;AAAA,SAAK;AAC1BC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAEF,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmB,GAAnB,CADG;AAEVC,MAAAA,UAAU,EAAE,GAFF;AAGVC,MAAAA,KAAK,EAAE;AAHG,KADc;AAM1BC,IAAAA,SAAS,EAAE;AACTC,MAAAA,UAAU,EAAE;AADH,KANe;AAS1BC,IAAAA,SAAS,EAAE;AACTC,MAAAA,OAAO,EAAE,MADA;AAETC,MAAAA,UAAU,EAAE,QAFH;AAGTN,MAAAA,UAAU,EAAE,GAHH;AAITH,MAAAA,KAAK,EAAEF,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmB,GAAnB,CAJE;AAKTQ,MAAAA,WAAW,EAAE,EALJ;AAMTC,MAAAA,QAAQ,EAAE;AAND,KATe;AAiB1BC,IAAAA,UAAU,EAAE;AACVC,MAAAA,OAAO,EAAE;AADC,KAjBc;AAoB1BC,IAAAA,gBAAgB,EAAE;AAChBX,MAAAA,UAAU,EAAE,GADI;AAEhBQ,MAAAA,QAAQ,EAAE;AAFM,KApBQ;AAwB1BI,IAAAA,WAAW,EAAE;AACXJ,MAAAA,QAAQ,EAAE,EADC;AAEXL,MAAAA,UAAU,EAAE,MAFD;AAGXN,MAAAA,KAAK,EAAEF,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmB,GAAnB;AAHI,KAxBa;AA6B1Bc,IAAAA,cAAc,EAAE;AACdC,MAAAA,UAAU,EAAE;AADE;AA7BU,GAAL;AAAA,CAAvB;;AAkCA,IAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACC,KAAD,EAAQC,aAAR,EAA0B;AACzD,MAAID,KAAK,KAAK,SAAd,EAAyB,OAAO,IAAP;AAEzB,MAAME,MAAM,GAAG1B,yBAAyB,CAACwB,KAAD,CAAxC;AACA,SAAOG,MAAM,CAACF,aAAD,CAAN,CAAsBG,GAAtB,CAA0BF,MAAM,CAACG,IAAP,CAAYC,MAAtC,EAA8CJ,MAAM,CAACG,IAAP,CAAYE,GAA1D,EAA+DC,MAA/D,EAAP;AACD,CALD;;AAOA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,OAUlB;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJT,aAQI,QARJA,aAQI;AAAA,MAPJU,MAOI,QAPJA,MAOI;AAAA,MANJC,OAMI,QANJA,OAMI;AAAA,MALJC,UAKI,QALJA,UAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,iBAGI,QAHJA,iBAGI;AAAA,MAFJC,cAEI,QAFJA,cAEI;AAAA,MADJC,WACI,QADJA,WACI;;AAAA,kBACwCC,QAAQ,CAACR,WAAD,CADhD;AAAA;AAAA,MACGS,cADH;AAAA,MACmBC,iBADnB;;AAAA,mBAEgCF,QAAQ,CAAC;AAAA,WAC3CH,iBAAiB,GACb;AACEM,MAAAA,cAAc,EAAEN,iBAAiB,CAACO,SADpC;AAEEC,MAAAA,aAAa,EAAER,iBAAiB,CAACS;AAFnC,KADa,GAKb,IANuC;AAAA,GAAD,CAFxC;AAAA;AAAA,MAEGC,UAFH;AAAA,MAEeC,aAFf;;AAAA,mBAUkCR,QAAQ,CAAC,IAAD,CAV1C;AAAA;AAAA,MAUGS,WAVH;AAAA,MAUgBC,cAVhB;;AAAA,mBAWwCV,QAAQ,CAAC,KAAD,CAXhD;AAAA;AAAA,MAWGW,cAXH;AAAA,MAWmBC,iBAXnB;;AAAA,mBAYwBZ,QAAQ,CAAC7C,8BAA8B,CAAC,CAAD,CAA/B,CAZhC;AAAA;AAAA,MAYG6B,MAZH;AAAA,MAYW6B,SAZX;;AAcJC,EAAAA,WAAW,CAAC,YAAM;AAChB,QAAInB,UAAJ,EAAgBD,OAAO;AACxB,GAFU,CAAX;;AAIA,MAAMqB,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,QAAId,cAAJ,EAAoB;AAClB,UAAMe,eAAe,GAAGnC,wBAAwB,CAACG,MAAD,EAASD,aAAT,CAAhD;AACAU,MAAAA,MAAM,CAACQ,cAAD,EAAiBe,eAAjB,EAAkCT,UAAlC,CAAN;AACD;AACF,GALD;;AAOA,MAAMU,kBAAkB,GAAG,SAArBA,kBAAqB,CAAAC,CAAC;AAAA,WAAIL,SAAS,CAACK,CAAC,CAACC,MAAF,CAASrC,KAAV,CAAb;AAAA,GAA5B;;AAEA,MAAMsC,aAAa,GAAG,SAAhBA,aAAgB,CAAAF,CAAC,EAAI;AACzB,QAAIA,CAAC,CAAC7B,GAAF,KAAU,OAAd,EAAuBuB,iBAAiB,CAAC,IAAD,CAAjB;;AAEvB,QAAIM,CAAC,CAAC7B,GAAF,KAAU,OAAV,IAAqB,CAACsB,cAAtB,IAAwC,CAACU,uBAAuB,EAApE,EAAwE;AACtEH,MAAAA,CAAC,CAACI,cAAF,GADsE;;AAEtEP,MAAAA,UAAU;AACX;AACF,GAPD;;AASA,MAAMQ,WAAW,GAAG,SAAdA,WAAc,CAAAL,CAAC,EAAI;AACvB,QAAIA,CAAC,CAAC7B,GAAF,KAAU,OAAd,EAAuBuB,iBAAiB,CAAC,KAAD,CAAjB;AACxB,GAFD;;AAIA,MAAMY,iBAAiB,GAAG,SAApBA,iBAAoB,CAAAC,KAAK;AAAA,WAAIvB,iBAAiB,WAAID,cAAJ,SAAqBwB,KAAK,CAACC,MAA3B,EAArB;AAAA,GAA/B;;AAEA,MAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,CAAAC,IAAI;AAAA,WAAI1B,iBAAiB,CAAC0B,IAAD,CAArB;AAAA,GAAvC;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACxB,aAAD,EAAgBF,cAAhB,EAAgC2B,cAAhC,EAAmD;AACxEtB,IAAAA,aAAa,CAAC;AAAEH,MAAAA,aAAa,EAAbA,aAAF;AAAiBF,MAAAA,cAAc,EAAdA,cAAjB;AAAiC2B,MAAAA,cAAc,EAAdA;AAAjC,KAAD,CAAb;AACApB,IAAAA,cAAc,CAAC,IAAD,CAAd;AACD,GAHD;;AAKA,MAAMqB,gBAAgB,GAAG,SAAnBA,gBAAmB,CAAAC,KAAK,EAAI;AAChCxB,IAAAA,aAAa,CAAC,IAAD,CAAb;AACAE,IAAAA,cAAc,CAACsB,KAAD,CAAd;AACD,GAHD;;AAKA,MAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC/BzB,IAAAA,aAAa,CAAC,IAAD,CAAb;AACAE,IAAAA,cAAc,CAAC,IAAD,CAAd;AACD,GAHD;;AAKA,sBACEwB;AAAK,IAAA,SAAS,EAAEC,MAAM,CAACC,gBAAvB;AAAA,4BACEF,KAAC,KAAD;AAAO,MAAA,SAAS,EAAEC,MAAM,CAACE,uBAAzB;AAAA,8BACEC,IAAC,KAAD;AACE,iCAAgBpF,SAAhB,sBADF;AAEE,QAAA,cAAc,EAAEqF,WAFlB;AAGE,QAAA,UAAU,EAAE;AACVC,UAAAA,cAAc,EAAE,KADN;AAEVC,UAAAA,QAAQ,EAAEd,0BAFA;AAGVe,UAAAA,SAAS,EAAEtB,aAHD;AAIVuB,UAAAA,OAAO,EAAEpB,WAJC;AAKVqB,UAAAA,SAAS,EAAE9C,cALD;AAMVC,UAAAA,WAAW,EAAXA;AANU,SAHd;AAWE,QAAA,WAAW,EAAExC,sBAXf;AAYE,QAAA,SAAS,MAZX;AAaE,QAAA,gBAAgB,MAblB;AAcE,QAAA,SAAS,MAdX;AAeE,QAAA,IAAI,EAAC,GAfP;AAgBE,QAAA,SAAS,EAAEqC,OAAO,CAAC5B,SAhBrB;AAiBE,QAAA,KAAK,EAAEiC;AAjBT,QADF,eAoBEiC;AAAK,QAAA,SAAS,EAAEC,MAAM,CAACU,8BAAvB;AAAA,gCACEP,IAAC,OAAD;AAAS,UAAA,KAAK,EAAC,aAAf;AAA6B,UAAA,SAAS,EAAC,QAAvC;AAAA,iCACEA;AAAK,YAAA,SAAS,EAAEH,MAAM,CAACW,oCAAvB;AAAA,mCACER,IAAC,oBAAD;AACE,uCAAgBpF,SAAhB,sBADF;AAEE,cAAA,yBAAyB,EAAE,KAF7B;AAGE,cAAA,aAAa,MAHf;AAIE,cAAA,QAAQ,EAAE2E,cAJZ;AAKE,cAAA,OAAO,EAAEE,gBALX;AAME,cAAA,SAAS,EAAC;AANZ;AADF;AADF,UADF,eAaEO,IAAC,OAAD;AAAS,UAAA,KAAK,EAAC,WAAf;AAA2B,UAAA,SAAS,EAAC,QAArC;AAAA,iCACEA;AAAK,YAAA,SAAS,EAAEH,MAAM,CAACW,oCAAvB;AAAA,mCACER,IAAC,eAAD;AACE,uCAAgBpF,SAAhB,iBADF;AAEE,cAAA,SAAS,EAAEW,IAAI,CAAC,GAAD,CAFjB;AAGE,cAAA,iBAAiB,EAAE2D;AAHrB;AADF;AADF,UAbF;AAAA,QApBF;AAAA,MADF,EA6CGf,WAAW,iBACV6B,IAAC,mBAAD;AAAqB,MAAA,SAAS,EAAE1C,OAAO,CAACjB,cAAxC;AAAwD,MAAA,YAAY,EAAE8B;AAAtE,MA9CJ,EAgDGF,UAAU,IAAIA,UAAU,CAACF,aAAzB,iBACCiC,IAAC,WAAD;AACE,MAAA,QAAQ,EAAE/B,UAAU,CAACJ,cADvB;AAEE,MAAA,OAAO,EAAEI,UAAU,CAACF,aAFtB;AAGE,MAAA,gBAAgB,EAAE4B;AAHpB,MAjDJ,eAuDEC;AAAK,MAAA,SAAS,EAAEC,MAAM,CAACY,uBAAvB;AAAA,8BACEb,KAAC,WAAD;AAAa,QAAA,SAAS,EAAEtC,OAAO,CAACoD,WAAhC;AAAA,gCACEV,IAAC,UAAD;AAAY,UAAA,MAAM,MAAlB;AAAmB,UAAA,EAAE,EAAC,qBAAtB;AAA4C,UAAA,SAAS,EAAE1C,OAAO,CAAClB,WAA/D;AAAA;AAAA,UADF,eAIE4D,IAAC,YAAD;AACE,mCAAgBpF,SAAhB,oBADF;AAEE,UAAA,OAAO,EAAC,qBAFV;AAGE,UAAA,EAAE,EAAC,eAHL;AAIE,UAAA,KAAK,EAAE8B,MAJT;AAKE,UAAA,gBAAgB,MALlB;AAME,UAAA,QAAQ,EAAEiC,kBANZ;AAAA,oBAQG9D,8BAA8B,CAAC8F,GAA/B,CAAmC,UAAA5D,GAAG;AAAA,gCACrCiD,IAAC,QAAD;AACE,uCAAgBpF,SAAhB,qBAAoCI,yBAAyB,CAAC+B,GAAD,CAAzB,CAA+B6D,KAAnE,aADF;AAGE,cAAA,KAAK,EAAE7D,GAHT;AAAA,wBAKG/B,yBAAyB,CAAC+B,GAAD,CAAzB,CAA+B6D;AALlC,eAEO7D,GAFP,CADqC;AAAA,WAAtC;AARH,UAJF;AAAA,QADF,eAwBE6C;AAAK,QAAA,SAAS,EAAEC,MAAM,CAACgB,2BAAvB;AAAA,gCACEjB,KAAC,UAAD;AAAY,UAAA,OAAO,EAAC,SAApB;AAA8B,UAAA,SAAS,EAAEtC,OAAO,CAAC1B,SAAjD;AAAA,+CAEEoE,IAAC,UAAD;AACE,YAAA,OAAO,EAAC,SADV;AAEE,YAAA,KAAK,EAAC,SAFR;AAGE,YAAA,SAAS,EAAC,MAHZ;AAIE,YAAA,SAAS,EAAE1C,OAAO,CAACnB,gBAJrB;AAAA;AAAA,YAFF;AAAA,UADF,eAaE6D,IAAC,OAAD;AAAS,UAAA,KAAK,EAAC,MAAf;AAAsB,UAAA,SAAS,EAAC,QAAhC;AAAA,iCACEA;AAAA,mCAEEA,IAAC,UAAD;AACE,uCAAgBpF,SAAhB,gBADF;AAEE,cAAA,SAAS,EAAE0C,OAAO,CAACrB,UAFrB;AAGE,cAAA,OAAO,EAAEwC,UAHX;AAIE,cAAA,QAAQ,EAAE,CAACd,cAJb;AAAA,qCAMEqC,IAAC,QAAD;AAAU,gBAAA,KAAK,EAAC;AAAhB;AANF;AAFF;AADF,UAbF;AAAA,QAxBF;AAAA,MAvDF;AAAA,IADF;AA8GD,CAnLD;;AAqLA/C,eAAe,CAAC6D,SAAhB,GAA4B;AAC1B5D,EAAAA,WAAW,EAAE6D,MADa;AAE1BtE,EAAAA,aAAa,EAAEsE,MAFW;AAG1BxD,EAAAA,iBAAiB,EAAEyD,KAAK,CAAC;AACvBlD,IAAAA,SAAS,EAAEiD,MADY;AAEvB/C,IAAAA,OAAO,EAAE+C;AAFc,GAAD,CAHE;AAO1B5D,EAAAA,MAAM,EAAE8D,IAPkB;AAQ1B7D,EAAAA,OAAO,EAAE6D,IARiB;AAS1B5D,EAAAA,UAAU,EAAE6D,IATc;AAU1B1D,EAAAA,cAAc,EAAE2D,MAAM,CAACC,UAVG;AAW1B3D,EAAAA,WAAW,EAAEuD,KAAK,GAAGI,UAXK;AAa1B9D,EAAAA,OAAO,EAAE0D,KAAK,GAAGI;AAbS,CAA5B;AAgBAnE,eAAe,CAACoE,YAAhB,GAA+B;AAC7BnE,EAAAA,WAAW,EAAE,EADgB;AAE7BT,EAAAA,aAAa,EAAE6E,SAFc;AAG7B/D,EAAAA,iBAAiB,EAAE,IAHU;AAI7BJ,EAAAA,MAAM,EAAE;AAAA,WAAMmE,SAAN;AAAA,GAJqB;AAK7BlE,EAAAA,OAAO,EAAE;AAAA,WAAMkE,SAAN;AAAA,GALoB;AAM7BjE,EAAAA,UAAU,EAAE;AANiB,CAA/B;AASA,wBAAekE,UAAU,CAACrG,SAAD,CAAV,CAAsB+B,eAAtB,CAAf;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,gEAAqE;AAC7F;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1 +1,261 @@
-import t from"@babel/runtime/helpers/defineProperty";import e from"@babel/runtime/helpers/asyncToGenerator";import n from"@babel/runtime/helpers/slicedToArray";import o from"@babel/runtime/regenerator";import{memo as r,useRef as a,useState as i,useEffect as s}from"react";import{number as c,string as p,shape as d,func as m,bool as l}from"prop-types";import u from"classnames";import{withStyles as f}from"@material-ui/core/styles";import{RootRef as h,Paper as y,Typography as b,Tooltip as g,IconButton as A}from"@material-ui/core";import v from"@material-ui/icons/ChevronLeft";import"../../../../utils/index.js";import{isNativeDetected as I}from"../../../../utils/mobileDetect.js";import C from"../../../InfiniteList/index.js";import T from"../../../../effects/useOutsideClick.js";import N from"./components/AddAnnotationForm/index.js";import x from"./components/Annotation/index.js";import{getAnnotations as j}from"../../../../clients/jsonApi/index.js";import{useAnnotationsState as L,useAnnotationsDispatch as k}from"../../AnnotationsContext.js";import{SET_ANNOTATIONS as R,APPEND_ANNOTATIONS as _}from"../../constants.js";import q from"./style.css.js";import{jsx as w,jsxs as S,Fragment as H}from"react/jsx-runtime";import{showSuccessNotification as U}from"../../../../utils/notificationToasts.js";var F="AppAnnotationsPo",O=function(r){var c,p=r.appId,d=r.appTitle,m=r.assetId,l=r.assetCompanyId,f=r.appSettings,I=r.currentUser,O=r.onClose,P=r.isNative,W=r.classes,B=r.dashboardType,D=L().annotations,E=k(),G=a(),M=a();T(G,O);var z=i(!1),J=n(z,2),K=J[0],Q=J[1],V=i(!0),X=n(V,2),Y=X[0],Z=X[1],$=i(!0),tt=n($,2),et=tt[0],nt=tt[1],ot=i(1),rt=n(ot,2),at=rt[0],it=rt[1];function st(){return(st=e(o.mark((function t(){var e,n,r;return o.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(p&&m){t.next=2;break}return t.abrupt("return");case 2:return Z(!0),t.prev=3,n={page:at,per_page:4,sort:"created_at",order:"desc"},B&&(n.dashboard_type=B),t.next=8,j(p,m,n);case 8:e=t.sent,E({type:1===at?R:_,annotations:e}),t.next=15;break;case 12:t.prev=12,t.t0=t.catch(3),console.error(t.t0);case 15:r=e&&e.data.length<4,it(at+1),nt(!r),Z(!1);case 19:case"end":return t.stop()}}),t,null,[[3,12]])})))).apply(this,arguments)}return s((function(){Q(!0)}),[]),w(h,{rootRef:G,children:S(y,{className:u(q.cAnnotationsList,(c={},t(c,q.cAnnotationsListOpen,K),t(c,q.cAnnotationsListOpenNative,P),c)),children:[w(C,{infiniteClassName:q.cAnnotationsListContentContainer,headerComponent:S(H,{children:[w(b,{"data-testid":"".concat(F,"_appTitle"),variant:"body1",className:W.title,children:d}),w("div",{className:q.cAnnotationsListContentTop,children:S(b,{"data-testid":"".concat(F,"_annotationsTitle"),variant:"caption",className:W.secondaryTitle,children:["Annotations (",D.data?D.data.length:0,")"]})}),w(N,{appId:p,assetId:m,assetCompanyId:l,appSettings:f,currentUser:I,dashboardType:B})]}),useWindow:P,items:D.data||[],showNoItemsFound:!(D.data&&0!==D.data.length||Y),noItemsFoundLabel:w(b,{variant:"body2","data-testid":"".concat(F,"_noAnnotations"),className:W.noAnnotations,children:"No Annotations yet"}),threshold:50,infiniteContainerHeight:G.current&&M.current?G.current.clientHeight-M.current.clientHeight:null,moreItemsMayExist:et,pathToCreatedAt:["attributes","created_at"],renderItem:function(t){return w(x,{isNative:P,annotation:t,assetCompanyId:l,included:D.included,currentUser:I,showSuccessNotification:U},t.id)},loadItems:function(){return st.apply(this,arguments)}}),w("div",{className:q.cAnnotationsListActions,ref:M,children:w(g,{title:"Hide",placement:"bottom",children:w(A,{"data-testid":"".concat(F,"_hideButton"),onClick:O,className:W.backIcon,children:w(v,{})})})})]})})};O.propTypes={appId:c.isRequired,appTitle:p.isRequired,assetId:c.isRequired,assetCompanyId:c.isRequired,appSettings:d(),classes:d().isRequired,onClose:m.isRequired,currentUser:d({}).isRequired,isNative:l,dashboardType:p},O.defaultProps={appSettings:{},isNative:I,dashboardType:null};var P=f((function(t){return{title:{fontWeight:200,marginBottom:20},secondaryTitle:{fontWeight:200,textTransform:"uppercase",color:t.palette.grey[600]},annotateIcon:{padding:0,"&:hover":{backgroundColor:"transparent",boxShadow:"none"}},noAnnotations:{marginTop:16},backIcon:{cursor:"pointer",color:t.palette.grey[600],padding:5}}}))(r(O));export{P as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import { isNativeDetected } from '../../../../utils/mobileDetect.js';
+import { showSuccessNotification } from '../../../../utils/notificationToasts.js';
+import { getAnnotations } from '../../../../clients/jsonApi/index.js';
+import '../../../../utils/index.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { RootRef, Paper, Typography, Tooltip, IconButton } from '@material-ui/core';
+import { memo, useRef, useState, useEffect } from 'react';
+import useOutsideClick from '../../../../effects/useOutsideClick.js';
+import { number, string, shape, func, bool } from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import BackIcon from '@material-ui/icons/ChevronLeft';
+import InfiniteList from '../../../InfiniteList/index.js';
+import { SET_ANNOTATIONS, APPEND_ANNOTATIONS } from '../../constants.js';
+import { useAnnotationsState, useAnnotationsDispatch } from '../../AnnotationsContext.js';
+import AddAnnotationForm from './components/AddAnnotationForm/index.js';
+import Annotation from './components/Annotation/index.js';
+import styles from './style.css.js';
+
+var PAGE_NAME = 'AppAnnotationsPo';
+
+var muiStyles = function muiStyles(theme) {
+  return {
+    title: {
+      fontWeight: 200,
+      marginBottom: 20
+    },
+    secondaryTitle: {
+      fontWeight: 200,
+      textTransform: 'uppercase',
+      color: theme.palette.grey[600]
+    },
+    annotateIcon: {
+      padding: 0,
+      '&:hover': {
+        backgroundColor: 'transparent',
+        boxShadow: 'none'
+      }
+    },
+    noAnnotations: {
+      marginTop: 16
+    },
+    backIcon: {
+      cursor: 'pointer',
+      color: theme.palette.grey[600],
+      padding: 5
+    }
+  };
+};
+
+var PER_PAGE = 4;
+
+var AnnotationsList = function AnnotationsList(_ref) {
+  var _classNames;
+
+  var appId = _ref.appId,
+      appTitle = _ref.appTitle,
+      assetId = _ref.assetId,
+      assetCompanyId = _ref.assetCompanyId,
+      appSettings = _ref.appSettings,
+      currentUser = _ref.currentUser,
+      onClose = _ref.onClose,
+      isNative = _ref.isNative,
+      classes = _ref.classes,
+      dashboardType = _ref.dashboardType;
+
+  var _useAnnotationsState = useAnnotationsState(),
+      annotations = _useAnnotationsState.annotations;
+
+  var dispatch = useAnnotationsDispatch();
+  var rootRef = useRef();
+  var footerRef = useRef();
+
+  var infiniteContainerHeight = function infiniteContainerHeight() {
+    if (rootRef.current && footerRef.current) return rootRef.current.clientHeight - footerRef.current.clientHeight;
+    return null;
+  };
+
+  useOutsideClick(rootRef, onClose);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isInfiniteLoading = _useState4[0],
+      setIsInfiniteLoading = _useState4[1];
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      moreItemsMayExist = _useState6[0],
+      setMoreItemsMayExist = _useState6[1];
+
+  var _useState7 = useState(1),
+      _useState8 = _slicedToArray(_useState7, 2),
+      page = _useState8[0],
+      setPage = _useState8[1];
+
+  function handleFetchAnnotations() {
+    return _handleFetchAnnotations.apply(this, arguments);
+  }
+
+  function _handleFetchAnnotations() {
+    _handleFetchAnnotations = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var response, options, lessThanPerPage;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (appId && assetId) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              setIsInfiniteLoading(true);
+              _context.prev = 3;
+              options = {
+                page: page,
+                per_page: PER_PAGE,
+                sort: 'created_at',
+                order: 'desc'
+              };
+              if (dashboardType) options.dashboard_type = dashboardType;
+              _context.next = 8;
+              return getAnnotations(appId, assetId, options);
+
+            case 8:
+              response = _context.sent;
+              dispatch({
+                type: page === 1 ? SET_ANNOTATIONS : APPEND_ANNOTATIONS,
+                annotations: response
+              });
+              _context.next = 15;
+              break;
+
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](3);
+              console.error(_context.t0);
+
+            case 15:
+              lessThanPerPage = response && response.data.length < PER_PAGE;
+              setPage(page + 1);
+              setMoreItemsMayExist(!lessThanPerPage);
+              setIsInfiniteLoading(false);
+
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[3, 12]]);
+    }));
+    return _handleFetchAnnotations.apply(this, arguments);
+  }
+
+  useEffect(function () {
+    setIsOpen(true); // NOTE: Opens here because of for the sliding effect on open
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/jsx(RootRef, {
+    rootRef: rootRef,
+    children: /*#__PURE__*/jsxs(Paper, {
+      className: classNames(styles.cAnnotationsList, (_classNames = {}, _defineProperty(_classNames, styles.cAnnotationsListOpen, isOpen), _defineProperty(_classNames, styles.cAnnotationsListOpenNative, isNative), _classNames)),
+      children: [/*#__PURE__*/jsx(InfiniteList, {
+        infiniteClassName: styles.cAnnotationsListContentContainer,
+        headerComponent: /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Typography, {
+            "data-testid": "".concat(PAGE_NAME, "_appTitle"),
+            variant: "body1",
+            className: classes.title,
+            children: appTitle
+          }), /*#__PURE__*/jsx("div", {
+            className: styles.cAnnotationsListContentTop,
+            children: /*#__PURE__*/jsxs(Typography, {
+              "data-testid": "".concat(PAGE_NAME, "_annotationsTitle"),
+              variant: "caption",
+              className: classes.secondaryTitle,
+              children: ["Annotations (", annotations.data ? annotations.data.length : 0, ")"]
+            })
+          }), /*#__PURE__*/jsx(AddAnnotationForm, {
+            appId: appId,
+            assetId: assetId,
+            assetCompanyId: assetCompanyId,
+            appSettings: appSettings,
+            currentUser: currentUser,
+            dashboardType: dashboardType
+          })]
+        }),
+        useWindow: isNative,
+        items: annotations.data || [],
+        showNoItemsFound: (!annotations.data || annotations.data.length === 0) && !isInfiniteLoading,
+        noItemsFoundLabel: /*#__PURE__*/jsx(Typography, {
+          variant: "body2",
+          "data-testid": "".concat(PAGE_NAME, "_noAnnotations"),
+          className: classes.noAnnotations,
+          children: "No Annotations yet"
+        }),
+        threshold: 50,
+        infiniteContainerHeight: infiniteContainerHeight(),
+        moreItemsMayExist: moreItemsMayExist,
+        pathToCreatedAt: ['attributes', 'created_at'],
+        renderItem: function renderItem(item) {
+          return /*#__PURE__*/jsx(Annotation, {
+            isNative: isNative,
+            annotation: item,
+            assetCompanyId: assetCompanyId,
+            included: annotations.included,
+            currentUser: currentUser,
+            showSuccessNotification: showSuccessNotification
+          }, item.id);
+        },
+        loadItems: handleFetchAnnotations
+      }), /*#__PURE__*/jsx("div", {
+        className: styles.cAnnotationsListActions,
+        ref: footerRef,
+        children: /*#__PURE__*/jsx(Tooltip, {
+          title: "Hide",
+          placement: "bottom",
+          children: /*#__PURE__*/jsx(IconButton, {
+            "data-testid": "".concat(PAGE_NAME, "_hideButton"),
+            onClick: onClose,
+            className: classes.backIcon,
+            children: /*#__PURE__*/jsx(BackIcon, {})
+          })
+        })
+      })]
+    })
+  });
+};
+
+AnnotationsList.propTypes = {
+  appId: number.isRequired,
+  appTitle: string.isRequired,
+  assetId: number.isRequired,
+  assetCompanyId: number.isRequired,
+  appSettings: shape(),
+  classes: shape().isRequired,
+  onClose: func.isRequired,
+  currentUser: shape({}).isRequired,
+  isNative: bool,
+  dashboardType: string
+};
+AnnotationsList.defaultProps = {
+  appSettings: {},
+  isNative: isNativeDetected,
+  dashboardType: null
+};
+var AnnotationsList$1 = withStyles(muiStyles)(memo(AnnotationsList));
+
+export default AnnotationsList$1;
+//# sourceMappingURL=index.js.map