feat(RDKit): add RDKit component (#5058)

* doc: 增加示例

* doc: 增加菜单

* doc: 增加源代码映射

* doc: 增加本地化

* chore: 增加 RDKit 包

* doc: 代码格式化

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -53,6 +53,7 @@
     <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.PdfReader" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.Player" Version="9.0.0" />
+    <PackageReference Include="BootstrapBlazor.RDKit" Version="9.0.0-beta01" />
     <PackageReference Include="BootstrapBlazor.SignaturePad" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.Sortable" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.Splitting" Version="9.0.1" />

src/BootstrapBlazor.Server/Components/Samples/RDKits.razor

@@ -0,0 +1,14 @@
+@page "/rdkit"
+@inject IStringLocalizer<RDKits> Localizer
+
+<h3>@Localizer["RDKitTitle"]</h3>
+
+<h4>@Localizer["RDKitDescription"]</h4>
+
+<PackageTips Name="BootstrapBlazor.RDKit" />
+
+<DemoBlock Title="@Localizer["RDKitNormalTitle"]"
+           Introduction="@Localizer["RDKitNormalIntro"]"
+           Name="Normal">
+    <RDKit Value="CC(=O)Oc1ccccc1C(=O)O"></RDKit>
+</DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/RDKits.razor.cs

@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// RDKits 组件
+/// </summary>
+public partial class RDKits
+{
+
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -693,6 +693,11 @@ void AddData(DemoMenuItem item)
                     Url = "repeater"
                 },
                 new()
+                {
+                    Text = Localizer["RDKit"],
+                    Url = "rdkit"
+                },
+                new()
                 {
                     Text = Localizer["Search"],
                     Url = "search"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4778,7 +4778,8 @@
     "DrawerService": "DrawerService",
     "SortableList": "SortableList",
     "WinBox": "WinBox",
-    "Player": "Player"
+    "Player": "Player",
+    "RDKit": "RDKit"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -6837,5 +6838,11 @@
     "AttributeSrc": "Frame load url",
     "AttributeData": "Data passed",
     "AttributeOnPostDataAsync": "Passed back data"
+  },
+  "BootstrapBlazor.Server.Components.Samples.RDKits": {
+    "RDKitTitle": "RDKit",
+    "RDKitDescription": "A powerful cheminformatics and molecule rendering toolbelt for Blazor, Powered by RDKit",
+    "RDKitNormalTitle": "Basic usage",
+    "RDKitNormalIntro": "Set the molecular formula through <code>Value</code> and draw the component"
   }
 }

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4778,7 +4778,8 @@
     "DrawerService": "抽屉服务 DrawerService",
     "SortableList": "拖拽组件 SortableList",
     "WinBox": "窗口 WinBox",
-    "Player": "播放器 Player"
+    "Player": "播放器 Player",
+    "RDKit": "分子图组件 RDKit"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -6837,5 +6838,11 @@
     "AttributeSrc": "Frame 加载网页路径",
     "AttributeData": "传递的数据",
     "AttributeOnPostDataAsync": "Frame 加载页面传递过来的数据"
+  },
+  "BootstrapBlazor.Server.Components.Samples.RDKits": {
+    "RDKitTitle": "分子图组件",
+    "RDKitDescription": "RDKit 是一个开源的化学信息学工具包，用于分子建模和化学信息学",
+    "RDKitNormalTitle": "基础用法",
+    "RDKitNormalIntro": "通过 <code>Value</code> 设置分子式，组件画图"
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -220,7 +220,8 @@
     "barcode-generator": "BarcodeGenerators",
     "sortable-list": "SortableLists",
     "win-box": "WinBoxes",
-    "player": "Players"
+    "player": "Players",
+    "rdkit": "Rdkits"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -416,21 +416,24 @@ const setExcelKeyboardListener = table => {
                     break;
                 }
             }
-        } else if (keyCode === KeyCodes.RIGHT_ARROW) {
+        }
+        else if (keyCode === KeyCodes.RIGHT_ARROW) {
             while (++index < cells.length) {
                 if (activeCell(cells, index)) {
                     break;
                 }
             }
-        } else if (keyCode === KeyCodes.UP_ARROW) {
-            cells = tr.previousElementSibling.children;
+        }
+        else if (keyCode === KeyCodes.UP_ARROW) {
+            cells = tr.previousElementSibling?.children;
             while (index < cells.length) {
                 if (activeCell(cells, index)) {
                     break;
                 }
             }
-        } else if (keyCode === KeyCodes.DOWN_ARROW) {
-            cells = tr.nextElementSibling.children;
+        }
+        else if (keyCode === KeyCodes.DOWN_ARROW) {
+            cells = tr.nextElementSibling?.children;
             while (index < cells.length) {
                 if (activeCell(cells, index)) {
                     break;