@lvce-editor/extension-search-view 7.0.0 → 7.2.0

package/dist/extensionSearchViewWorkerMain.js

@@ -1061,6 +1061,7 @@ const ExtensionManagementWorker = 9006;
 const RendererWorker = 1;
 
 const FocusSelector = 'Viewlet.focusSelector';
+const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
 const SetPatches = 'Viewlet.setPatches';
 
@@ -1854,6 +1855,10 @@ const create = (id, uri, x, y, width, height, platform, assetDir) => {
   set$1(id, state, state);
 };
 
+const isEqual$3 = (oldState, newState) => {
+  return newState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarY === newState.scrollBarY && oldState.initial === newState.initial && oldState.deltaY === newState.deltaY;
+};
+
 const isEqual$2 = (oldState, newState) => {
   if (!newState.focus) {
     return true;
@@ -1862,7 +1867,7 @@ const isEqual$2 = (oldState, newState) => {
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.focusedIndex === newState.focusedIndex && oldState.message === newState.message && oldState.focus === newState.focus && oldState.inputActions === newState.inputActions && oldState.placeholder === newState.placeholder && oldState.scrollBarHeight === newState.scrollBarHeight;
+  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex && oldState.message === newState.message && oldState.focus === newState.focus && oldState.inputActions === newState.inputActions && oldState.placeholder === newState.placeholder;
 };
 
 const User = 1;
@@ -1880,9 +1885,10 @@ const RenderMessage = 6;
 const RenderSearchValue = 7;
 const RenderFocusContext = 8;
 const RenderIncremental = 9;
+const RenderCss = 10;
 
-const modules = [isEqual$1, isEqual$2, isEqual, isEqual$2];
-const numbers = [RenderIncremental, RenderFocus, RenderSearchValue, RenderFocusContext];
+const modules = [isEqual$1, isEqual$2, isEqual, isEqual$2, isEqual$3];
+const numbers = [RenderIncremental, RenderFocus, RenderSearchValue, RenderFocusContext, RenderCss];
 
 const diff2 = uid => {
   return diff(uid, modules, numbers);
@@ -2845,9 +2851,13 @@ const handleScrollBarMove = (state, eventY) => {
     handleOffset,
     headerHeight,
     height,
+    scrollBarActive,
     scrollBarHeight,
     y
   } = state;
+  if (!scrollBarActive) {
+    return state;
+  }
   const relativeY = eventY - y - headerHeight - handleOffset;
   const contentHeight = height - headerHeight;
   const newPercent = getNewPercent(contentHeight, scrollBarHeight, relativeY);
@@ -3117,6 +3127,37 @@ const openSuggest = state => {
   return state;
 };
 
+const getCss = state => {
+  const {
+    deltaY,
+    itemHeight,
+    scrollBarHeight,
+    scrollBarY
+  } = state;
+  const relative = -(deltaY % itemHeight);
+  const roundedScrollBarY = Math.round(scrollBarY);
+  return `.Extensions .ScrollBarThumb {
+  height: ${scrollBarHeight}px;
+  translate: 0 ${roundedScrollBarY}px;
+}
+
+.Extensions .ListItems {
+  translate: 0 ${relative}px;
+
+.ExtensionListItem {
+  position: relative !important;
+}
+`;
+};
+
+const renderCss = newState => {
+  const {
+    uid
+  } = newState;
+  const css = getCss(newState);
+  return [SetCss, uid, css];
+};
+
 const Extensions$1 = 'extensions';
 
 const getSelector = focus => {
@@ -3317,8 +3358,7 @@ const getExtensionListItemVirtualDom = extension => {
     name,
     posInSet,
     publisher,
-    setSize,
-    top
+    setSize
   } = extension;
   const dom = [{
     ariaPosInSet: posInSet,
@@ -3328,7 +3368,6 @@ const getExtensionListItemVirtualDom = extension => {
     className: getClassName(focused),
     id: getId(focused),
     role: ListItem,
-    top,
     type: Div
   }, {
     childCount: 0,
@@ -3380,21 +3419,14 @@ const getNoExtensionsFoundVirtualDom = message => {
   }, text(message)];
 };
 
-const px = value => {
-  return `${value}px`;
-};
-const position = (x, y) => {
-  return `${x}px ${y}px`;
-};
-
 const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
   const shouldShowScrollbar = scrollBarHeight > 0;
   if (!shouldShowScrollbar) {
     return [];
   }
   // TODO move the dynamic css into a css adopted stylesheet
-  const heightString = px(scrollBarHeight);
-  const translateString = position(0, scrollBarTop);
+  // const heightString = Px.px(scrollBarHeight)
+  // const translateString = Px.position(0, scrollBarTop)
   return [{
     childCount: 1,
     className: mergeClassNames(ScrollBar, ScrollBarSmall),
@@ -3404,8 +3436,8 @@ const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
   }, {
     childCount: 0,
     className: ScrollBarThumb,
-    height: heightString,
-    translate: translateString,
+    // height: heightString,
+    // translate: translateString,
     type: Div
   }];
 };
@@ -3459,7 +3491,7 @@ const getContentVirtualDom = (visibleExtensions, message, scrollBarHeight, scrol
     childCount: 2,
     className: mergeClassNames(Viewlet, List$1),
     type: Div
-  }, ...getExtensionsVirtualDom(visibleExtensions, focusOutline), ...getScrollBarVirtualDom(scrollBarHeight, scrollBarY)];
+  }, ...getExtensionsVirtualDom(visibleExtensions, focusOutline), ...getScrollBarVirtualDom(scrollBarHeight)];
 };
 const getExtensionsViewVirtualDom = state => {
   const visibleExtensions = getVisible(state);
@@ -3509,6 +3541,13 @@ const renderMessage = newState => {
   return [/* method */SetMessage, /* message */newState.message];
 };
 
+const px = value => {
+  return `${value}px`;
+};
+const position = (x, y) => {
+  return `${x}px ${y}px`;
+};
+
 const renderScrollBar = newState => {
   const listHeight = getListHeight(newState.items.length, newState.itemHeight, newState.height);
   const total = newState.items.length;
@@ -3531,6 +3570,8 @@ const renderSearchValue = newState => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderCss:
+      return renderCss;
     case RenderFocus:
       return renderFocus;
     case RenderFocusContext:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-search-view",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "description": "Extension Search View Worker",
   "repository": {
     "type": "git",