@corva/ui 3.1.0-rc.5 → 3.1.0

package/components/FeedItem/components/FeedComments.js

@@ -1,289 +1 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useRef, useMemo, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { sortBy, noop } from 'lodash';
-import moment from 'moment';
-import { makeStyles, Typography } from '@material-ui/core';
-import Comment from '../../Comment/index.js';
-import CommentLoader from '../../CommentLoader.js';
-import CommentInput from '../../CommentInput/index.js';
-import { postFeedItemComment } from '../../../clients/jsonApi/index.js';
-import '../../DevCenter/DevCenterAppContainer/components/AppActions/AppActions.css.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import '../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/AppSettingsDialog.js';
-import '../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/RemoveAppButton.js';
-import '../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/SettingsAccordion.js';
-import '../../DevCenter/DevCenterAppContainer/components/AnnotationsButton/AnnotationsButton.js';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '../../../componentsV2/Text/Text.js';
-import '../../../componentsV2/Grid/Grid.js';
-import 'classnames';
-import '../../../componentsV2/Grid/Grid.scss.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../../../componentsV2/Header/Header.scss.js';
-import '../../../componentsV2/Button/Button.js';
-import '../../../componentsV2/ButtonIcon/ButtonIcon.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import { useIsInsideIsolatedDcApp } from '../../DevCenter/DevCenterAppContainer/components/IsInsideIsolatedDcAppProvider/IsInsideIsolatedDcAppProvider.js';
-import '../../DevCenter/DevCenterAppContainer/components/DcFullscreenElemsCoordinatorProvider/IsInsideDcFullscreenElemProvider.js';
-import '../../DevCenter/DevCenterAppContainer/components/DcFullscreenElemsCoordinatorProvider/DcFullscreenElemsCoordinatorProvider.js';
-import 'uuid';
-import '../../../componentsV2/Tooltip/Tooltip.scss.js';
-import '../../../componentsV2/Paper/Paper.js';
-import '../../../componentsV2/Popover/Popover.scss.js';
-import '../../../componentsV2/Radio/Radio.js';
-import '../../../componentsV2/RadioAndCheckboxGroup/RadioAndCheckboxGroup.scss.js';
-import '../../../componentsV2/Checkbox/Checkbox.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../../componentsV2/TextInput/TextInput.js';
-import '../../../componentsV2/TextEndTruncated/TextEndTruncated.scss.js';
-import '../../../componentsV2/TextMiddleTruncated/TextMiddleTruncated.constants.js';
-import '../../../componentsV2/TextMiddleTruncated/TextMiddleTruncated.scss.js';
-import '../../../componentsV2/TextLink/TextLink.js';
-import '../../../componentsV2/Chip/Chip.js';
-import '../../../componentsV2/ChipAlert/ChipAlert.js';
-import '../../../componentsV2/ChipIndicator/ChipIndicator.js';
-import '../../../componentsV2/Avatar/Avatar.js';
-import '../../../componentsV2/Avatar/constants.js';
-import '../../../componentsV2/AvatarGroup/AvatarGroup.scss.js';
-import '@material-ui/lab';
-import '../../../componentsV2/ToggleButtons/ToggleButtons.scss.js';
-import '../../../componentsV2/Modal/Modal.scss.js';
-import '@icon-park/react/es/all';
-import '../../../icons/IconParkProvider.js';
-import '../../../icons/customIcons/icons/AddMessage.js';
-import '../../../icons/customIcons/icons/Attention.js';
-import '../../../icons/customIcons/icons/Collapse.js';
-import '../../../icons/customIcons/icons/Dashboard.js';
-import '../../../icons/customIcons/icons/Expand.js';
-import '../../../icons/customIcons/icons/FolderClosed.js';
-import '../../../icons/customIcons/icons/FolderClosedFilled.js';
-import '../../../icons/customIcons/icons/FolderOpened.js';
-import '../../../icons/customIcons/icons/GreaterOrEqual.js';
-import '../../../icons/customIcons/icons/LessOrEqual.js';
-import '../../../icons/customIcons/icons/Search.js';
-import '../../../icons/customIcons/icons/Wellhub.js';
-import '../../../icons/customIcons/icons/MultiRuler.js';
-import '../../../icons/customIcons/icons/Checkbox.js';
-import '../../../icons/customIcons/icons/CheckboxChecked.js';
-import '../../../icons/customIcons/icons/CheckboxIndeterminate.js';
-import '../../../icons/customIcons/icons/Radio.js';
-import '../../../icons/customIcons/icons/RadioChecked.js';
-import '../../../icons/customIcons/icons/SimulFrac.js';
-import '../../../icons/customIcons/icons/ZipperFrac.js';
-import '../../../icons/customIcons/icons/CautionFilled.js';
-import '../../../icons/customIcons/icons/MoreApp.js';
-import '../../../icons/customIcons/icons/Pad.js';
-import '../../../icons/customIcons/icons/Gap.js';
-import '../../../componentsV2/Menu/Menu.js';
-import '../../../componentsV2/Counter/Counter.js';
-import '../../../componentsV2/BadgeBase/BadgeBase.scss.js';
-import '../../../componentsV2/BadgeDot/BadgeDot.scss.js';
-import '../../../componentsV2/LoaderLinear/LoaderLinear.scss.js';
-import '../../../componentsV2/LoaderLogo/LoaderLogo.scss.js';
-import '../../../componentsV2/Switch/Switch.js';
-import '../../../componentsV2/Tabs/Tabs.js';
-import '../../../componentsV2/EmptyState/EmptyState.scss.js';
-import '../../../componentsV2/FileIcon/FileIcon.js';
-import 'react-dropzone';
-import '../../../utils/index.js';
-import '../../../componentsV2/FilesDropzone/FilesDropzone.scss.js';
-import '../../../componentsV2/FilesLoader/FilesLoader.scss.js';
-import '../../../componentsV2/FilesProcessor/FilesProcessor.scss.js';
-import '../../../componentsV2/Skeleton/Skeleton.scss.js';
-import '../../../utils/main.js';
-import '../../../componentsV2/CopyToClipboard/CopyToClipboard.scss.js';
-import '../../../componentsV2/Stepper/Step/Step.scss.js';
-import '../../../componentsV2/Stepper/Stepper.scss.js';
-import '../../../componentsV2/ButtonLive/ButtonLive.js';
-import '../../../componentsV2/LiveDotIndicator/LiveDotIndicator.scss.js';
-import '../../../componentsV2/IndicatorLive/IndicatorLive.scss.js';
-import '../../../componentsV2/Accordion/Accordion.scss.js';
-import '../../../componentsV2/Breadcrumbs/Breadcrumbs.scss.js';
-import '../../../componentsV2/BadgeComment/BadgeComment.js';
-import '../../../componentsV2/AppContainer/AppContainer.js';
-import '../../../componentsV2/AppContainer/AppContainer.constants.js';
-import '../../../componentsV2/AppFooter/AppFooter.js';
-import '../../../constants/goals.js';
-import '../../../constants/segment.js';
-import '../../../constants/alerts.js';
-import '../../../constants/apps.js';
-import '../../../constants/drillstring.js';
-import '../../../constants/completion.js';
-import '../../../constants/appPackages.js';
-import '../../../constants/notifications.js';
-import '../../../constants/feed.js';
-import '../../../constants/bha.js';
-import '../../../utils/env.js';
-import '../../GradientManager/configuration/constants.js';
-import '../../DevCenter/DevCenterAppContainer/components/AppCommons/AppCommonsContext.js';
-import '../../../componentsV2/AppHeader/AppHeader.constants.js';
-import '../../../componentsV2/AppHeader/AppBadge/AppBadge.scss.js';
-import '../../../componentsV2/AppHeader/AppAssets/AppAssets.js';
-import '../../PadModeSelect/PadModeSelect.js';
-import '../../../componentsV2/AppHeader/PadMode/PadMode.scss.js';
-import '../../../constants/streamSourceType.js';
-import '../../../componentsV2/AppHeader/AppHeader.scss.js';
-import '../../DevCenter/DevCenterAppContainer/components/FullscreenButton/FullscreenButton.js';
-import '../../DevCenter/DevCenterAppContainer/components/AppInfoMessage/AppInfoMessage.js';
-import '../../DevCenter/DevCenterAppContainer/components/DevCenterAppView/DevCenterAppView.js';
-import { isNativeDetected } from '../../../utils/mobileDetect.js';
-
-var PAGE_NAME = 'FeedComments';
-var useStyles = makeStyles({
-  showMore: {
-    cursor: 'pointer'
-  },
-  feedCommentsContainer: {
-    padding: '0 16px 0 24px'
-  },
-  feedCommentsList: {
-    marginTop: 24
-  },
-  feedCommentsListContent: {
-    height: function height(_ref) {
-      var commentsListHeight = _ref.commentsListHeight;
-      return commentsListHeight && commentsListHeight - 8;
-    },
-    overflow: function overflow(_ref2) {
-      var commentsListHeight = _ref2.commentsListHeight;
-      return commentsListHeight && 'scroll';
-    }
-  },
-  feedCommentsListContentWrapper: {
-    position: 'relative'
-  },
-  gradient: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    width: '100%',
-    height: 16,
-    background: function background(_ref3) {
-      var isInsideDcApp = _ref3.isInsideDcApp;
-      return "linear-gradient(180deg, rgba(61, 61, 61, 0) 0%, ".concat(isInsideDcApp ? '#414141' : '3b3b3b', " 100%)");
-    }
-  }
-});
-
-// If there are  more than 3 comments, we show only last 3, other comments are hidden.
-// To see all comments, user clicks ‘SEE ALL COMMENTS’.
-// To hide all comments back, user clicks ‘HIDE OLDER COMMENTS’
-// After clicking on a ‘SEE ALL COMMENTS’:
-// Height of the comments pop-over changes to show 5 comments instead of 3.
-// If all comments to initial comment can’t fit into comment pop-over, than User needs to scroll down to see them.
-// If there are more than 5 comments (so 6th+ comments in not seen at the moment, we cover bottom comment with gradient, to show that there is more to see.
-// The height of the Comments pop-over remains the same (to show first 5 comments), we don’t change it to show all possible 1000 comments. Only 5.
-
-var INITIAL_VISIBLE_COMMENTS_COUNT = 3;
-var COUNT_OF_COMMENTS_IN_SCROLLABLE_CONTAINER = 5;
-function FeedComments(_ref4) {
-  var _feedItem$comments;
-  var openCommentInput = _ref4.openCommentInput,
-    openCommentList = _ref4.openCommentList,
-    feedItem = _ref4.feedItem,
-    currentUser = _ref4.currentUser;
-  var comments = feedItem.comments;
-  var commentsCount = comments.length;
-  var moreCommentsExist = commentsCount > INITIAL_VISIBLE_COMMENTS_COUNT;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPosting = _useState2[0],
-    setIsPosting = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isVisibleCommentsAppeared = _useState4[0],
-    setIsVisibleCommentsAppeared = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isAllCommentsVisibleKeyPressed = _useState6[0],
-    setIsAllCommentsVisibleKeyPressed = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    commentsListHeight = _useState8[0],
-    setCommentsListHeight = _useState8[1];
-  var inputEl = useRef();
-  var commentsListRef = useRef();
-  var toggleShowAllComments = function toggleShowAllComments() {
-    setIsAllCommentsVisibleKeyPressed(!isAllCommentsVisibleKeyPressed);
-  };
-  var postComment = function postComment(comment) {
-    postFeedItemComment(feedItem.id, comment);
-  };
-  var visibleComments = useMemo(function () {
-    var sortedComments = sortBy(feedItem.comments, function (item) {
-      return -moment(item.created_at).unix();
-    });
-    if (!isAllCommentsVisibleKeyPressed) return sortedComments.slice(0, INITIAL_VISIBLE_COMMENTS_COUNT);
-    if (isAllCommentsVisibleKeyPressed && !isVisibleCommentsAppeared) {
-      return sortedComments.slice(0, COUNT_OF_COMMENTS_IN_SCROLLABLE_CONTAINER);
-    }
-    if (isAllCommentsVisibleKeyPressed && isVisibleCommentsAppeared) return sortedComments;
-    return [];
-  }, [comments, isVisibleCommentsAppeared, isAllCommentsVisibleKeyPressed]);
-  useEffect(function () {
-    if (visibleComments.length === COUNT_OF_COMMENTS_IN_SCROLLABLE_CONTAINER && !commentsListHeight) {
-      var divHeight = commentsListRef.current.clientHeight;
-      setCommentsListHeight(divHeight);
-      setIsVisibleCommentsAppeared(true);
-    }
-    if (commentsListHeight && !isAllCommentsVisibleKeyPressed) {
-      setCommentsListHeight(null);
-      setIsVisibleCommentsAppeared(false);
-    }
-  }, [visibleComments.length, commentsListHeight, isAllCommentsVisibleKeyPressed]);
-  var isInsideDcApp = useIsInsideIsolatedDcApp();
-  var classes = useStyles({
-    commentsListHeight: commentsListHeight,
-    isAllCommentsVisibleKeyPressed: isAllCommentsVisibleKeyPressed,
-    isInsideDcApp: isInsideDcApp
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: (openCommentInput || !!commentsCount) && classes.feedCommentsContainer,
-    children: [openCommentInput && !isNativeDetected && /*#__PURE__*/jsx(CommentInput, {
-      inputRef: inputEl,
-      postComment: postComment,
-      setIsPosting: setIsPosting,
-      companyId: feedItem.company_id,
-      autoFocus: false,
-      currentUser: currentUser,
-      parentId: "".concat(feedItem.id, "-").concat((_feedItem$comments = feedItem.comments) === null || _feedItem$comments === void 0 ? void 0 : _feedItem$comments.size)
-    }), openCommentList && /*#__PURE__*/jsxs("div", {
-      className: classes.feedCommentsList,
-      children: [/*#__PURE__*/jsx("div", {
-        className: classes.feedCommentsListContentWrapper,
-        children: /*#__PURE__*/jsxs("div", {
-          className: classes.feedCommentsListContent,
-          ref: commentsListRef,
-          children: [visibleComments.map(function (comment) {
-            return /*#__PURE__*/jsx(Comment, {
-              comment: comment,
-              handleDeleteCallback: noop /* NOTE: Received through subscription */,
-              patchCommentCallback: noop,
-              companyId: feedItem.company_id,
-              currentUser: currentUser
-            }, comment.id);
-          }), commentsListHeight && /*#__PURE__*/jsx("div", {
-            className: classes.gradient
-          })]
-        })
-      }), moreCommentsExist && /*#__PURE__*/jsx(Typography, {
-        variant: "caption",
-        color: "primary",
-        "data-testid": "".concat(PAGE_NAME, "_viewMoreComments"),
-        className: classes.showMore,
-        onClick: toggleShowAllComments,
-        children: isAllCommentsVisibleKeyPressed ? 'Hide older comments' : 'See all comments'
-      })]
-    }), isPosting && /*#__PURE__*/jsx(CommentLoader, {})]
-  });
-}
-FeedComments.propTypes = {
-  openCommentInput: PropTypes.bool.isRequired,
-  feedItem: PropTypes.shape().isRequired,
-  currentUser: PropTypes.shape().isRequired
-};
-
-export { FeedComments as default };
-//# sourceMappingURL=FeedComments.js.map
+import o from"@babel/runtime/helpers/slicedToArray";import{useState as s,useRef as t,useMemo as e,useEffect as n}from"react";import i from"prop-types";import{sortBy as r,noop as p}from"lodash";import c from"moment";import{makeStyles as m,Typography as a}from"@material-ui/core";import d from"../../Comment/index.js";import l from"../../CommentLoader.js";import u from"../../CommentInput/index.js";import{postFeedItemComment as j}from"../../../clients/jsonApi/index.js";import"../../DevCenter/DevCenterAppContainer/components/AppActions/AppActions.css.js";import{jsxs as C,jsx as A}from"react/jsx-runtime";import"../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/AppSettingsDialog.js";import"../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/RemoveAppButton.js";import"../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/SettingsAccordion.js";import"../../DevCenter/DevCenterAppContainer/components/AnnotationsButton/AnnotationsButton.js";import"../../../componentsV2/Text/Text.js";import"../../../componentsV2/Grid/Grid.js";import"classnames";import"../../../componentsV2/Grid/Grid.scss.js";import"../../../componentsV2/Header/Header.scss.js";import"../../../componentsV2/Button/Button.js";import"../../../componentsV2/ButtonIcon/ButtonIcon.js";import{useIsInsideIsolatedDcApp as v}from"../../DevCenter/DevCenterAppContainer/components/IsInsideIsolatedDcAppProvider/IsInsideIsolatedDcAppProvider.js";import"../../DevCenter/DevCenterAppContainer/components/DcFullscreenElemsCoordinatorProvider/IsInsideDcFullscreenElemProvider.js";import"../../DevCenter/DevCenterAppContainer/components/DcFullscreenElemsCoordinatorProvider/DcFullscreenElemsCoordinatorProvider.js";import"uuid";import"../../../componentsV2/Tooltip/Tooltip.scss.js";import"../../../componentsV2/Paper/Paper.js";import"../../../componentsV2/Popover/Popover.scss.js";import"../../../componentsV2/Radio/Radio.js";import"../../../componentsV2/RadioAndCheckboxGroup/RadioAndCheckboxGroup.scss.js";import"../../../componentsV2/Checkbox/Checkbox.js";import"../../../componentsV2/TextInput/TextInput.js";import"../../../componentsV2/TextEndTruncated/TextEndTruncated.scss.js";import"../../../componentsV2/TextMiddleTruncated/TextMiddleTruncated.constants.js";import"../../../componentsV2/TextMiddleTruncated/TextMiddleTruncated.scss.js";import"../../../componentsV2/TextLink/TextLink.js";import"../../../componentsV2/Chip/Chip.js";import"../../../componentsV2/ChipAlert/ChipAlert.js";import"../../../componentsV2/ChipIndicator/ChipIndicator.js";import"../../../componentsV2/Avatar/Avatar.js";import"../../../componentsV2/Avatar/constants.js";import"../../../componentsV2/AvatarGroup/AvatarGroup.scss.js";import"@material-ui/lab";import"../../../componentsV2/ToggleButtons/ToggleButtons.scss.js";import"../../../componentsV2/Modal/Modal.scss.js";import"@icon-park/react/es/all";import"../../../icons/IconParkProvider.js";import"../../../icons/customIcons/icons/AddMessage.js";import"../../../icons/customIcons/icons/Attention.js";import"../../../icons/customIcons/icons/Collapse.js";import"../../../icons/customIcons/icons/Dashboard.js";import"../../../icons/customIcons/icons/Expand.js";import"../../../icons/customIcons/icons/FolderClosed.js";import"../../../icons/customIcons/icons/FolderClosedFilled.js";import"../../../icons/customIcons/icons/FolderOpened.js";import"../../../icons/customIcons/icons/GreaterOrEqual.js";import"../../../icons/customIcons/icons/LessOrEqual.js";import"../../../icons/customIcons/icons/Search.js";import"../../../icons/customIcons/icons/Wellhub.js";import"../../../icons/customIcons/icons/MultiRuler.js";import"../../../icons/customIcons/icons/Checkbox.js";import"../../../icons/customIcons/icons/CheckboxChecked.js";import"../../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../../icons/customIcons/icons/Radio.js";import"../../../icons/customIcons/icons/RadioChecked.js";import"../../../icons/customIcons/icons/SimulFrac.js";import"../../../icons/customIcons/icons/ZipperFrac.js";import"../../../icons/customIcons/icons/CautionFilled.js";import"../../../icons/customIcons/icons/MoreApp.js";import"../../../icons/customIcons/icons/Pad.js";import"../../../icons/customIcons/icons/Gap.js";import"../../../componentsV2/Menu/Menu.js";import"../../../componentsV2/Counter/Counter.js";import"../../../componentsV2/BadgeBase/BadgeBase.scss.js";import"../../../componentsV2/BadgeDot/BadgeDot.scss.js";import"../../../componentsV2/LoaderLinear/LoaderLinear.scss.js";import"../../../componentsV2/LoaderLogo/LoaderLogo.scss.js";import"../../../componentsV2/Switch/Switch.js";import"../../../componentsV2/Tabs/Tabs.js";import"../../../componentsV2/EmptyState/EmptyState.scss.js";import"../../../componentsV2/FileIcon/FileIcon.js";import"react-dropzone";import"../../../utils/index.js";import"../../../componentsV2/FilesDropzone/FilesDropzone.scss.js";import"../../../componentsV2/FilesLoader/FilesLoader.scss.js";import"../../../componentsV2/FilesProcessor/FilesProcessor.scss.js";import"../../../componentsV2/Skeleton/Skeleton.scss.js";import"../../../utils/main.js";import"../../../componentsV2/CopyToClipboard/CopyToClipboard.scss.js";import"../../../componentsV2/Stepper/Step/Step.scss.js";import"../../../componentsV2/Stepper/Stepper.scss.js";import"../../../componentsV2/ButtonLive/ButtonLive.js";import"../../../componentsV2/LiveDotIndicator/LiveDotIndicator.scss.js";import"../../../componentsV2/IndicatorLive/IndicatorLive.scss.js";import"../../../componentsV2/Accordion/Accordion.scss.js";import"../../../componentsV2/Breadcrumbs/Breadcrumbs.scss.js";import"../../../componentsV2/BadgeComment/BadgeComment.js";import"../../../componentsV2/AppContainer/AppContainer.js";import"../../../componentsV2/AppContainer/AppContainer.constants.js";import"../../../componentsV2/AppFooter/AppFooter.js";import"../../../constants/goals.js";import"../../../constants/segment.js";import"../../../constants/alerts.js";import"../../../constants/apps.js";import"../../../constants/drillstring.js";import"../../../constants/completion.js";import"../../../constants/appPackages.js";import"../../../constants/notifications.js";import"../../../constants/feed.js";import"../../../constants/bha.js";import"../../../utils/env.js";import"../../GradientManager/configuration/constants.js";import"../../DevCenter/DevCenterAppContainer/components/AppCommons/AppCommonsContext.js";import"../../../componentsV2/AppHeader/AppHeader.constants.js";import"../../../componentsV2/AppHeader/AppBadge/AppBadge.scss.js";import"../../../componentsV2/AppHeader/AppAssets/AppAssets.js";import"../../PadModeSelect/PadModeSelect.js";import"../../../componentsV2/AppHeader/PadMode/PadMode.scss.js";import"../../../constants/streamSourceType.js";import"../../../componentsV2/AppHeader/AppHeader.scss.js";import"../../DevCenter/DevCenterAppContainer/components/FullscreenButton/FullscreenButton.js";import"../../DevCenter/DevCenterAppContainer/components/AppInfoMessage/AppInfoMessage.js";import"../../DevCenter/DevCenterAppContainer/components/DevCenterAppView/DevCenterAppView.js";import{isNativeDetected as I}from"../../../utils/mobileDetect.js";var V=m({showMore:{cursor:"pointer"},feedCommentsContainer:{padding:"0 16px 0 24px"},feedCommentsList:{marginTop:24},feedCommentsListContent:{height:function(o){var s=o.commentsListHeight;return s&&s-8},overflow:function(o){return o.commentsListHeight&&"scroll"}},feedCommentsListContentWrapper:{position:"relative"},gradient:{position:"absolute",bottom:0,left:0,width:"100%",height:16,background:function(o){var s=o.isInsideDcApp;return"linear-gradient(180deg, rgba(61, 61, 61, 0) 0%, ".concat(s?"#414141":"3b3b3b"," 100%)")}}});function g(i){var m,g=i.openCommentInput,D=i.openCommentList,h=i.feedItem,f=i.currentUser,b=h.comments,x=b.length,L=x>3,T=s(!1),B=o(T,2),F=B[0],P=B[1],S=s(!1),M=o(S,2),k=M[0],y=M[1],H=s(!1),R=o(H,2),E=R[0],G=R[1],w=s(null),N=o(w,2),q=N[0],z=N[1],U=t(),_=t(),O=e((function(){var o=r(h.comments,(function(o){return-c(o.created_at).unix()}));return E?E&&!k?o.slice(0,5):E&&k?o:[]:o.slice(0,3)}),[b,k,E]);n((function(){if(5===O.length&&!q){var o=_.current.clientHeight;z(o),y(!0)}q&&!E&&(z(null),y(!1))}),[O.length,q,E]);var W=v(),K=V({commentsListHeight:q,isAllCommentsVisibleKeyPressed:E,isInsideDcApp:W});return C("div",{className:(g||!!x)&&K.feedCommentsContainer,children:[g&&!I&&A(u,{inputRef:U,postComment:function(o){j(h.id,o)},setIsPosting:P,companyId:h.company_id,autoFocus:!1,currentUser:f,parentId:"".concat(h.id,"-").concat(null===(m=h.comments)||void 0===m?void 0:m.size)}),D&&C("div",{className:K.feedCommentsList,children:[A("div",{className:K.feedCommentsListContentWrapper,children:C("div",{className:K.feedCommentsListContent,ref:_,children:[O.map((function(o){return A(d,{comment:o,handleDeleteCallback:p,patchCommentCallback:p,companyId:h.company_id,currentUser:f},o.id)})),q&&A("div",{className:K.gradient})]})}),L&&A(a,{variant:"caption",color:"primary","data-testid":"".concat("FeedComments","_viewMoreComments"),className:K.showMore,onClick:function(){G(!E)},children:E?"Hide older comments":"See all comments"})]}),F&&A(l,{})]})}g.propTypes={openCommentInput:i.bool.isRequired,feedItem:i.shape().isRequired,currentUser:i.shape().isRequired};export{g as default};

