npm - @corva/ui - Versions diffs - 3.75.0-2 → 3.75.0-21 - Mend

@corva/ui 3.75.0-2 → 3.75.0-21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1735) hide show

package/components/AttachmentPreview/AttachmentTile.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import o from"@babel/runtime/helpers/defineProperty";import{useRef as s}from"react";import i from"classnames";import{FileIcon as n}from"../../componentsV2/FileIcon/FileIcon.js";import{ButtonIcon as c}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{Tooltip as t}from"../../componentsV2/Tooltip/Tooltip.js";import{LoaderCircular as e}from"../../componentsV2/LoaderCircular/LoaderCircular.js";import{PlayOneIcon as r,UndoIcon as m,CloseSmallIcon as a}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.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/SearchOne.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/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{AttachmentActionsMenu as l}from"./AttachmentActionsMenu.js";import{AttachmentImage as p}from"./AttachmentImage.js";import{AttachmentDownloadLink as u}from"./AttachmentDownloadLink.js";import d from"./AttachmentPreview.scss.js";import j from"../../utils/main.js";import{jsxs as I,jsx as h,Fragment as f}from"react/jsx-runtime";function v(o,s){var i=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);s&&(n=n.filter((function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable}))),i.push.apply(i,n)}return i}function b(s){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?v(Object(n),!0).forEach((function(i){o(s,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(o){Object.defineProperty(s,o,Object.getOwnPropertyDescriptor(n,o))}))}return s}var C=function(o){var s,i=o.split(".");return i.length>1?(null!==(s=i.pop())&&void 0!==s?s:"").toUpperCase():""},g=function(o){var s=o.item,i=o.onShare,n=o.imageRef,c=j.getFileNameWithExtensionFromPath(s.name),t=s.downloadUrl||s.src;return I("div",{className:d.tileActions,"data-testid":"attachment-tile-actions",children:[!!t&&h(u,{url:t,fileName:c,size:"xs",className:d.tileActionLink}),h(l,{item:s,onShare:i,size:"xs",testIdPrefix:"attachment-tile",tooltip:"More actions",imageRef:n})]})},y=function(o){return function(s){s.stopPropagation(),o()}},O=function(o){var s=o.item,n=o.onRemove,r=o.onRetry;return I(f,{children:[s.isUploading&&I(f,{children:[h("div",{className:d.uploadingOverlay}),h("div",{className:d.uploadingSpinner,children:h(e,{size:"xs",className:d.loader})})]}),!!s.error&&I(f,{children:[h("div",{className:d.errorOverlay}),r&&h(t,{title:"Retry upload",children:h("div",{className:d.retryButton,children:h(c,{size:"xs",type:"tertiaryBg",onClick:y((function(){return r(s.id)})),testId:"attachment-retry",children:h(m,{size:"small"})})})})]}),n&&!s.isUploading&&h(t,{title:"Remove",children:h("div",{className:i(d.removeButton,!!s.error&&d.removeButtonVisible),children:h(c,{size:"xs",type:"tertiaryBg",onClick:y((function(){return n(s.id)})),testId:"attachment-remove",children:h(a,{size:"small"})})})})]})},N=function(o){var c,e,m=o.item,a=o.onRemove,l=o.onRetry,u=o.onItemClick,v=o.isSelected,y=o.hideActions,N=o.onShare,P=s(null),F=null!==(c=m.kind)&&void 0!==c?c:"file",k=h(O,{item:m,onRemove:a,onRetry:l}),A=j.getFileNameWithExtensionFromPath(m.name),R=!m.isUploading&&!m.error,x=!!u&&R,S=!y&&!a&&R;if("image"===F||"video"===F)return I("div",{className:i(d.thumbnail,x&&d.clickable,v&&d.selected,!!m.error&&d.thumbnailError),onClick:x?function(){return null==u?void 0:u(m)}:void 0,children:[h("div",{className:d.thumbnailInner,children:"image"===F?h(p,{ref:P,src:m.src,alt:A,className:d.thumbnailImage}):h("video",{src:(e=m.src,e&&!e.includes("#t=")?"".concat(e,"#t=0.1"):e),className:d.thumbnailImage,preload:"metadata",playsInline:!0,muted:!0})}),"video"===F&&h("div",{className:d.videoOverlay,children:h(r,{theme:"filled",className:d.playIcon})}),S&&h(g,{item:m,onShare:N,imageRef:P}),k]});var D,E=I(f,{children:[I("div",{className:d.fileCardContent,children:[h(n,{name:A}),I("div",{className:d.fileInfo,children:[h(t,{title:A,children:h("div",{className:d.fileName,children:(D=A,D.replace(/\.[^/.]+$/,""))})}),h("div",{className:d.fileType,children:C(A)})]})]}),S&&h(g,{item:m,onShare:N}),k]}),w=x?{role:"button",tabIndex:0,onClick:function(){return null==u?void 0:u(m)},onKeyDown:function(o){o.target===o.currentTarget&&("Enter"!==o.key&&" "!==o.key||(o.preventDefault(),null==u||u(m)))}}:{};return h("div",b(b({className:i(d.fileCard,x&&d.fileCardLink,v&&d.selected,!!m.error&&d.thumbnailError)},w),{},{children:E}))};export{N as AttachmentTile};
+import o from"@babel/runtime/helpers/defineProperty";import{useRef as s}from"react";import i from"classnames";import{FileIcon as n}from"../../componentsV2/FileIcon/FileIcon.js";import{ButtonIcon as c}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{Tooltip as t}from"../../componentsV2/Tooltip/Tooltip.js";import{LoaderCircular as e}from"../../componentsV2/LoaderCircular/LoaderCircular.js";import{PlayOneIcon as r,UndoIcon as m,CloseSmallIcon as a}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.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/SearchOne.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/InfoRounded.js";import"../../icons/customIcons/icons/FlameFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/PinOne.js";import"../../icons/customIcons/icons/PinOneCrossed.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{AttachmentActionsMenu as l}from"./AttachmentActionsMenu.js";import{AttachmentImage as p}from"./AttachmentImage.js";import{AttachmentDownloadLink as u}from"./AttachmentDownloadLink.js";import d from"./AttachmentPreview.scss.js";import j from"../../utils/main.js";import{jsxs as I,jsx as h,Fragment as f}from"react/jsx-runtime";function v(o,s){var i=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);s&&(n=n.filter((function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable}))),i.push.apply(i,n)}return i}function b(s){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?v(Object(n),!0).forEach((function(i){o(s,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(o){Object.defineProperty(s,o,Object.getOwnPropertyDescriptor(n,o))}))}return s}var C=function(o){var s,i=o.split(".");return i.length>1?(null!==(s=i.pop())&&void 0!==s?s:"").toUpperCase():""},O=function(o){var s=o.item,i=o.onShare,n=o.imageRef,c=j.getFileNameWithExtensionFromPath(s.name),t=s.hideDownload?void 0:s.downloadUrl||s.src;return I("div",{className:d.tileActions,"data-testid":"attachment-tile-actions",children:[!!t&&h(u,{url:t,fileName:c,size:"xs",className:d.tileActionLink}),h(l,{item:s,onShare:i,size:"xs",testIdPrefix:"attachment-tile",tooltip:"More actions",imageRef:n})]})},g=function(o){return function(s){s.stopPropagation(),o()}},y=function(o){var s=o.item,n=o.onRemove,r=o.onRetry;return I(f,{children:[s.isUploading&&I(f,{children:[h("div",{className:d.uploadingOverlay}),h("div",{className:d.uploadingSpinner,children:h(e,{size:"xs",className:d.loader})})]}),!!s.error&&I(f,{children:[h("div",{className:d.errorOverlay}),r&&h(t,{title:"Retry upload",children:h("div",{className:d.retryButton,children:h(c,{size:"xs",type:"tertiaryBg",onClick:g((function(){return r(s.id)})),testId:"attachment-retry",children:h(m,{size:"small"})})})})]}),n&&!s.isUploading&&h(t,{title:"Remove",children:h("div",{className:i(d.removeButton,!!s.error&&d.removeButtonVisible),children:h(c,{size:"xs",type:"tertiaryBg",onClick:g((function(){return n(s.id)})),testId:"attachment-remove",children:h(a,{size:"small"})})})})]})},P=function(o){var c,e,m=o.item,a=o.onRemove,l=o.onRetry,u=o.onItemClick,v=o.isSelected,g=o.hideActions,P=o.onShare,F=s(null),N=null!==(c=m.kind)&&void 0!==c?c:"file",k=h(y,{item:m,onRemove:a,onRetry:l}),A=j.getFileNameWithExtensionFromPath(m.name),R=!m.isUploading&&!m.error,x=!!u&&R,D=!g&&!a&&R;if("image"===N||"video"===N)return I("div",{className:i(d.thumbnail,x&&d.clickable,v&&d.selected,!!m.error&&d.thumbnailError),onClick:x?function(){return null==u?void 0:u(m)}:void 0,children:[h("div",{className:d.thumbnailInner,children:"image"===N?h(p,{ref:F,src:m.src,alt:A,className:d.thumbnailImage}):h("video",{src:(e=m.src,e&&!e.includes("#t=")?"".concat(e,"#t=0.1"):e),className:d.thumbnailImage,preload:"metadata",playsInline:!0,muted:!0})}),"video"===N&&h("div",{className:d.videoOverlay,children:h(r,{theme:"filled",className:d.playIcon})}),D&&h(O,{item:m,onShare:P,imageRef:F}),k]});var S,w=I(f,{children:[I("div",{className:d.fileCardContent,children:[h(n,{name:A}),I("div",{className:d.fileInfo,children:[h(t,{title:A,children:h("div",{className:d.fileName,children:(S=A,S.replace(/\.[^/.]+$/,""))})}),h("div",{className:d.fileType,children:C(A)})]})]}),D&&h(O,{item:m,onShare:P}),k]}),E=x?{role:"button",tabIndex:0,onClick:function(){return null==u?void 0:u(m)},onKeyDown:function(o){o.target===o.currentTarget&&("Enter"!==o.key&&" "!==o.key||(o.preventDefault(),null==u||u(m)))}}:{};return h("div",b(b({className:i(d.fileCard,x&&d.fileCardLink,v&&d.selected,!!m.error&&d.thumbnailError)},E),{},{children:w}))};export{P as AttachmentTile};
 //# sourceMappingURL=AttachmentTile.js.map

package/components/AttachmentPreview/AttachmentTile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AttachmentTile.js","sources":["../../../src/components/AttachmentPreview/AttachmentTile.tsx"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { FileIcon } from '../../componentsV2/FileIcon';\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { Tooltip } from '../../componentsV2/Tooltip';\nimport { LoaderCircular } from '../../componentsV2/LoaderCircular';\nimport { PlayOneIcon, CloseSmallIcon, UndoIcon } from '../../icons';\n\nimport { AttachmentActionsMenu } from './AttachmentActionsMenu';\nimport { AttachmentImage } from './AttachmentImage';\nimport { AttachmentDownloadLink } from './AttachmentDownloadLink';\nimport { AttachmentPreviewItem, AttachmentPreviewProps } from './AttachmentPreview.types';\n\nimport styles from './AttachmentPreview.scss';\n\nimport utils from '~/utils/main';\n\nconst getExtension = (name: string) => {\n const parts = name.split('.');\n return parts.length > 1 ? (parts.pop() ?? '').toUpperCase() : '';\n};\n\nconst dropExtension = (name: string) => name.replace(/\\.[^/.]+$/, '');\n\n// A bare <video> paints nothing until a frame is decoded; the media fragment forces one.\nconst withFirstFrame = (src?: string) => (src && !src.includes('#t=') ? `${src}#t=0.1` : src);\n\nexport type AttachmentTileProps = {\n item: AttachmentPreviewItem;\n onRemove?: AttachmentPreviewProps['onRemove'];\n onRetry?: AttachmentPreviewProps['onRetry'];\n onItemClick?: AttachmentPreviewProps['onItemClick'];\n isSelected?: boolean;\n hideActions?: boolean;\n /** Adds \"Share file\" to the tile's hover menu. */\n onShare?: (item: AttachmentPreviewItem) => void;\n};\n\nconst TileActions = ({\n item,\n onShare,\n imageRef,\n}: Pick<AttachmentTileProps, 'item' \| 'onShare'> & {\n imageRef?: RefObject<HTMLImageElement>;\n}) => {\n const fileName = utils.getFileNameWithExtensionFromPath(item.name);\n const downloadUrl = item.downloadUrl \|\| item.src;\n\n return (\n <div className={styles.tileActions} data-testid=\"attachment-tile-actions\">\n {!!downloadUrl && (\n <AttachmentDownloadLink\n url={downloadUrl}\n fileName={fileName}\n size=\"xs\"\n className={styles.tileActionLink}\n />\n )}\n\n <AttachmentActionsMenu\n item={item}\n onShare={onShare}\n size=\"xs\"\n testIdPrefix=\"attachment-tile\"\n tooltip=\"More actions\"\n imageRef={imageRef}\n />\n </div>\n );\n};\n\nconst stopAndRun = (action: () => void) => (event: MouseEvent) => {\n event.stopPropagation();\n action();\n};\n\nconst TileOverlays = ({ item, onRemove, onRetry }: Omit<AttachmentTileProps, 'onItemClick'>) => (\n <>\n {item.isUploading && (\n <>\n <div className={styles.uploadingOverlay} />\n <div className={styles.uploadingSpinner}>\n <LoaderCircular size=\"xs\" className={styles.loader} />\n </div>\n </>\n )}\n\n {!!item.error && (\n <>\n <div className={styles.errorOverlay} />\n {onRetry && (\n <Tooltip title=\"Retry upload\">\n <div className={styles.retryButton}>\n <ButtonIcon\n size=\"xs\"\n type=\"tertiaryBg\"\n onClick={stopAndRun(() => onRetry(item.id))}\n testId=\"attachment-retry\"\n >\n <UndoIcon size=\"small\" />\n </ButtonIcon>\n </div>\n </Tooltip>\n )}\n </>\n )}\n\n {onRemove && !item.isUploading && (\n <Tooltip title=\"Remove\">\n <div\n className={classNames(styles.removeButton, !!item.error && styles.removeButtonVisible)}\n >\n <ButtonIcon\n size=\"xs\"\n type=\"tertiaryBg\"\n onClick={stopAndRun(() => onRemove(item.id))}\n testId=\"attachment-remove\"\n >\n <CloseSmallIcon size=\"small\" />\n </ButtonIcon>\n </div>\n </Tooltip>\n )}\n </>\n);\n\nexport const AttachmentTile = ({\n item,\n onRemove,\n onRetry,\n onItemClick,\n isSelected,\n hideActions,\n onShare,\n}: AttachmentTileProps) => {\n const imageRef = useRef<HTMLImageElement>(null);\n const kind = item.kind ?? 'file';\n const overlays = <TileOverlays item={item} onRemove={onRemove} onRetry={onRetry} />;\n const fileName = utils.getFileNameWithExtensionFromPath(item.name);\n const isReady = !item.isUploading && !item.error;\n const clickable = !!onItemClick && isReady;\n // A tile being composed shows Remove in the same corner, and has nothing to link to.\n const showActions = !hideActions && !onRemove && isReady;\n\n if (kind === 'image' \|\| kind === 'video') {\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <div\n className={classNames(\n styles.thumbnail,\n clickable && styles.clickable,\n isSelected && styles.selected,\n !!item.error && styles.thumbnailError\n )}\n onClick={clickable ? () => onItemClick?.(item) : undefined}\n >\n <div className={styles.thumbnailInner}>\n {kind === 'image' ? (\n <AttachmentImage\n ref={imageRef}\n src={item.src}\n alt={fileName}\n className={styles.thumbnailImage}\n />\n ) : (\n <video\n src={withFirstFrame(item.src)}\n className={styles.thumbnailImage}\n preload=\"metadata\"\n playsInline\n muted\n />\n )}\n </div>\n {kind === 'video' && (\n <div className={styles.videoOverlay}>\n <PlayOneIcon theme=\"filled\" className={styles.playIcon} />\n </div>\n )}\n {showActions && <TileActions item={item} onShare={onShare} imageRef={imageRef} />}\n {overlays}\n </div>\n );\n }\n\n const fileCardContent = (\n <>\n <div className={styles.fileCardContent}>\n <FileIcon name={fileName} />\n <div className={styles.fileInfo}>\n <Tooltip title={fileName}>\n <div className={styles.fileName}>{dropExtension(fileName)}</div>\n </Tooltip>\n <div className={styles.fileType}>{getExtension(fileName)}</div>\n </div>\n </div>\n {showActions && <TileActions item={item} onShare={onShare} />}\n {overlays}\n </>\n );\n\n const cardInteraction = clickable\n ? {\n role: 'button',\n tabIndex: 0,\n onClick: () => onItemClick?.(item),\n onKeyDown: (event: KeyboardEvent) => {\n // Keys bubbling from the nested download link must reach it, not open the preview.\n if (event.target !== event.currentTarget) return;\n if (event.key !== 'Enter' && event.key !== ' ') return;\n\n // Space would otherwise scroll the surrounding feed.\n event.preventDefault();\n onItemClick?.(item);\n },\n }\n : {};\n\n return (\n <div\n className={classNames(\n styles.fileCard,\n clickable && styles.fileCardLink,\n isSelected && styles.selected,\n !!item.error && styles.thumbnailError\n )}\n {...cardInteraction}\n >\n {fileCardContent}\n </div>\n );\n};\n"],"names":["getExtension","name","_parts$pop","parts","split","length","pop","toUpperCase","TileActions","_ref","item","onShare","imageRef","fileName","utils","getFileNameWithExtensionFromPath","downloadUrl","src","_jsxs","className","styles","tileActions","children","_jsx","AttachmentDownloadLink","url","size","tileActionLink","AttachmentActionsMenu","testIdPrefix","tooltip","stopAndRun","action","event","stopPropagation","TileOverlays","_ref2","onRemove","onRetry","_Fragment","isUploading","uploadingOverlay","uploadingSpinner","LoaderCircular","loader","error","errorOverlay","Tooltip","title","retryButton","ButtonIcon","type","onClick","id","testId","UndoIcon","classNames","removeButton","removeButtonVisible","CloseSmallIcon","AttachmentTile","_ref3","_item$kind","onItemClick","isSelected","hideActions","useRef","kind","overlays","isReady","clickable","showActions","thumbnail","selected","thumbnailError","undefined","thumbnailInner","AttachmentImage","ref","alt","thumbnailImage","includes","concat","preload","playsInline","muted","videoOverlay","PlayOneIcon","theme","playIcon","fileCardContent","FileIcon","fileInfo","replace","fileType","cardInteraction","role","tabIndex","onKeyDown","target","currentTarget","key","preventDefault","_objectSpread","fileCard","fileCardLink"],"mappings":"y8JAkBA,IAAMA,EAAe,SAACC,GAAiB,IAAAC,EAC/BC,EAAQF,EAAKG,MAAM,KACzB,OAAOD,EAAME,OAAS,GAAoB,QAAfF,EAAAA,EAAMG,aAAS,IAAAJ,EAAAA,EAAA,IAAIK,cAAgB,EAChE,EAkBMC,EAAc,SAMdC,GAAA,IALJC,IAAAA,KACAC,IAAAA,QACAC,IAAAA,SAIMC,EAAWC,EAAMC,iCAAiCL,EAAKT,MACvDe,EAAcN,EAAKM,aAAeN,EAAKO,IAE7C,OACEC,EAAA,MAAA,CAAKC,UAAWC,EAAOC,YAAa,cAAY,0BAAyBC,SAAA,GACpEN,GACDO,EAACC,EAAsB,CACrBC,IAAKT,EACLH,SAAUA,EACVa,KAAK,KACLP,UAAWC,EAAOO,iBAItBJ,EAACK,EAAqB,CACpBlB,KAAMA,EACNC,QAASA,EACTe,KAAK,KACLG,aAAa,kBACbC,QAAQ,eACRlB,SAAUA,MAIlB,EAEMmB,EAAa,SAACC,GAAkB,OAAK,SAACC,GAC1CA,EAAMC,kBACNF,IACD,EAEKG,EAAe,SAAHC,GAAA,IAAM1B,IAAAA,KAAM2B,IAAAA,SAAUC,IAAAA,QAAO,OAC7CpB,EAAAqB,EAAA,CAAAjB,SACGZ,CAAAA,EAAK8B,aACJtB,EAAAqB,EAAA,CAAAjB,SACE,CAAAC,EAAA,MAAA,CAAKJ,UAAWC,EAAOqB,mBACvBlB,EAAA,MAAA,CAAKJ,UAAWC,EAAOsB,iBAAiBpB,SACtCC,EAACoB,EAAc,CAACjB,KAAK,KAAKP,UAAWC,EAAOwB,gBAK/ClC,EAAKmC,OACN3B,EAAAqB,EAAA,CAAAjB,SACE,CAAAC,EAAA,MAAA,CAAKJ,UAAWC,EAAO0B,eACtBR,GACCf,EAACwB,EAAO,CAACC,MAAM,eAAc1B,SAC3BC,EAAA,MAAA,CAAKJ,UAAWC,EAAO6B,YAAY3B,SACjCC,EAAC2B,EAAU,CACTxB,KAAK,KACLyB,KAAK,aACLC,QAASrB,GAAW,WAAA,OAAMO,EAAQ5B,EAAK2C,OACvCC,OAAO,mBAAkBhC,SAEzBC,EAACgC,EAAQ,CAAC7B,KAAK,mBAQ1BW,IAAa3B,EAAK8B,aACjBjB,EAACwB,EAAO,CAACC,MAAM,SAAQ1B,SACrBC,EAAA,MAAA,CACEJ,UAAWqC,EAAWpC,EAAOqC,eAAgB/C,EAAKmC,OAASzB,EAAOsC,qBAAqBpC,SAEvFC,EAAC2B,EAAU,CACTxB,KAAK,KACLyB,KAAK,aACLC,QAASrB,GAAW,WAAA,OAAMM,EAAS3B,EAAK2C,OACxCC,OAAO,oBAAmBhC,SAE1BC,EAACoC,EAAc,CAACjC,KAAK,kBAK5B,EAGQkC,EAAiB,SAQHC,GAAA,IAAAC,EA7GH7C,EAsGtBP,IAAAA,KACA2B,IAAAA,SACAC,IAAAA,QACAyB,IAAAA,YACAC,IAAAA,WACAC,IAAAA,YACAtD,IAAAA,QAEMC,EAAWsD,EAAyB,MACpCC,UAAOzD,EAAAA,EAAKyD,oBAAQ,OACpBC,EAAW7C,EAACY,EAAY,CAACzB,KAAMA,EAAM2B,SAAUA,EAAUC,QAASA,IAClEzB,EAAWC,EAAMC,iCAAiCL,EAAKT,MACvDoE,GAAW3D,EAAK8B,cAAgB9B,EAAKmC,MACrCyB,IAAcP,GAAeM,EAE7BE,GAAeN,IAAgB5B,GAAYgC,EAEjD,GAAa,UAATF,GAA6B,UAATA,EACtB,OAEEjD,EAAA,MAAA,CACEC,UAAWqC,EACTpC,EAAOoD,UACPF,GAAalD,EAAOkD,UACpBN,GAAc5C,EAAOqD,WACnB/D,EAAKmC,OAASzB,EAAOsD,gBAEzBtB,QAASkB,EAAY,WAAA,OAAMP,eAAAA,EAAcrD,EAAK,OAAGiE,EAAUrD,SAE3D,CAAAC,EAAA,MAAA,CAAKJ,UAAWC,EAAOwD,eAAetD,SAC1B,UAAT6C,EACC5C,EAACsD,EAAe,CACdC,IAAKlE,EACLK,IAAKP,EAAKO,IACV8D,IAAKlE,EACLM,UAAWC,EAAO4D,iBAGpBzD,EAAA,QAAA,CACEN,KA7IUA,EA6IUP,EAAKO,IA7IGA,IAAQA,EAAIgE,SAAS,OAAM,GAAAC,OAAMjE,EAAG,UAAWA,GA8I3EE,UAAWC,EAAO4D,eAClBG,QAAQ,WACRC,aAAW,EACXC,OAAK,MAID,UAATlB,GACC5C,EAAA,MAAA,CAAKJ,UAAWC,EAAOkE,aAAahE,SAClCC,EAACgE,EAAW,CAACC,MAAM,SAASrE,UAAWC,EAAOqE,aAGjDlB,GAAehD,EAACf,EAAW,CAACE,KAAMA,EAAMC,QAASA,EAASC,SAAUA,IACpEwD,KAKP,IAnKqBnE,EAmKfyF,EACJxE,EAAAqB,EAAA,CAAAjB,SACE,CAAAJ,EAAA,MAAA,CAAKC,UAAWC,EAAOsE,gBAAgBpE,SAAA,CACrCC,EAACoE,EAAQ,CAAC1F,KAAMY,IAChBK,EAAA,MAAA,CAAKC,UAAWC,EAAOwE,SAAStE,SAAA,CAC9BC,EAACwB,EAAO,CAACC,MAAOnC,EAASS,SACvBC,EAAA,MAAA,CAAKJ,UAAWC,EAAOP,SAASS,UAzKrBrB,EAyKqCY,EAzKpBZ,EAAK4F,QAAQ,YAAa,SA2KxDtE,EAAA,MAAA,CAAKJ,UAAWC,EAAO0E,SAASxE,SAAEtB,EAAaa,WAGlD0D,GAAehD,EAACf,EAAW,CAACE,KAAMA,EAAMC,QAASA,IACjDyD,KAIC2B,EAAkBzB,EACpB,CACE0B,KAAM,SACNC,SAAU,EACV7C,QAAS,WAAA,OAAMW,eAAAA,EAAcrD,EAAK,EAClCwF,UAAW,SAACjE,GAENA,EAAMkE,SAAWlE,EAAMmE,gBACT,UAAdnE,EAAMoE,KAAiC,MAAdpE,EAAMoE,MAGnCpE,EAAMqE,iBACNvC,SAAAA,EAAcrD,IAChB,GAEF,GAEJ,OACEa,EAAA,MAAAgF,EAAAA,EAAA,CACEpF,UAAWqC,EACTpC,EAAOoF,SACPlC,GAAalD,EAAOqF,aACpBzC,GAAc5C,EAAOqD,WACnB/D,EAAKmC,OAASzB,EAAOsD,iBAErBqB,GAAe,GAAA,CAAAzE,SAElBoE,IAGP"}
1	+ {"version":3,"file":"AttachmentTile.js","sources":["../../../src/components/AttachmentPreview/AttachmentTile.tsx"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { FileIcon } from '../../componentsV2/FileIcon';\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { Tooltip } from '../../componentsV2/Tooltip';\nimport { LoaderCircular } from '../../componentsV2/LoaderCircular';\nimport { PlayOneIcon, CloseSmallIcon, UndoIcon } from '../../icons';\n\nimport { AttachmentActionsMenu } from './AttachmentActionsMenu';\nimport { AttachmentImage } from './AttachmentImage';\nimport { AttachmentDownloadLink } from './AttachmentDownloadLink';\nimport { AttachmentPreviewItem, AttachmentPreviewProps } from './AttachmentPreview.types';\n\nimport styles from './AttachmentPreview.scss';\n\nimport utils from '~/utils/main';\n\nconst getExtension = (name: string) => {\n const parts = name.split('.');\n return parts.length > 1 ? (parts.pop() ?? '').toUpperCase() : '';\n};\n\nconst dropExtension = (name: string) => name.replace(/\\.[^/.]+$/, '');\n\n// A bare <video> paints nothing until a frame is decoded; the media fragment forces one.\nconst withFirstFrame = (src?: string) => (src && !src.includes('#t=') ? `${src}#t=0.1` : src);\n\nexport type AttachmentTileProps = {\n item: AttachmentPreviewItem;\n onRemove?: AttachmentPreviewProps['onRemove'];\n onRetry?: AttachmentPreviewProps['onRetry'];\n onItemClick?: AttachmentPreviewProps['onItemClick'];\n isSelected?: boolean;\n hideActions?: boolean;\n /** Adds \"Share file\" to the tile's hover menu. */\n onShare?: (item: AttachmentPreviewItem) => void;\n};\n\nconst TileActions = ({\n item,\n onShare,\n imageRef,\n}: Pick<AttachmentTileProps, 'item' \| 'onShare'> & {\n imageRef?: RefObject<HTMLImageElement>;\n}) => {\n const fileName = utils.getFileNameWithExtensionFromPath(item.name);\n const downloadUrl = item.hideDownload ? undefined : item.downloadUrl \|\| item.src;\n\n return (\n <div className={styles.tileActions} data-testid=\"attachment-tile-actions\">\n {!!downloadUrl && (\n <AttachmentDownloadLink\n url={downloadUrl}\n fileName={fileName}\n size=\"xs\"\n className={styles.tileActionLink}\n />\n )}\n\n <AttachmentActionsMenu\n item={item}\n onShare={onShare}\n size=\"xs\"\n testIdPrefix=\"attachment-tile\"\n tooltip=\"More actions\"\n imageRef={imageRef}\n />\n </div>\n );\n};\n\nconst stopAndRun = (action: () => void) => (event: MouseEvent) => {\n event.stopPropagation();\n action();\n};\n\nconst TileOverlays = ({ item, onRemove, onRetry }: Omit<AttachmentTileProps, 'onItemClick'>) => (\n <>\n {item.isUploading && (\n <>\n <div className={styles.uploadingOverlay} />\n <div className={styles.uploadingSpinner}>\n <LoaderCircular size=\"xs\" className={styles.loader} />\n </div>\n </>\n )}\n\n {!!item.error && (\n <>\n <div className={styles.errorOverlay} />\n {onRetry && (\n <Tooltip title=\"Retry upload\">\n <div className={styles.retryButton}>\n <ButtonIcon\n size=\"xs\"\n type=\"tertiaryBg\"\n onClick={stopAndRun(() => onRetry(item.id))}\n testId=\"attachment-retry\"\n >\n <UndoIcon size=\"small\" />\n </ButtonIcon>\n </div>\n </Tooltip>\n )}\n </>\n )}\n\n {onRemove && !item.isUploading && (\n <Tooltip title=\"Remove\">\n <div\n className={classNames(styles.removeButton, !!item.error && styles.removeButtonVisible)}\n >\n <ButtonIcon\n size=\"xs\"\n type=\"tertiaryBg\"\n onClick={stopAndRun(() => onRemove(item.id))}\n testId=\"attachment-remove\"\n >\n <CloseSmallIcon size=\"small\" />\n </ButtonIcon>\n </div>\n </Tooltip>\n )}\n </>\n);\n\nexport const AttachmentTile = ({\n item,\n onRemove,\n onRetry,\n onItemClick,\n isSelected,\n hideActions,\n onShare,\n}: AttachmentTileProps) => {\n const imageRef = useRef<HTMLImageElement>(null);\n const kind = item.kind ?? 'file';\n const overlays = <TileOverlays item={item} onRemove={onRemove} onRetry={onRetry} />;\n const fileName = utils.getFileNameWithExtensionFromPath(item.name);\n const isReady = !item.isUploading && !item.error;\n const clickable = !!onItemClick && isReady;\n // A tile being composed shows Remove in the same corner, and has nothing to link to.\n const showActions = !hideActions && !onRemove && isReady;\n\n if (kind === 'image' \|\| kind === 'video') {\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <div\n className={classNames(\n styles.thumbnail,\n clickable && styles.clickable,\n isSelected && styles.selected,\n !!item.error && styles.thumbnailError\n )}\n onClick={clickable ? () => onItemClick?.(item) : undefined}\n >\n <div className={styles.thumbnailInner}>\n {kind === 'image' ? (\n <AttachmentImage\n ref={imageRef}\n src={item.src}\n alt={fileName}\n className={styles.thumbnailImage}\n />\n ) : (\n <video\n src={withFirstFrame(item.src)}\n className={styles.thumbnailImage}\n preload=\"metadata\"\n playsInline\n muted\n />\n )}\n </div>\n {kind === 'video' && (\n <div className={styles.videoOverlay}>\n <PlayOneIcon theme=\"filled\" className={styles.playIcon} />\n </div>\n )}\n {showActions && <TileActions item={item} onShare={onShare} imageRef={imageRef} />}\n {overlays}\n </div>\n );\n }\n\n const fileCardContent = (\n <>\n <div className={styles.fileCardContent}>\n <FileIcon name={fileName} />\n <div className={styles.fileInfo}>\n <Tooltip title={fileName}>\n <div className={styles.fileName}>{dropExtension(fileName)}</div>\n </Tooltip>\n <div className={styles.fileType}>{getExtension(fileName)}</div>\n </div>\n </div>\n {showActions && <TileActions item={item} onShare={onShare} />}\n {overlays}\n </>\n );\n\n const cardInteraction = clickable\n ? {\n role: 'button',\n tabIndex: 0,\n onClick: () => onItemClick?.(item),\n onKeyDown: (event: KeyboardEvent) => {\n // Keys bubbling from the nested download link must reach it, not open the preview.\n if (event.target !== event.currentTarget) return;\n if (event.key !== 'Enter' && event.key !== ' ') return;\n\n // Space would otherwise scroll the surrounding feed.\n event.preventDefault();\n onItemClick?.(item);\n },\n }\n : {};\n\n return (\n <div\n className={classNames(\n styles.fileCard,\n clickable && styles.fileCardLink,\n isSelected && styles.selected,\n !!item.error && styles.thumbnailError\n )}\n {...cardInteraction}\n >\n {fileCardContent}\n </div>\n );\n};\n"],"names":["getExtension","name","_parts$pop","parts","split","length","pop","toUpperCase","TileActions","_ref","item","onShare","imageRef","fileName","utils","getFileNameWithExtensionFromPath","downloadUrl","hideDownload","undefined","src","_jsxs","className","styles","tileActions","children","_jsx","AttachmentDownloadLink","url","size","tileActionLink","AttachmentActionsMenu","testIdPrefix","tooltip","stopAndRun","action","event","stopPropagation","TileOverlays","_ref2","onRemove","onRetry","_Fragment","isUploading","uploadingOverlay","uploadingSpinner","LoaderCircular","loader","error","errorOverlay","Tooltip","title","retryButton","ButtonIcon","type","onClick","id","testId","UndoIcon","classNames","removeButton","removeButtonVisible","CloseSmallIcon","AttachmentTile","_ref3","_item$kind","onItemClick","isSelected","hideActions","useRef","kind","overlays","isReady","clickable","showActions","thumbnail","selected","thumbnailError","thumbnailInner","AttachmentImage","ref","alt","thumbnailImage","includes","concat","preload","playsInline","muted","videoOverlay","PlayOneIcon","theme","playIcon","fileCardContent","FileIcon","fileInfo","replace","fileType","cardInteraction","role","tabIndex","onKeyDown","target","currentTarget","key","preventDefault","_objectSpread","fileCard","fileCardLink"],"mappings":"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"}

package/components/AttachmentPreview/SortableAttachments.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import o from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import s from"@babel/runtime/helpers/toConsumableArray";import{forwardRef as t,useState as c,useRef as i,useEffect as r}from"react";import{createPortal as e}from"react-dom";import m from"classnames";import{useSensors as a,useSensor as u,PointerSensor as p,KeyboardSensor as l,DndContext as d,pointerWithin as j,closestCenter as f,DragOverlay as I}from"@dnd-kit/core";import{sortableKeyboardCoordinates as g,SortableContext as v,horizontalListSortingStrategy as h,useSortable as b}from"@dnd-kit/sortable";import{ButtonIcon as y}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{DragIcon as C}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.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/SearchOne.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/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{AttachmentTile as O}from"./AttachmentTile.js";import D from"./AttachmentPreview.scss.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"../../constants/corvaCompanyId.js";import"lodash";import"../GradientManager/configuration/constants.js";import{DRAGGING_ATTRIBUTE as k}from"../../constants/attachments.js";import A from"../../utils/main.js";import{jsxs as P,jsx as F}from"react/jsx-runtime";function R(o,n){var s=Object.keys(o);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(o);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable}))),s.push.apply(s,t)}return s}function w(n){for(var s=1;s<arguments.length;s++){var t=null!=arguments[s]?arguments[s]:{};s%2?R(Object(t),!0).forEach((function(s){o(n,s,t[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):R(Object(t)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(t,o))}))}return n}var E=function(o){document.body.toggleAttribute(k,o)},N=function(){setTimeout((function(){return E(!1)}),0)},S=function(o){var n=o.item,s=o.onRemove,t=o.onRetry,c=o.onItemClick,i=o.insertBefore,r=o.insertAfter,e=o.isFirst,a=b({id:String(n.id)}),u=a.attributes,p=a.listeners,l=a.setNodeRef,d=a.isDragging;return P("div",w(w(w({ref:l,className:m(D.slot,d&&D.slotDragging)},u),p),{},{onKeyDown:function(o){var t;null==p||null===(t=p.onKeyDown)||void 0===t||t.call(p,o),"Delete"!==o.key&&"Backspace"!==o.key||s&&(o.preventDefault(),s(n.id))},children:[i&&F("div",{className:m(D.insertion,e?D.insertionEdge:D.insertionBefore)}),F("div",{className:D.slotContent,children:F(O,{item:n,onRemove:s,onRetry:t,onItemClick:c})}),r&&F("div",{className:m(D.insertion,D.insertionAfter)})]}))},x=t((function(t,b){var R=t.items,x=t.onRemove,M=t.onRetry,B=t.onItemClick,G=t.onReorder,L=t.className,T=t.testId,z=c(null),K=n(z,2),U=K[0],W=K[1],q=c(-1),H=n(q,2),V=H[0],X=H[1],Z=i(-1);Z.current=V;var J=i(!1),Q=i([]),Y=i(null),$=a(u(p,{activationConstraint:{distance:4}}),u(l,{coordinateGetter:g})),_=R.map((function(o){return String(o.id)})),oo=U?_.indexOf(U):-1,no=R.find((function(o){return String(o.id)===U})),so=function(o){var n,s;return A.getFileNameWithExtensionFromPath(null!==(n=null===(s=R[o])||void 0===s?void 0:s.name)&&void 0!==n?n:"file")},to=function(o){Z.current=o,X(o)};r((function(){return function(){return E(!1)}}),[]);var co=function(o){return(o>oo?o-1:o)+1},io={onDragStart:function(o){var n=o.active,s=_.indexOf(String(n.id));return"Grabbed ".concat(so(s),". Position ").concat(s+1," of ").concat(_.length,".")},onDragOver:function(){return Z.current<0?"".concat(so(oo)," is back at position ").concat(oo+1," of ").concat(_.length,"."):"".concat(so(oo)," will move to position ").concat(co(Z.current)," of ").concat(_.length,".")},onDragEnd:function(){return Z.current<0?"".concat(so(oo)," was dropped in place."):"".concat(so(oo)," was dropped at position ").concat(co(Z.current)," of ").concat(_.length,".")},onDragCancel:function(){return"Reordering cancelled. ".concat(so(oo)," returned to its position.")}};r((function(){if(!(oo<0)&&J.current){var o=oo,n=function(n){var s={ArrowRight:1,ArrowLeft:-1}[n.key];s&&(o=Math.min(R.length-1,Math.max(0,o+s)),to(function(o){return o===oo?-1:o+(o>oo?1:0)}(o)))};return document.addEventListener("keydown",n),function(){return document.removeEventListener("keydown",n)}}}),[oo,R.length]);var ro=function(o){return to(function(o){var n=o.delta,s=o.activatorEvent,t=null==s?void 0:s.clientX,c=Y.current;if(oo<0||!c||"number"!=typeof t||Number.isNaN(t))return Z.current;var i=t+n.x+c.scrollLeft,r=Q.current.filter((function(o){return i>=o})).length;return r===oo||r===oo+1?-1:r}(o))};return P(d,{sensors:$,accessibility:{announcements:io},collisionDetection:function(o){var n=j(o);return n.length?n:f(o)},onDragStart:function(o){var n=o.active,s=o.activatorEvent;J.current=s instanceof globalThis.KeyboardEvent;var t=Y.current;Q.current=t?Array.from(t.children).map((function(o){var n=o.getBoundingClientRect();return n.left+n.width/2+t.scrollLeft})):[],W(String(n.id)),to(-1),E(!0)},onDragMove:ro,onDragOver:ro,onDragEnd:function(){var o,t,c,i,r,e=Z.current;e>=0&&oo>=0&&G((o=oo,t=e,c=s(_),i=c.splice(o,1),r=n(i,1)[0],c.splice(t>o?t-1:t,0,r),c)),W(null),to(-1),Q.current=[],N()},onDragCancel:function(){W(null),to(-1),Q.current=[],N()},children:[F(v,{items:_,strategy:h,children:F("div",w(w({ref:function(o){if(Y.current=o,"function"==typeof b)b(o);else if(b){b.current=o}},"data-testid":T,className:m(D.scroller,L)},U?o({},k,"true"):{}),{},{children:R.map((function(o,n){return F(S,{item:o,onRemove:x,onRetry:M,onItemClick:B,isFirst:0===n,insertBefore:V===n,insertAfter:n===R.length-1&&V===R.length},o.id)}))}))}),e(F(I,{dropAnimation:null,zIndex:2100,children:no&&P("div",w(w({className:D.dragGhost},o({},k,"true")),{},{children:[F(O,{item:no}),F("div",{className:D.dragGhostHandle,children:F(y,{size:"xs",type:"tertiaryBg",testId:"attachment-drag-handle",children:F(C,{size:"small"})})})]}))}),document.body)]})}));export{x as SortableAttachments};
+import o from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import s from"@babel/runtime/helpers/toConsumableArray";import{forwardRef as t,useState as c,useRef as i,useEffect as r}from"react";import{createPortal as e}from"react-dom";import m from"classnames";import{useSensors as a,useSensor as u,PointerSensor as p,KeyboardSensor as l,DndContext as d,pointerWithin as j,closestCenter as f,DragOverlay as I}from"@dnd-kit/core";import{sortableKeyboardCoordinates as g,SortableContext as v,horizontalListSortingStrategy as h,useSortable as b}from"@dnd-kit/sortable";import{ButtonIcon as y}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{DragIcon as O}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.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/SearchOne.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/InfoRounded.js";import"../../icons/customIcons/icons/FlameFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/PinOne.js";import"../../icons/customIcons/icons/PinOneCrossed.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{AttachmentTile as C}from"./AttachmentTile.js";import D from"./AttachmentPreview.scss.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"../../constants/corvaCompanyId.js";import"lodash";import"../GradientManager/configuration/constants.js";import{DRAGGING_ATTRIBUTE as P}from"../../constants/attachments.js";import k from"../../utils/main.js";import{jsxs as A,jsx as F}from"react/jsx-runtime";function R(o,n){var s=Object.keys(o);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(o);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable}))),s.push.apply(s,t)}return s}function w(n){for(var s=1;s<arguments.length;s++){var t=null!=arguments[s]?arguments[s]:{};s%2?R(Object(t),!0).forEach((function(s){o(n,s,t[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):R(Object(t)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(t,o))}))}return n}var E=function(o){document.body.toggleAttribute(P,o)},N=function(){setTimeout((function(){return E(!1)}),0)},S=function(o){var n=o.item,s=o.onRemove,t=o.onRetry,c=o.onItemClick,i=o.insertBefore,r=o.insertAfter,e=o.isFirst,a=b({id:String(n.id)}),u=a.attributes,p=a.listeners,l=a.setNodeRef,d=a.isDragging;return A("div",w(w(w({ref:l,className:m(D.slot,d&&D.slotDragging)},u),p),{},{onKeyDown:function(o){var t;null==p||null===(t=p.onKeyDown)||void 0===t||t.call(p,o),"Delete"!==o.key&&"Backspace"!==o.key||s&&(o.preventDefault(),s(n.id))},children:[i&&F("div",{className:m(D.insertion,e?D.insertionEdge:D.insertionBefore)}),F("div",{className:D.slotContent,children:F(C,{item:n,onRemove:s,onRetry:t,onItemClick:c})}),r&&F("div",{className:m(D.insertion,D.insertionAfter)})]}))},x=t((function(t,b){var R=t.items,x=t.onRemove,M=t.onRetry,B=t.onItemClick,G=t.onReorder,L=t.className,T=t.testId,z=c(null),K=n(z,2),U=K[0],W=K[1],q=c(-1),H=n(q,2),V=H[0],X=H[1],Z=i(-1);Z.current=V;var J=i(!1),Q=i([]),Y=i(null),$=a(u(p,{activationConstraint:{distance:4}}),u(l,{coordinateGetter:g})),_=R.map((function(o){return String(o.id)})),oo=U?_.indexOf(U):-1,no=R.find((function(o){return String(o.id)===U})),so=function(o){var n,s;return k.getFileNameWithExtensionFromPath(null!==(n=null===(s=R[o])||void 0===s?void 0:s.name)&&void 0!==n?n:"file")},to=function(o){Z.current=o,X(o)};r((function(){return function(){return E(!1)}}),[]);var co=function(o){return(o>oo?o-1:o)+1},io={onDragStart:function(o){var n=o.active,s=_.indexOf(String(n.id));return"Grabbed ".concat(so(s),". Position ").concat(s+1," of ").concat(_.length,".")},onDragOver:function(){return Z.current<0?"".concat(so(oo)," is back at position ").concat(oo+1," of ").concat(_.length,"."):"".concat(so(oo)," will move to position ").concat(co(Z.current)," of ").concat(_.length,".")},onDragEnd:function(){return Z.current<0?"".concat(so(oo)," was dropped in place."):"".concat(so(oo)," was dropped at position ").concat(co(Z.current)," of ").concat(_.length,".")},onDragCancel:function(){return"Reordering cancelled. ".concat(so(oo)," returned to its position.")}};r((function(){if(!(oo<0)&&J.current){var o=oo,n=function(n){var s={ArrowRight:1,ArrowLeft:-1}[n.key];s&&(o=Math.min(R.length-1,Math.max(0,o+s)),to(function(o){return o===oo?-1:o+(o>oo?1:0)}(o)))};return document.addEventListener("keydown",n),function(){return document.removeEventListener("keydown",n)}}}),[oo,R.length]);var ro=function(o){return to(function(o){var n=o.delta,s=o.activatorEvent,t=null==s?void 0:s.clientX,c=Y.current;if(oo<0||!c||"number"!=typeof t||Number.isNaN(t))return Z.current;var i=t+n.x+c.scrollLeft,r=Q.current.filter((function(o){return i>=o})).length;return r===oo||r===oo+1?-1:r}(o))};return A(d,{sensors:$,accessibility:{announcements:io},collisionDetection:function(o){var n=j(o);return n.length?n:f(o)},onDragStart:function(o){var n=o.active,s=o.activatorEvent;J.current=s instanceof globalThis.KeyboardEvent;var t=Y.current;Q.current=t?Array.from(t.children).map((function(o){var n=o.getBoundingClientRect();return n.left+n.width/2+t.scrollLeft})):[],W(String(n.id)),to(-1),E(!0)},onDragMove:ro,onDragOver:ro,onDragEnd:function(){var o,t,c,i,r,e=Z.current;e>=0&&oo>=0&&G((o=oo,t=e,c=s(_),i=c.splice(o,1),r=n(i,1)[0],c.splice(t>o?t-1:t,0,r),c)),W(null),to(-1),Q.current=[],N()},onDragCancel:function(){W(null),to(-1),Q.current=[],N()},children:[F(v,{items:_,strategy:h,children:F("div",w(w({ref:function(o){if(Y.current=o,"function"==typeof b)b(o);else if(b){b.current=o}},"data-testid":T,className:m(D.scroller,L)},U?o({},P,"true"):{}),{},{children:R.map((function(o,n){return F(S,{item:o,onRemove:x,onRetry:M,onItemClick:B,isFirst:0===n,insertBefore:V===n,insertAfter:n===R.length-1&&V===R.length},o.id)}))}))}),e(F(I,{dropAnimation:null,zIndex:2100,children:no&&A("div",w(w({className:D.dragGhost},o({},P,"true")),{},{children:[F(C,{item:no}),F("div",{className:D.dragGhostHandle,children:F(y,{size:"xs",type:"tertiaryBg",testId:"attachment-drag-handle",children:F(O,{size:"small"})})})]}))}),document.body)]})}));export{x as SortableAttachments};
 //# sourceMappingURL=SortableAttachments.js.map

package/components/AttachmentPreview/SortableAttachments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableAttachments.js","sources":["../../../src/components/AttachmentPreview/SortableAttachments.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, MutableRefObject, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport {\n Announcements,\n DndContext,\n DragMoveEvent,\n DragStartEvent,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n closestCenter,\n pointerWithin,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n SortableContext,\n horizontalListSortingStrategy,\n sortableKeyboardCoordinates,\n useSortable,\n} from '@dnd-kit/sortable';\n\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { DragIcon } from '../../icons';\n\nimport { AttachmentTile } from './AttachmentTile';\nimport { AttachmentPreviewItem, AttachmentPreviewProps } from './AttachmentPreview.types';\n\nimport styles from './AttachmentPreview.scss';\n\nimport { DRAGGING_ATTRIBUTE } from '~/constants';\nimport utils from '~/utils/main';\n\n// Above MUI's modal layer (1300) and the platform's panels.\nconst DRAG_GHOST_Z_INDEX = 2100;\n\nconst setDragActive = (isActive: boolean) => {\n document.body.toggleAttribute(DRAGGING_ATTRIBUTE, isActive);\n};\n\nconst clearDragActive = () => {\n setTimeout(() => setDragActive(false), 0);\n};\n\n/** Move `from` to boundary `insertAt` (0 = before everything, length = after everything). /\nconst moveToBoundary = <T,>(list: T[], from: number, insertAt: number): T[] => {\n const next = [...list];\n const [moved] = next.splice(from, 1);\n next.splice(insertAt > from ? insertAt - 1 : insertAt, 0, moved);\n\n return next;\n};\n\nexport type SortableAttachmentsProps = AttachmentPreviewProps & {\n onReorder: NonNullable<AttachmentPreviewProps['onReorder']>;\n};\n\ntype SortableSlotProps = {\n item: AttachmentPreviewItem;\n onRemove?: AttachmentPreviewProps['onRemove'];\n onRetry?: AttachmentPreviewProps['onRetry'];\n onItemClick?: AttachmentPreviewProps['onItemClick'];\n insertBefore: boolean;\n insertAfter: boolean;\n isFirst: boolean;\n};\n\nconst SortableSlot = ({\n item,\n onRemove,\n onRetry,\n onItemClick,\n insertBefore,\n insertAfter,\n isFirst,\n}: SortableSlotProps) => {\n const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: String(item.id) });\n\n // The sensor owns onKeyDown (space/arrows/escape), so chain onto it rather than replace it.\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n listeners?.onKeyDown?.(event);\n\n if (event.key !== 'Delete' && event.key !== 'Backspace') return;\n if (!onRemove) return;\n\n event.preventDefault();\n onRemove(item.id);\n };\n\n return (\n <div\n ref={setNodeRef}\n className={classNames(styles.slot, isDragging && styles.slotDragging)}\n {...attributes}\n {...listeners}\n onKeyDown={handleKeyDown}\n >\n {insertBefore && (\n <div\n className={classNames(\n styles.insertion,\n isFirst ? styles.insertionEdge : styles.insertionBefore\n )}\n />\n )}\n <div className={styles.slotContent}>\n <AttachmentTile\n item={item}\n onRemove={onRemove}\n onRetry={onRetry}\n onItemClick={onItemClick}\n />\n </div>\n {insertAfter && <div className={classNames(styles.insertion, styles.insertionAfter)} />}\n </div>\n );\n};\n\nexport const SortableAttachments = forwardRef<HTMLDivElement, SortableAttachmentsProps>(\n ({ items, onRemove, onRetry, onItemClick, onReorder, className, testId }, ref) => {\n const [activeId, setActiveId] = useState<null \| string>(null);\n const [insertionIndex, setInsertionIndex] = useState(-1);\n // Read in handlers that must not be re-created as the pointer moves.\n const insertionRef = useRef(-1);\n insertionRef.current = insertionIndex;\n const isKeyboardDragRef = useRef(false);\n const slotMidpointsRef = useRef<number[]>([]);\n\n // The host's ref drives its scroll arrows; this one measures the strip mid-drag.\n const scrollerRef = useRef<HTMLDivElement \| null>(null);\n const setScrollerRef = (node: HTMLDivElement \| null) => {\n scrollerRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) {\n const forwardedRef = ref as MutableRefObject<HTMLDivElement \| null>;\n forwardedRef.current = node;\n }\n };\n\n const sensors = useSensors(\n // A small threshold keeps Remove and the lightbox clickable on a plain press.\n useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n );\n\n const ids = items.map(item => String(item.id));\n const activeIndex = activeId ? ids.indexOf(activeId) : -1;\n const activeItem = items.find(item => String(item.id) === activeId);\n const nameOf = (index: number) =>\n utils.getFileNameWithExtensionFromPath(items[index]?.name ?? 'file');\n\n const setInsertion = (next: number) => {\n insertionRef.current = next;\n setInsertionIndex(next);\n };\n\n useEffect(() => () => setDragActive(false), []);\n\n /* A landing position (0…n-1) expressed as the boundary the insertion bar draws at. /\n const positionToBoundary = (position: number) =>\n position === activeIndex ? -1 : position + (position > activeIndex ? 1 : 0);\n\n // Compare against DOM midpoints captured at drag start: dnd-kit's rects follow its virtual\n // sorted order, which drifts from the screen once transforms are suppressed.\n const resolveInsertion = ({ delta, activatorEvent }: DragMoveEvent) => {\n const startX = (activatorEvent as PointerEvent)?.clientX;\n const scroller = scrollerRef.current;\n if (activeIndex < 0 \|\| !scroller \|\| typeof startX !== 'number' \|\| Number.isNaN(startX)) {\n return insertionRef.current;\n }\n\n const pointerX = startX + delta.x + scroller.scrollLeft;\n const boundary = slotMidpointsRef.current.filter(midpoint => pointerX >= midpoint).length;\n\n // Dropping either side of where it already sits is a no-op.\n return boundary === activeIndex \|\| boundary === activeIndex + 1 ? -1 : boundary;\n };\n\n const positionOf = (boundary: number) => (boundary > activeIndex ? boundary - 1 : boundary) + 1;\n\n const announcements: Announcements = {\n onDragStart: ({ active }) => {\n const index = ids.indexOf(String(active.id));\n\n return `Grabbed ${nameOf(index)}. Position ${index + 1} of ${ids.length}.`;\n },\n onDragOver: () =>\n insertionRef.current < 0\n ? `${nameOf(activeIndex)} is back at position ${activeIndex + 1} of ${ids.length}.`\n : `${nameOf(activeIndex)} will move to position ${positionOf(insertionRef.current)} of ${\n ids.length\n }.`,\n onDragEnd: () =>\n insertionRef.current < 0\n ? `${nameOf(activeIndex)} was dropped in place.`\n : `${nameOf(activeIndex)} was dropped at position ${positionOf(\n insertionRef.current\n )} of ${ids.length}.`,\n onDragCancel: () => `Reordering cancelled. ${nameOf(activeIndex)} returned to its position.`,\n };\n\n // Step by position instead of reading dnd-kit's `over`: its keyboard coordinates come from\n // rect geometry, so a wide tile can clear several narrow ones in one press and pin `over`\n // to the last of them.\n useEffect(() => {\n if (activeIndex < 0 \|\| !isKeyboardDragRef.current) return undefined;\n\n let position = activeIndex;\n const onKeyDown = (event: globalThis.KeyboardEvent) => {\n const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];\n if (!step) return;\n\n position = Math.min(items.length - 1, Math.max(0, position + step));\n setInsertion(positionToBoundary(position));\n };\n\n document.addEventListener('keydown', onKeyDown);\n\n return () => document.removeEventListener('keydown', onKeyDown);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeIndex, items.length]);\n\n const handleDragStart = ({ active, activatorEvent }: DragStartEvent) => {\n isKeyboardDragRef.current = activatorEvent instanceof globalThis.KeyboardEvent;\n const scroller = scrollerRef.current;\n slotMidpointsRef.current = scroller\n ? Array.from(scroller.children).map(slot => {\n const rect = slot.getBoundingClientRect();\n\n return rect.left + rect.width / 2 + scroller.scrollLeft;\n })\n : [];\n setActiveId(String(active.id));\n setInsertion(-1);\n setDragActive(true);\n };\n\n const handleDragMove = (event: DragMoveEvent) => setInsertion(resolveInsertion(event));\n\n const handleDragEnd = () => {\n // The bar is the source of truth, not `over` — a keyboard drag can move the target\n // without `over` following, and dropping in a gap leaves `over` null.\n const boundary = insertionRef.current;\n if (boundary >= 0 && activeIndex >= 0) {\n onReorder(moveToBoundary(ids, activeIndex, boundary));\n }\n\n setActiveId(null);\n setInsertion(-1);\n slotMidpointsRef.current = [];\n clearDragActive();\n };\n\n const handleDragCancel = () => {\n setActiveId(null);\n setInsertion(-1);\n slotMidpointsRef.current = [];\n clearDragActive();\n };\n\n return (\n <DndContext\n sensors={sensors}\n accessibility={{ announcements }}\n // pointerWithin targets the tile under the cursor; closestCenter covers the gaps\n // between tiles and keyboard drags, where there is no pointer.\n collisionDetection={args => {\n const within = pointerWithin(args);\n\n return within.length ? within : closestCenter(args);\n }}\n onDragStart={handleDragStart}\n onDragMove={handleDragMove}\n onDragOver={handleDragMove}\n onDragEnd={handleDragEnd}\n onDragCancel={handleDragCancel}\n >\n <SortableContext items={ids} strategy={horizontalListSortingStrategy}>\n <div\n ref={setScrollerRef}\n data-testid={testId}\n className={classNames(styles.scroller, className)}\n {...(activeId ? { [DRAGGING_ATTRIBUTE]: 'true' } : {})}\n >\n {items.map((item, index) => (\n <SortableSlot\n key={item.id}\n item={item}\n onRemove={onRemove}\n onRetry={onRetry}\n onItemClick={onItemClick}\n isFirst={index === 0}\n insertBefore={insertionIndex === index}\n insertAfter={index === items.length - 1 && insertionIndex === items.length}\n />\n ))}\n </div>\n </SortableContext>\n\n {/ Portalled so no ancestor transform/backdrop-filter can clip the fixed overlay. */}\n {createPortal(\n <DragOverlay dropAnimation={null} zIndex={DRAG_GHOST_Z_INDEX}>\n {activeItem && (\n <div className={styles.dragGhost} {...{ [DRAGGING_ATTRIBUTE]: 'true' }}>\n <AttachmentTile item={activeItem} />\n <div className={styles.dragGhostHandle}>\n <ButtonIcon size=\"xs\" type=\"tertiaryBg\" testId=\"attachment-drag-handle\">\n <DragIcon size=\"small\" />\n </ButtonIcon>\n </div>\n </div>\n )}\n </DragOverlay>,\n document.body\n )}\n </DndContext>\n );\n }\n);\n"],"names":["setDragActive","isActive","document","body","toggleAttribute","DRAGGING_ATTRIBUTE","clearDragActive","setTimeout","SortableSlot","_ref","item","onRemove","onRetry","onItemClick","insertBefore","insertAfter","isFirst","_useSortable","useSortable","id","String","attributes","listeners","setNodeRef","isDragging","_jsxs","_objectSpread","ref","className","classNames","styles","slot","slotDragging","onKeyDown","event","_listeners$onKeyDown","key","preventDefault","children","_jsx","insertion","insertionEdge","insertionBefore","slotContent","AttachmentTile","insertionAfter","SortableAttachments","forwardRef","_ref2","items","onReorder","testId","useState","_useState2","_slicedToArray","_useState","activeId","setActiveId","_useState3","_useState4","insertionIndex","setInsertionIndex","insertionRef","useRef","current","isKeyboardDragRef","slotMidpointsRef","scrollerRef","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","ids","map","activeIndex","indexOf","activeItem","find","nameOf","index","_items$index$name","_items$index","utils","getFileNameWithExtensionFromPath","name","setInsertion","next","useEffect","positionOf","boundary","announcements","onDragStart","_ref4","active","concat","length","onDragOver","onDragEnd","onDragCancel","position","step","ArrowRight","ArrowLeft","Math","min","max","positionToBoundary","addEventListener","removeEventListener","handleDragMove","_ref3","delta","activatorEvent","startX","clientX","scroller","Number","isNaN","pointerX","x","scrollLeft","filter","midpoint","resolveInsertion","DndContext","accessibility","collisionDetection","args","within","pointerWithin","closestCenter","_ref5","globalThis","KeyboardEvent","Array","from","rect","getBoundingClientRect","left","width","onDragMove","insertAt","_next$splice","moved","list","splice","SortableContext","strategy","horizontalListSortingStrategy","node","createPortal","DragOverlay","dropAnimation","zIndex","dragGhost","dragGhostHandle","ButtonIcon","size","type","DragIcon"],"mappings":"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"}
1	+ {"version":3,"file":"SortableAttachments.js","sources":["../../../src/components/AttachmentPreview/SortableAttachments.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, MutableRefObject, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport {\n Announcements,\n DndContext,\n DragMoveEvent,\n DragStartEvent,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n closestCenter,\n pointerWithin,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n SortableContext,\n horizontalListSortingStrategy,\n sortableKeyboardCoordinates,\n useSortable,\n} from '@dnd-kit/sortable';\n\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { DragIcon } from '../../icons';\n\nimport { AttachmentTile } from './AttachmentTile';\nimport { AttachmentPreviewItem, AttachmentPreviewProps } from './AttachmentPreview.types';\n\nimport styles from './AttachmentPreview.scss';\n\nimport { DRAGGING_ATTRIBUTE } from '~/constants';\nimport utils from '~/utils/main';\n\n// Above MUI's modal layer (1300) and the platform's panels.\nconst DRAG_GHOST_Z_INDEX = 2100;\n\nconst setDragActive = (isActive: boolean) => {\n document.body.toggleAttribute(DRAGGING_ATTRIBUTE, isActive);\n};\n\nconst clearDragActive = () => {\n setTimeout(() => setDragActive(false), 0);\n};\n\n/** Move `from` to boundary `insertAt` (0 = before everything, length = after everything). /\nconst moveToBoundary = <T,>(list: T[], from: number, insertAt: number): T[] => {\n const next = [...list];\n const [moved] = next.splice(from, 1);\n next.splice(insertAt > from ? insertAt - 1 : insertAt, 0, moved);\n\n return next;\n};\n\nexport type SortableAttachmentsProps = AttachmentPreviewProps & {\n onReorder: NonNullable<AttachmentPreviewProps['onReorder']>;\n};\n\ntype SortableSlotProps = {\n item: AttachmentPreviewItem;\n onRemove?: AttachmentPreviewProps['onRemove'];\n onRetry?: AttachmentPreviewProps['onRetry'];\n onItemClick?: AttachmentPreviewProps['onItemClick'];\n insertBefore: boolean;\n insertAfter: boolean;\n isFirst: boolean;\n};\n\nconst SortableSlot = ({\n item,\n onRemove,\n onRetry,\n onItemClick,\n insertBefore,\n insertAfter,\n isFirst,\n}: SortableSlotProps) => {\n const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: String(item.id) });\n\n // The sensor owns onKeyDown (space/arrows/escape), so chain onto it rather than replace it.\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n listeners?.onKeyDown?.(event);\n\n if (event.key !== 'Delete' && event.key !== 'Backspace') return;\n if (!onRemove) return;\n\n event.preventDefault();\n onRemove(item.id);\n };\n\n return (\n <div\n ref={setNodeRef}\n className={classNames(styles.slot, isDragging && styles.slotDragging)}\n {...attributes}\n {...listeners}\n onKeyDown={handleKeyDown}\n >\n {insertBefore && (\n <div\n className={classNames(\n styles.insertion,\n isFirst ? styles.insertionEdge : styles.insertionBefore\n )}\n />\n )}\n <div className={styles.slotContent}>\n <AttachmentTile\n item={item}\n onRemove={onRemove}\n onRetry={onRetry}\n onItemClick={onItemClick}\n />\n </div>\n {insertAfter && <div className={classNames(styles.insertion, styles.insertionAfter)} />}\n </div>\n );\n};\n\nexport const SortableAttachments = forwardRef<HTMLDivElement, SortableAttachmentsProps>(\n ({ items, onRemove, onRetry, onItemClick, onReorder, className, testId }, ref) => {\n const [activeId, setActiveId] = useState<null \| string>(null);\n const [insertionIndex, setInsertionIndex] = useState(-1);\n // Read in handlers that must not be re-created as the pointer moves.\n const insertionRef = useRef(-1);\n insertionRef.current = insertionIndex;\n const isKeyboardDragRef = useRef(false);\n const slotMidpointsRef = useRef<number[]>([]);\n\n // The host's ref drives its scroll arrows; this one measures the strip mid-drag.\n const scrollerRef = useRef<HTMLDivElement \| null>(null);\n const setScrollerRef = (node: HTMLDivElement \| null) => {\n scrollerRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) {\n const forwardedRef = ref as MutableRefObject<HTMLDivElement \| null>;\n forwardedRef.current = node;\n }\n };\n\n const sensors = useSensors(\n // A small threshold keeps Remove and the lightbox clickable on a plain press.\n useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n );\n\n const ids = items.map(item => String(item.id));\n const activeIndex = activeId ? ids.indexOf(activeId) : -1;\n const activeItem = items.find(item => String(item.id) === activeId);\n const nameOf = (index: number) =>\n utils.getFileNameWithExtensionFromPath(items[index]?.name ?? 'file');\n\n const setInsertion = (next: number) => {\n insertionRef.current = next;\n setInsertionIndex(next);\n };\n\n useEffect(() => () => setDragActive(false), []);\n\n /* A landing position (0…n-1) expressed as the boundary the insertion bar draws at. /\n const positionToBoundary = (position: number) =>\n position === activeIndex ? -1 : position + (position > activeIndex ? 1 : 0);\n\n // Compare against DOM midpoints captured at drag start: dnd-kit's rects follow its virtual\n // sorted order, which drifts from the screen once transforms are suppressed.\n const resolveInsertion = ({ delta, activatorEvent }: DragMoveEvent) => {\n const startX = (activatorEvent as PointerEvent)?.clientX;\n const scroller = scrollerRef.current;\n if (activeIndex < 0 \|\| !scroller \|\| typeof startX !== 'number' \|\| Number.isNaN(startX)) {\n return insertionRef.current;\n }\n\n const pointerX = startX + delta.x + scroller.scrollLeft;\n const boundary = slotMidpointsRef.current.filter(midpoint => pointerX >= midpoint).length;\n\n // Dropping either side of where it already sits is a no-op.\n return boundary === activeIndex \|\| boundary === activeIndex + 1 ? -1 : boundary;\n };\n\n const positionOf = (boundary: number) => (boundary > activeIndex ? boundary - 1 : boundary) + 1;\n\n const announcements: Announcements = {\n onDragStart: ({ active }) => {\n const index = ids.indexOf(String(active.id));\n\n return `Grabbed ${nameOf(index)}. Position ${index + 1} of ${ids.length}.`;\n },\n onDragOver: () =>\n insertionRef.current < 0\n ? `${nameOf(activeIndex)} is back at position ${activeIndex + 1} of ${ids.length}.`\n : `${nameOf(activeIndex)} will move to position ${positionOf(insertionRef.current)} of ${\n ids.length\n }.`,\n onDragEnd: () =>\n insertionRef.current < 0\n ? `${nameOf(activeIndex)} was dropped in place.`\n : `${nameOf(activeIndex)} was dropped at position ${positionOf(\n insertionRef.current\n )} of ${ids.length}.`,\n onDragCancel: () => `Reordering cancelled. ${nameOf(activeIndex)} returned to its position.`,\n };\n\n // Step by position instead of reading dnd-kit's `over`: its keyboard coordinates come from\n // rect geometry, so a wide tile can clear several narrow ones in one press and pin `over`\n // to the last of them.\n useEffect(() => {\n if (activeIndex < 0 \|\| !isKeyboardDragRef.current) return undefined;\n\n let position = activeIndex;\n const onKeyDown = (event: globalThis.KeyboardEvent) => {\n const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];\n if (!step) return;\n\n position = Math.min(items.length - 1, Math.max(0, position + step));\n setInsertion(positionToBoundary(position));\n };\n\n document.addEventListener('keydown', onKeyDown);\n\n return () => document.removeEventListener('keydown', onKeyDown);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeIndex, items.length]);\n\n const handleDragStart = ({ active, activatorEvent }: DragStartEvent) => {\n isKeyboardDragRef.current = activatorEvent instanceof globalThis.KeyboardEvent;\n const scroller = scrollerRef.current;\n slotMidpointsRef.current = scroller\n ? Array.from(scroller.children).map(slot => {\n const rect = slot.getBoundingClientRect();\n\n return rect.left + rect.width / 2 + scroller.scrollLeft;\n })\n : [];\n setActiveId(String(active.id));\n setInsertion(-1);\n setDragActive(true);\n };\n\n const handleDragMove = (event: DragMoveEvent) => setInsertion(resolveInsertion(event));\n\n const handleDragEnd = () => {\n // The bar is the source of truth, not `over` — a keyboard drag can move the target\n // without `over` following, and dropping in a gap leaves `over` null.\n const boundary = insertionRef.current;\n if (boundary >= 0 && activeIndex >= 0) {\n onReorder(moveToBoundary(ids, activeIndex, boundary));\n }\n\n setActiveId(null);\n setInsertion(-1);\n slotMidpointsRef.current = [];\n clearDragActive();\n };\n\n const handleDragCancel = () => {\n setActiveId(null);\n setInsertion(-1);\n slotMidpointsRef.current = [];\n clearDragActive();\n };\n\n return (\n <DndContext\n sensors={sensors}\n accessibility={{ announcements }}\n // pointerWithin targets the tile under the cursor; closestCenter covers the gaps\n // between tiles and keyboard drags, where there is no pointer.\n collisionDetection={args => {\n const within = pointerWithin(args);\n\n return within.length ? within : closestCenter(args);\n }}\n onDragStart={handleDragStart}\n onDragMove={handleDragMove}\n onDragOver={handleDragMove}\n onDragEnd={handleDragEnd}\n onDragCancel={handleDragCancel}\n >\n <SortableContext items={ids} strategy={horizontalListSortingStrategy}>\n <div\n ref={setScrollerRef}\n data-testid={testId}\n className={classNames(styles.scroller, className)}\n {...(activeId ? { [DRAGGING_ATTRIBUTE]: 'true' } : {})}\n >\n {items.map((item, index) => (\n <SortableSlot\n key={item.id}\n item={item}\n onRemove={onRemove}\n onRetry={onRetry}\n onItemClick={onItemClick}\n isFirst={index === 0}\n insertBefore={insertionIndex === index}\n insertAfter={index === items.length - 1 && insertionIndex === items.length}\n />\n ))}\n </div>\n </SortableContext>\n\n {/ Portalled so no ancestor transform/backdrop-filter can clip the fixed overlay. */}\n {createPortal(\n <DragOverlay dropAnimation={null} zIndex={DRAG_GHOST_Z_INDEX}>\n {activeItem && (\n <div className={styles.dragGhost} {...{ [DRAGGING_ATTRIBUTE]: 'true' }}>\n <AttachmentTile item={activeItem} />\n <div className={styles.dragGhostHandle}>\n <ButtonIcon size=\"xs\" type=\"tertiaryBg\" testId=\"attachment-drag-handle\">\n <DragIcon size=\"small\" />\n </ButtonIcon>\n </div>\n </div>\n )}\n </DragOverlay>,\n document.body\n )}\n </DndContext>\n );\n }\n);\n"],"names":["setDragActive","isActive","document","body","toggleAttribute","DRAGGING_ATTRIBUTE","clearDragActive","setTimeout","SortableSlot","_ref","item","onRemove","onRetry","onItemClick","insertBefore","insertAfter","isFirst","_useSortable","useSortable","id","String","attributes","listeners","setNodeRef","isDragging","_jsxs","_objectSpread","ref","className","classNames","styles","slot","slotDragging","onKeyDown","event","_listeners$onKeyDown","key","preventDefault","children","_jsx","insertion","insertionEdge","insertionBefore","slotContent","AttachmentTile","insertionAfter","SortableAttachments","forwardRef","_ref2","items","onReorder","testId","useState","_useState2","_slicedToArray","_useState","activeId","setActiveId","_useState3","_useState4","insertionIndex","setInsertionIndex","insertionRef","useRef","current","isKeyboardDragRef","slotMidpointsRef","scrollerRef","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","ids","map","activeIndex","indexOf","activeItem","find","nameOf","index","_items$index$name","_items$index","utils","getFileNameWithExtensionFromPath","name","setInsertion","next","useEffect","positionOf","boundary","announcements","onDragStart","_ref4","active","concat","length","onDragOver","onDragEnd","onDragCancel","position","step","ArrowRight","ArrowLeft","Math","min","max","positionToBoundary","addEventListener","removeEventListener","handleDragMove","_ref3","delta","activatorEvent","startX","clientX","scroller","Number","isNaN","pointerX","x","scrollLeft","filter","midpoint","resolveInsertion","DndContext","accessibility","collisionDetection","args","within","pointerWithin","closestCenter","_ref5","globalThis","KeyboardEvent","Array","from","rect","getBoundingClientRect","left","width","onDragMove","insertAt","_next$splice","moved","list","splice","SortableContext","strategy","horizontalListSortingStrategy","node","createPortal","DragOverlay","dropAnimation","zIndex","dragGhost","dragGhostHandle","ButtonIcon","size","type","DragIcon"],"mappings":"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"}

package/components/AttachmentPreview/useStoredAttachments.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useStoredAttachments.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentPreview/useStoredAttachments.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EAAkB,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;~~AAkB9E~~;;;GAGG;AACH,eAAO,MAAM,oBAAoB,iBACjB,gBAAgB,EAAE,GAAG,IAAI,KACtC,qBAAqB,EA6DvB,CAAC"}
1	+ {"version":3,"file":"useStoredAttachments.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentPreview/useStoredAttachments.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EAAkB,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AA0B9E;;;GAGG;AACH,eAAO,MAAM,oBAAoB,iBACjB,gBAAgB,EAAE,GAAG,IAAI,KACtC,qBAAqB,EA6DvB,CAAC"}

package/components/AttachmentPreview/useStoredAttachments.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import r from"@babel/runtime/helpers/defineProperty";import e from"@babel/runtime/helpers/slicedToArray";import n from"@babel/runtime/helpers/asyncToGenerator";import t from"@babel/runtime/regenerator";import{useState as o,useRef as c,useMemo as i,useEffect as u}from"react";import{getAttachmentKind as a}from"./getAttachmentKind.js";import{getIsStoredKey as f}from"./useStoredAttachment.js";import{getS3DownloadLink as s}from"../../clients/jsonApi/index.js";function p(r,e){var n=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.push.apply(n,t)}return n}function m(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?p(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var l=function(){var r=n(t.mark((function r(e,n){var o,c;return t.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,s(e,n);case 3:return o=r.sent,c=o.url,r.abrupt("return",c);case 8:return r.prev=8,r.t0=r.catch(0),console.error('Failed to sign attachment "'.concat(e,'"'),r.t0),r.abrupt("return","");case 12:case"end":return r.stop()}}),r,null,[[0,8]])})));return function(e,n){return r.apply(this,arguments)}}(),b=function(n){var t=o({}),s=e(t,2),p=s[0],b=s[1],h=c(p);h.current=p;var v=i((function(){return null!=n?n:[]}),[n]),O=v.map((function(r){return r.name})).join("|");return u((function(){var e=v.filter((function(r){return!(r.name in h.current)}));if(e.length){var n=!0,t=function(e,n){return b((function(t){return m(m({},t),{},r({},e,m(m({},t[e]),n)))}))};return b((function(r){var n=m({},r);return e.forEach((function(r){var e;n[r.name]=null!==(e=n[r.name])&&void 0!==e?e:{}})),n})),e.forEach((function(r){f(r.name)?l(r.name,"inline").then((function(e){n&&e&&t(r.name,{src:e})})):t(r.name,{src:r.url})})),function(){n=!1}}}),[O]),v.reduce((function(r,e){var n=p[e.name];return null!=n&&n.src?(r.push({id:e.url,name:e.name,src:n.src,kind:a(e),size:e.size}),r):r}),[])};export{b as useStoredAttachments};
+import r from"@babel/runtime/helpers/defineProperty";import e from"@babel/runtime/helpers/slicedToArray";import n from"@babel/runtime/helpers/asyncToGenerator";import t from"@babel/runtime/regenerator";import{useState as o,useRef as u,useMemo as c,useEffect as i}from"react";import{getAttachmentKind as a}from"./getAttachmentKind.js";import{getIsStoredKey as f}from"./useStoredAttachment.js";import{getSignedLink as m,peekSignedLink as s}from"../../utils/signedLinkCache.js";function p(r,e){var n=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.push.apply(n,t)}return n}function l(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?p(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var b=function(){var r=n(t.mark((function r(e){return t.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,m(e,"inline");case 3:return r.abrupt("return",r.sent);case 6:return r.prev=6,r.t0=r.catch(0),console.error('Failed to sign attachment "'.concat(e,'"'),r.t0),r.abrupt("return","");case 10:case"end":return r.stop()}}),r,null,[[0,6]])})));return function(e){return r.apply(this,arguments)}}(),h=function(n){var t=o((function(){return function(r){return r.reduce((function(r,e){var n=f(e.name)?s(e.name,"inline"):e.url;return n&&(r[e.name]={src:n}),r}),{})}(null!=n?n:[])})),m=e(t,2),p=m[0],h=m[1],v=u(p);v.current=p;var O=c((function(){return null!=n?n:[]}),[n]),j=O.map((function(r){return r.name})).join("|");return i((function(){var e=O.filter((function(r){return!(r.name in v.current)}));if(e.length){var n=!0,t=function(e,n){return h((function(t){return l(l({},t),{},r({},e,l(l({},t[e]),n)))}))};return h((function(r){var n=l({},r);return e.forEach((function(r){var e;n[r.name]=null!==(e=n[r.name])&&void 0!==e?e:{}})),n})),e.forEach((function(r){f(r.name)?b(r.name).then((function(e){n&&e&&t(r.name,{src:e})})):t(r.name,{src:r.url})})),function(){n=!1}}}),[j]),O.reduce((function(r,e){var n=p[e.name];return null!=n&&n.src?(r.push({id:e.url,name:e.name,src:n.src,kind:a(e),size:e.size}),r):r}),[])};export{h as useStoredAttachments};
 //# sourceMappingURL=useStoredAttachments.js.map

