@lvce-editor/extension-detail-view 3.6.0 → 3.7.0

package/dist/extensionDetailViewWorkerMain.js

@@ -1094,30 +1094,57 @@ const getMoreInfoEntryKeyVirtualDom = item => {
   }, text(key)];
 };
 
+const getTag = (onClick, code) => {
+  if (onClick) {
+    return A$1;
+  }
+  if (code) {
+    // TODO use code tag
+    return Div$1;
+  }
+  return Div$1;
+};
+const getClassName = (onClick, code) => {
+  if (onClick) {
+    return MoreInfoEntryValue + ' Link';
+  }
+  if (code) {
+    return MoreInfoEntryValue + ' Code';
+  }
+  return MoreInfoEntryValue;
+};
 const getMoreInfoEntryValueVirtualDom = item => {
   const {
     value,
-    onClick
+    onClick,
+    code
   } = item;
-  const valueTag = onClick ? A$1 : Div$1;
-  let valueClassName = MoreInfoEntryValue;
-  if (onClick) {
-    valueClassName += ' Link';
-  }
+  const type = getTag(onClick, code);
+  const className = getClassName(onClick, code);
   return [{
-    type: valueTag,
-    className: valueClassName,
+    type: type,
+    className,
     childCount: 1,
     onClick
   }, text(value)];
 };
 
+const parentNodeEven = {
+  type: Div$1,
+  className: MoreInfoEntry,
+  childCount: 2
+};
+const parentNodeOdd = {
+  type: Div$1,
+  className: MoreInfoEntry + ' ' + 'MoreInfoEntryOdd',
+  childCount: 2
+};
 const getMoreInfoEntryVirtualDom = item => {
-  return [{
-    type: Div$1,
-    className: MoreInfoEntry,
-    childCount: 2
-  }, ...getMoreInfoEntryKeyVirtualDom(item), ...getMoreInfoEntryValueVirtualDom(item)];
+  const {
+    odd
+  } = item;
+  const node = odd ? parentNodeOdd : parentNodeEven;
+  return [node, ...getMoreInfoEntryKeyVirtualDom(item), ...getMoreInfoEntryValueVirtualDom(item)];
 };
 
 const getMoreInfoVirtualDom = items => {
@@ -1152,23 +1179,28 @@ const getAdditionalDetailsVirtualDom = (firstHeading, entries, secondHeading, se
   return [{
     type: Div$1,
     className: AdditionalDetails,
+    tabIndex: 0,
     childCount: 4
   }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
 };
 
-const getInstallationEntries = displaySize => {
+const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
   const entries = [{
     key: 'Identifier',
-    value: 'abc'
+    value: extensionId,
+    odd: true,
+    code: true
   }, {
     key: 'Version',
-    value: '1.9.5'
+    value: extensionVersion,
+    code: true
   }, {
     key: 'Last Updated',
-    value: 'n/a'
+    value: 'n/a',
+    odd: true
   }, {
     key: 'Size',
-    value: `${displaySize}`,
+    value: displaySize,
     onClick: HandleClickSize
   }];
   return entries;
@@ -1623,6 +1655,17 @@ const getMarkdownVirtualDom = html => {
   return dom;
 };
 
+const getMarketplaceEntries = () => {
+  return [{
+    key: 'Published',
+    value: 'n/a',
+    odd: true
+  }, {
+    key: 'Last Released',
+    value: 'n/a'
+  }];
+};
+
 const getVirtualDomChildCount = markdownDom => {
   const max = markdownDom.length - 1;
   let stack = [];
@@ -1636,19 +1679,13 @@ const getVirtualDomChildCount = markdownDom => {
   return stack.length;
 };
 
-const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize) => {
+const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion) => {
   const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
   const childCount = getVirtualDomChildCount(markdownDom);
   const firstHeading = 'Installation';
-  const entries = getInstallationEntries(displaySize);
+  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion);
   const secondHeading = 'Marketplace';
-  const secondEntries = [{
-    key: 'Published',
-    value: 'n/a'
-  }, {
-    key: 'Last Released',
-    value: 'n/a'
-  }];
+  const secondEntries = getMarketplaceEntries();
   const thirdHeading = 'Categories';
   const categories = [{
     id: 'themes',
@@ -1752,10 +1789,10 @@ const ProgrammingLanguages = 'ProgrammingLanguages';
 const Settings = 'Settings';
 const Theme = 'Theme';
 
-const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize) => {
+const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion) => {
   switch (selectedTab) {
     case Details:
-      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize);
+      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion);
     case Features:
       return getFeaturesVirtualDom(features, themesHtml);
     case Changelog:
@@ -1884,13 +1921,15 @@ const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml, sele
   const themesHtml = newState?.selectedFeatureMarkdownDom || '';
   const features = newState?.features || getFeatures();
   const size = newState.folderSize || 0;
+  const extensionId = newState?.extension?.id || 'n/a';
+  const extensionVersion = newState?.extension?.version || 'n/a';
   const displaySize = getDisplaySize(size);
   const tabs = getTabs(selectedTab);
   const dom = [{
     type: Div$1,
     className: mergeClassNames(Viewlet, ExtensionDetail),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize)];
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion)];
   return dom;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Extension Detail View Worker",
   "keywords": [],
   "license": "MIT",