package/components/FeedItem/components/Icon.js

@@ -1,95 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import classNames from 'classnames';
-import { makeStyles } from '@material-ui/core';
-import AvatarIcon from './AvatarIcon.js';
-import LessonsLearnedLeafIcon from './LessonsLearnedLeafIcon.js';
-import { isNativeDetected } from '../../../utils/mobileDetect.js';
-import { getIconForFeedItemType, AVATAR_ICON } from '../../../utils/feed.js';
-import { FEED_ITEM_TYPES, FEED_ITEM_TYPES_BY_KEY } from '../../../constants/feed.js';
-import { ALERT_LEVEL_COLOR } from '../../../constants/alerts.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-var useStyles = makeStyles({
-  icon: {
-    width: 32,
-    height: 32,
-    backgroundColor: 'grey',
-    borderRadius: 23,
-    position: 'absolute',
-    top: 18,
-    left: -16,
-    padding: 6
-  },
-  iconWrapper: {
-    display: 'inline-block',
-    height: 20,
-    width: 20,
-    overflow: 'hidden'
-  },
-  iconImg: {
-    height: 20,
-    width: 20
-  },
-  iconNative: {
-    left: 'auto'
-  }
-});
-var TypeIcon = function TypeIcon(_ref) {
-  var feedItem = _ref.feedItem,
-    feedItemType = _ref.feedItemType,
-    icon = _ref.icon;
-  var classes = useStyles();
-  var label = FEED_ITEM_TYPES_BY_KEY[feedItemType] ? FEED_ITEM_TYPES_BY_KEY[feedItemType].label : 'Other';
-  var backgroundColorContainer;
-  if (feedItemType === FEED_ITEM_TYPES_BY_KEY.alert.type) {
-    var _feedItem$context, _feedItem$context$ale;
-    var level = (_feedItem$context = feedItem.context) === null || _feedItem$context === void 0 ? void 0 : (_feedItem$context$ale = _feedItem$context.alert) === null || _feedItem$context$ale === void 0 ? void 0 : _feedItem$context$ale.level;
-    backgroundColorContainer = {
-      backgroundColor: ALERT_LEVEL_COLOR[level]
-    };
-  }
-  return /*#__PURE__*/jsx("div", {
-    className: classNames(classes.icon, _defineProperty({}, classes.iconNative, isNativeDetected)),
-    style: backgroundColorContainer,
-    children: /*#__PURE__*/jsx("div", {
-      className: classes.iconWrapper,
-      children: /*#__PURE__*/jsx("img", {
-        src: icon,
-        alt: "".concat(label, " icon"),
-        className: classes.iconImg
-      })
-    })
-  });
-};
-var Icon = function Icon(_ref2) {
-  var feedItem = _ref2.feedItem,
-    displayName = _ref2.displayName,
-    isRecommended = _ref2.isRecommended,
-    currentUser = _ref2.currentUser;
-  var feedItemType = feedItem.type;
-  var icon = getIconForFeedItemType(feedItemType);
-  var isLessonsLearned = feedItemType === FEED_ITEM_TYPES.LESSONS_LEARNED;
-
-  // LessonsLearned has a custom icon. However, inside feedItem, we would like to display the avatar icon with a mark
-  if (icon === AVATAR_ICON || isLessonsLearned) {
-    return /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(AvatarIcon, {
-        displayName: displayName,
-        feedItem: feedItem,
-        isRecommended: isRecommended,
-        currentUser: currentUser
-      }), isLessonsLearned && /*#__PURE__*/jsx(LessonsLearnedLeafIcon, {
-        offsetX: -22,
-        offsetY: 32
-      })]
-    });
-  }
-  return /*#__PURE__*/jsx(TypeIcon, {
-    icon: icon,
-    feedItem: feedItem,
-    feedItemType: feedItemType
-  });
-};
-
-export { Icon as default };
-//# sourceMappingURL=Icon.js.map
+import e from"@babel/runtime/helpers/defineProperty";import o from"classnames";import{makeStyles as r}from"@material-ui/core";import t from"./AvatarIcon.js";import i from"./LessonsLearnedLeafIcon.js";import{isNativeDetected as n}from"../../../utils/mobileDetect.js";import{getIconForFeedItemType as a,AVATAR_ICON as m}from"../../../utils/feed.js";import{FEED_ITEM_TYPES as s,FEED_ITEM_TYPES_BY_KEY as c}from"../../../constants/feed.js";import{ALERT_LEVEL_COLOR as l}from"../../../constants/alerts.js";import{jsxs as d,Fragment as f,jsx as p}from"react/jsx-runtime";var u=r({icon:{width:32,height:32,backgroundColor:"grey",borderRadius:23,position:"absolute",top:18,left:-16,padding:6},iconWrapper:{display:"inline-block",height:20,width:20,overflow:"hidden"},iconImg:{height:20,width:20},iconNative:{left:"auto"}}),h=function(r){var t,i=r.feedItem,a=r.feedItemType,m=r.icon,s=u(),d=c[a]?c[a].label:"Other";if(a===c.alert.type){var f,h,v=null===(f=i.context)||void 0===f||null===(h=f.alert)||void 0===h?void 0:h.level;t={backgroundColor:l[v]}}return p("div",{className:o(s.icon,e({},s.iconNative,n)),style:t,children:p("div",{className:s.iconWrapper,children:p("img",{src:m,alt:"".concat(d," icon"),className:s.iconImg})})})},v=function(e){var o=e.feedItem,r=e.displayName,n=e.isRecommended,c=e.currentUser,l=o.type,u=a(l),v=l===s.LESSONS_LEARNED;return u===m||v?d(f,{children:[p(t,{displayName:r,feedItem:o,isRecommended:n,currentUser:c}),v&&p(i,{offsetX:-22,offsetY:32})]}):p(h,{icon:u,feedItem:o,feedItemType:l})};export{v as default};

