@corva/ui 3.1.0-rc.5 → 3.1.0

package/components/AssetsMultipleSelector/AssetsMultipleSelector.js

@@ -1,180 +1 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { memo, useState, useEffect, useMemo, useCallback } from 'react';
-import classNames from 'classnames';
-import { makeStyles } from '@material-ui/core';
-import { sortBy } from 'lodash';
-import { Search } from '../Search/Search.js';
-import { mapAssetGetRequest } from '../../clients/jsonApi/index.js';
-import '../../utils/index.js';
-import useLoadedData from '../../effects/useLoadedData.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { jsonaDataFormatter } from '../../utils/jsonaDataFormatter.js';
-
-var _excluded = ["listbox", "paper"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useStyles = makeStyles(function (theme) {
-  return {
-    listbox: {
-      maxHeight: 360
-    },
-    paper: {
-      width: 364
-    },
-    footer: {
-      fontSize: 12,
-      color: theme.palette.primary.text6,
-      lineHeight: '16.872px',
-      padding: '8px 16px'
-    }
-  };
-});
-var getDataFromResponseFn = function getDataFromResponseFn(response) {
-  var _response$headers;
-  return {
-    data: jsonaDataFormatter.deserialize(response.data),
-    total: Number((_response$headers = response.headers) === null || _response$headers === void 0 ? void 0 : _response$headers.get('total')) || 0
-  };
-};
-var initialSelectedAssets = [];
-var defaultQueryParams = {};
-var DEFAULT_ASSETS_PER_PAGE = 50;
-var initialData = {
-  data: [],
-  total: 0
-};
-var AssetsMultipleSelector = memo(function (_ref) {
-  var _ref$selectedAssets = _ref.selectedAssets,
-    selectedAssets = _ref$selectedAssets === void 0 ? initialSelectedAssets : _ref$selectedAssets,
-    onChange = _ref.onChange,
-    label = _ref.label,
-    className = _ref.className,
-    type = _ref.type,
-    customRequestQueryParams = _ref.customRequestQueryParams,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var styles = useStyles();
-  var _useLoadedData = useLoadedData({
-      loadFn: mapAssetGetRequest(type, true),
-      initialData: initialData,
-      getDataFromResponseFn: getDataFromResponseFn,
-      isCacheEnabled: true
-    }),
-    isLoading = _useLoadedData.isLoading,
-    setIsLoading = _useLoadedData.setIsLoading,
-    data = _useLoadedData.data,
-    loadData = _useLoadedData.loadData;
-  var assetsData = data.data,
-    total = data.total;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchValue = _useState2[0],
-    setSearchValue = _useState2[1];
-  useEffect(function () {
-    loadAssets('', customRequestQueryParams);
-  }, []);
-  var selectedOptions = useMemo(function () {
-    return selectedAssets.map(function (asset) {
-      return _objectSpread(_objectSpread({}, asset), {}, {
-        id: asset.id,
-        label: asset.name
-      });
-    });
-  }, [selectedAssets]);
-  var options = useMemo(function () {
-    var optionsMap = {};
-    var allOptions = selectedOptions.length ? assetsData.concat(selectedOptions) : assetsData;
-    allOptions.forEach(function (asset) {
-      optionsMap[asset.id] = _objectSpread(_objectSpread({}, asset), {}, {
-        id: asset.id,
-        label: asset.name
-      });
-    });
-    return Object.values(sortBy(optionsMap, 'label'));
-  }, [assetsData, selectedAssets, searchValue]);
-  var loadAssets = useCallback(function (search) {
-    var customRequestQueryParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var params = _objectSpread(_objectSpread(_objectSpread({}, defaultQueryParams), {}, {
-      per_page: DEFAULT_ASSETS_PER_PAGE
-    }, customRequestQueryParams), {}, {
-      fields: ["".concat(type, ".name")].concat((customRequestQueryParams === null || customRequestQueryParams === void 0 ? void 0 : customRequestQueryParams.fields) || [])
-    });
-    loadData(_objectSpread({
-      search: search
-    }, params));
-  }, []);
-  var handleChange = function handleChange(event, visibleSelectedOptions, reason) {
-    if (reason === 'reset') return;
-    var newAssets = visibleSelectedOptions.map(function (option) {
-      return _objectSpread(_objectSpread({}, option), {}, {
-        name: option.label
-      });
-    });
-    onChange(newAssets);
-  };
-  var onInputReset = function onInputReset() {
-    setSearchValue('');
-    loadAssets('', customRequestQueryParams);
-  };
-  var handleInputChange = function handleInputChange(value, reason) {
-    if (reason === 'reset' || value === '') {
-      onInputReset();
-      return;
-    }
-    if (value.trimStart() !== searchValue) {
-      setSearchValue(value.trimStart());
-      setIsLoading(true);
-      loadAssets(value.trimStart(), customRequestQueryParams);
-    }
-  };
-  var countNotShowedAssets = function countNotShowedAssets() {
-    var optionsCount = total - (assetsData === null || assetsData === void 0 ? void 0 : assetsData.length);
-    if (optionsCount === 0) return null;
-    return optionsCount;
-  };
-  var paperFooter = useMemo(function () {
-    var notShowedAssetsQuantity = countNotShowedAssets();
-    return notShowedAssetsQuantity && !isLoading && searchValue ? /*#__PURE__*/jsxs("div", {
-      className: styles.footer,
-      children: [notShowedAssetsQuantity, " additional items not displayed. Continue typing for more refined results."]
-    }) : null;
-  }, [assetsData, isLoading, !!searchValue, total]);
-  var listbox = classes.listbox,
-    paper = classes.paper,
-    restClasses = _objectWithoutProperties(classes, _excluded);
-  return /*#__PURE__*/jsx(Search, {
-    value: selectedOptions,
-    onChange: handleChange,
-    TextFieldProps: {
-      label: label
-    }
-    // @ts-ignore
-    ,
-    className: className,
-    classes: _objectSpread({
-      listbox: classNames(styles.listbox, listbox),
-      paper: classNames(styles.paper, paper)
-    }, restClasses),
-    loading: isLoading,
-    options: options,
-    placeholder: "",
-    multiple: true,
-    filterSelectedOptions: false,
-    AutocompleteProps: {
-      forcePopupIcon: true
-    },
-    isHiddenAllOption: true,
-    onInputChangeCallback: handleInputChange,
-    onInputReset: onInputReset,
-    paperFooter: paperFooter,
-    getOptionSelected: function getOptionSelected(option, value) {
-      return +option.id === +value.id;
-    },
-    isPrioritizedSelectedOptions: true
-  });
-});
-
-export { AssetsMultipleSelector as default };
-//# sourceMappingURL=AssetsMultipleSelector.js.map
+import{__assign as t,__rest as e}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as a,jsx as o}from"react/jsx-runtime";import{memo as i,useState as r,useEffect as n,useMemo as l,useCallback as s}from"react";import d from"classnames";import{makeStyles as p}from"@material-ui/core";import{sortBy as c}from"lodash";import{Search as u}from"../Search/Search.js";import{mapAssetGetRequest as m}from"../../clients/jsonApi/index.js";import"../../utils/index.js";import f from"../../effects/useLoadedData.js";import{jsonaDataFormatter as v}from"../../utils/jsonaDataFormatter.js";var b=p((function(t){return{listbox:{maxHeight:360},paper:{width:364},footer:{fontSize:12,color:t.palette.primary.text6,lineHeight:"16.872px",padding:"8px 16px"}}})),h=function(t){var e;return{data:v.deserialize(t.data),total:Number(null===(e=t.headers)||void 0===e?void 0:e.get("total"))||0}},g=[],x={},j={data:[],total:0},S=i((function(i){var p=i.selectedAssets,v=void 0===p?g:p,S=i.onChange,C=i.label,F=i.className,y=i.type,D=i.customRequestQueryParams,O=i.classes,P=void 0===O?{}:O,A=b(),I=f({loadFn:m(y,!0),initialData:j,getDataFromResponseFn:h,isCacheEnabled:!0}),N=I.isLoading,z=I.setIsLoading,H=I.data,L=I.loadData,R=H.data,E=H.total,_=r(""),k=_[0],q=_[1];n((function(){T("",D)}),[]);var w=l((function(){return v.map((function(e){return t(t({},e),{id:e.id,label:e.name})}))}),[v]),Q=l((function(){var e={};return(w.length?R.concat(w):R).forEach((function(a){e[a.id]=t(t({},a),{id:a.id,label:a.name})})),Object.values(c(e,"label"))}),[R,v,k]),T=s((function(e,a){void 0===a&&(a={});var o=t(t(t(t({},x),{per_page:50}),a),{fields:["".concat(y,".name")].concat((null==a?void 0:a.fields)||[])});L(t({search:e},o))}),[]),B=function(){q(""),T("",D)},G=l((function(){var t,e=0===(t=E-(null==R?void 0:R.length))?null:t;return e&&!N&&k?a("div",{className:A.footer,children:[e," additional items not displayed. Continue typing for more refined results."]}):null}),[R,N,!!k,E]),J=P.listbox,K=P.paper,M=e(P,["listbox","paper"]);return o(u,{value:w,onChange:function(e,a,o){if("reset"!==o){var i=a.map((function(e){return t(t({},e),{name:e.label})}));S(i)}},TextFieldProps:{label:C},className:F,classes:t({listbox:d(A.listbox,J),paper:d(A.paper,K)},M),loading:N,options:Q,placeholder:"",multiple:!0,filterSelectedOptions:!1,AutocompleteProps:{forcePopupIcon:!0},isHiddenAllOption:!0,onInputChangeCallback:function(t,e){"reset"!==e&&""!==t?t.trimStart()!==k&&(q(t.trimStart()),z(!0),T(t.trimStart(),D)):B()},onInputReset:B,paperFooter:G,getOptionSelected:function(t,e){return+t.id==+e.id},isPrioritizedSelectedOptions:!0})}));export{S as default};