package/components/AttachmentPreview/useStoredAttachments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useStoredAttachments.js","sources":["../../../src/components/AttachmentPreview/useStoredAttachments.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport type { AttachmentPreviewItem } from './AttachmentPreview.types';\nimport { getAttachmentKind } from './getAttachmentKind';\nimport { getIsStoredKey, type StoredAttachment } from './useStoredAttachment';\n\nimport { ~~getS3DownloadLink~~ } from '~/~~clients~~/~~jsonApi~~';\n\ntype SignedLinks = Record<string, { src?: string }>;\n\nconst ~~getSignedLink~~ = async (name: string~~, disposition: 'attachment' \| 'inline'~~) => {\n try {\n ~~const~~ ~~{ url } =~~ await ~~getS3DownloadLink~~(name, ~~disposition~~);\n~~\n return url;\n~~ } catch (error) {\n console.error(`Failed to sign attachment \"${name}\"`, error);\n\n return '';\n }\n};\n\n/*\n Signs a whole list of stored attachments — the hook-per-file `useStoredAttachment`\n * can't cover a list whose length changes between renders.\n */\nexport const useStoredAttachments = (\n attachments?: StoredAttachment[] \| null\n): AttachmentPreviewItem[] => {\n const [links, setLinks] = useState<SignedLinks>({});\n const linksRef = useRef(links);\n linksRef.current = links;\n\n const list = useMemo(() => attachments ?? [], [attachments]);\n const key = list.map(attachment => attachment.name).join('\|');\n\n useEffect(() => {\n const pending = list.filter(attachment => !(attachment.name in linksRef.current));\n if (!pending.length) return undefined;\n\n let isActive = true;\n\n const applyLink = (name: string, patch: SignedLinks[string]) =>\n setLinks(prev => ({ ...prev, [name]: { ...prev[name], ...patch } }));\n\n // Claim the names up front so a re-render mid-flight does not ask again.\n setLinks(prev => {\n const claimed = { ...prev };\n\n pending.forEach(attachment => {\n claimed[attachment.name] = claimed[attachment.name] ?? {};\n });\n\n return claimed;\n });\n\n pending.forEach(attachment => {\n // A linked attachment already carries a url that works; only a key of ours needs signing.\n if (!getIsStoredKey(attachment.name)) {\n applyLink(attachment.name, { src: attachment.url });\n\n return;\n }\n\n ~~getSignedLink~~(attachment.name~~, 'inline'~~).then(src => {\n if (isActive && src) applyLink(attachment.name, { src });\n });\n });\n\n return () => {\n isActive = false;\n };\n // `key` tracks the list contents; `list` itself is a fresh array on every render.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [key]);\n\n return list.reduce<AttachmentPreviewItem[]>((acc, attachment) => {\n const link = links[attachment.name];\n if (!link?.src) return acc;\n\n acc.push({\n id: attachment.url,\n name: attachment.name,\n src: link.src,\n kind: getAttachmentKind(attachment),\n size: attachment.size,\n });\n return acc;\n }, []);\n};\n"],"names":["~~getSignedLink~~","_ref","_asyncToGenerator","_regeneratorRuntime","mark","~~_callee","~~name","~~disposition","_yield$getS3DownloadL","url","~~wrap","_context","prev","next","~~getS3DownloadLink~~","~~sent~~","~~abrupt~~","t0","console","error","stop","_x","~~_x2~~","apply","this","arguments","useStoredAttachments","attachments","_useState","useState","_useState2","_slicedToArray","links","setLinks","linksRef","useRef","current","list","useMemo","key","map","~~attachment","~~join","useEffect","pending","filter","length","isActive","applyLink","patch","_objectSpread","claimed","forEach","_claimed$attachment$n","~~getIsStoredKey","~~then","~~src","reduce","acc","~~link","push","id","kind","getAttachmentKind","size"],"mappings":"~~0gCAUA~~,IAAMA,~~EAAa~~,WAAA,~~IAAGC~~,EAAAC,EAAAC,EAAAC,~~MAAA~~,~~SAAAC~~,~~EAAOC~~,~~EAAcC~~,~~GAAoC~~,~~IAAAC,EAAAC,EAAA,OAAAN,EAAAO,~~MAAA,SAAAC,GAAA,OAAA,OAAAA,EAAAC,KAAAD,EAAAE,MAAA,KAAA,EAAA,OAAAF,EAAAC,KAAA,EAAAD,EAAAE,KAAA,~~EAErDC~~,~~EAAkBR~~,~~EAAMC~~,~~GAAY~~,KAAA,~~EAA/C~~,~~OAA+CC~~,~~EAAAG,~~EAAAI,~~KAAlDN~~,~~IAAAA~~,~~IAAGE,~~EAAAK,~~OAAA~~,~~SAEJP,GAAG,~~KAAA,~~EAEkD~~,~~OAFlDE~~,EAAAC,KAAA,EAAAD,EAAAM,GAAAN,EAAA,MAAA,~~GAEVO~~,QAAQC,~~MAAoCb~~,8BAAAA,OAAAA,EAAe,~~KAAAK~~,EAAAM,IAACN,~~EAAAK~~,OAAA,SAErD,IAAE,KAAA,GAAA,IAAA,MAAA,~~OAAAL~~,EAAAS,OAAA,~~GAAAf~~,EAAA,KAAA,CAAA,CAAA,EAAA,IAEZ,KAAA,OAAA,~~SAVkBgB~~,~~EAAAC,~~GAAA,~~OAAArB~~,~~EAAAsB~~,MAAAC,KAAAC,UAAA,CAAA,CAAA,~~GAgBNC~~,EAAuB,SAClCC,GAEA,IAAAC,EAA0BC,~~EAAsB~~,~~IAAGC~~,EAAAC,~~EAAAH~~,EAAA,~~GAA5CI~~,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAChBI,EAAWC,EAAOH,GACxBE,EAASE,QAAUJ,EAEnB,IAAMK,EAAOC,GAAQ,WAAA,~~OAAMX~~,QAAAA,EAAe,KAAI,CAACA,~~IACzCY~~,EAAMF,EAAKG,KAAI,~~SAAAC~~,GAAU,OAAIA,~~EAAWnC~~,IAAI,~~IAAEoC~~,KAAK,KA0CzD,OAxCAC,GAAU,WACR,IAAMC,~~EAAUP~~,~~EAAKQ~~,QAAO,~~SAAAJ~~,GAAU,QAAMA,~~EAAWnC~~,~~QAAQ4B~~,EAASE,YACxE,~~GAAKQ~~,EAAQE,OAAb,CAEA,IAAIC,GAAW,EAETC,EAAY,~~SAAC1C~~,~~EAAc2C~~,GAA0B,~~OACzDhB~~,GAAS,~~SAAArB~~,GAAI,OAAUA,EAAAA,EAAAA,CAAAA,EAAAA,~~WAAON~~,~~EAAI4C~~,EAAAA,EAAA,CAAA,~~EAAQtC~~,~~EAAKN~~,~~IAAU2C~~,IAAK,GAAM,EA0BtE,~~OAvBAhB~~,GAAS,~~SAAArB~~,GACP,~~IAAMuC~~,~~EAAevC~~,EAAAA,CAAAA,EAAAA,GAMrB,~~OAJAgC~~,EAAQQ,SAAQ,~~SAAAX~~,GAAc,~~IAAAY~~,EAC5BF,~~EAAQV~~,~~EAAWnC~~,MAAgC,~~QAAxB6C~~,EAAAA,~~EAAQV~~,~~EAAWnC~~,aAAK,~~IAAA+C~~,EAAAA,EAAI,CAAA,CACzD,IAEOF,CACT,IAEAP,EAAQQ,SAAQ,~~SAAAX~~,~~GAETa~~,~~EAAeb~~,~~EAAWnC~~,MAM/BN,~~EAAcyC~~,~~EAAWnC~~,~~KAAM~~,~~UAAUiD,~~MAAK,~~SAAAC~~,~~GACxCT~~,~~GAAYS~~,~~GAAKR~~,~~EAAUP~~,~~EAAWnC~~,KAAM,~~CAAEkD~~,IAAAA,GACpD,~~IAPER~~,~~EAAUP~~,~~EAAWnC~~,KAAM,~~CAAEkD~~,~~IAAKf~~,~~EAAWhC~~,KAQjD,IAEO,~~WACLsC~~,GAAW,EAhCwB,CAoCvC,GAAG,~~CAACR~~,IAEGF,~~EAAKoB~~,QAAgC,SAACC,~~EAAKjB~~,GAChD,~~IAAMkB~~,~~EAAO3B~~,~~EAAMS~~,~~EAAWnC~~,MAC9B,OAAKqD,SAAAA,~~EAAMH~~,~~KAEXE~~,~~EAAIE~~,KAAK,CACPC,~~GAAIpB~~,~~EAAWhC~~,~~IACfH~~,~~KAAMmC~~,~~EAAWnC~~,~~KACjBkD~~,~~IAAKG~~,~~EAAKH~~,~~IACVM~~,KAAMC,~~EAAkBtB~~,~~GACxBuB~~,~~KAAMvB~~,~~EAAWuB~~,~~OAEZN~~,GATgBA,CAUxB,GAAE,GACL"}
1	+ {"version":3,"file":"useStoredAttachments.js","sources":["../../../src/components/AttachmentPreview/useStoredAttachments.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport type { AttachmentPreviewItem } from './AttachmentPreview.types';\nimport { getAttachmentKind } from './getAttachmentKind';\nimport { getIsStoredKey, type StoredAttachment } from './useStoredAttachment';\n\nimport { getSignedLink, peekSignedLink } from '~/utils/signedLinkCache';\n\ntype SignedLinks = Record<string, { src?: string }>;\n\nconst signStoredLink = async (name: string) => {\n try {\n return await getSignedLink(name, 'inline');\n } catch (error) {\n console.error(`Failed to sign attachment \"${name}\"`, error);\n\n return '';\n }\n};\n\nconst seedLinks = (attachments: StoredAttachment[]): SignedLinks =>\n attachments.reduce<SignedLinks>((acc, attachment) => {\n const src = getIsStoredKey(attachment.name)\n ? peekSignedLink(attachment.name, 'inline')\n : attachment.url;\n if (src) acc[attachment.name] = { src };\n\n return acc;\n }, {});\n\n/*\n Signs a whole list of stored attachments — the hook-per-file `useStoredAttachment`\n * can't cover a list whose length changes between renders.\n */\nexport const useStoredAttachments = (\n attachments?: StoredAttachment[] \| null\n): AttachmentPreviewItem[] => {\n const [links, setLinks] = useState<SignedLinks>(() => seedLinks(attachments ?? []));\n const linksRef = useRef(links);\n linksRef.current = links;\n\n const list = useMemo(() => attachments ?? [], [attachments]);\n const key = list.map(attachment => attachment.name).join('\|');\n\n useEffect(() => {\n const pending = list.filter(attachment => !(attachment.name in linksRef.current));\n if (!pending.length) return undefined;\n\n let isActive = true;\n\n const applyLink = (name: string, patch: SignedLinks[string]) =>\n setLinks(prev => ({ ...prev, [name]: { ...prev[name], ...patch } }));\n\n // Claim the names up front so a re-render mid-flight does not ask again.\n setLinks(prev => {\n const claimed = { ...prev };\n\n pending.forEach(attachment => {\n claimed[attachment.name] = claimed[attachment.name] ?? {};\n });\n\n return claimed;\n });\n\n pending.forEach(attachment => {\n // A linked attachment already carries a url that works; only a key of ours needs signing.\n if (!getIsStoredKey(attachment.name)) {\n applyLink(attachment.name, { src: attachment.url });\n\n return;\n }\n\n signStoredLink(attachment.name).then(src => {\n if (isActive && src) applyLink(attachment.name, { src });\n });\n });\n\n return () => {\n isActive = false;\n };\n // `key` tracks the list contents; `list` itself is a fresh array on every render.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [key]);\n\n return list.reduce<AttachmentPreviewItem[]>((acc, attachment) => {\n const link = links[attachment.name];\n if (!link?.src) return acc;\n\n acc.push({\n id: attachment.url,\n name: attachment.name,\n src: link.src,\n kind: getAttachmentKind(attachment),\n size: attachment.size,\n });\n return acc;\n }, []);\n};\n"],"names":["signStoredLink","_ref","_asyncToGenerator","_regeneratorRuntime","mark","name","wrap","_context","prev","next","getSignedLink","abrupt","sent","t0","console","error","stop","_callee","_x","apply","this","arguments","useStoredAttachments","attachments","_useState","useState","reduce","acc","attachment","src","getIsStoredKey","peekSignedLink","url","seedLinks","_useState2","_slicedToArray","links","setLinks","linksRef","useRef","current","list","useMemo","key","map","join","useEffect","pending","filter","length","isActive","applyLink","patch","_objectSpread","claimed","forEach","_claimed$attachment$n","then","link","push","id","kind","getAttachmentKind","size"],"mappings":"0hCAUA,IAAMA,EAAc,WAAA,IAAAC,EAAAC,EAAAC,EAAAC,MAAG,WAAOC,GAAY,OAAAF,EAAAG,MAAA,SAAAC,GAAA,OAAA,OAAAA,EAAAC,KAAAD,EAAAE,MAAA,KAAA,EAAA,OAAAF,EAAAC,KAAA,EAAAD,EAAAE,KAAA,EAEzBC,EAAcL,EAAM,UAAS,KAAA,EAAA,OAAAE,EAAAI,OAAA,SAAAJ,EAAAK,MAAA,KAAA,EAEkB,OAFlBL,EAAAC,KAAA,EAAAD,EAAAM,GAAAN,EAAA,MAAA,GAE1CO,QAAQC,MAAoCV,8BAAAA,OAAAA,EAAe,KAAAE,EAAAM,IAACN,EAAAI,OAAA,SAErD,IAAE,KAAA,GAAA,IAAA,MAAA,OAAAJ,EAAAS,OAAA,GAAAC,EAAA,KAAA,CAAA,CAAA,EAAA,IAEZ,KAAA,OAAA,SARmBC,GAAA,OAAAjB,EAAAkB,MAAAC,KAAAC,UAAA,CAAA,CAAA,GAwBPC,EAAuB,SAClCC,GAEA,IAAAC,EAA0BC,GAAsB,WAAA,OAjBhC,SAACF,GAA+B,OAChDA,EAAYG,QAAoB,SAACC,EAAKC,GACpC,IAAMC,EAAMC,EAAeF,EAAWvB,MAClC0B,EAAeH,EAAWvB,KAAM,UAChCuB,EAAWI,IAGf,OAFIH,IAAKF,EAAIC,EAAWvB,MAAQ,CAAEwB,IAAAA,IAE3BF,CACR,GAAE,CAAE,EAAC,CASgDM,CAAUV,QAAAA,EAAe,OAAIW,EAAAC,EAAAX,EAAA,GAA5EY,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAChBI,EAAWC,EAAOH,GACxBE,EAASE,QAAUJ,EAEnB,IAAMK,EAAOC,GAAQ,WAAA,OAAMnB,QAAAA,EAAe,KAAI,CAACA,IACzCoB,EAAMF,EAAKG,KAAI,SAAAhB,GAAU,OAAIA,EAAWvB,IAAI,IAAEwC,KAAK,KA0CzD,OAxCAC,GAAU,WACR,IAAMC,EAAUN,EAAKO,QAAO,SAAApB,GAAU,QAAMA,EAAWvB,QAAQiC,EAASE,YACxE,GAAKO,EAAQE,OAAb,CAEA,IAAIC,GAAW,EAETC,EAAY,SAAC9C,EAAc+C,GAA0B,OACzDf,GAAS,SAAA7B,GAAI,OAAUA,EAAAA,EAAAA,CAAAA,EAAAA,WAAOH,EAAIgD,EAAAA,EAAA,CAAA,EAAQ7C,EAAKH,IAAU+C,IAAK,GAAM,EA0BtE,OAvBAf,GAAS,SAAA7B,GACP,IAAM8C,EAAe9C,EAAAA,CAAAA,EAAAA,GAMrB,OAJAuC,EAAQQ,SAAQ,SAAA3B,GAAc,IAAA4B,EAC5BF,EAAQ1B,EAAWvB,MAAgC,QAAxBiD,EAAAA,EAAQ1B,EAAWvB,aAAK,IAAAmD,EAAAA,EAAI,CAAA,CACzD,IAEOF,CACT,IAEAP,EAAQQ,SAAQ,SAAA3B,GAETE,EAAeF,EAAWvB,MAM/BL,EAAe4B,EAAWvB,MAAMoD,MAAK,SAAA5B,GAC/BqB,GAAYrB,GAAKsB,EAAUvB,EAAWvB,KAAM,CAAEwB,IAAAA,GACpD,IAPEsB,EAAUvB,EAAWvB,KAAM,CAAEwB,IAAKD,EAAWI,KAQjD,IAEO,WACLkB,GAAW,EAhCwB,CAoCvC,GAAG,CAACP,IAEGF,EAAKf,QAAgC,SAACC,EAAKC,GAChD,IAAM8B,EAAOtB,EAAMR,EAAWvB,MAC9B,OAAKqD,SAAAA,EAAM7B,KAEXF,EAAIgC,KAAK,CACPC,GAAIhC,EAAWI,IACf3B,KAAMuB,EAAWvB,KACjBwB,IAAK6B,EAAK7B,IACVgC,KAAMC,EAAkBlC,GACxBmC,KAAMnC,EAAWmC,OAEZpC,GATgBA,CAUxB,GAAE,GACL"}

package/components/BICOffsetPickerDialog/components/Map/Map.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"names":[],"mappings":"AAUA,OAAO,8BAA8B,CAAC;~~AA2CtC~~,iBAAS,QAAQ,CAAC,EAChB,WAAkB,EAClB,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,qBAAkE,EAClE,cAAmD,EACnD,cAAgD,GACjD;;;;;;;;CAAA,+BAmOA"}
1	+ {"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"names":[],"mappings":"AAUA,OAAO,8BAA8B,CAAC;AAyCtC,iBAAS,QAAQ,CAAC,EAChB,WAAkB,EAClB,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,qBAAkE,EAClE,cAAmD,EACnD,cAAgD,GACjD;;;;;;;;CAAA,+BAmOA"}

package/components/BICOffsetPickerDialog/components/Map/Map.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"@babel/runtime/helpers/slicedToArray";import{memo as r,useRef as t,useState as o,useMemo as n,useEffect as i,createElement as u}from"react";import a from"prop-types";import{get as l}from"lodash";import c from"./Map.css.js";import{mapbox as s}from"../../../../utils/index.js";import{createAdaptiveRoot as d}from"../../../../utils/createAdaptiveRoot.js";import"../../../../config/mapboxGl/index.js";import{IS_MAPBOX_ENABLED as p}from"../../../../config/mapbox/index.js";import"mapbox-gl/dist/mapbox-gl.css";import{jsx as f}from"react/jsx-runtime";import m from"mapbox-gl";var v=s.isValidCoordinates,y=[29.749907,-95.358421],g="wells-highlight",h={type:"FeatureCollection",features:[]},w=function(r){var t=e(r,2),o=t[0];return[t[1],o]};function b(r){var a=r.subjectWell,s=void 0===a?null:a,b=r.wells,j=r.offsetWells,C=void 0===j?null:j,M=r.radius,D=r.subjectWellMarkerSize,F=void 0===D?x:D,P=r.wellMarkerSize,L=void 0===P?S:P,W=r.coordsDataPath,k=void 0===W?"settings.top_hole.coordinates":W,z=t(null),B=t(null),I=t(null),R=t(null),T=t(null),q=t(null),N=t(),O=o(!1),A=e(O,2),E=A[0],G=A[1],H=n((function(){return s&&l(s,k)}),[s,k]);i((function(){if(p){B.current=new m.Map({container:z.current,style:"mapbox://styles/mapbox/dark-v9",center:w(y),zoom:1,attributionControl:!1,scrollZoom:!1}),B.current.addControl(new m.NavigationControl({showCompass:!1}),"bottom-right"),B.current.on("load",(function(){B.current.addSource("radius-circle",{type:"geojson",data:h}),B.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),B.current.addSource("wells",{type:"geojson",data:h}),B.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":["get","opacity"]}}),B.current.addSource(g,{type:"geojson",data:h}),B.current.addLayer({id:g,type:"circle",source:g,paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":.2}}),G(!0)}));var e=B.current;return function(){var r;null===(r=T.current)||void 0===r||r.unmount(),T.current=null,q.current=null,e.remove(),B.current=null,I.current=null}}}),[]),i((function(){if(B.current&&E)if(H){var r=function(r,t){for(var o=e(r,2),n=o[0],i=o[1],u=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,a=[],l=t/(111320*Math.cos(n*Math.PI/180)),c=t/110574,s=0;s<=u;s+=1){var d=s/u*(2*Math.PI);a.push([i+l*Math.cos(d),n+c*Math.sin(d)])}return a}(H,1609.34*M);B.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[r]}})}else B.current.getSource("radius-circle").setData(h)}),[M,H,E]);return i((function(){var e;if(B.current&&E){var r=N.current;N.current=b,null===(e=R.current)||void 0===e||e.remove(),B.current.getSource(g).setData(h);var t=C.map((function(e){return e.id})),o=[],n={},i=new m.LngLatBounds;b.forEach((function(e){var r=l(e,k);if(r&&v(r)){var u=s&&s.id===e.id,a=t.includes(e.id),c=u?F:L,d=u||a?1:.3;n[e.id]=e,i.extend(w(r)),o.push({type:"Feature",geometry:{type:"Point",coordinates:w(r)},properties:{wellId:e.id,radius:c,opacity:d}})}})),B.current.getSource("wells").setData({type:"FeatureCollection",features:o}),I.current=o.length?i:null;var a=B.current,c=null,p=function(e){a.getCanvas().style.cursor="pointer";var r=n[e.features[0].properties.wellId];if(r&&r.id!==c){c=r.id;var t=l(r,k);q.current||(q.current=document.createElement("div"),T.current=d(q.current)),T.current.render(u((function(e){var r=e.well;return f("div",{style:{color:"#fff",background:"##414141"},children:f("span",{style:{fontSize:"11px",lineHeight:"16px"},children:l(r,"name")})})}),{well:r})),R.current||(R.current=new m.Popup({closeButton:!1,maxWidth:"none"})),R.current.setLngLat(w(t)).setDOMContent(q.current).addTo(a),function(e,r){B.current.getSource(g).setData({type:"Feature",geometry:{type:"Point",coordinates:w(e)},properties:{radius:3*r}})}(t,e.features[0].properties.radius)}},y=function(){var e;c=null,a.getCanvas().style.cursor="",a.getSource(g).setData(h),null===(e=R.current)||void 0===e||e.remove()},x=function(e){null!=e&&e.point&&a.queryRenderedFeatures(e.point,{layers:[g]}).length||y()};return a.on("mousemove","wells",p),a.on("mouseleave","wells",x),a.on("mouseleave",g,y),setTimeout((function(){B.current&&I.current&&b!==r&&B.current.fitBounds(I.current)}),500),function(){a.off("mousemove","wells",p),a.off("mouseleave","wells",x),a.off("mouseleave",g,y)}}}),[s,b,C,E]),f("div",{className:c.map,children:f("div",{className:c.mapMain,ref:z})})}b.propTypes={subjectWell:a.shape({id:a.number,formation:a.string}),wells:a.arrayOf(a.shape({})).isRequired,offsetWells:a.arrayOf(a.shape({})),radius:a.number.isRequired,subjectWellMarkerSize:a.number,wellMarkerSize:a.number,coordsDataPath:a.string};var x=8,S=5,j=r(b);export{j as default};
+import e from"@babel/runtime/helpers/slicedToArray";import{memo as r,useRef as t,useState as o,useMemo as n,useEffect as i,createElement as u}from"react";import a from"prop-types";import{get as l}from"lodash";import c from"./Map.css.js";import{mapbox as s}from"../../../../utils/index.js";import{createAdaptiveRoot as d}from"../../../../utils/createAdaptiveRoot.js";import"../../../../config/mapboxGl/index.js";import{IS_MAPBOX_ENABLED as p}from"../../../../config/mapbox/index.js";import"mapbox-gl/dist/mapbox-gl.css";import{jsx as f}from"react/jsx-runtime";import m from"mapbox-gl";var v=[29.749907,-95.358421],y="wells-highlight",g={type:"FeatureCollection",features:[]},h=function(r){var t=e(r,2),o=t[0];return[t[1],o]};function w(r){var a=r.subjectWell,w=void 0===a?null:a,S=r.wells,j=r.offsetWells,C=void 0===j?null:j,M=r.radius,D=r.subjectWellMarkerSize,F=void 0===D?b:D,P=r.wellMarkerSize,L=void 0===P?x:P,W=r.coordsDataPath,k=void 0===W?"settings.top_hole.coordinates":W,z=t(null),B=t(null),I=t(null),R=t(null),T=t(null),q=t(null),N=t(),O=o(!1),A=e(O,2),E=A[0],G=A[1],H=n((function(){return w&&l(w,k)}),[w,k]);i((function(){if(p){B.current=new m.Map({container:z.current,style:"mapbox://styles/mapbox/dark-v9",center:h(v),zoom:1,attributionControl:!1,scrollZoom:!1}),B.current.addControl(new m.NavigationControl({showCompass:!1}),"bottom-right"),B.current.on("load",(function(){B.current.addSource("radius-circle",{type:"geojson",data:g}),B.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),B.current.addSource("wells",{type:"geojson",data:g}),B.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":["get","opacity"]}}),B.current.addSource(y,{type:"geojson",data:g}),B.current.addLayer({id:y,type:"circle",source:y,paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":.2}}),G(!0)}));var e=B.current;return function(){var r;null===(r=T.current)||void 0===r||r.unmount(),T.current=null,q.current=null,e.remove(),B.current=null,I.current=null}}}),[]),i((function(){if(B.current&&E)if(H){var r=function(r,t){for(var o=e(r,2),n=o[0],i=o[1],u=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,a=[],l=t/(111320*Math.cos(n*Math.PI/180)),c=t/110574,s=0;s<=u;s+=1){var d=s/u*(2*Math.PI);a.push([i+l*Math.cos(d),n+c*Math.sin(d)])}return a}(H,1609.34*M);B.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[r]}})}else B.current.getSource("radius-circle").setData(g)}),[M,H,E]);return i((function(){var e;if(B.current&&E){var r=N.current;N.current=S,null===(e=R.current)||void 0===e||e.remove(),B.current.getSource(y).setData(g);var t=C.map((function(e){return e.id})),o=[],n={},i=new m.LngLatBounds;S.forEach((function(e){var r=l(e,k);if(r&&s.isValidCoordinates(r)){var u=w&&w.id===e.id,a=t.includes(e.id),c=u?F:L,d=u||a?1:.3;n[e.id]=e,i.extend(h(r)),o.push({type:"Feature",geometry:{type:"Point",coordinates:h(r)},properties:{wellId:e.id,radius:c,opacity:d}})}})),B.current.getSource("wells").setData({type:"FeatureCollection",features:o}),I.current=o.length?i:null;var a=B.current,c=null,p=function(e){a.getCanvas().style.cursor="pointer";var r=n[e.features[0].properties.wellId];if(r&&r.id!==c){c=r.id;var t=l(r,k);q.current||(q.current=document.createElement("div"),T.current=d(q.current)),T.current.render(u((function(e){var r=e.well;return f("div",{style:{color:"#fff",background:"##414141"},children:f("span",{style:{fontSize:"11px",lineHeight:"16px"},children:l(r,"name")})})}),{well:r})),R.current||(R.current=new m.Popup({closeButton:!1,maxWidth:"none"})),R.current.setLngLat(h(t)).setDOMContent(q.current).addTo(a),function(e,r){B.current.getSource(y).setData({type:"Feature",geometry:{type:"Point",coordinates:h(e)},properties:{radius:3*r}})}(t,e.features[0].properties.radius)}},v=function(){var e;c=null,a.getCanvas().style.cursor="",a.getSource(y).setData(g),null===(e=R.current)||void 0===e||e.remove()},b=function(e){null!=e&&e.point&&a.queryRenderedFeatures(e.point,{layers:[y]}).length||v()};return a.on("mousemove","wells",p),a.on("mouseleave","wells",b),a.on("mouseleave",y,v),setTimeout((function(){B.current&&I.current&&S!==r&&B.current.fitBounds(I.current)}),500),function(){a.off("mousemove","wells",p),a.off("mouseleave","wells",b),a.off("mouseleave",y,v)}}}),[w,S,C,E]),f("div",{className:c.map,children:f("div",{className:c.mapMain,ref:z})})}w.propTypes={subjectWell:a.shape({id:a.number,formation:a.string}),wells:a.arrayOf(a.shape({})).isRequired,offsetWells:a.arrayOf(a.shape({})),radius:a.number.isRequired,subjectWellMarkerSize:a.number,wellMarkerSize:a.number,coordsDataPath:a.string};var b=8,x=5,S=r(w);export{S as default};
 //# sourceMappingURL=Map.js.map