package/components/FeedItem/components/Reactions.js

@@ -1,109 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import classNames from 'classnames';
-import moment from 'moment';
-import { uniq, uniqBy } from 'lodash';
-import { makeStyles, useTheme, IconButton } from '@material-ui/core';
-import ThumbUpIcon from '@material-ui/icons/ThumbUp';
-import CommentIcon from '@material-ui/icons/Comment';
-import { notifyOpenFeedCommentInput } from '../../../utils/nativeMessages.js';
-import { isNativeDetected } from '../../../utils/mobileDetect.js';
-import CommentsInfo from '../../CommentsInfo/index.js';
-import utils from '../../../utils/main.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var PAGE_NAME = 'FeedPo';
-var useStyles = makeStyles({
-  reactionButton: {
-    padding: 8
-  },
-  reactions: {
-    minHeight: 48,
-    marginTop: 5,
-    display: 'flex',
-    alignItems: 'center',
-    padding: '8px 16px 8px 24px',
-    flexWrap: 'wrap'
-  },
-  reactionsNative: {
-    padding: '0 16px'
-  },
-  actions: {
-    display: 'flex',
-    marginRight: 30,
-    alignItems: 'center'
-  }
-});
-var AVATARS_VISIBLE_AMOUNT = isNativeDetected ? 2 : 3;
-var Reactions = function Reactions(_ref) {
-  var feedItem = _ref.feedItem,
-    currentUser = _ref.currentUser,
-    setOpenCommentInput = _ref.setOpenCommentInput,
-    setOpenCommentList = _ref.setOpenCommentList,
-    openCommentInput = _ref.openCommentInput,
-    openCommentList = _ref.openCommentList,
-    handleToggleLike = _ref.handleToggleLike;
-  var theme = useTheme();
-  var classes = useStyles();
-  var likesCount = feedItem.likes_count;
-  var commentsCount = feedItem.comments.length;
-  var isLikedByCurrentUser = (feedItem.likes || []).find(function (like) {
-    var _like$user;
-    return ((_like$user = like.user) === null || _like$user === void 0 ? void 0 : _like$user.id) === currentUser.id;
-  });
-  var usersWhoLike = (feedItem.likes || []).map(function (like) {
-    return utils.getUserFullName(like.user);
-  });
-  var usersWhoCommented = uniq((feedItem.comments || []).map(function (comment) {
-    return utils.getUserFullName(comment.user);
-  }));
-  var activeUsersList = uniqBy((feedItem.comments || []).concat(feedItem.likes || []).map(function (item) {
-    return item.user;
-  }).sort(function (item) {
-    return moment(item.created_at).unix();
-  }), 'id').slice(0, AVATARS_VISIBLE_AMOUNT);
-  var isListOrInputClosed = !openCommentInput || !openCommentList;
-  var handleCommentIconClick = function handleCommentIconClick() {
-    if (isNativeDetected) {
-      notifyOpenFeedCommentInput(feedItem.id);
-    } else {
-      setOpenCommentInput(isListOrInputClosed);
-      setOpenCommentList(isListOrInputClosed);
-    }
-  };
-  return /*#__PURE__*/jsx("div", {
-    className: classNames(classes.reactions, _defineProperty({}, classes.reactionsNative, isNativeDetected)),
-    children: /*#__PURE__*/jsxs("div", {
-      className: classes.actions,
-      children: [/*#__PURE__*/jsx(IconButton, {
-        "data-testid": "".concat(PAGE_NAME, "_likeButton"),
-        "aria-label": "Like",
-        onClick: handleToggleLike,
-        className: classes.reactionButton,
-        children: /*#__PURE__*/jsx(ThumbUpIcon, {
-          htmlColor: isLikedByCurrentUser ? theme.palette.primary.main : theme.palette.grey[400]
-        })
-      }), /*#__PURE__*/jsx(IconButton, {
-        "data-testid": "".concat(PAGE_NAME, "_commentButton"),
-        "aria-label": "Comment",
-        onClick: handleCommentIconClick,
-        className: classes.reactionButton,
-        children: /*#__PURE__*/jsx(CommentIcon, {
-          htmlColor: theme.palette.grey[400]
-        })
-      }), /*#__PURE__*/jsx(CommentsInfo, {
-        likesCount: likesCount,
-        usersWhoLike: usersWhoLike,
-        commentsCount: commentsCount,
-        usersWhoCommented: usersWhoCommented,
-        activeUsersList: activeUsersList,
-        onCommentsClick: function onCommentsClick() {
-          return setOpenCommentList(!openCommentList);
-        },
-        small: true
-      })]
-    })
-  });
-};
-
-export { Reactions as default };
-//# sourceMappingURL=Reactions.js.map
+import e from"@babel/runtime/helpers/defineProperty";import t from"classnames";import i from"moment";import{uniq as n,uniqBy as o}from"lodash";import{makeStyles as r,useTheme as m,IconButton as a}from"@material-ui/core";import s from"@material-ui/icons/ThumbUp";import l from"@material-ui/icons/Comment";import{notifyOpenFeedCommentInput as c}from"../../../utils/nativeMessages.js";import{isNativeDetected as u}from"../../../utils/mobileDetect.js";import p from"../../CommentsInfo/index.js";import d from"../../../utils/main.js";import{jsx as f,jsxs as g}from"react/jsx-runtime";var C=r({reactionButton:{padding:8},reactions:{minHeight:48,marginTop:5,display:"flex",alignItems:"center",padding:"8px 16px 8px 24px",flexWrap:"wrap"},reactionsNative:{padding:"0 16px"},actions:{display:"flex",marginRight:30,alignItems:"center"}}),h=u?2:3,k=function(r){var k=r.feedItem,x=r.currentUser,v=r.setOpenCommentInput,N=r.setOpenCommentList,b=r.openCommentInput,y=r.openCommentList,I=r.handleToggleLike,L=m(),j=C(),B=k.likes_count,U=k.comments.length,F=(k.likes||[]).find((function(e){var t;return(null===(t=e.user)||void 0===t?void 0:t.id)===x.id})),_=(k.likes||[]).map((function(e){return d.getUserFullName(e.user)})),P=n((k.comments||[]).map((function(e){return d.getUserFullName(e.user)}))),T=o((k.comments||[]).concat(k.likes||[]).map((function(e){return e.user})).sort((function(e){return i(e.created_at).unix()})),"id").slice(0,h),W=!b||!y;return f("div",{className:t(j.reactions,e({},j.reactionsNative,u)),children:g("div",{className:j.actions,children:[f(a,{"data-testid":"".concat("FeedPo","_likeButton"),"aria-label":"Like",onClick:I,className:j.reactionButton,children:f(s,{htmlColor:F?L.palette.primary.main:L.palette.grey[400]})}),f(a,{"data-testid":"".concat("FeedPo","_commentButton"),"aria-label":"Comment",onClick:function(){u?c(k.id):(v(W),N(W))},className:j.reactionButton,children:f(l,{htmlColor:L.palette.grey[400]})}),f(p,{likesCount:B,usersWhoLike:_,commentsCount:U,usersWhoCommented:P,activeUsersList:T,onCommentsClick:function(){return N(!y)},small:!0})]})})};export{k as default};

