@lvce-editor/explorer-view 3.17.0 → 3.18.0

package/dist/explorerViewWorkerMain.js

@@ -1137,13 +1137,13 @@ const Remove = 5;
 
 const Text = 12;
 
-const TargetValue = 'event.target.value';
+const Button$3 = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
-const Button$3 = 'event.button';
+const CtrlKey = 'event.ctrlKey';
 const DeltaMode = 'event.deltaMode';
 const DeltaY = 'event.deltaY';
-const CtrlKey = 'event.ctrlKey';
+const TargetValue = 'event.target.value';
 
 const Enter = 3;
 const Escape = 8;
@@ -1172,6 +1172,7 @@ const RendererWorker$1 = 1;
 
 const FocusElementByName = 'Viewlet.focusElementByName';
 const FocusSelector = 'Viewlet.focusSelector';
+const SetCss = 'Viewlet.setCss';
 const SetFocusContext = 'Viewlet.setFocusContext';
 
 const FocusExplorer = 13;
@@ -2700,7 +2701,8 @@ const create2 = (uid, uri, x, y, width, height, args, parentUid, platform = 0) =
     cutItems: [],
     isPointerDown: false,
     pointerDownIndex: -1,
-    sourceControlIgnoredUris: []
+    sourceControlIgnoredUris: [],
+    maxIndent: 0
   };
   set(uid, state, state);
 };
@@ -2752,12 +2754,17 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     cutItems: [],
     isPointerDown: false,
     pointerDownIndex: -1,
-    sourceControlIgnoredUris: []
+    sourceControlIgnoredUris: [],
+    maxIndent: 0
   };
   set(state.uid, state, state);
   return state;
 };
 
+const isEqual$6 = (oldState, newState) => {
+  return oldState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarActive === newState.scrollBarActive;
+};
+
 const isEqual$5 = (oldState, newState) => {
   return oldState.isPointerDown || !newState.isPointerDown;
 };
@@ -2780,6 +2787,7 @@ const RenderFocusContext = 7;
 const RenderValue = 8;
 const RenderSelection = 9;
 const RenderDragData = 10;
+const RenderCss = 11;
 
 const isEqual$1 = (oldState, newState) => {
   if (newState.focus !== Input$1) {
@@ -2788,8 +2796,8 @@ const isEqual$1 = (oldState, newState) => {
   return oldState.focus === Input$1 && newState.focus === Input$1 && oldState.editingValue === newState.editingValue;
 };
 
-const modules = [isEqual$3, isEqual$4, isEqual$4, isEqual$1, isEqual$2, isEqual$5];
-const numbers = [RenderItems, RenderFocus, RenderFocusContext, RenderValue, RenderSelection, RenderDragData];
+const modules = [isEqual$3, isEqual$4, isEqual$4, isEqual$1, isEqual$2, isEqual$5, isEqual$6];
+const numbers = [RenderItems, RenderFocus, RenderFocusContext, RenderValue, RenderSelection, RenderDragData, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -4993,7 +5001,8 @@ const loadContent = async (state, savedState) => {
     pathSeparator,
     excluded,
     useChevrons,
-    confirmDelete
+    confirmDelete,
+    maxIndent: 10
   };
 };
 
@@ -5307,6 +5316,30 @@ const renameDirent = state => {
   };
 };
 
+const defaultIndent$1 = 1;
+const getTreeItemIndent = depth => {
+  return `${depth * defaultIndent$1}rem`;
+};
+
+const renderCss = (oldState, newState) => {
+  const {
+    scrollBarHeight,
+    uid,
+    maxIndent
+  } = newState;
+  const rules = [`.Explorer {
+  --ScrollBarThumbHeight: ${scrollBarHeight}px;
+`];
+  for (let i = 0; i < maxIndent; i++) {
+    const indent = getTreeItemIndent(i);
+    rules.push(`.Indent-${i} {
+  padding-left: ${indent}px;
+}`);
+  }
+  const css = rules.join('\n');
+  return [SetCss, uid, css];
+};
+
 const getDragLabel = urls => {
   if (urls.length === 1) {
     return getBaseName('/', urls[0]);
@@ -5528,7 +5561,10 @@ const getInputClassName = hasEditingError => {
   return ExplorerInputBox;
 };
 
-const getInputDom = hasEditingError => {
+const getInputDom = (isEditing, hasEditingError) => {
+  if (!isEditing) {
+    return [];
+  }
   const ariaLabel = typeAFileName();
   return [{
     type: Input,
@@ -5551,7 +5587,10 @@ const label = {
   className: Label,
   childCount: 1
 };
-const getLabelDom = (name, isDimmed) => {
+const getLabelDom = (isEditing, name, isDimmed) => {
+  if (isEditing) {
+    return [];
+  }
   if (isDimmed) {
     return [{
       type: Div,
@@ -5562,13 +5601,6 @@ const getLabelDom = (name, isDimmed) => {
   return [label, text(name)];
 };
 
-const getInputOrLabelDom = (isEditing, hasEditingError, name, isCut, isIgnored) => {
-  if (isEditing) {
-    return getInputDom(hasEditingError);
-  }
-  return getLabelDom(name, isCut || isIgnored);
-};
-
 const getExplorerItemVirtualDom = item => {
   const {
     ariaExpanded,
@@ -5605,7 +5637,7 @@ const getExplorerItemVirtualDom = item => {
     ariaDescription: '',
     id,
     'data-index': index
-  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, hasEditingError, name, isCut, isIgnored)];
+  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputDom(isEditing, hasEditingError), ...getLabelDom(isEditing, name, isCut || isIgnored)];
 };
 
 const getActiveDescendant = focusedIndex => {
@@ -5740,8 +5772,9 @@ const getExpandedType = type => {
   }
 };
 
-const getTreeItemClassName = (isSelected, isFocused, isDropping) => {
+const getTreeItemClassName = (isSelected, isFocused, isDropping, useChevrons, depth) => {
   let className = TreeItem;
+  className = mergeClassNames(className, `Indent-${depth}`);
   if (isSelected || isFocused) {
     className = mergeClassNames(className, TreeItemActive);
   }
@@ -5751,11 +5784,6 @@ const getTreeItemClassName = (isSelected, isFocused, isDropping) => {
   return className;
 };
 
-const defaultIndent$1 = 1;
-const getTreeItemIndent = depth => {
-  return `${depth * defaultIndent$1}rem`;
-};
-
 // TODO make all of these variable configurable
 const defaultPaddingLeft = 4;
 const defaultIndent = 8;
@@ -5792,7 +5820,7 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
     const isCut = cutItems.includes(item.path);
     const isDropping = dropTargets.includes(i);
     const isIgnored = sourceControlIgnoredUris.includes(item.path);
-    const className = getTreeItemClassName(isSelected, isFocused, isDropping); // TODO compute classname in dom function
+    const className = getTreeItemClassName(isSelected, isFocused, isDropping, useChevrons, item.depth); // TODO compute classname in dom function
     const expanded = getExpandedType(item.type);
     const ariaExpanded = ariaExpandedValues[expanded];
     const isEditing = i === editingIndex;
@@ -5886,6 +5914,8 @@ const getRenderer = diffType => {
       return renderEditingSelection;
     case RenderDragData:
       return renderDragData;
+    case RenderCss:
+      return renderCss;
     default:
       throw new Error('unknown renderer');
   }

package/package.json

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