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

package/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaletteChromePicker.js","sources":["../../../../src/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.js"],"sourcesContent":["import { useState, useLayoutEffect, forwardRef } from 'react';\nimport { ChromePicker } from 'react-color';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport { makeStyles, IconButton, Tooltip } from '@material-ui/core';\nimport PaletteIcon from '@material-ui/icons/Palette';\nimport ColorizeIcon from '@material-ui/icons/Colorize';\n\nimport Palette from './Palette';\n\nconst COLOR_PICK_MODE = {\n  PALETTE: 'PALETTE',\n  CHROME_PICKER: 'CHROME_PICKER',\n};\n\nconst chromePickerStyles = {\n  default: {\n    picker: {\n      width: '100%',\n      boxShadow: 'none',\n    },\n    body: {\n      backgroundColor: '#3b3b3b',\n      padding: '16px 16px 0',\n    },\n    color: {\n      width: '32px',\n      height: '32px',\n      marginRight: '16px',\n      borderRadius: '2px',\n    },\n    swatch: {\n      marginTop: 0,\n      width: '100%',\n      height: '100%',\n      borderRadius: 0,\n      position: 'relative',\n      overflow: 'hidden',\n    },\n    toggles: {\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n    },\n    Alpha: {\n      checkboard: {\n        display: 'none',\n      },\n      gradient: {\n        borderRadius: '5px',\n      },\n    },\n  },\n};\n\nconst useStyles = makeStyles({\n  container: {\n    backgroundColor: '#3b3b3b',\n    boxShadow: '0px 3px 10px rgba(0, 0, 0, 0.4)',\n    width: '250px',\n    paddingBottom: '8px',\n    borderRadius: '4px',\n\n    '& input': {\n      border: '1px solid #616161 !important',\n      backgroundColor: '#3b3b3b',\n      color: '#fff !important',\n      boxShadow: 'none !important',\n      outline: 'none',\n    },\n\n    '& svg:not(.MuiSvgIcon-root)': {\n      fill: '#bdbdbd !important',\n    },\n  },\n  chomePickerPalette: {\n    margin: '0 8px',\n    paddingTop: '8px',\n  },\n  buttonsContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginTop: '8px',\n  },\n  iconButton: {\n    padding: '8px',\n    '&:hover': {\n      backgroundColor: '#333333',\n    },\n    '&:hover $icon': {\n      color: '#fff',\n    },\n  },\n  icon: { color: '#bdbdbd', fontSize: '24px' },\n  iconActive: { color: '#fff' },\n  tooltip: {\n    background: '#414141',\n    color: '#fff',\n    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.12)',\n    borderRadius: '4px',\n    opacity: 1,\n    fontSize: '11px',\n  },\n});\n\nconst PaletteChromePicker = forwardRef(\n  ({ color, onChange, onSizeChange, enableTransparencyPalette }, ref) => {\n    const classes = useStyles();\n    const [pickMode, setPickMode] = useState(COLOR_PICK_MODE.PALETTE);\n\n    useLayoutEffect(onSizeChange, [pickMode]);\n\n    return (\n      <div className={classes.container} ref={ref}>\n        {pickMode === COLOR_PICK_MODE.PALETTE && (\n          <Palette\n            className={classes.chomePickerPalette}\n            color={color}\n            onChange={onChange}\n            enableTransparencyPalette={enableTransparencyPalette}\n          />\n        )}\n        {pickMode === COLOR_PICK_MODE.CHROME_PICKER && (\n          <ChromePicker styles={chromePickerStyles} color={color} onChange={onChange} />\n        )}\n        <div className={classes.buttonsContainer}>\n          <Tooltip title=\"Palette\" classes={{ tooltip: classes.tooltip }}>\n            <IconButton\n              className={classes.iconButton}\n              onClick={() => setPickMode(COLOR_PICK_MODE.PALETTE)}\n            >\n              <PaletteIcon\n                className={classNames(classes.icon, {\n                  [classes.iconActive]: pickMode === COLOR_PICK_MODE.PALETTE,\n                })}\n                fontSize=\"small\"\n              />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"Pick your own\" classes={{ tooltip: classes.tooltip }}>\n            <IconButton\n              className={classes.iconButton}\n              onClick={() => setPickMode(COLOR_PICK_MODE.CHROME_PICKER)}\n            >\n              <ColorizeIcon\n                className={classNames(classes.icon, {\n                  [classes.iconActive]: pickMode === COLOR_PICK_MODE.CHROME_PICKER,\n                })}\n                fontSize=\"small\"\n              />\n            </IconButton>\n          </Tooltip>\n        </div>\n      </div>\n    );\n  }\n);\n\nPaletteChromePicker.propTypes = {\n  color: PropTypes.string.isRequired,\n  onChange: PropTypes.func.isRequired,\n  onSizeChange: PropTypes.func.isRequired,\n  enableTransparencyPalette: PropTypes.bool.isRequired,\n};\n\nexport default PaletteChromePicker;\n"],"names":["COLOR_PICK_MODE","PALETTE","CHROME_PICKER","chromePickerStyles","default","picker","width","boxShadow","body","backgroundColor","padding","color","height","marginRight","borderRadius","swatch","marginTop","position","overflow","toggles","display","flexDirection","justifyContent","Alpha","checkboard","gradient","useStyles","makeStyles","container","paddingBottom","border","outline","fill","chomePickerPalette","margin","paddingTop","buttonsContainer","iconButton","icon","fontSize","iconActive","tooltip","background","opacity","PaletteChromePicker","forwardRef","ref","onChange","onSizeChange","enableTransparencyPalette","classes","useState","pickMode","setPickMode","useLayoutEffect","_jsxs","_jsx","classNames","propTypes","PropTypes","string","isRequired","func","bool"],"mappings":"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"}

package/components/Comment/CommentIcon/BadgeIcon.js

@@ -1 +1,25 @@
-import{memo as C}from"react";import{jsxs as t,jsx as r}from"react/jsx-runtime";var e=C((function(){return t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r("path",{d:"M13.0997 14.0765L13.1233 14.0918L13.1484 14.1043C13.1626 14.1114 13.1765 14.1192 13.1989 14.1321C13.2006 14.1331 13.2025 14.1342 13.2045 14.1354C13.224 14.1467 13.257 14.1657 13.2912 14.1829C13.3832 14.2288 13.503 14.2714 13.6577 14.2714C13.6609 14.2714 13.6644 14.2714 13.668 14.2714C13.7169 14.2715 13.7976 14.2716 13.8828 14.2574C13.9865 14.2401 14.0774 14.2063 14.167 14.1614L14.1949 14.1475L14.2208 14.1303C14.5074 13.9391 14.7291 13.6225 14.7291 13.1999V4.91423C14.7291 3.15237 13.3053 1.72852 11.5434 1.72852H4.40056C2.6387 1.72852 1.21484 3.15237 1.21484 4.91423V8.85709C1.21484 10.6189 2.6387 12.0428 4.40056 12.0428H9.96679L13.0997 14.0765Z",fill:"#03BCD4",stroke:"#212121"}),r("path",{d:"M10.4 7.6H8.6V9.4C8.6 9.73 8.33 10 8 10C7.67 10 7.4 9.73 7.4 9.4V7.6H5.6C5.27 7.6 5 7.33 5 7C5 6.67 5.27 6.4 5.6 6.4H7.4V4.6C7.4 4.27 7.67 4 8 4C8.33 4 8.6 4.27 8.6 4.6V6.4H10.4C10.73 6.4 11 6.67 11 7C11 7.33 10.73 7.6 10.4 7.6Z",fill:"#212121"})]})}));export{e as default};
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function BadgeIcon() {
+  return /*#__PURE__*/jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M13.0997 14.0765L13.1233 14.0918L13.1484 14.1043C13.1626 14.1114 13.1765 14.1192 13.1989 14.1321C13.2006 14.1331 13.2025 14.1342 13.2045 14.1354C13.224 14.1467 13.257 14.1657 13.2912 14.1829C13.3832 14.2288 13.503 14.2714 13.6577 14.2714C13.6609 14.2714 13.6644 14.2714 13.668 14.2714C13.7169 14.2715 13.7976 14.2716 13.8828 14.2574C13.9865 14.2401 14.0774 14.2063 14.167 14.1614L14.1949 14.1475L14.2208 14.1303C14.5074 13.9391 14.7291 13.6225 14.7291 13.1999V4.91423C14.7291 3.15237 13.3053 1.72852 11.5434 1.72852H4.40056C2.6387 1.72852 1.21484 3.15237 1.21484 4.91423V8.85709C1.21484 10.6189 2.6387 12.0428 4.40056 12.0428H9.96679L13.0997 14.0765Z",
+      fill: "#03BCD4",
+      stroke: "#212121"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M10.4 7.6H8.6V9.4C8.6 9.73 8.33 10 8 10C7.67 10 7.4 9.73 7.4 9.4V7.6H5.6C5.27 7.6 5 7.33 5 7C5 6.67 5.27 6.4 5.6 6.4H7.4V4.6C7.4 4.27 7.67 4 8 4C8.33 4 8.6 4.27 8.6 4.6V6.4H10.4C10.73 6.4 11 6.67 11 7C11 7.33 10.73 7.6 10.4 7.6Z",
+      fill: "#212121"
+    })]
+  });
+}
+
+var BadgeIcon$1 = memo(BadgeIcon);
+
+export default BadgeIcon$1;
+//# sourceMappingURL=BadgeIcon.js.map