package/components/FeedItem/components/RigAndWell.js

@@ -1,77 +1 @@
-import { get } from 'lodash';
-import { makeStyles, Typography } from '@material-ui/core';
-import { SEGMENTS } from '../../../constants/segment.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-/* eslint-disable react/prop-types */
-var PAGE_NAME = 'FeedPo';
-var useStyles = makeStyles(function (theme) {
-  return {
-    rigAndWellContainer: {
-      display: 'flex',
-      gap: '8px',
-      alignItems: 'flex-end'
-    },
-    contentAssetInfo: {
-      color: theme.palette.primary.main,
-      width: '100%',
-      fontSize: 12
-    },
-    assetLink: {
-      cursor: 'pointer',
-      display: 'block',
-      marginTop: theme.spacing(0.5),
-      fontSize: '12px',
-      pointerEvents: 'auto',
-      zIndex: 1
-    },
-    stageNumber: {
-      color: theme.palette.primary.text6,
-      fontSize: 12
-    }
-  };
-});
-var getRigName = function getRigName(feedItem) {
-  var _feedItem$rig, _feedItem$well, _feedItem$well$parent;
-  var isRigBasedItem = !!feedItem.rig;
-  return isRigBasedItem ? (_feedItem$rig = feedItem.rig) === null || _feedItem$rig === void 0 ? void 0 : _feedItem$rig.name : (_feedItem$well = feedItem.well) === null || _feedItem$well === void 0 ? void 0 : (_feedItem$well$parent = _feedItem$well.parent_asset) === null || _feedItem$well$parent === void 0 ? void 0 : _feedItem$well$parent.name;
-};
-var RigAndWell = function RigAndWell(_ref) {
-  var _feedItem$rig2, _feedItem$rig2$active, _feedItem$well2, _feedItem$rig3, _feedItem$rig3$active, _feedItem$well3;
-  var feedItem = _ref.feedItem;
-  var classes = useStyles();
-  var isRigBasedItem = !!feedItem.rig;
-  var rigName = getRigName(feedItem);
-  var wellName = isRigBasedItem ? (_feedItem$rig2 = feedItem.rig) === null || _feedItem$rig2 === void 0 ? void 0 : (_feedItem$rig2$active = _feedItem$rig2.active_well) === null || _feedItem$rig2$active === void 0 ? void 0 : _feedItem$rig2$active.name : (_feedItem$well2 = feedItem.well) === null || _feedItem$well2 === void 0 ? void 0 : _feedItem$well2.name;
-  var wellId = isRigBasedItem ? (_feedItem$rig3 = feedItem.rig) === null || _feedItem$rig3 === void 0 ? void 0 : (_feedItem$rig3$active = _feedItem$rig3.active_well) === null || _feedItem$rig3$active === void 0 ? void 0 : _feedItem$rig3$active.id : (_feedItem$well3 = feedItem.well) === null || _feedItem$well3 === void 0 ? void 0 : _feedItem$well3.id;
-  var stageNumber = get(feedItem, ['segment', 0]) === SEGMENTS.COMPLETION && get(feedItem, ['context', 'alert', 'stage_numbers', 0]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.rigAndWellContainer,
-    children: [wellId ? /*#__PURE__*/jsx("a", {
-      "data-testid": "".concat(PAGE_NAME, "_wellLink"),
-      className: classes.assetLink,
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      },
-      href: "/assets/".concat(wellId, "/"),
-      target: "_blank",
-      rel: "noreferrer",
-      children: /*#__PURE__*/jsxs(Typography, {
-        variant: "body2",
-        className: classes.contentAssetInfo,
-        children: [rigName, " - ", wellName]
-      })
-    }) : /*#__PURE__*/jsxs(Typography, {
-      variant: "body2",
-      className: classes.contentAssetInfo,
-      children: [rigName, " - No Active Well"]
-    }), stageNumber && /*#__PURE__*/jsxs(Typography, {
-      variant: "body2",
-      className: classes.stageNumber,
-      children: ["Stage ", stageNumber]
-    })]
-  });
-};
-
-export { RigAndWell as default };
-//# sourceMappingURL=RigAndWell.js.map
+import{get as e}from"lodash";import{makeStyles as n,Typography as t}from"@material-ui/core";import{SEGMENTS as i}from"../../../constants/segment.js";import{jsxs as a,jsx as o}from"react/jsx-runtime";var r=n((function(e){return{rigAndWellContainer:{display:"flex",gap:"8px",alignItems:"flex-end"},contentAssetInfo:{color:e.palette.primary.main,width:"100%",fontSize:12},assetLink:{cursor:"pointer",display:"block",marginTop:e.spacing(.5),fontSize:"12px",pointerEvents:"auto",zIndex:1},stageNumber:{color:e.palette.primary.text6,fontSize:12}}})),l=function(n){var l,s,d,c,m,v,u=n.feedItem,p=r(),f=!!u.rig,g=function(e){var n,t,i;return e.rig?null===(n=e.rig)||void 0===n?void 0:n.name:null===(t=e.well)||void 0===t||null===(i=t.parent_asset)||void 0===i?void 0:i.name}(u),x=f?null===(l=u.rig)||void 0===l||null===(s=l.active_well)||void 0===s?void 0:s.name:null===(d=u.well)||void 0===d?void 0:d.name,N=f?null===(c=u.rig)||void 0===c||null===(m=c.active_well)||void 0===m?void 0:m.id:null===(v=u.well)||void 0===v?void 0:v.id,b=e(u,["segment",0])===i.COMPLETION&&e(u,["context","alert","stage_numbers",0]);return a("div",{className:p.rigAndWellContainer,children:[N?o("a",{"data-testid":"".concat("FeedPo","_wellLink"),className:p.assetLink,onClick:function(e){return e.stopPropagation()},href:"/assets/".concat(N,"/"),target:"_blank",rel:"noreferrer",children:a(t,{variant:"body2",className:p.contentAssetInfo,children:[g," - ",x]})}):a(t,{variant:"body2",className:p.contentAssetInfo,children:[g," - No Active Well"]}),b&&a(t,{variant:"body2",className:p.stageNumber,children:["Stage ",b]})]})};export{l as default};

