@lvce-editor/explorer-view 2.25.0 → 2.26.0

package/dist/explorerViewWorkerMain.js

@@ -1004,6 +1004,7 @@ const SymLinkFolder = 11;
 const Unknown = 12;
 const EditingFile = File + DELTA_EDITING;
 const EditingFolder = Directory + DELTA_EDITING;
+const EditingDirectoryExpanded = DirectoryExpanded + DELTA_EDITING;
 
 const RendererWorker = 1;
 
@@ -1422,12 +1423,19 @@ const acceptEdit = async state => {
   }
 };
 
+const normalizeDirentType = direntType => {
+  if (direntType > DELTA_EDITING) {
+    return direntType - DELTA_EDITING;
+  }
+  return direntType;
+};
+
 const getNewDirentsForCancelRename = (items, editingIndex) => {
   const item = items[editingIndex];
   const newItems = [...items];
   newItems[editingIndex] = {
     ...item,
-    type: item.type - DELTA_EDITING
+    type: normalizeDirentType(item.type)
   };
   return newItems;
 };
@@ -2064,7 +2072,7 @@ const focusPrevious = state => {
   }
 };
 
-const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleDragLeave', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleInputBlur', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectUp', 'setDeltaY', 'setSelectedIndices', 'updateEditingValue', 'updateIcons'];
+const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleDragLeave', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleInputBlur', 'handleInputClick', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectUp', 'setDeltaY', 'setSelectedIndices', 'updateEditingValue', 'updateIcons'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -2615,6 +2623,18 @@ const getClickFn = direntType => {
   }
 };
 
+const resetEditing = {
+  editingIndex: -1,
+  editingValue: '',
+  editingType: None$5,
+  editingIcon: '',
+  editingErrorMessage: '',
+  editingSelection: {
+    start: 0,
+    end: 0
+  }
+};
+
 // TODO viewlet should only have create and refresh functions
 // every thing else can be in a separate module <viewlet>.lazy.js
 // and  <viewlet>.ipc.js
@@ -2644,8 +2664,16 @@ const handleClick = async (state, index, keepFocus = false) => {
     console.warn(`[explorer] dirent at index ${actualIndex} not found`, state);
     return state;
   }
-  const clickFn = getClickFn(dirent.type);
-  return clickFn(state, dirent, actualIndex, keepFocus);
+  const normalizedType = normalizeDirentType(dirent.type);
+  const clickFn = getClickFn(normalizedType);
+  const newState = await clickFn(state, dirent, actualIndex, keepFocus);
+  if (newState.editingIndex === -1) {
+    return newState;
+  }
+  return {
+    ...newState,
+    ...resetEditing
+  };
 };
 
 // export const handleBlur=()=>{}
@@ -2705,7 +2733,10 @@ const handleClickAtRangeSelection = async (state, index) => {
   return handleRangeSelection(state, min, max);
 };
 