package/components/Comment/CommentIcon/BadgeIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeIcon.js","sources":["../../../../src/components/Comment/CommentIcon/BadgeIcon.js"],"sourcesContent":["import { memo } from 'react';\n\nfunction BadgeIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.0997 14.0765L13.1233 14.0918L13.1484 14.1043C13.1626 14.1114 13.1765 14.1192 13.1989 14.1321C13.2006 14.1331 13.2025 14.1342 13.2045 14.1354C13.224 14.1467 13.257 14.1657 13.2912 14.1829C13.3832 14.2288 13.503 14.2714 13.6577 14.2714C13.6609 14.2714 13.6644 14.2714 13.668 14.2714C13.7169 14.2715 13.7976 14.2716 13.8828 14.2574C13.9865 14.2401 14.0774 14.2063 14.167 14.1614L14.1949 14.1475L14.2208 14.1303C14.5074 13.9391 14.7291 13.6225 14.7291 13.1999V4.91423C14.7291 3.15237 13.3053 1.72852 11.5434 1.72852H4.40056C2.6387 1.72852 1.21484 3.15237 1.21484 4.91423V8.85709C1.21484 10.6189 2.6387 12.0428 4.40056 12.0428H9.96679L13.0997 14.0765Z\"\n        fill=\"#03BCD4\"\n        stroke=\"#212121\"\n      />\n      <path\n        d=\"M10.4 7.6H8.6V9.4C8.6 9.73 8.33 10 8 10C7.67 10 7.4 9.73 7.4 9.4V7.6H5.6C5.27 7.6 5 7.33 5 7C5 6.67 5.27 6.4 5.6 6.4H7.4V4.6C7.4 4.27 7.67 4 8 4C8.33 4 8.6 4.27 8.6 4.6V6.4H10.4C10.73 6.4 11 6.67 11 7C11 7.33 10.73 7.6 10.4 7.6Z\"\n        fill=\"#212121\"\n      />\n    </svg>\n  );\n}\n\nexport default memo(BadgeIcon);\n"],"names":["BadgeIcon","_jsxs","_jsx","memo"],"mappings":";;;AAEA,SAASA,SAAT,GAAqB;AACnB,sBACEC;AAAK,IAAA,KAAK,EAAC,IAAX;AAAgB,IAAA,MAAM,EAAC,IAAvB;AAA4B,IAAA,OAAO,EAAC,WAApC;AAAgD,IAAA,IAAI,EAAC,MAArD;AAA4D,IAAA,KAAK,EAAC,4BAAlE;AAAA,4BACEC;AACE,MAAA,CAAC,EAAC,4oBADJ;AAEE,MAAA,IAAI,EAAC,SAFP;AAGE,MAAA,MAAM,EAAC;AAHT,MADF,eAMEA;AACE,MAAA,CAAC,EAAC,sOADJ;AAEE,MAAA,IAAI,EAAC;AAFP,MANF;AAAA,IADF;AAaD;;AAED,kBAAeC,IAAI,CAACH,SAAD,CAAnB;;;;"}

