@deephaven/file-explorer 0.5.1 → 0.5.2-allpackages.16

package/dist/FileList.js

@@ -4,18 +4,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import { ItemList } from '@deephaven/components';
 import { dhPython, vsCode, vsFolder, vsFolderOpened } from '@deephaven/icons';
 import Log from '@deephaven/log';
@@ -23,35 +11,33 @@ import { RangeUtils } from '@deephaven/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isDirectory } from './FileStorage';
+import { isDirectory } from "./FileStorage.js";
 import "./FileList.css";
-import FileUtils, { MIME_TYPE } from './FileUtils';
+import FileUtils, { MIME_TYPE } from "./FileUtils.js";
 var log = Log.module('FileList');
-export var getPathFromItem = function getPathFromItem(file) {
-  return isDirectory(file) ? FileUtils.makePath(file.filename) : FileUtils.getPath(file.filename);
-};
+export var getPathFromItem = file => isDirectory(file) ? FileUtils.makePath(file.filename) : FileUtils.getPath(file.filename);
 export var DEFAULT_ROW_HEIGHT = 26; // How long you need to hover over a directory before it expands
 
 export var DRAG_HOVER_TIMEOUT = 500;
 var ITEM_LIST_CLASS_NAME = 'item-list-scroll-pane';
-export var renderFileListItem = function renderFileListItem(props) {
+export var renderFileListItem = props => {
   var _draggedItems$some;
 
-  var children = props.children,
-      draggedItems = props.draggedItems,
-      isDragInProgress = props.isDragInProgress,
-      isDropTargetValid = props.isDropTargetValid,
-      isSelected = props.isSelected,
-      item = props.item,
-      itemIndex = props.itemIndex,
-      dropTargetItem = props.dropTargetItem,
-      onDragStart = props.onDragStart,
-      onDragOver = props.onDragOver,
-      onDragEnd = props.onDragEnd,
-      onDrop = props.onDrop;
-  var isDragged = (_draggedItems$some = draggedItems === null || draggedItems === void 0 ? void 0 : draggedItems.some(function (draggedItem) {
-    return draggedItem.id === item.id;
-  })) !== null && _draggedItems$some !== void 0 ? _draggedItems$some : false;
+  var {
+    children,
+    draggedItems,
+    isDragInProgress,
+    isDropTargetValid,
+    isSelected,
+    item,
+    itemIndex,
+    dropTargetItem,
+    onDragStart,
+    onDragOver,
+    onDragEnd,
+    onDrop
+  } = props;
+  var isDragged = (_draggedItems$some = draggedItems === null || draggedItems === void 0 ? void 0 : draggedItems.some(draggedItem => draggedItem.id === item.id)) !== null && _draggedItems$some !== void 0 ? _draggedItems$some : false;
   var itemPath = getPathFromItem(item);
   var dropTargetPath = isDragInProgress && dropTargetItem ? getPathFromItem(dropTargetItem) : null;
   var isExactDropTarget = isDragInProgress && isDropTargetValid && isDirectory(item) && dropTargetPath === itemPath;
@@ -59,16 +45,13 @@ export var renderFileListItem = function renderFileListItem(props) {
   var isInvalidDropTarget = isDragInProgress && !isDropTargetValid && dropTargetPath === itemPath;
   var icon = getItemIcon(item);
   var depth = FileUtils.getDepth(item.filename);
-  var depthLines = Array(depth).fill(null).map(function (value, index) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React.createElement("span", {
-        className: "file-list-depth-line",
-        key: index
-      })
-    );
-  });
+  var depthLines = Array(depth).fill(null).map((value, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  React.createElement("span", {
+    className: "file-list-depth-line",
+    key: index
+  }));
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('d-flex w-100 align-items-center', 'file-list-item', {
       'is-dragged': isDragged,
@@ -87,9 +70,7 @@ export var renderFileListItem = function renderFileListItem(props) {
       };
 
       return onDragStart;
-    }(function (e) {
-      return onDragStart(itemIndex, e);
-    }),
+    }(e => onDragStart(itemIndex, e)),
     onDragOver: function (_onDragOver) {
       function onDragOver(_x2) {
         return _onDragOver.apply(this, arguments);
@@ -100,9 +81,7 @@ export var renderFileListItem = function renderFileListItem(props) {
       };
 
       return onDragOver;
-    }(function (e) {
-      return onDragOver(itemIndex, e);
-    }),
+    }(e => onDragOver(itemIndex, e)),
     onDragEnd: function (_onDragEnd) {
       function onDragEnd(_x3) {
         return _onDragEnd.apply(this, arguments);
@@ -113,9 +92,7 @@ export var renderFileListItem = function renderFileListItem(props) {
       };
 
       return onDragEnd;
-    }(function (e) {
-      return onDragEnd(itemIndex, e);
-    }),
+    }(e => onDragEnd(itemIndex, e)),
     onDrop: function (_onDrop) {
       function onDrop(_x4) {
         return _onDrop.apply(this, arguments);
@@ -126,9 +103,7 @@ export var renderFileListItem = function renderFileListItem(props) {
       };
 
       return onDrop;
-    }(function (e) {
-      return onDrop(itemIndex, e);
-    }),
+    }(e => onDrop(itemIndex, e)),
     draggable: true,
     role: "presentation"
   }, depthLines, ' ', /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -169,93 +144,58 @@ export function getMoveOperation(draggedItems, targetItem) {
 
   var targetPath = getPathFromItem(targetItem);
 
-  if (draggedItems.some(function (_ref) {
-    var filename = _ref.filename;
+  if (draggedItems.some((_ref) => {
+    var {
+      filename
+    } = _ref;
     return FileUtils.getPath(filename) === targetPath;
   })) {
     // Cannot drop if target is one of the dragged items is already in the target folder
     throw new Error('File already in the destination folder');
   }
 
-  if (draggedItems.some(function (item) {
-    return isDirectory(item) && targetPath.startsWith(FileUtils.makePath(item.filename));
-  })) {
+  if (draggedItems.some(item => isDirectory(item) && targetPath.startsWith(FileUtils.makePath(item.filename)))) {
     // Cannot drop if target is a child of one of the directories being moved
     throw new Error('Destination folder cannot be a child of a dragged folder');
   }
 
   return {
     files: draggedItems,
-    targetPath: targetPath
+    targetPath
   };
 }
 /**
  * Component that displays and allows interaction with the file system in the provided FileStorageTable.
  */
 
-export var FileList = function FileList(props) {
-  var _props$isMultiSelect = props.isMultiSelect,
-      isMultiSelect = _props$isMultiSelect === void 0 ? false : _props$isMultiSelect,
-      table = props.table,
-      _props$onFocusChange = props.onFocusChange,
-      onFocusChange = _props$onFocusChange === void 0 ? function () {
-    return undefined;
-  } : _props$onFocusChange,
-      onMove = props.onMove,
-      onSelect = props.onSelect,
-      _props$onSelectionCha = props.onSelectionChange,
-      onSelectionChange = _props$onSelectionCha === void 0 ? function () {
-    return undefined;
-  } : _props$onSelectionCha,
-      _props$renderItem = props.renderItem,
-      renderItem = _props$renderItem === void 0 ? renderFileListItem : _props$renderItem,
-      _props$rowHeight = props.rowHeight,
-      rowHeight = _props$rowHeight === void 0 ? DEFAULT_ROW_HEIGHT : _props$rowHeight,
-      _props$overscanCount = props.overscanCount,
-      overscanCount = _props$overscanCount === void 0 ? ItemList.DEFAULT_OVERSCAN : _props$overscanCount;
-
-  var _useState = useState(function () {
-    return {
-      items: [],
-      offset: 0,
-      itemCount: 0
-    };
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      loadedViewport = _useState2[0],
-      setLoadedViewport = _useState2[1];
-
-  var _useState3 = useState({
+export var FileList = props => {
+  var {
+    isMultiSelect = false,
+    table,
+    onFocusChange = () => undefined,
+    onMove,
+    onSelect,
+    onSelectionChange = () => undefined,
+    renderItem = renderFileListItem,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    overscanCount = ItemList.DEFAULT_OVERSCAN
+  } = props;
+  var [loadedViewport, setLoadedViewport] = useState(() => ({
+    items: [],
+    offset: 0,
+    itemCount: 0
+  }));
+  var [viewport, setViewport] = useState({
     top: 0,
     bottom: 0
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      viewport = _useState4[0],
-      setViewport = _useState4[1];
-
-  var _useState5 = useState(),
-      _useState6 = _slicedToArray(_useState5, 2),
-      dropTargetItem = _useState6[0],
-      setDropTargetItem = _useState6[1];
-
-  var _useState7 = useState(),
-      _useState8 = _slicedToArray(_useState7, 2),
-      draggedItems = _useState8[0],
-      setDraggedItems = _useState8[1];
-
-  var _useState9 = useState(),
-      _useState10 = _slicedToArray(_useState9, 2),
-      dragPlaceholder = _useState10[0],
-      setDragPlaceholder = _useState10[1];
-
-  var _useState11 = useState([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      selectedRanges = _useState12[0],
-      setSelectedRanges = _useState12[1];
-
+  });
+  var [dropTargetItem, setDropTargetItem] = useState();
+  var [draggedItems, setDraggedItems] = useState();
+  var [dragPlaceholder, setDragPlaceholder] = useState();
+  var [selectedRanges, setSelectedRanges] = useState([]);
   var itemList = useRef(null);
   var fileList = useRef(null);
-  var getItems = useCallback(function (ranges) {
+  var getItems = useCallback(ranges => {
     if (ranges.length === 0 || !loadedViewport) {
       return [];
     }
@@ -274,7 +214,7 @@ export var FileList = function FileList(props) {
 
     return items;
   }, [loadedViewport]);
-  var getItem = useCallback(function (itemIndex) {
+  var getItem = useCallback(itemIndex => {
     var items = getItems([[itemIndex, itemIndex]]);
 
     if (items.length > 0) {
@@ -285,7 +225,7 @@ export var FileList = function FileList(props) {
    * Get the placeholder text to show when a drag operation is in progress
    */
 
-  var getDragPlaceholderText = useCallback(function () {
+  var getDragPlaceholderText = useCallback(() => {
     var count = RangeUtils.count(selectedRanges);
 
     if (count === 0) {
@@ -308,7 +248,7 @@ export var FileList = function FileList(props) {
    * If an itemIndex is provided, focus that index after the drop.
    */
 
-  var dropItems = useCallback(function (itemIndex) {
+  var dropItems = useCallback(itemIndex => {
     if (!draggedItems || !dropTargetItem) {
       return;
     }
@@ -316,10 +256,10 @@ export var FileList = function FileList(props) {
     log.debug('dropItems', draggedItems, 'to', itemIndex);
 
     try {
-      var _getMoveOperation = getMoveOperation(draggedItems, dropTargetItem),
-          _files = _getMoveOperation.files,
-          targetPath = _getMoveOperation.targetPath;
-
+      var {
+        files: _files,
+        targetPath
+      } = getMoveOperation(draggedItems, dropTargetItem);
       onMove(_files, targetPath);
 
       if (itemIndex != null) {
@@ -332,7 +272,7 @@ export var FileList = function FileList(props) {
       log.error('Unable to complete move', err);
     }
   }, [draggedItems, dropTargetItem, onMove]);
-  var handleSelect = useCallback(function (itemIndex) {
+  var handleSelect = useCallback(itemIndex => {
     var item = loadedViewport.items[itemIndex - loadedViewport.offset];
 
     if (item !== undefined) {
@@ -344,7 +284,7 @@ export var FileList = function FileList(props) {
       }
     }
   }, [loadedViewport, onSelect, table]);
-  var handleItemDragStart = useCallback(function (itemIndex, e) {
+  var handleItemDragStart = useCallback((itemIndex, e) => {
     var _itemList$current2;
 
     log.debug2('handleItemDragStart', itemIndex, selectedRanges);
@@ -366,12 +306,12 @@ export var FileList = function FileList(props) {
     e.dataTransfer.effectAllowed = 'move';
     setDragPlaceholder(newDragPlaceholder);
   }, [getDragPlaceholderText, getItems, selectedRanges]);
-  var handleItemDragOver = useCallback(function (itemIndex, e) {
+  var handleItemDragOver = useCallback((itemIndex, e) => {
     e.preventDefault();
     log.debug2('handleItemDragOver', e);
     setDropTargetItem(getItem(itemIndex));
   }, [getItem]);
-  var handleItemDragEnd = useCallback(function (itemIndex, e) {
+  var handleItemDragEnd = useCallback((itemIndex, e) => {
     log.debug('handleItemDragEnd', itemIndex);
     dragPlaceholder === null || dragPlaceholder === void 0 ? void 0 : dragPlaceholder.remove(); // Drag end is triggered after drop
     // Also drop isn't triggered if drag end is outside of the list
@@ -380,14 +320,14 @@ export var FileList = function FileList(props) {
     setDropTargetItem(undefined);
     setDragPlaceholder(undefined);
   }, [dragPlaceholder]);
-  var handleItemDrop = useCallback(function (itemIndex, e) {
+  var handleItemDrop = useCallback((itemIndex, e) => {
     dropItems(itemIndex);
   }, [dropItems]);
-  var handleItemDragExit = useCallback(function () {
+  var handleItemDragExit = useCallback(() => {
     log.debug2('handleItemDragExit');
     setDropTargetItem(undefined);
   }, []);
-  var handleListDragOver = useCallback(function (e) {
+  var handleListDragOver = useCallback(e => {
     if (e.target instanceof Element && e.target.classList.contains(ITEM_LIST_CLASS_NAME)) {
       // Need to prevent default to enable drop
       // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets
@@ -401,13 +341,13 @@ export var FileList = function FileList(props) {
       });
     }
   }, []);
-  var handleListDrop = useCallback(function (e) {
+  var handleListDrop = useCallback(e => {
     if (e.target instanceof Element && e.target.classList.contains(ITEM_LIST_CLASS_NAME)) {
       log.debug('handleListDrop');
       dropItems();
     }
   }, [dropItems]);
-  var handleSelectionChange = useCallback(function (newSelectedRanges) {
+  var handleSelectionChange = useCallback(newSelectedRanges => {
     log.debug2('handleSelectionChange', newSelectedRanges);
 
     if (newSelectedRanges !== selectedRanges) {
@@ -418,30 +358,27 @@ export var FileList = function FileList(props) {
       onSelectionChange(_selectedItems);
     }
   }, [getItems, onSelectionChange, selectedRanges]);
-  var handleFocusChange = useCallback(function (focusIndex) {
+  var handleFocusChange = useCallback(focusIndex => {
     log.debug2('handleFocusChange', focusIndex);
 
     if (focusIndex != null) {
-      var _getItems = getItems([[focusIndex, focusIndex]]),
-          _getItems2 = _slicedToArray(_getItems, 1),
-          _focusedItem = _getItems2[0];
-
+      var [_focusedItem] = getItems([[focusIndex, focusIndex]]);
       onFocusChange(_focusedItem);
     } else {
       onFocusChange();
     }
   }, [getItems, onFocusChange]);
-  var handleViewportChange = useCallback(function (top, bottom) {
+  var handleViewportChange = useCallback((top, bottom) => {
     log.debug('handleViewportChange', top, bottom);
 
     if (top !== viewport.top || bottom !== viewport.bottom) {
       setViewport({
-        top: top,
-        bottom: bottom
+        top,
+        bottom
       });
     }
   }, [viewport]);
-  var isDropTargetValid = useMemo(function () {
+  var isDropTargetValid = useMemo(() => {
     if (!draggedItems || !dropTargetItem) {
       return false;
     }
@@ -455,7 +392,7 @@ export var FileList = function FileList(props) {
       return false;
     }
   }, [draggedItems, dropTargetItem]);
-  useEffect(function () {
+  useEffect(() => {
     log.debug('updating table viewport', viewport);
     table === null || table === void 0 ? void 0 : table.setViewport({
       top: Math.max(0, viewport.top - overscanCount),
@@ -463,48 +400,42 @@ export var FileList = function FileList(props) {
     });
   }, [overscanCount, table, viewport]); // Listen for table updates
 
-  useEffect(function () {
-    var listenerRemover = table.onUpdate(function (newViewport) {
+  useEffect(() => {
+    var listenerRemover = table.onUpdate(newViewport => {
       setLoadedViewport({
-        items: newViewport.items.map(function (item) {
-          return _objectSpread(_objectSpread({}, item), {}, {
-            itemName: item.basename
-          });
-        }),
+        items: newViewport.items.map(item => _objectSpread(_objectSpread({}, item), {}, {
+          itemName: item.basename
+        })),
         offset: newViewport.offset,
         itemCount: table.size
       });
     });
-    return function () {
+    return () => {
       listenerRemover();
     };
   }, [table]); // Expand a folder if hovering over it
 
-  useEffect(function () {
+  useEffect(() => {
     if (dropTargetItem != null && isDirectory(dropTargetItem) && dropTargetItem.filename !== '/') {
-      var timeout = setTimeout(function () {
+      var timeout = setTimeout(() => {
         if (!dropTargetItem.isExpanded) {
           table === null || table === void 0 ? void 0 : table.setExpanded(dropTargetItem.filename, true);
         }
       }, DRAG_HOVER_TIMEOUT);
-      return function () {
-        return clearTimeout(timeout);
-      };
+      return () => clearTimeout(timeout);
     }
   }, [dropTargetItem, table]);
-  var renderWrapper = useCallback(function (itemProps) {
-    return renderItem(_objectSpread(_objectSpread({}, itemProps), {}, {
-      isDragInProgress: draggedItems != null,
-      dropTargetItem: dropTargetItem,
-      draggedItems: draggedItems,
-      isDropTargetValid: isDropTargetValid,
-      onDragStart: handleItemDragStart,
-      onDragEnd: handleItemDragEnd,
-      onDragOver: handleItemDragOver,
-      onDragExit: handleItemDragExit,
-      onDrop: handleItemDrop
-    }));
-  }, [handleItemDragEnd, handleItemDragExit, handleItemDragOver, handleItemDragStart, handleItemDrop, draggedItems, dropTargetItem, isDropTargetValid, renderItem]);
+  var renderWrapper = useCallback(itemProps => renderItem(_objectSpread(_objectSpread({}, itemProps), {}, {
+    isDragInProgress: draggedItems != null,
+    dropTargetItem,
+    draggedItems,
+    isDropTargetValid,
+    onDragStart: handleItemDragStart,
+    onDragEnd: handleItemDragEnd,
+    onDragOver: handleItemDragOver,
+    onDragExit: handleItemDragExit,
+    onDrop: handleItemDrop
+  })), [handleItemDragEnd, handleItemDragExit, handleItemDragOver, handleItemDragStart, handleItemDrop, draggedItems, dropTargetItem, isDropTargetValid, renderItem]);
   return /*#__PURE__*/React.createElement("div", {
     ref: fileList,
     className: classNames('file-list', {