package/components/FeedItem/components/TypeAndAssetTitle.js

@@ -1,42 +1 @@
-import { makeStyles, Typography } from '@material-ui/core';
-import { FEED_ITEM_TYPES_BY_KEY, FEED_ITEM_TYPES } from '../../../constants/feed.js';
-import { jsx } from 'react/jsx-runtime';
-
-/* eslint-disable react/prop-types */
-var PAGE_NAME = 'FeedPo';
-var USER_NAME_TITLE_ITEMS = [FEED_ITEM_TYPES_BY_KEY.post.type, FEED_ITEM_TYPES_BY_KEY.app_annotation.type, FEED_ITEM_TYPES_BY_KEY.geosteering_comments.type, FEED_ITEM_TYPES.TRACES_MEMO, FEED_ITEM_TYPES.DEPTH_COMMENTS];
-var useStyles = makeStyles(function (theme) {
-  return {
-    assetRoot: {
-      color: theme.palette.grey[400],
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      marginRight: 4,
-      fontWeight: 700,
-      letterSpacing: 0.25
-    },
-    postTitle: {
-      color: '#fff'
-    }
-  };
-});
-var TypeAndAssetTitle = function TypeAndAssetTitle(_ref) {
-  var feedItem = _ref.feedItem,
-    userFullName = _ref.userFullName,
-    typeLabel = _ref.typeLabel;
-  var classes = useStyles();
-  var typeOrName = USER_NAME_TITLE_ITEMS.includes(feedItem.type) ? userFullName : typeLabel;
-  return /*#__PURE__*/jsx(Typography, {
-    variant: "body2",
-    className: classes.assetRoot,
-    children: /*#__PURE__*/jsx("span", {
-      "data-testid": "".concat(PAGE_NAME, "_postTitle"),
-      className: classes.postTitle,
-      children: typeOrName
-    })
-  });
-};
-
-export { TypeAndAssetTitle as default };
-//# sourceMappingURL=TypeAndAssetTitle.js.map
+import{makeStyles as e,Typography as t}from"@material-ui/core";import{FEED_ITEM_TYPES_BY_KEY as o,FEED_ITEM_TYPES as a}from"../../../constants/feed.js";import{jsx as r}from"react/jsx-runtime";var i=[o.post.type,o.app_annotation.type,o.geosteering_comments.type,a.TRACES_MEMO,a.DEPTH_COMMENTS],n=e((function(e){return{assetRoot:{color:e.palette.grey[400],whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",marginRight:4,fontWeight:700,letterSpacing:.25},postTitle:{color:"#fff"}}})),s=function(e){var o=e.feedItem,a=e.userFullName,s=e.typeLabel,l=n(),p=i.includes(o.type)?a:s;return r(t,{variant:"body2",className:l.assetRoot,children:r("span",{"data-testid":"".concat("FeedPo","_postTitle"),className:l.postTitle,children:p})})};export{s as default};