package/components/Comment/CommentIcon/index.js

@@ -1 +1,82 @@
-import t from"prop-types";import{makeStyles as i,Tooltip as r,IconButton as e,Badge as o}from"@material-ui/core";import a from"../../Avatar/index.js";import p from"./BadgeIcon.js";import{jsx as s}from"react/jsx-runtime";var l=i((function(t){return{icon:{padding:0,"&:hover":{"& .MuiBadge-root .MuiBadge-badge svg path":{"&:first-of-type":{fill:t.palette.primary.light}},"& .MuiAvatar-root":{outline:"1px solid ".concat(t.palette.primary.light)}},marginTop:4},badge:{top:2,right:6,"&:hover":{"& svg path":{"&:first-of-type":{fill:t.palette.primary.light}}}},tooltip:{marginTop:8}}})),m=function(t){var i=t.displayName,m=t.imgSrc,n=t.size,g=l();return s(r,{title:"Comment",placement:"bottom",classes:{tooltip:g.tooltip},children:s(e,{classes:{root:g.icon},children:s(o,{classes:{badge:g.badge},badgeContent:s(p,{}),children:s(a,{displayName:i,size:n,imgSrc:m})})})})};m.propTypes={displayName:t.string,imgSrc:t.string,size:t.number},m.defaultProps={displayName:!1,imgSrc:void 0,size:24};export{m as default};
+import { jsx } from 'react/jsx-runtime';
+import { makeStyles, Tooltip, IconButton, Badge } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import Avatar from '../../Avatar/index.js';
+import BadgeIcon from './BadgeIcon.js';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    icon: {
+      padding: 0,
+      '&:hover': {
+        '& .MuiBadge-root .MuiBadge-badge svg path': {
+          '&:first-of-type': {
+            fill: theme.palette.primary.light
+          }
+        },
+        '& .MuiAvatar-root': {
+          outline: "1px solid ".concat(theme.palette.primary.light)
+        }
+      },
+      marginTop: 4
+    },
+    badge: {
+      top: 2,
+      right: 6,
+      '&:hover': {
+        '& svg path': {
+          '&:first-of-type': {
+            fill: theme.palette.primary.light
+          }
+        }
+      }
+    },
+    tooltip: {
+      marginTop: 8
+    }
+  };
+});
+
+var CommentIcon = function CommentIcon(_ref) {
+  var displayName = _ref.displayName,
+      imgSrc = _ref.imgSrc,
+      size = _ref.size;
+  var classes = useStyles();
+  return /*#__PURE__*/jsx(Tooltip, {
+    title: "Comment",
+    placement: "bottom",
+    classes: {
+      tooltip: classes.tooltip
+    },
+    children: /*#__PURE__*/jsx(IconButton, {
+      classes: {
+        root: classes.icon
+      },
+      children: /*#__PURE__*/jsx(Badge, {
+        classes: {
+          badge: classes.badge
+        },
+        badgeContent: /*#__PURE__*/jsx(BadgeIcon, {}),
+        children: /*#__PURE__*/jsx(Avatar, {
+          displayName: displayName,
+          size: size,
+          imgSrc: imgSrc
+        })
+      })
+    })
+  });
+};
+
+CommentIcon.propTypes = {
+  displayName: PropTypes.string,
+  imgSrc: PropTypes.string,
+  size: PropTypes.number
+};
+CommentIcon.defaultProps = {
+  displayName: false,
+  imgSrc: undefined,
+  size: 24
+};
+
+export default CommentIcon;
+//# sourceMappingURL=index.js.map

