@lvce-editor/extension-search-view 3.9.0 → 4.0.0

package/dist/extensionSearchViewWorkerMain.js

@@ -967,7 +967,7 @@ const Disable = 'Disable';
 const InstallAnotherVersion = 'Install Another Version';
 const SearchExtensionsInMarketplace = 'Search Extensions in Marketplace';
 const ViewsAndMoreActions = 'Views and more Actions...';
-const Extensions = 'Extensions';
+const Extensions$2 = 'Extensions';
 const Copy = 'Copy';
 const CopyExtensionId = 'CopyExtensionId';
 
@@ -981,7 +981,7 @@ const refresh = () => {
   return i18nString(Refresh$1);
 };
 const extensions = () => {
-  return i18nString(Extensions);
+  return i18nString(Extensions$2);
 };
 const clearExtensionSearchResults = () => {
   return i18nString(ClearExtensionSearchResults);
@@ -1008,9 +1008,9 @@ const viewsAndMoreActions = () => {
   return i18nString(ViewsAndMoreActions);
 };
 
-const None$2 = 0;
+const None$3 = 0;
 const Input = 1;
-const List$1 = 2;
+const List$2 = 2;
 
 const getFinalDeltaY = (height, itemHeight, itemsLength) => {
   const contentHeight = itemsLength * itemHeight;
@@ -1278,24 +1278,15 @@ const create$1 = (id, uri, x, y, width, height, platform, assetDir) => {
   set$1(id, state, state);
 };
 
-const isEqual$5 = (oldState, newState) => {
-  return true;
-};
-
-const isEqual$4 = (oldState, newState) => {
-  return oldState.placeholder === newState.placeholder;
-};
-
-const isEqual$3 = (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.inputActions === newState.inputActions && oldState.placeholder === newState.placeholder;
-};
-
 const isEqual$2 = (oldState, newState) => {
-  return oldState.message === newState.message;
+  if (!newState.focus) {
+    return true;
+  }
+  return oldState.focus === newState.focus;
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.negativeMargin === newState.negativeMargin && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.items.length === newState.items.length && oldState.scrollBarActive === newState.scrollBarActive;
+  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.inputActions === newState.inputActions && oldState.placeholder === newState.placeholder;
 };
 
 const User = 1;
@@ -1311,9 +1302,10 @@ const RenderItems = 4;
 const RenderScrollBar = 5;
 const RenderMessage = 6;
 const RenderSearchValue = 7;
+const RenderFocusContext = 8;
 
-const modules = [isEqual$1, isEqual$2, isEqual$4, isEqual$3, isEqual$5, isEqual];
-const numbers = [RenderScrollBar, RenderMessage, RenderHeader, RenderItems, RenderFocus, RenderSearchValue];
+const modules = [isEqual$1, isEqual$2, isEqual, isEqual$2];
+const numbers = [RenderItems, RenderFocus, RenderSearchValue, RenderFocusContext];
 
 const diff2 = uid => {
   const {
@@ -1545,6 +1537,7 @@ const DownArrow = 16;
 const CtrlCmd = 1 << 11 >>> 0;
 
 const FocusExtensions = 15;
+const FocusExtensionsInput = 7000;
 
 const getKeyBindings = () => {
   return [{
@@ -1590,33 +1583,33 @@ const getKeyBindings = () => {
   }];
 };
 
-const None$1 = 0;
+const None$2 = 0;
 
 const getMenuEntries = () => {
   return [{
     id: 'enable',
     label: enable(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.enable'
   }, {
     id: 'disable',
     label: disable(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.disable'
   }, {
     id: 'installAnotherVersion',
     label: installAnotherVersion(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.installAnotherVersion'
   }, {
     id: 'copy',
     label: copy(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.copy'
   }, {
     id: 'copyExtensionId',
     label: copyExtensionId(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.copyExtensionId'
   }];
 };
@@ -1624,7 +1617,7 @@ const getMenuEntries = () => {
 const handleBlur = state => {
   return {
     ...state,
-    focus: None$2
+    focus: None$3
   };
 };
 
@@ -1672,36 +1665,22 @@ const {
 const showContextMenu$1 = async (x, y, id, ...args) => {
   return invoke$3('ContextMenu.show', x, y, id, ...args);
 };
-const setFocus$2 = key => {
-  return invoke$3('Focus.setFocus', key);
-};
 const openUri$2 = async (uri, focus, options) => {
   await invoke$3('Main.openUri', uri, focus, options);
 };
-const RendererWorker$2 = {
+const RendererWorker = {
   __proto__: null,
   invoke: invoke$3,
   openUri: openUri$2,
   set: set$3,
-  setFocus: setFocus$2,
   showContextMenu: showContextMenu$1};
 
 const {
   invoke,
   set,
   showContextMenu,
-  setFocus: setFocus$1,
   openUri: openUri$1
-} = RendererWorker$2;
-
-const RendererWorker = {
-  __proto__: null,
-  invoke,
-  openUri: openUri$1,
-  set,
-  setFocus: setFocus$1,
-  showContextMenu
-};
+} = RendererWorker;
 
 const openUri = async uri => {
   return openUri$1(uri);
@@ -1719,7 +1698,7 @@ const handleClick = async (state, index) => {
   const partialNewState = focusIndex(state, actualIndex);
   const newState = {
     ...partialNewState,
-    focus: List$1
+    focus: List$2
   };
   return newState;
 };
@@ -1731,13 +1710,6 @@ const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, headerHeight) =>
   return index;
 };
 
-const selectIndex = (state, index) => {
-  return {
-    ...state,
-    focusedIndex: index
-  };
-};
-
 const handleClickAt = async (state, eventX, eventY) => {
   const {
     x,
@@ -1747,7 +1719,7 @@ const handleClickAt = async (state, eventX, eventY) => {
     headerHeight
   } = state;
   const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, headerHeight);
-  return selectIndex(state, index);
+  return handleClick(state, index);
 };
 
 const handleClickCurrent = state => {
@@ -1788,13 +1760,11 @@ const handleEnable = (state, id) => {
   return state;
 };
 
-const {
-  setFocus
-} = RendererWorker;
-
 const handleFocus = async state => {
-  await setFocus(FocusExtensions);
-  return state;
+  return {
+    ...state,
+    focus: List$2
+  };
 };
 
 // TODO show error / warning  when installment fails / times out
@@ -1874,6 +1844,7 @@ const setDeltaY = (state, value) => {
 };
 
 const handleScrollBarClick = (state, eventY) => {
+  // TODO move this to list
   const {
     y,
     deltaY,
@@ -1965,6 +1936,8 @@ const HandlePointerDown = 'handlePointerDown';
 const HandleScrollBarMove = 'handleScrollBarMove';
 const HandleScrollBarPointerCaptureLost = 'handleScrollBarPointerCaptureLost';
 const HandleScrollBarPointerDown = 'handleScrollBarPointerDown';
+const HandleTouchEnd = 'handleTouchEnd';
+const HandleTouchMove = 'handleTouchMove';
 const HandleTouchStart = 'handleTouchStart';
 const HandleWheel = 'handleWheel';
 
@@ -2149,6 +2122,40 @@ const openSuggest = state => {
   return state;
 };
 
+const Extensions$1 = 'extensions';
+
+const getSelector = focus => {
+  switch (focus) {
+    case Input:
+      return `[name="${Extensions$1}"]`;
+    case List$2:
+      return '.ListItems';
+    default:
+      return '';
+  }
+};
+const renderFocus = newState => {
+  const {
+    uid,
+    focus
+  } = newState;
+  if (!focus) {
+    return [];
+  }
+  const selector = getSelector(focus);
+  return ['Viewlet.focusSelector', uid, selector];
+};
+
+const renderFocusContext = newState => {
+  if (newState.focus === Input) {
+    return ['Viewlet.setFocusContext', FocusExtensionsInput];
+  }
+  if (newState.focus === List$2) {
+    return ['Viewlet.setFocusContext', FocusExtensions];
+  }
+  return [];
+};
+
 const Actions = 'Actions';
 const ExtensionActions = 'ExtensionActions';
 const ExtensionActive = 'ExtensionActive';
@@ -2160,10 +2167,14 @@ const ExtensionListItemDetail = 'ExtensionListItemDetail';
 const ExtensionListItemFooter = 'ExtensionListItemFooter';
 const ExtensionListItemIcon = 'ExtensionListItemIcon';
 const ExtensionListItemName = 'ExtensionListItemName';
+const Extensions = 'Extensions';
 const IconButton = 'IconButton';
+const List$1 = 'List';
 const ListItems = 'ListItems';
 const MaskIcon = 'MaskIcon';
 const MultilineInputBox = 'MultilineInputBox';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
 const ScrollBarThumb = 'ScrollBarThumb';
 const ScrollBarThumbActive = 'ScrollBarThumbActive';
 const SearchField = 'SearchField';
@@ -2171,16 +2182,25 @@ const SearchFieldButton = 'SearchFieldButton';
 const SearchFieldButtons = 'SearchFieldButtons';
 const SearchFieldContainer = 'SearchFieldContainer';
 const SearchFieldDisabled = 'SearchFieldDisabled';
+const Viewlet = 'Viewlet';
 
 const List = 'list';
 const ListItem = 'listitem';
-const None = 'none';
+const None$1 = 'none';
 const ToolBar = 'toolbar';
 
+const None = 'none';
+const AriaRoles = {
+  __proto__: null,
+  None};
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
+const Div$1 = 4;
 const Text = 12;
+const VirtualDomElements = {
+  __proto__: null,
+  Div: Div$1};
 const text = data => {
   return {
     type: Text,
@@ -2226,7 +2246,7 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
   const dom = [{
     type: Div,
     className: SearchField,
-    role: None,
+    role: None$1,
     childCount: 2
   }, {
     type: TextArea,
@@ -2248,7 +2268,7 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
     dom.unshift({
       type: Div,
       className: SearchFieldContainer,
-      role: None,
+      role: None$1,
       childCount: 1 + outsideButtons.length
     });
     dom.push(...outsideButtons.flatMap(getSearchFieldButtonVirtualDom));
@@ -2335,7 +2355,7 @@ const getExtensionListItemVirtualDom = extension => {
     type: Img,
     src: icon,
     className: ExtensionListItemIcon,
-    role: None,
+    role: None$1,
     childCount: 0
   }, listItemDetail, listItemName, text(name), listItemDescription, text(description), listItemFooter, listItemAuthorName, text(publisher), {
     type: Div,
@@ -2352,10 +2372,14 @@ const getExtensionsListVirtualDom = visibleExtensions => {
     tabIndex: 0,
     ariaLabel: extensions(),
     role: List,
-    oncontextmenu: HandleContextMenu,
-    onpointerdown: HandlePointerDown,
-    ontouchstart: HandleTouchStart,
-    onwheelpassive: HandleWheel,
+    onContextmenu: HandleContextMenu,
+    onContextMenu: HandleContextMenu,
+    onFocus: HandleFocus,
+    onPointerDown: HandlePointerDown,
+    onTouchEnd: HandleTouchEnd,
+    onTouchMove: HandleTouchMove,
+    onTouchStart: HandleTouchStart,
+    onWheel: HandleWheel,
     childCount: visibleExtensions.length
   }, ...visibleExtensions.flatMap(getExtensionListItemVirtualDom)];
   return dom;
@@ -2367,6 +2391,36 @@ const getExtensionsVirtualDom = visibleExtensions => {
   return dom;
 };
 
+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);
+  return [{
+    type: Div,
+    className: mergeClassNames(ScrollBar, ScrollBarSmall),
+    onPointerDown: HandleScrollBarPointerDown,
+    // TODO support pointercapture event
+    childCount: 1
+  }, {
+    type: Div,
+    className: ScrollBarThumb,
+    childCount: 0,
+    height: heightString,
+    translate: translateString
+  }];
+};
+
 const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focusedIndex) => {
   // TODO use normal parameters
   const {
@@ -2408,28 +2462,50 @@ const getVisible = state => {
   return visible;
 };
 
-const renderItems = newState => {
-  // TODO render extensions incrementally when scrolling
-  const visibleExtensions = getVisible(newState);
-  const dom = getExtensionsVirtualDom(visibleExtensions);
-  return ['setExtensionsDom', dom];
+const getContentVirtualDom = (visibleExtensions, message, scrollBarHeight, scrollBarY) => {
+  if (message) {
+    return [{
+      type: VirtualDomElements.Div,
+      childCount: 1
+    }, text(message)];
+  }
+  return [{
+    type: VirtualDomElements.Div,
+    className: mergeClassNames(Viewlet, List$1),
+    childCount: 2
+  }, ...getExtensionsVirtualDom(visibleExtensions), ...getScrollBarVirtualDom(scrollBarHeight, scrollBarY)];
+};
+const getExtensionsViewVirtualDom = state => {
+  const visibleExtensions = getVisible(state);
+  const {
+    placeholder,
+    inputActions,
+    message,
+    scrollBarHeight,
+    scrollBarY
+  } = state;
+  return [{
+    type: VirtualDomElements.Div,
+    className: mergeClassNames(Viewlet, Extensions),
+    childCount: 2,
+    ariaLive: 'polite',
+    ariaBusy: false,
+    role: AriaRoles.None
+  }, ...getExtensionHeaderVirtualDom(placeholder, inputActions), ...getContentVirtualDom(visibleExtensions, message, scrollBarHeight, scrollBarY)];
+};
+
+const renderItems2 = newState => {
+  const dom = getExtensionsViewVirtualDom(newState);
+  return ['Viewlet.setDom2', newState.uid, dom];
 };
 
 const SetMessage = 'setMessage';
 const SetScrollBar = 'setScrollBar';
-const SetSearchValue = 'setSearchValue';
 
 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;
@@ -2447,13 +2523,13 @@ const renderScrollBar = newState => {
 };
 
 const renderSearchValue = newState => {
-  return [/* method */SetSearchValue, '', newState.searchValue];
+  return [/* method */'Viewlet.setValueByName', newState.uid, Extensions$1, newState.searchValue];
 };
 
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderItems:
-      return renderItems;
+      return renderItems2;
     case RenderMessage:
       return renderMessage;
     case RenderScrollBar:
@@ -2462,6 +2538,10 @@ const getRenderer = diffType => {
       return renderSearchValue;
     case RenderHeader:
       return renderHeader;
+    case RenderFocus:
+      return renderFocus;
+    case RenderFocusContext:
+      return renderFocusContext;
     default:
       throw new Error('unknown renderer');
   }
@@ -2471,7 +2551,7 @@ const applyRender = (oldState, newState, diffResult) => {
   const commands = [];
   for (const item of diffResult) {
     const fn = getRenderer(item);
-    commands.push(fn(newState));
+    commands.push(fn(newState, oldState));
   }
   return commands;
 };
@@ -2490,7 +2570,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
-    role: None,
+    role: None$1,
     childCount: 0
   };
 };
@@ -2603,6 +2683,13 @@ const scrollDown = state => {
   return setDeltaY(state, newDeltaY);
 };
 
+const selectIndex = (state, index) => {
+  return {
+    ...state,
+    focusedIndex: index
+  };
+};
+
 const toggleSuggest = state => {
   return state;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-search-view",
-  "version": "3.9.0",
+  "version": "4.0.0",
   "description": "Extension Search View Worker",
   "license": "MIT",
   "author": "Lvce Editor",