@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/AssetsMultipleSelector/AssetsMultipleSelector.js

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

package/components/AssetsMultipleSelector/AssetsMultipleSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetsMultipleSelector.js","sources":["../../../src/components/AssetsMultipleSelector/AssetsMultipleSelector.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport classnames from 'classnames';\nimport { makeStyles } from '@material-ui/core';\nimport { sortBy } from 'lodash';\n\nimport { Search } from '../Search';\n\nimport { mapAssetGetRequest } from '~/clients/jsonApi';\nimport { jsonaDataFormatter } from '~/utils';\nimport useLoadedData from '~/effects/useLoadedData';\n\nconst useStyles = makeStyles(theme => ({\n  listbox: {\n    maxHeight: 360,\n  },\n  paper: {\n    width: 364,\n  },\n  footer: {\n    fontSize: 12,\n    color: theme.palette.primary.text6,\n    lineHeight: '16.872px',\n    padding: '8px 16px',\n  },\n}));\n\nconst getDataFromResponseFn = response => {\n  return {\n    data: jsonaDataFormatter.deserialize(response.data),\n    total: Number(response.headers?.get('total')) || 0,\n  };\n};\nconst initialSelectedAssets = [];\nconst defaultQueryParams = {};\nconst DEFAULT_ASSETS_PER_PAGE = 50;\nconst initialData = { data: [], total: 0 };\n\ntype Asset = { id: string; name: string } & Record<string, unknown>;\nexport type AssetsMultipleSelectorProps = {\n  /**\n   array of asset objects with required id and name fields.\n   */\n  selectedAssets: [] | Asset[];\n  /**\n  callback fires on asset selection with array of all selected assets.\n  */\n  onChange: (assets: Asset[] | []) => void;\n  /**\n  label for autocomplete input.\n  */\n  label: string;\n  /**\n  type of asset.\n  */\n  type: 'program' | 'rig' | 'well' | 'frac_fleet' | 'drillout_unit' | 'pad' | 'assets';\n  /**\n   css for root component.\n  */\n  className?: string;\n  /**\n  custom query params for assets request like fields, per_page.\n  */\n  customRequestQueryParams?: Record<string, unknown> & {\n    fields?: string[];\n    per_page?: number | string;\n  };\n  /**\n  material ui autocomplete classes.\n  */\n  classes?: any;\n};\n\nconst AssetsMultipleSelector = memo(\n  ({\n    selectedAssets = initialSelectedAssets,\n    onChange,\n    label,\n    className,\n    type,\n    customRequestQueryParams,\n    classes = {},\n  }: AssetsMultipleSelectorProps) => {\n    const styles = useStyles();\n\n    const { isLoading, setIsLoading, data, loadData } = useLoadedData({\n      loadFn: mapAssetGetRequest(type, true),\n      initialData,\n      getDataFromResponseFn,\n      isCacheEnabled: true,\n    });\n    const { data: assetsData, total } = data;\n    const [searchValue, setSearchValue] = useState('');\n\n    useEffect(() => {\n      loadAssets('', customRequestQueryParams);\n    }, []);\n\n    const selectedOptions: AssetsMultipleSelectorProps['selectedAssets'] & {} = useMemo(\n      () =>\n        selectedAssets.map(asset => ({\n          ...asset,\n          id: asset.id,\n          label: asset.name,\n        })),\n      [selectedAssets]\n    );\n\n    const options: (Asset & { label: string })[] = useMemo(() => {\n      const optionsMap = {};\n      const allOptions = selectedOptions.length ? assetsData.concat(selectedOptions) : assetsData;\n      allOptions.forEach(asset => {\n        optionsMap[asset.id] = {\n          ...asset,\n          id: asset.id,\n          label: asset.name,\n        };\n      });\n\n      return Object.values(sortBy(optionsMap, 'label'));\n    }, [assetsData, selectedAssets, searchValue]);\n\n    const loadAssets = useCallback(\n      (\n        search,\n        customRequestQueryParams: AssetsMultipleSelectorProps['customRequestQueryParams'] = {}\n      ) => {\n        const params = {\n          ...defaultQueryParams,\n          per_page: DEFAULT_ASSETS_PER_PAGE,\n          ...customRequestQueryParams,\n          fields: [`${type}.name`].concat(customRequestQueryParams?.fields || []),\n        };\n\n        loadData({\n          search,\n          ...params,\n        });\n      },\n      []\n    );\n\n    const handleChange = (event, visibleSelectedOptions: Asset[], reason?: string) => {\n      if (reason === 'reset') return;\n\n      const newAssets = visibleSelectedOptions.map(option => {\n        return {\n          ...option,\n          name: option.label as string,\n        };\n      });\n\n      onChange(newAssets);\n    };\n\n    const onInputReset = () => {\n      setSearchValue('');\n      loadAssets('', customRequestQueryParams);\n    };\n\n    const handleInputChange = (value, reason) => {\n      if (reason === 'reset' || value === '') {\n        onInputReset();\n        return;\n      }\n\n      if (value.trimStart() !== searchValue) {\n        setSearchValue(value.trimStart());\n        setIsLoading(true);\n        loadAssets(value.trimStart(), customRequestQueryParams);\n      }\n    };\n\n    const countNotShowedAssets = () => {\n      const optionsCount = total - assetsData?.length;\n      if (optionsCount === 0) return null;\n\n      return optionsCount;\n    };\n\n    const paperFooter = useMemo(() => {\n      const notShowedAssetsQuantity = countNotShowedAssets();\n      return notShowedAssetsQuantity && !isLoading && searchValue ? (\n        <div className={styles.footer}>\n          {notShowedAssetsQuantity} additional items not displayed. Continue typing for more refined\n          results.\n        </div>\n      ) : null;\n    }, [assetsData, isLoading, !!searchValue, total]);\n\n    const { listbox, paper, ...restClasses } = classes;\n\n    return (\n      <Search\n        value={selectedOptions}\n        onChange={handleChange}\n        TextFieldProps={{ label }}\n        // @ts-ignore\n        className={className}\n        classes={{\n          listbox: classnames(styles.listbox, listbox),\n          paper: classnames(styles.paper, paper),\n          ...restClasses,\n        }}\n        loading={isLoading}\n        options={options}\n        placeholder=\"\"\n        multiple\n        filterSelectedOptions={false}\n        AutocompleteProps={{ forcePopupIcon: true }}\n        isHiddenAllOption\n        onInputChangeCallback={handleInputChange}\n        onInputReset={onInputReset}\n        paperFooter={paperFooter}\n        getOptionSelected={(option, value) => +option.id === +value.id}\n        isPrioritizedSelectedOptions\n      />\n    );\n  }\n);\n\nexport default AssetsMultipleSelector;\n"],"names":["useStyles","makeStyles","theme","listbox","maxHeight","paper","width","footer","fontSize","color","palette","primary","text6","lineHeight","padding","getDataFromResponseFn","response","data","jsonaDataFormatter","deserialize","total","Number","headers","get","initialSelectedAssets","defaultQueryParams","DEFAULT_ASSETS_PER_PAGE","initialData","AssetsMultipleSelector","memo","selectedAssets","onChange","label","className","type","customRequestQueryParams","classes","styles","useLoadedData","loadFn","mapAssetGetRequest","isCacheEnabled","isLoading","setIsLoading","loadData","assetsData","useState","searchValue","setSearchValue","useEffect","loadAssets","selectedOptions","useMemo","map","asset","id","name","options","optionsMap","allOptions","length","concat","forEach","Object","values","sortBy","useCallback","search","params","per_page","fields","handleChange","event","visibleSelectedOptions","reason","newAssets","option","onInputReset","handleInputChange","value","trimStart","countNotShowedAssets","optionsCount","paperFooter","notShowedAssetsQuantity","_jsxs","restClasses","_jsx","classnames","forcePopupIcon"],"mappings":"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"}

package/components/Attachment/index.js

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