-const handleClickAt = async (state, button, ctrlKey, shiftKey, x, y) => {
+const handleClickAt = async (state, defaultPrevented, button, ctrlKey, shiftKey, x, y) => {
+  if (defaultPrevented) {
+    return state;
+  }
   if (button !== LeftClick) {
     return state;
   }
@@ -3260,6 +3291,10 @@ const handleInputBlur = state => {
   return cancelEdit(state);
 };
 
+const handleInputClick = state => {
+  return state;
+};
+
 // TODO add lots of tests for this
 const updateRoot = async state1 => {
   // @ts-ignore
@@ -3921,6 +3956,7 @@ const FocusOutline = 'FocusOutline';
 const ListItems = 'ListItems';
 const IconButton = 'IconButton';
 const InputBox = 'InputBox';
+const ExplorerInputBox = 'ExplorerInputBox';
 const InputValidationError = 'InputValidationError';
 const Label = 'Label';
 const MaskIconChevronDown = 'MaskIconChevronDown';
@@ -3951,6 +3987,7 @@ const HandleDragOver = 'handleDragOver';
 const HandleDrop = 'handleDrop';
 const HandleEditingInput = 'handleEditingInput';
 const HandleInputBlur = 'handleInputBlur';
+const HandleInputClick = 'handleInputClick';
 const HandleListBlur = 'handleListBlur';
 const HandleListFocus = 'handleListFocus';
 const HandlePointerDown = 'handlePointerDown';
@@ -4001,26 +4038,28 @@ const getFileIconVirtualDom = icon => {
   };
 };
 
-const getClassName$2 = hasEditingError => {
+const getInputClassName = hasEditingError => {
   if (hasEditingError) {
-    return mergeClassNames(InputBox, InputValidationError);
+    return mergeClassNames(InputBox, ExplorerInputBox, InputValidationError);
   }
-  return InputBox;
+  return mergeClassNames(InputBox, ExplorerInputBox);
 };
+
 const getInputDom = hasEditingError => {
   const ariaLabel = typeAFileName();
   return [{
     type: Input,
-    className: getClassName$2(hasEditingError),
-    id: 'ExplorerInput',
-    onInput: HandleEditingInput,
-    onBlur: HandleInputBlur,
+    ariaLabel: ariaLabel,
+    autocapitalize: 'off',
+    autocorrect: 'off',
     childCount: 0,
+    className: getInputClassName(hasEditingError),
+    id: 'ExplorerInput',
     name: ExplorerInput,
-    autocorrect: 'off',
-    autocapitalize: 'off',
-    spellcheck: 'false',
-    ariaLabel: ariaLabel
+    onBlur: HandleInputBlur,
+    onClick: HandleInputClick,
+    onInput: HandleEditingInput,
+    spellcheck: 'false'
   }];
 };
 
@@ -4029,31 +4068,35 @@ const label = {
   className: Label,
   childCount: 1
 };
+const getLabelDom = name => {
+  return [label, text(name)];
+};
+
 const getInputOrLabelDom = (isEditing, hasEditingError, name) => {
   if (isEditing) {
     return getInputDom(hasEditingError);
   }
-  return [label, text(name)];
+  return getLabelDom(name);
 };
 
 const getExplorerItemVirtualDom = item => {
   const {
-    posInSet,
-    setSize,
-    icon,
-    name,
-    path,
-    depth,
-    indent,
+    ariaExpanded,
     chevron,
-    id,
     className,
+    depth,
+    hasEditingError,
+    icon,
+    id,
+    indent,
     isEditing,
-    ariaExpanded,
-    hasEditingError
+    name,
+    path,
+    setSize,
+    posInSet
   } = item;
   const chevronDom = getChevronVirtualDom(chevron);
-  const dom = [{
+  return [{
     type: Div,
     role: TreeItem$1,
     className,
@@ -4069,7 +4112,6 @@ const getExplorerItemVirtualDom = item => {
     ariaDescription: '',
     id
   }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, hasEditingError, name)];
-  return dom;
 };
 
 const getExplorerWelcomeVirtualDom = isWide => {
@@ -4100,7 +4142,7 @@ const getActiveDescendant = focusedIndex => {
   }
   return undefined;
 };
-const getClassName$1 = (focused, focusedIndex, dropTarget) => {
+const getClassName = (focused, focusedIndex, dropTarget) => {
   const extraClass1 = focused && focusedIndex === -1 ? FocusOutline : Empty;
   const extraClass2 = dropTarget === dropTargetFull ? ExplorerDropTarget : Empty;
   const className = mergeClassNames(ListItems, extraClass1, extraClass2);
@@ -4118,7 +4160,7 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
   }
   const dom = [parentNode, {
     type: Div,
-    className: getClassName$1(focused, focusedIndex, dropTargets),
+    className: getClassName(focused, focusedIndex, dropTargets),
     tabIndex: 0,
     role: Tree,
     ariaLabel: filesExplorer(),
@@ -4172,6 +4214,18 @@ const getExpandedType = type => {
   }
 };
 
+const focused = mergeClassNames(TreeItem, TreeItemActive);
+const selected = mergeClassNames(TreeItem, TreeItemActive);
+const getTreeItemClassName = (isSelected, isFocused) => {
+  if (isFocused) {
+    return focused;
+  }
+  if (isSelected) {
+    return selected;
+  }
+  return TreeItem;
+};
+
 const defaultIndent$1 = 1;
 const getTreeItemIndent = depth => {
   return `${depth * defaultIndent$1}rem`;
@@ -4190,14 +4244,15 @@ const getTreeItemIndentWithChevron = (depth, chevron) => {
 };
 
 const ariaExpandedValues = [undefined, 'true', 'false'];
-const getClassName = (isSelected, isFocused) => {
-  if (isFocused) {
-    return mergeClassNames(TreeItem, TreeItemActive);
-  }
-  if (isSelected) {
-    return mergeClassNames(TreeItem, TreeItemActive);
+const getEditingChevron = direntType => {
+  switch (direntType) {
+    case EditingDirectoryExpanded:
+      return Down;
+    case EditingFolder:
+      return Right;
+    default:
+      return None$1;
   }
-  return TreeItem;
 };
 const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon) => {
   const visible = [];
@@ -4205,19 +4260,20 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
   let iconIndex = 0;
   for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
     const item = items[i];
-    const chevron = getChevronType(item.type, useChevrons);
-    const indent = indentFn(item.depth, chevron);
+    let chevron = getChevronType(item.type, useChevrons);
     const isFocused = i === focusedIndex;
     const id = isFocused ? 'TreeItemActive' : undefined;
     const isSelected = item.selected;
-    const className = getClassName(isSelected, isFocused);
+    const className = getTreeItemClassName(isSelected, isFocused);
     const expanded = getExpandedType(item.type);
     const ariaExpanded = ariaExpandedValues[expanded];
     const isEditing = i === editingIndex;
     let icon = icons[iconIndex++];
     if (isEditing) {
       icon = editingIcon;
+      chevron = getEditingChevron(item.type);
     }
+    const indent = indentFn(item.depth, chevron);
     visible.push({
       ...item,
       posInSet: item.posInSet ?? i + 1,
@@ -4392,7 +4448,11 @@ const renderEventListeners = () => {
     params: ['handleBlur']
   }, {
     name: HandleClick,
-    params: ['handleClickAt', 'event.button', 'event.ctrlKey', 'event.shiftKey', 'event.clientX', 'event.clientY'],
+    params: ['handleClickAt', 'event.defaultPrevented', 'event.button', 'event.ctrlKey', 'event.shiftKey', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleInputClick,
+    params: ['handleInputClick'],
     preventDefault: true
   }, {
     name: HandleClickOpenFolder,
@@ -4797,7 +4857,6 @@ const commandMap = {
   'Explorer.acceptEdit': wrapCommand(acceptEdit),
   'Explorer.cancelEdit': wrapCommand(cancelEdit),
   'Explorer.collapseAll': wrapCommand(collapseAll),
-  'Explorer.handleInputBlur': wrapCommand(handleInputBlur),
   'Explorer.copyPath': wrapCommand(copyPath),
   'Explorer.copyRelativePath': wrapCommand(copyRelativePath),
   'Explorer.expandAll': wrapCommand(expandAll),
@@ -4827,6 +4886,8 @@ const commandMap = {
   'Explorer.handleDrop': wrapCommand(handleDrop),
   'Explorer.handleFocus': wrapCommand(handleFocus),
   'Explorer.handleIconThemeChange': wrapCommand(handleIconThemeChange),
+  'Explorer.handleInputBlur': wrapCommand(handleInputBlur),
+  'Explorer.handleInputClick': wrapCommand(handleInputClick),
   'Explorer.handlePaste': wrapCommand(handlePaste),
   'Explorer.handlePointerDown': wrapCommand(handlePointerDown),
   'Explorer.handleUpload': wrapCommand(handleUpload),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/explorer-view",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",