package/components/BICOffsetPickerDialog/components/Map/Map.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Map.js","sources":["../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { get } from 'lodash';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport { createAdaptiveRoot } from '~/utils/createAdaptiveRoot';\nimport mapboxgl from '~/config/mapboxGl';\nimport { IS_MAPBOX_ENABLED } from '~/config/mapbox';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 8;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#FFC107';\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst HIGHLIGHT_ID = 'wells-highlight';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\nconst toolTip =\n () =>\n // eslint-disable-next-line react/prop-types\n ({ well }) => {\n return (\n <div style={{ color: '#fff', background: '##414141' }}>\n <span style={{ fontSize: '11px', lineHeight: '16px' }}>{get(well, 'name')}</span>\n </div>\n );\n };\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n subjectWell = null,\n wells,\n offsetWells = null,\n radius,\n subjectWellMarkerSize = DEFAULT_WELLS_MAP_SUBJECT_WELL_MARKER_SIZE,\n wellMarkerSize = DEFAULT_WELLS_MAP_WELL_MARKER_SIZE,\n coordsDataPath = 'settings.top_hole.coordinates',\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const tooltipRootRef = useRef(null);\n const tooltipContainerRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Initialize map\n useEffect(() => {\n if (!IS_MAPBOX_ENABLED) return undefined;\n\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack),\n // and the hover highlight layer last so it renders on top of the markers\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': OFFSET_WELL_COLOR,\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n mapRef.current.addSource(HIGHLIGHT_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: HIGHLIGHT_ID,\n type: 'circle',\n source: HIGHLIGHT_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': OFFSET_WELL_COLOR,\n 'circle-opacity': 0.2,\n },\n });\n\n setIsMapReady(true);\n });\n\n const map = mapRef.current;\n return () => {\n tooltipRootRef.current?.unmount();\n tooltipRootRef.current = null;\n tooltipContainerRef.current = null;\n\n map.remove();\n mapRef.current = null;\n markersBoundsRef.current = null;\n };\n }, []);\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current \|\| !isMapReady) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n }, [radius, subjectWellCoords, isMapReady]);\n\n const handleMouseOver = (coords, r) => {\n // Highlight the hovered well with a bigger translucent circle\n mapRef.current.getSource(HIGHLIGHT_ID).setData({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { radius: r * 3 },\n });\n };\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current \|\| !isMapReady) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n popupRef.current?.remove();\n mapRef.current.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n\n const offsetWellIds = offsetWells.map(well => well.id);\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n wells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n const opacity = isWellSubject \|\| isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { wellId: well.id, radius: r, opacity },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well \|\| well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n const coords = get(well, coordsDataPath);\n\n // Tooltip\n if (!tooltipContainerRef.current) {\n tooltipContainerRef.current = document.createElement('div');\n tooltipRootRef.current = createAdaptiveRoot(tooltipContainerRef.current);\n }\n tooltipRootRef.current.render(createElement(toolTip(), { well }));\n\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current\n .setLngLat(toLngLat(coords))\n .setDOMContent(tooltipContainerRef.current)\n .addTo(map);\n\n // Highlight\n handleMouseOver(coords, e.features[0].properties.radius);\n };\n\n // NOTE: was the mouseout handler of the Leaflet highlight marker\n const handleHighlightMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n map.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n popupRef.current?.remove();\n };\n\n // NOTE: If the pointer exits before the highlight renders under it, the highlight\n // layer never emits mouseleave — clear here unless the cursor is inside the highlight\n const handleWellsMouseLeave = e => {\n if (e?.point && map.queryRenderedFeatures(e.point, { layers: [HIGHLIGHT_ID] }).length) {\n return;\n }\n handleHighlightMouseLeave();\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleWellsMouseLeave);\n map.on('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n\n setTimeout(() => {\n if (mapRef.current && markersBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleWellsMouseLeave);\n map.off('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n };\n }, [subjectWell, wells, offsetWells, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n </div>\n );\n}\n\nWellsMap.propTypes = {\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n subjectWellMarkerSize: PropTypes.number,\n wellMarkerSize: PropTypes.number,\n coordsDataPath: PropTypes.string,\n};\n\nconst DEFAULT_WELLS_MAP_SUBJECT_WELL_MARKER_SIZE = DEFAULT_SUBJECT_WELL_MARKER_SIZE;\nconst DEFAULT_WELLS_MAP_WELL_MARKER_SIZE = DEFAULT_WELL_MARKER_SIZE;\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","HIGHLIGHT_ID","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref6","_ref6$subjectWell","subjectWell","wells","_ref6$offsetWells","offsetWells","radius","_ref6$subjectWellMark","subjectWellMarkerSize","DEFAULT_WELLS_MAP_SUBJECT_WELL_MARKER_SIZE","_ref6$wellMarkerSize","wellMarkerSize","DEFAULT_WELLS_MAP_WELL_MARKER_SIZE","_ref6$coordsDataPath","coordsDataPath","mapContainerRef","useRef","mapRef","markersBoundsRef","popupRef","tooltipRootRef","tooltipContainerRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","subjectWellCoords","useMemo","get","useEffect","IS_MAPBOX_ENABLED","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","id","source","paint","map","_tooltipRootRef$curre","unmount","remove","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","getSource","setData","geometry","coordinates","_popupRef$current","prevWells","offsetWellIds","well","wellsById","bounds","LngLatBounds","forEach","coords","isWellSubject","isWellOffset","includes","r","opacity","extend","properties","wellId","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","document","createElement","createAdaptiveRoot","render","_ref5","_jsx","color","background","children","fontSize","lineHeight","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseOver","handleHighlightMouseLeave","_popupRef$current2","handleWellsMouseLeave","point","queryRenderedFeatures","layers","setTimeout","fitBounds","off","className","styles","mapMain","ref","propTypes","PropTypes","shape","number","formation","string","arrayOf","isRequired","memo"],"mappings":"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"}
1	+ {"version":3,"file":"Map.js","sources":["../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { get } from 'lodash';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport { createAdaptiveRoot } from '~/utils/createAdaptiveRoot';\nimport mapboxgl from '~/config/mapboxGl';\nimport { IS_MAPBOX_ENABLED } from '~/config/mapbox';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 8;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#FFC107';\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst HIGHLIGHT_ID = 'wells-highlight';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\nconst toolTip =\n () =>\n // eslint-disable-next-line react/prop-types\n ({ well }) => {\n return (\n <div style={{ color: '#fff', background: '##414141' }}>\n <span style={{ fontSize: '11px', lineHeight: '16px' }}>{get(well, 'name')}</span>\n </div>\n );\n };\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n subjectWell = null,\n wells,\n offsetWells = null,\n radius,\n subjectWellMarkerSize = DEFAULT_WELLS_MAP_SUBJECT_WELL_MARKER_SIZE,\n wellMarkerSize = DEFAULT_WELLS_MAP_WELL_MARKER_SIZE,\n coordsDataPath = 'settings.top_hole.coordinates',\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const tooltipRootRef = useRef(null);\n const tooltipContainerRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Initialize map\n useEffect(() => {\n if (!IS_MAPBOX_ENABLED) return undefined;\n\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack),\n // and the hover highlight layer last so it renders on top of the markers\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': OFFSET_WELL_COLOR,\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n mapRef.current.addSource(HIGHLIGHT_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: HIGHLIGHT_ID,\n type: 'circle',\n source: HIGHLIGHT_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': OFFSET_WELL_COLOR,\n 'circle-opacity': 0.2,\n },\n });\n\n setIsMapReady(true);\n });\n\n const map = mapRef.current;\n return () => {\n tooltipRootRef.current?.unmount();\n tooltipRootRef.current = null;\n tooltipContainerRef.current = null;\n\n map.remove();\n mapRef.current = null;\n markersBoundsRef.current = null;\n };\n }, []);\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current \|\| !isMapReady) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n }, [radius, subjectWellCoords, isMapReady]);\n\n const handleMouseOver = (coords, r) => {\n // Highlight the hovered well with a bigger translucent circle\n mapRef.current.getSource(HIGHLIGHT_ID).setData({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { radius: r * 3 },\n });\n };\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current \|\| !isMapReady) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n popupRef.current?.remove();\n mapRef.current.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n\n const offsetWellIds = offsetWells.map(well => well.id);\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n wells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && mapbox.isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n const opacity = isWellSubject \|\| isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { wellId: well.id, radius: r, opacity },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well \|\| well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n const coords = get(well, coordsDataPath);\n\n // Tooltip\n if (!tooltipContainerRef.current) {\n tooltipContainerRef.current = document.createElement('div');\n tooltipRootRef.current = createAdaptiveRoot(tooltipContainerRef.current);\n }\n tooltipRootRef.current.render(createElement(toolTip(), { well }));\n\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current\n .setLngLat(toLngLat(coords))\n .setDOMContent(tooltipContainerRef.current)\n .addTo(map);\n\n // Highlight\n handleMouseOver(coords, e.features[0].properties.radius);\n };\n\n // NOTE: was the mouseout handler of the Leaflet highlight marker\n const handleHighlightMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n map.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n popupRef.current?.remove();\n };\n\n // NOTE: If the pointer exits before the highlight renders under it, the highlight\n // layer never emits mouseleave — clear here unless the cursor is inside the highlight\n const handleWellsMouseLeave = e => {\n if (e?.point && map.queryRenderedFeatures(e.point, { layers: [HIGHLIGHT_ID] }).length) {\n return;\n }\n handleHighlightMouseLeave();\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleWellsMouseLeave);\n map.on('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n\n setTimeout(() => {\n if (mapRef.current && markersBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleWellsMouseLeave);\n map.off('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n };\n }, [subjectWell, wells, offsetWells, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n </div>\n );\n}\n\nWellsMap.propTypes = {\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n subjectWellMarkerSize: PropTypes.number,\n wellMarkerSize: PropTypes.number,\n coordsDataPath: PropTypes.string,\n};\n\nconst DEFAULT_WELLS_MAP_SUBJECT_WELL_MARKER_SIZE = DEFAULT_SUBJECT_WELL_MARKER_SIZE;\nconst DEFAULT_WELLS_MAP_WELL_MARKER_SIZE = DEFAULT_WELL_MARKER_SIZE;\n\nexport default memo(WellsMap);\n"],"names":["DEFAULT_COORDS","HIGHLIGHT_ID","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref6","_ref6$subjectWell","subjectWell","wells","_ref6$offsetWells","offsetWells","radius","_ref6$subjectWellMark","subjectWellMarkerSize","DEFAULT_WELLS_MAP_SUBJECT_WELL_MARKER_SIZE","_ref6$wellMarkerSize","wellMarkerSize","DEFAULT_WELLS_MAP_WELL_MARKER_SIZE","_ref6$coordsDataPath","coordsDataPath","mapContainerRef","useRef","mapRef","markersBoundsRef","popupRef","tooltipRootRef","tooltipContainerRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","subjectWellCoords","useMemo","get","useEffect","IS_MAPBOX_ENABLED","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","id","source","paint","map","_tooltipRootRef$curre","unmount","remove","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","getSource","setData","geometry","coordinates","_popupRef$current","prevWells","offsetWellIds","well","wellsById","bounds","LngLatBounds","forEach","coords","mapbox","isValidCoordinates","isWellSubject","isWellOffset","includes","r","opacity","extend","properties","wellId","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","document","createElement","createAdaptiveRoot","render","_ref5","_jsx","color","background","children","fontSize","lineHeight","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseOver","handleHighlightMouseLeave","_popupRef$current2","handleWellsMouseLeave","point","queryRenderedFeatures","layers","setTimeout","fitBounds","off","className","styles","mapMain","ref","propTypes","PropTypes","shape","number","formation","string","arrayOf","isRequired","memo"],"mappings":"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"}