package/components/Comment/CommentIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Comment/CommentIcon/index.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nimport { Badge, IconButton, Tooltip, makeStyles } from '@material-ui/core';\n\nimport Avatar from '../../Avatar';\n\nimport BadgeIcon from './BadgeIcon';\n\nconst useStyles = makeStyles(theme => ({\n  icon: {\n    padding: 0,\n    '&:hover': {\n      '& .MuiBadge-root .MuiBadge-badge svg path': {\n        '&:first-of-type': { fill: theme.palette.primary.light },\n      },\n      '& .MuiAvatar-root': {\n        outline: `1px solid ${theme.palette.primary.light}`,\n      },\n    },\n    marginTop: 4,\n  },\n  badge: {\n    top: 2,\n    right: 6,\n    '&:hover': {\n      '& svg path': { '&:first-of-type': { fill: theme.palette.primary.light } },\n    },\n  },\n  tooltip: {\n    marginTop: 8,\n  },\n}));\n\nconst CommentIcon = ({ displayName, imgSrc, size }) => {\n  const classes = useStyles();\n\n  return (\n    <Tooltip title=\"Comment\" placement=\"bottom\" classes={{ tooltip: classes.tooltip }}>\n      <IconButton classes={{ root: classes.icon }}>\n        <Badge classes={{ badge: classes.badge }} badgeContent={<BadgeIcon />}>\n          <Avatar displayName={displayName} size={size} imgSrc={imgSrc} />\n        </Badge>\n      </IconButton>\n    </Tooltip>\n  );\n};\n\nCommentIcon.propTypes = {\n  displayName: PropTypes.string,\n  imgSrc: PropTypes.string,\n  size: PropTypes.number,\n};\n\nCommentIcon.defaultProps = {\n  displayName: false,\n  imgSrc: undefined,\n  size: 24,\n};\n\nexport default CommentIcon;\n"],"names":["useStyles","makeStyles","theme","icon","padding","fill","palette","primary","light","outline","marginTop","badge","top","right","tooltip","CommentIcon","displayName","imgSrc","size","classes","_jsx","root","propTypes","PropTypes","string","number","defaultProps","undefined"],"mappings":";;;;;;AAQA,IAAMA,SAAS,GAAGC,UAAU,CAAC,UAAAC,KAAK;AAAA,SAAK;AACrCC,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE,CADL;AAEJ,iBAAW;AACT,qDAA6C;AAC3C,6BAAmB;AAAEC,YAAAA,IAAI,EAAEH,KAAK,CAACI,OAAN,CAAcC,OAAd,CAAsBC;AAA9B;AADwB,SADpC;AAIT,6BAAqB;AACnBC,UAAAA,OAAO,sBAAeP,KAAK,CAACI,OAAN,CAAcC,OAAd,CAAsBC,KAArC;AADY;AAJZ,OAFP;AAUJE,MAAAA,SAAS,EAAE;AAVP,KAD+B;AAarCC,IAAAA,KAAK,EAAE;AACLC,MAAAA,GAAG,EAAE,CADA;AAELC,MAAAA,KAAK,EAAE,CAFF;AAGL,iBAAW;AACT,sBAAc;AAAE,6BAAmB;AAAER,YAAAA,IAAI,EAAEH,KAAK,CAACI,OAAN,CAAcC,OAAd,CAAsBC;AAA9B;AAArB;AADL;AAHN,KAb8B;AAoBrCM,IAAAA,OAAO,EAAE;AACPJ,MAAAA,SAAS,EAAE;AADJ;AApB4B,GAAL;AAAA,CAAN,CAA5B;;IAyBMK,WAAW,GAAG,SAAdA,WAAc,OAAmC;AAAA,MAAhCC,WAAgC,QAAhCA,WAAgC;AAAA,MAAnBC,MAAmB,QAAnBA,MAAmB;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACrD,MAAMC,OAAO,GAAGnB,SAAS,EAAzB;AAEA,sBACEoB,IAAC,OAAD;AAAS,IAAA,KAAK,EAAC,SAAf;AAAyB,IAAA,SAAS,EAAC,QAAnC;AAA4C,IAAA,OAAO,EAAE;AAAEN,MAAAA,OAAO,EAAEK,OAAO,CAACL;AAAnB,KAArD;AAAA,2BACEM,IAAC,UAAD;AAAY,MAAA,OAAO,EAAE;AAAEC,QAAAA,IAAI,EAAEF,OAAO,CAAChB;AAAhB,OAArB;AAAA,6BACEiB,IAAC,KAAD;AAAO,QAAA,OAAO,EAAE;AAAET,UAAAA,KAAK,EAAEQ,OAAO,CAACR;AAAjB,SAAhB;AAA0C,QAAA,YAAY,eAAES,IAAC,SAAD,KAAxD;AAAA,+BACEA,IAAC,MAAD;AAAQ,UAAA,WAAW,EAAEJ,WAArB;AAAkC,UAAA,IAAI,EAAEE,IAAxC;AAA8C,UAAA,MAAM,EAAED;AAAtD;AADF;AADF;AADF,IADF;AASD;;AAEDF,WAAW,CAACO,SAAZ,GAAwB;AACtBN,EAAAA,WAAW,EAAEO,SAAS,CAACC,MADD;AAEtBP,EAAAA,MAAM,EAAEM,SAAS,CAACC,MAFI;AAGtBN,EAAAA,IAAI,EAAEK,SAAS,CAACE;AAHM,CAAxB;AAMAV,WAAW,CAACW,YAAZ,GAA2B;AACzBV,EAAAA,WAAW,EAAE,KADY;AAEzBC,EAAAA,MAAM,EAAEU,SAFiB;AAGzBT,EAAAA,IAAI,EAAE;AAHmB,CAA3B;;;;"}

package/components/Comment/index.js

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