package/components/Attachment/index.js

@@ -1,408 +1 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import ReactPlayer from 'react-player';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import { Typography } from '@material-ui/core';
-import ImageIcon from '@material-ui/icons/Image';
-import FullSizeIcon from '@material-ui/icons/Fullscreen';
-import grey from '@material-ui/core/colors/grey';
-import NewDocumentViewer from '../NewDocumentViewer/NewDocumentViewer.js';
-import { UnavailableFileIcon } from '../NewDocumentViewer/icons/UnavailableFileIcon.js';
-import styles from './styles.css.js';
-import FileTypeIcon from '../FileTypeIcon.js';
-import ImageViewer from '../ImageViewer/index.js';
-import IconButton from '../IconButton/index.js';
-import { isNativeDetected } from '../../utils/mobileDetect.js';
-import { getIsImage, getIsVideo } from '../../utils/fileExtension.js';
-import { getIsPreviewUnavailable } from '../../utils/filePreview.js';
-import { DownloadIcon } from '../../icons/iconParkIcons.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 '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/regenerator';
-import 'querystring';
-import 'uuid/v1';
-import 'lodash';
-import '../../clients/subscriptions.js';
-import 'query-string';
-import '../../clients/api/apiCore.js';
-import '../../clients/constants.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 useSignedURL from '../../effects/useSignedURL.js';
-import '../../utils/index.js';
-import 'uuid';
-import 'jsona';
-import '../StatusBadge/constants.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import 'lodash/set';
-import 'lodash/get';
-import 'lodash/unset';
-import 'moment';
-import '../../clients/sso/auth0.js';
-import '../../clients/sso/oauth2.js';
-import 'lodash/isEmpty';
-import 'lodash/sortBy';
-import '../../constants/streamSourceType.js';
-import '../DevCenter/DevCenterAppContainer/components/CommentsSwitch/CommentsSwitchContext.js';
-import '../DevCenter/DevCenterAppContainer/components/AppCommons/AppCommonsContext.js';
-import utils from '../../utils/main.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-var PAGE_NAME = 'Attachment';
-var grey200 = grey[200];
-var grey400 = grey[400];
-var SIZES = {
-  small: {
-    label: 'small',
-    value: 135
-  },
-  medium: {
-    label: 'medium',
-    value: 300
-  }
-};
-var style = {
-  fileImage: function fileImage(imageIsLoaded, size) {
-    return {
-      maxWidth: '100%',
-      borderRadius: 4,
-      overflow: 'hidden',
-      // NOTE: Makes one-line comment with image fits into comments container. Equals to
-      // imagePlaceholder height
-      maxHeight: size === SIZES.small.label ? SIZES.small.value : SIZES.medium.value,
-      display: imageIsLoaded ? 'initial' : 'none',
-      cursor: 'pointer'
-    };
-  },
-  fileDownloadWrapper: {
-    padding: '10px 10px 10px 5px',
-    border: "1px solid #616161",
-    borderRadius: 3,
-    maxWidth: 500,
-    // NOTE: Corresponds to react-player max width
-    width: '75%'
-  },
-  imagePlaceholder: {
-    position: 'relative',
-    backgroundColor: grey200,
-    borderRadius: 3,
-    marginTop: 10,
-    height: 135,
-    width: 135
-  }
-};
-var muiStyles = function muiStyles(theme) {
-  return {
-    imageIconRoot: {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)'
-    },
-    dialog: {
-      width: '95%',
-      height: '95%',
-      maxWidth: '100%',
-      position: 'relative'
-    },
-    nativeDialog: {
-      width: '100%',
-      height: '100%',
-      maxWidth: '100%',
-      maxHeight: '100%',
-      margin: 0
-    },
-    dialogRoot: {
-      // NOTE: Make background color similar to lightbox
-      backgroundColor: 'rgba(0, 0, 0, 0.85)'
-    },
-    fileName: {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      fontWeight: 400
-    },
-    downloadIcon: {
-      color: theme.palette.primary.text3
-    },
-    disabledPreview: {
-      backgroundColor: theme.palette.primary.text9
-    },
-    unavailableFileIcon: {
-      marginRight: 12,
-      minWidth: 32
-    },
-    titleContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%'
-    },
-    caption: {
-      fontSize: 12,
-      fontWeight: 400,
-      width: 'fit-content'
-    },
-    unavailableFileName: {
-      fontSize: 12,
-      fontWeight: 400
-    }
-  };
-};
-
-/* eslint-disable react/prop-types */
-var ImageAttachment = function ImageAttachment(props) {
-  var downloadLink = useSignedURL(props.attachmentFileName) || props.attachmentUrl;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs("div", {
-      onClick: props.openLightbox,
-      className: styles.cAttachmentImg,
-      children: [/*#__PURE__*/jsx("img", {
-        "data-testid": "".concat(PAGE_NAME, "_image"),
-        src: downloadLink,
-        style: style.fileImage(props.imageIsLoaded, props.size),
-        alt: "Attachment",
-        onLoad: props.setImageIsLoaded
-      }), /*#__PURE__*/jsx("div", {
-        "data-testid": "".concat(PAGE_NAME, "_button"),
-        className: styles.cAttachmentImgPreviwBtn,
-        children: /*#__PURE__*/jsx(FullSizeIcon, {})
-      })]
-    }), !props.imageIsLoaded && /*#__PURE__*/jsx("div", {
-      style: style.imagePlaceholder,
-      children: /*#__PURE__*/jsx(ImageIcon, {
-        "data-testid": "".concat(PAGE_NAME, "_placeholder"),
-        className: props.classes.imageIconRoot,
-        htmlColor: grey400,
-        fontSize: "large"
-      })
-    }), props.lightboxIsOpen && /*#__PURE__*/jsx(ImageViewer, {
-      mainSrc: downloadLink,
-      imagePadding: 50,
-      onAfterOpen: props.handleLightboxOpen,
-      onCloseRequest: props.handleLightboxClose
-    })]
-  });
-};
-var FileAttachment = function FileAttachment(props) {
-  var fileName = utils.getFileNameWithExtensionFromPath(props.displayName || props.attachmentUrl);
-  var fileUrl = useSignedURL(props.attachmentFileName);
-  var isPreviewUnavailable = getIsPreviewUnavailable(fileName);
-  var handleFilePreviewOpen = function handleFilePreviewOpen() {
-    if (isPreviewUnavailable) return;
-    props.openPreview();
-  };
-  return /*#__PURE__*/jsxs("div", {
-    className: styles.cAttachmentFileWrapper,
-    children: [/*#__PURE__*/jsxs("div", {
-      className: classNames(styles.cAttachmentFileDownloadWrapper, isPreviewUnavailable && props.classes.disabledPreview),
-      style: style.fileDownloadWrapper,
-      onClick: handleFilePreviewOpen,
-      children: [isPreviewUnavailable ? /*#__PURE__*/jsx(UnavailableFileIcon, {
-        className: props.classes.unavailableFileIcon
-      }) : /*#__PURE__*/jsx(FileTypeIcon, {
-        fileName: props.displayName || props.attachmentUrl,
-        className: styles.cAttachmentFileDownloadWrapperFileIcon,
-        size: props.small ? 25 : 50
-      }), /*#__PURE__*/jsxs("div", {
-        className: props.classes.titleContainer,
-        children: [isPreviewUnavailable && /*#__PURE__*/jsx("div", {
-          className: props.classes.caption,
-          children: "Preview unavailable"
-        }), /*#__PURE__*/jsx("div", {
-          "data-testid": "".concat(PAGE_NAME, "_name"),
-          className: classNames(styles.cAttachmentFileDownloadWrapperFileName, isPreviewUnavailable && props.classes.fileName),
-          children: /*#__PURE__*/jsx(Typography, {
-            variant: "subtitle2",
-            noWrap: true,
-            className: props.classes.unavailableFileName,
-            children: fileName
-          })
-        })]
-      }), /*#__PURE__*/jsx(NewDocumentViewer, {
-        fileUrl: fileUrl,
-        classes: {
-          root: props.classes.dialogRoot,
-          paper: isNativeDetected ? props.classes.nativeDialog : props.classes.dialog
-        },
-        fileName: fileName,
-        fileSize: props.attachmentSize,
-        onClose: props.closePreview,
-        open: props.previewIsOpen
-      })]
-    }), /*#__PURE__*/jsx("a", {
-      download: props.displayName,
-      href: fileUrl,
-      className: styles.cAttachmentFileDownloadWrapperForm,
-      children: /*#__PURE__*/jsx(IconButton, {
-        "data-testid": "".concat(PAGE_NAME, "_downloadButton"),
-        className: props.classes.downloadIcon,
-        type: "submit",
-        children: /*#__PURE__*/jsx(DownloadIcon, {
-          size: 24,
-          className: props.classes.downloadIcon
-        })
-      })
-    })]
-  });
-};
-
-/* eslint-enable react/prop-types */
-
-function Attachment(props) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isImageLoaded = _useState2[0],
-    setIsImageLoaded = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isLightboxOpen = _useState4[0],
-    setIsLightboxOpen = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isPreviewOpen = _useState6[0],
-    setIsPreviewOpen = _useState6[1];
-  var fileName = props.displayName || props.attachmentUrl || props.fileName;
-  var isImage = getIsImage(fileName);
-  var isVideo = getIsVideo(fileName);
-
-  // Don't fetch download link if attachmentUrl is provided
-  var downloadLink = useSignedURL(!props.attachmentUrl && props.fileName);
-  var attachmentUrl = props.attachmentUrl || downloadLink;
-  var preventIOSScroll = useCallback(function (e) {
-    return e.preventDefault();
-  }, []);
-
-  // NOTE: iOS WebView has a bug when background content of React Modal is scrollable
-  // Source: https://github.com/reactjs/react-modal/issues/369
-  var handleLightboxOpen = function handleLightboxOpen() {
-    if (isNativeDetected) {
-      // document.documentElement.style.overflowY = 'hidden';
-      document.documentElement.addEventListener('touchmove', preventIOSScroll, {
-        passive: false
-      });
-    }
-  };
-  var handleLightboxClose = function handleLightboxClose() {
-    if (isNativeDetected) {
-      // document.documentElement.style.overflowY = 'visible';
-      document.documentElement.removeEventListener('touchmove', preventIOSScroll);
-    }
-    setIsLightboxOpen(false);
-  };
-  var openLightbox = function openLightbox() {
-    return setIsLightboxOpen(true);
-  };
-  var setImageLoaded = function setImageLoaded() {
-    return setIsImageLoaded(true);
-  };
-  var openPreview = function openPreview() {
-    return setIsPreviewOpen(true);
-  };
-  var closePreview = function closePreview(e) {
-    e.stopPropagation();
-    setIsPreviewOpen(false);
-  };
-  if (isImage) return /*#__PURE__*/jsx("div", {
-    className: styles.cAttachment,
-    children: /*#__PURE__*/jsx(ImageAttachment, {
-      size: props.size,
-      openLightbox: openLightbox,
-      attachmentFileName: props.fileName,
-      attachmentUrl: props.attachmentUrl,
-      setImageIsLoaded: setImageLoaded,
-      imageIsLoaded: isImageLoaded,
-      lightboxIsOpen: isLightboxOpen,
-      handleLightboxOpen: handleLightboxOpen,
-      handleLightboxClose: handleLightboxClose,
-      classes: props.classes
-    })
-  });
-  if (isVideo && ReactPlayer.canPlay(attachmentUrl)) return /*#__PURE__*/jsx("div", {
-    className: styles.cAttachment,
-    children: /*#__PURE__*/jsx(ReactPlayer, {
-      "data-testid": "".concat(PAGE_NAME, "_player"),
-      className: styles.cAttachmentReactPlayer,
-      url: attachmentUrl,
-      config: {
-        file: {
-          attributes: {
-            preload: 'metadata'
-          }
-        }
-      },
-      controls: true,
-      height: props.size === SIZES.small.label ? SIZES.small.value : SIZES.medium.value,
-      width: null
-    })
-  });
-  return /*#__PURE__*/jsx("div", {
-    className: styles.cAttachment,
-    children: /*#__PURE__*/jsx(FileAttachment, {
-      attachmentUrl: attachmentUrl,
-      attachmentFileName: props.fileName,
-      attachmentSize: props.attachmentSize,
-      displayName: props.displayName,
-      openPreview: openPreview,
-      closePreview: closePreview,
-      previewIsOpen: isPreviewOpen,
-      classes: props.classes,
-      small: props.small
-    })
-  });
-}
-Attachment.propTypes = {
-  attachmentUrl: PropTypes.string.isRequired,
-  attachmentSize: PropTypes.number,
-  displayName: PropTypes.string,
-  fileName: PropTypes.string,
-  size: PropTypes.oneOf([SIZES.small.label, SIZES.medium.label]),
-  classes: PropTypes.shape({}).isRequired,
-  small: PropTypes.bool
-};
-Attachment.defaultProps = {
-  displayName: null,
-  fileName: null,
-  attachmentSize: undefined,
-  size: SIZES.medium.label,
-  small: false
-};
-var Attachment$1 = withStyles(muiStyles)(Attachment);
-
-export { Attachment$1 as default };
-//# sourceMappingURL=index.js.map
+import e from"@babel/runtime/helpers/slicedToArray";import{useState as t,useCallback as o}from"react";import i from"prop-types";import s from"react-player";import a from"classnames";import{withStyles as n}from"@material-ui/core/styles";import{Typography as r}from"@material-ui/core";import c from"@material-ui/icons/Image";import l from"@material-ui/icons/Fullscreen";import m from"@material-ui/core/colors/grey";import p from"../NewDocumentViewer/NewDocumentViewer.js";import{UnavailableFileIcon as d}from"../NewDocumentViewer/icons/UnavailableFileIcon.js";import u from"./styles.css.js";import h from"../FileTypeIcon.js";import f from"../ImageViewer/index.js";import g from"../IconButton/index.js";import{isNativeDetected as j}from"../../utils/mobileDetect.js";import{getIsImage as v,getIsVideo as b}from"../../utils/fileExtension.js";import{getIsPreviewUnavailable as I}from"../../utils/filePreview.js";import{DownloadIcon as N}from"../../icons/iconParkIcons.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"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/helpers/defineProperty";import"@babel/runtime/regenerator";import"querystring";import"uuid/v1";import"lodash";import"../../clients/subscriptions.js";import"../../clients/jsonApi/index.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 w from"../../effects/useSignedURL.js";import"../../utils/index.js";import"uuid";import"jsona";import"../StatusBadge/constants.js";import"@babel/runtime/helpers/toConsumableArray";import"lodash/set";import"lodash/get";import"lodash/unset";import"moment";import"../../clients/api/apiCore.js";import"../../clients/constants.js";import"../../clients/sso/auth0.js";import"../../clients/sso/oauth2.js";import"lodash/isEmpty";import"lodash/sortBy";import"../../constants/streamSourceType.js";import"../DevCenter/DevCenterAppContainer/components/CommentsSwitch/CommentsSwitchContext.js";import"../DevCenter/DevCenterAppContainer/components/AppCommons/AppCommonsContext.js";import x from"../../utils/main.js";import{jsx as C,jsxs as y,Fragment as A}from"react/jsx-runtime";var F=m[200],P=m[400],D={label:"small",value:135},S={label:"medium",value:300},W={fileImage:function(e,t){return{maxWidth:"100%",borderRadius:4,overflow:"hidden",maxHeight:t===D.label?D.value:S.value,display:e?"initial":"none",cursor:"pointer"}},fileDownloadWrapper:{padding:"10px 10px 10px 5px",border:"1px solid #616161",borderRadius:3,maxWidth:500,width:"75%"},imagePlaceholder:{position:"relative",backgroundColor:F,borderRadius:3,marginTop:10,height:135,width:135}},z=function(e){var t=w(e.attachmentFileName)||e.attachmentUrl;return y(A,{children:[y("div",{onClick:e.openLightbox,className:u.cAttachmentImg,children:[C("img",{"data-testid":"".concat("Attachment","_image"),src:t,style:W.fileImage(e.imageIsLoaded,e.size),alt:"Attachment",onLoad:e.setImageIsLoaded}),C("div",{"data-testid":"".concat("Attachment","_button"),className:u.cAttachmentImgPreviwBtn,children:C(l,{})})]}),!e.imageIsLoaded&&C("div",{style:W.imagePlaceholder,children:C(c,{"data-testid":"".concat("Attachment","_placeholder"),className:e.classes.imageIconRoot,htmlColor:P,fontSize:"large"})}),e.lightboxIsOpen&&C(f,{mainSrc:t,imagePadding:50,onAfterOpen:e.handleLightboxOpen,onCloseRequest:e.handleLightboxClose})]})},L=function(e){var t=x.getFileNameWithExtensionFromPath(e.displayName||e.attachmentUrl),o=w(e.attachmentFileName),i=I(t);return y("div",{className:u.cAttachmentFileWrapper,children:[y("div",{className:a(u.cAttachmentFileDownloadWrapper,i&&e.classes.disabledPreview),style:W.fileDownloadWrapper,onClick:function(){i||e.openPreview()},children:[i?C(d,{className:e.classes.unavailableFileIcon}):C(h,{fileName:e.displayName||e.attachmentUrl,className:u.cAttachmentFileDownloadWrapperFileIcon,size:e.small?25:50}),y("div",{className:e.classes.titleContainer,children:[i&&C("div",{className:e.classes.caption,children:"Preview unavailable"}),C("div",{"data-testid":"".concat("Attachment","_name"),className:a(u.cAttachmentFileDownloadWrapperFileName,i&&e.classes.fileName),children:C(r,{variant:"subtitle2",noWrap:!0,className:e.classes.unavailableFileName,children:t})})]}),C(p,{fileUrl:o,classes:{root:e.classes.dialogRoot,paper:j?e.classes.nativeDialog:e.classes.dialog},fileName:t,fileSize:e.attachmentSize,onClose:e.closePreview,open:e.previewIsOpen})]}),C("a",{download:e.displayName,href:o,className:u.cAttachmentFileDownloadWrapperForm,children:C(g,{"data-testid":"".concat("Attachment","_downloadButton"),className:e.classes.downloadIcon,type:"submit",children:C(N,{size:24,className:e.classes.downloadIcon})})})]})};function R(i){var a=t(!1),n=e(a,2),r=n[0],c=n[1],l=t(!1),m=e(l,2),p=m[0],d=m[1],h=t(!1),f=e(h,2),g=f[0],I=f[1],N=i.displayName||i.attachmentUrl||i.fileName,x=v(N),y=b(N),A=w(!i.attachmentUrl&&i.fileName),F=i.attachmentUrl||A,P=o((function(e){return e.preventDefault()}),[]);return x?C("div",{className:u.cAttachment,children:C(z,{size:i.size,openLightbox:function(){return d(!0)},attachmentFileName:i.fileName,attachmentUrl:i.attachmentUrl,setImageIsLoaded:function(){return c(!0)},imageIsLoaded:r,lightboxIsOpen:p,handleLightboxOpen:function(){j&&document.documentElement.addEventListener("touchmove",P,{passive:!1})},handleLightboxClose:function(){j&&document.documentElement.removeEventListener("touchmove",P),d(!1)},classes:i.classes})}):y&&s.canPlay(F)?C("div",{className:u.cAttachment,children:C(s,{"data-testid":"".concat("Attachment","_player"),className:u.cAttachmentReactPlayer,url:F,config:{file:{attributes:{preload:"metadata"}}},controls:!0,height:i.size===D.label?D.value:S.value,width:null})}):C("div",{className:u.cAttachment,children:C(L,{attachmentUrl:F,attachmentFileName:i.fileName,attachmentSize:i.attachmentSize,displayName:i.displayName,openPreview:function(){return I(!0)},closePreview:function(e){e.stopPropagation(),I(!1)},previewIsOpen:g,classes:i.classes,small:i.small})})}R.propTypes={attachmentUrl:i.string.isRequired,attachmentSize:i.number,displayName:i.string,fileName:i.string,size:i.oneOf([D.label,S.label]),classes:i.shape({}).isRequired,small:i.bool},R.defaultProps={displayName:null,fileName:null,attachmentSize:void 0,size:S.label,small:!1};var U=n((function(e){return{imageIconRoot:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},dialog:{width:"95%",height:"95%",maxWidth:"100%",position:"relative"},nativeDialog:{width:"100%",height:"100%",maxWidth:"100%",maxHeight:"100%",margin:0},dialogRoot:{backgroundColor:"rgba(0, 0, 0, 0.85)"},fileName:{overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",fontWeight:400},downloadIcon:{color:e.palette.primary.text3},disabledPreview:{backgroundColor:e.palette.primary.text9},unavailableFileIcon:{marginRight:12,minWidth:32},titleContainer:{display:"flex",flexDirection:"column",width:"100%"},caption:{fontSize:12,fontWeight:400,width:"fit-content"},unavailableFileName:{fontSize:12,fontWeight:400}}}))(R);export{U as default};

package/components/Attachment/styles.css.js

@@ -1,8 +1 @@
-import styleInject from './../../ext-esm/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".styles_cAttachmentFileWrapper__w3whH {\n  display: flex;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.styles_cAttachmentFileDownloadWrapper__bRnOU {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n\n.styles_cAttachmentFileDownloadWrapperFileIcon__Eew6w {\n  margin-right: 10px;\n}\n\n.styles_cAttachmentFileDownloadWrapperFileName__K8HDS {\n  display: inline-block;\n  vertical-align: top;\n  width: calc(100% - 60px);\n}\n\n.styles_cAttachmentFileDownloadWrapperForm__a0lvj {\n  margin-left: 5px;\n}\n\n.styles_cAttachmentFileDownloadWrapper__bRnOU:hover {\n  background-color: #616161;\n}\n\n.styles_cAttachmentReactPlayer__-6Q9y video {\n  max-width: 500px; /* NOTE: Corresponds to file download wrapper max width */\n  background-color: #000000;\n}\n\n/* question here */\n\n.styles_cAttachment__AiNfC .react-player__preview {\n  max-width: 500px; /* NOTE: Corresponds to file download wrapper max width */\n  height: 235px !important;\n  background-color: #eeeeee; /* NOTE: MUI grey200 */\n  border-radius: 3px;\n}\n\n.styles_cAttachmentImg__uS-Lc {\n  margin-top: 10px;\n  position: relative;\n  display: inline-block;\n}\n\n.styles_cAttachmentImgPreviwBtn__6YA0k {\n  display: none;\n  height: 40px;\n  width: 40px;\n  border-radius: 40px;\n  background-color: rgba(97, 97, 97, 0.4);\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  cursor: pointer;\n}\n\n.styles_cAttachmentImg__uS-Lc:hover {\n  opacity: 0.7;\n}\n\n.styles_cAttachmentImg__uS-Lc:hover .styles_cAttachmentImgPreviwBtn__6YA0k {\n  display: flex;\n}\n";
-var styles = {"cAttachmentFileWrapper":"styles_cAttachmentFileWrapper__w3whH","cAttachmentFileDownloadWrapper":"styles_cAttachmentFileDownloadWrapper__bRnOU","cAttachmentFileDownloadWrapperFileIcon":"styles_cAttachmentFileDownloadWrapperFileIcon__Eew6w","cAttachmentFileDownloadWrapperFileName":"styles_cAttachmentFileDownloadWrapperFileName__K8HDS","cAttachmentFileDownloadWrapperForm":"styles_cAttachmentFileDownloadWrapperForm__a0lvj","cAttachmentReactPlayer":"styles_cAttachmentReactPlayer__-6Q9y","cAttachment":"styles_cAttachment__AiNfC","cAttachmentImg":"styles_cAttachmentImg__uS-Lc","cAttachmentImgPreviwBtn":"styles_cAttachmentImgPreviwBtn__6YA0k"};
-styleInject(css_248z);
-
-export { styles as default };
-//# sourceMappingURL=styles.css.js.map
+import t from'./../../ext-esm/style-inject/dist/style-inject.es.js';var e={cAttachmentFileWrapper:"styles_cAttachmentFileWrapper__w3whH",cAttachmentFileDownloadWrapper:"styles_cAttachmentFileDownloadWrapper__bRnOU",cAttachmentFileDownloadWrapperFileIcon:"styles_cAttachmentFileDownloadWrapperFileIcon__Eew6w",cAttachmentFileDownloadWrapperFileName:"styles_cAttachmentFileDownloadWrapperFileName__K8HDS",cAttachmentFileDownloadWrapperForm:"styles_cAttachmentFileDownloadWrapperForm__a0lvj",cAttachmentReactPlayer:"styles_cAttachmentReactPlayer__-6Q9y",cAttachment:"styles_cAttachment__AiNfC",cAttachmentImg:"styles_cAttachmentImg__uS-Lc",cAttachmentImgPreviwBtn:"styles_cAttachmentImgPreviwBtn__6YA0k"};t(".styles_cAttachmentFileWrapper__w3whH{align-items:center;display:flex;margin-top:10px}.styles_cAttachmentFileDownloadWrapper__bRnOU{align-items:center;cursor:pointer;display:flex}.styles_cAttachmentFileDownloadWrapperFileIcon__Eew6w{margin-right:10px}.styles_cAttachmentFileDownloadWrapperFileName__K8HDS{display:inline-block;vertical-align:top;width:calc(100% - 60px)}.styles_cAttachmentFileDownloadWrapperForm__a0lvj{margin-left:5px}.styles_cAttachmentFileDownloadWrapper__bRnOU:hover{background-color:#616161}.styles_cAttachmentReactPlayer__-6Q9y video{background-color:#000;max-width:500px}.styles_cAttachment__AiNfC .react-player__preview{background-color:#eee;border-radius:3px;height:235px!important;max-width:500px}.styles_cAttachmentImg__uS-Lc{display:inline-block;margin-top:10px;position:relative}.styles_cAttachmentImgPreviwBtn__6YA0k{align-items:center;background-color:rgba(97,97,97,.4);border-radius:40px;cursor:pointer;display:none;height:40px;justify-content:center;position:absolute;right:10px;top:10px;width:40px}.styles_cAttachmentImg__uS-Lc:hover{opacity:.7}.styles_cAttachmentImg__uS-Lc:hover .styles_cAttachmentImgPreviwBtn__6YA0k{display:flex}");export{e as default};