-
-
Notifications
You must be signed in to change notification settings - Fork 365
feat(UniverSheet): add UniverSheet component #5463
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
+310
−6
Merged
Changes from all commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
5c000e5
feat: 增加 UniverSheet 菜单
ArgoZhang 4f14546
doc: 增加示例组件
ArgoZhang aea902e
doc: 增加多语言支持
ArgoZhang 21ed476
doc: 增加插件示例
ArgoZhang f458c50
chore: 增加源码映射
ArgoZhang cc0e7d7
chore: 增加 UniverSheet 工程
ArgoZhang 082aad2
feat: 交互测试
zhaijunlei955 d8978fe
refactor: 增加测试逻辑
ArgoZhang fa8e1c5
refactor: 更改方法名
ArgoZhang e0eb53b
refactor: 数据服务名称参数化
ArgoZhang 6d1e3c7
refactor: 修改案例
zhaijunlei955 9d0b0d4
refactor: 更改 report 目录为 univer-sheet
ArgoZhang 09edb1d
refactor: 精简代码
ArgoZhang d651cdb
refactor: 增加数据服务模块
ArgoZhang 620ca51
refactor: 更改方法名称
ArgoZhang 55d448b
chore: 更新示例
ArgoZhang 461c432
refactor: 增加测试数据
ArgoZhang d9c6039
doc: 增加多语言资源文件
ArgoZhang 1201993
doc: 更新推送数据示例
ArgoZhang b77e1a6
doc: 更新示例
ArgoZhang 08132dc
doc: 增加多语言资源文件
ArgoZhang 8aafccc
chore: 更新依赖
ArgoZhang 537aea1
Merge branch 'main' into feat-sheet
ArgoZhang File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
src/BootstrapBlazor.Server/Components/Samples/UniverSheets.razor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| @page "/univer-sheet" | ||
| @inherits WebSiteModuleComponentBase | ||
| @attribute [JSModuleAutoLoader("Samples/UniverSheets.razor.js")] | ||
|
|
||
| <h3>@Localizer["UniverSheetTitle"]</h3> | ||
|
|
||
| <h4>@Localizer["UniverSheetIntro"]</h4> | ||
|
|
||
| <PackageTips Name="BootstrapBlazor.UniverSheet" /> | ||
|
|
||
| <DemoBlock Title="@Localizer["NormalTitle"]" | ||
| Introduction="@Localizer["NormalIntro"]" | ||
| Name="Normal"> | ||
| <section ignore> | ||
| <p>@((MarkupString)Localizer["NormalDesc1"].Value)</p> | ||
| <Button OnClickWithoutRender="OnPushExcelData" Text="@Localizer["PushButtonText"]"></Button> | ||
| </section> | ||
| <div class="bb-sheet-demo"> | ||
| <UniverSheet @ref="_sheetExcel" OnReadyAsync="OnReadyAsync"></UniverSheet> | ||
| </div> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="@Localizer["PluginTitle"]" | ||
| Introduction="@Localizer["PluginIntro"]" | ||
| Name="Plugin"> | ||
| <section ignore> | ||
| <p>@((MarkupString)Localizer["NormalDesc2"].Value)</p> | ||
| <Button OnClickWithoutRender="OnPushPluginData" Text="@Localizer["PushButtonText"]"></Button> | ||
| </section> | ||
| <div class="bb-sheet-demo"> | ||
| <UniverSheet @ref="_sheetPlugin" Plugins="Plugins" OnPostDataAsync="OnPostDataAsync"></UniverSheet> | ||
| </div> | ||
| </DemoBlock> |
75 changes: 75 additions & 0 deletions
75
src/BootstrapBlazor.Server/Components/Samples/UniverSheets.razor.cs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| // 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> | ||
| /// UniverSheet 组件示例代码 | ||
| /// </summary> | ||
| public partial class UniverSheets | ||
| { | ||
| [Inject, NotNull] | ||
| private ToastService? ToastService { get; set; } | ||
|
|
||
| [Inject, NotNull] | ||
| private IStringLocalizer<UniverSheets>? Localizer { get; set; } | ||
|
|
||
| private readonly Dictionary<string, string> Plugins = new() | ||
| { | ||
| { "ReportPlugin", "univer-sheet/plugin.js" } | ||
| }; | ||
|
|
||
| private UniverSheet _sheetExcel = default!; | ||
|
|
||
| private UniverSheet _sheetPlugin = default!; | ||
|
|
||
| private async Task OnReadyAsync() => await ToastService.Information(Localizer["ToastOnReadyTitle"], Localizer["ToastOnReadyContent"]); | ||
|
|
||
| private static Task<UniverSheetData?> OnPostDataAsync(UniverSheetData data) | ||
| { | ||
| // 这里可以根据 data 的内容进行处理然后返回处理后的数据 | ||
| // 本例返回与时间相关的数据 | ||
| var result = new UniverSheetData() | ||
| { | ||
| MessageName = data.MessageName, | ||
| CommandName = data.CommandName, | ||
| Data = new | ||
| { | ||
| key = "datetime", | ||
| Value = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") | ||
| } | ||
| }; | ||
| return Task.FromResult<UniverSheetData?>(result); | ||
| } | ||
|
|
||
| private async Task OnPushExcelData() | ||
| { | ||
| await _sheetExcel.PushDataAsync(new UniverSheetData() | ||
| { | ||
| MessageName = "MessageName", | ||
| CommandName = "CommandName", | ||
| Data = new object[] | ||
| { | ||
| new object[] { "1", "2", "3", "4", "5" }, | ||
| new object[] { "1", "2", "3", "4", "5" }, | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| private async Task OnPushPluginData() | ||
| { | ||
| await _sheetPlugin.PushDataAsync(new UniverSheetData() | ||
| { | ||
| MessageName = "MessageName", | ||
| CommandName = "CommandName", | ||
| Data = new | ||
| { | ||
| Id = "1", | ||
| Name = "Test", | ||
| Value = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") | ||
| } | ||
| }); | ||
| } | ||
| } |
5 changes: 5 additions & 0 deletions
5
src/BootstrapBlazor.Server/Components/Samples/UniverSheets.razor.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .bb-sheet-demo { | ||
| height: 290px; | ||
| width: 100%; | ||
| border: 1px solid var(--bs-border-color); | ||
| } |
7 changes: 7 additions & 0 deletions
7
src/BootstrapBlazor.Server/Components/Samples/UniverSheets.razor.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export function init(id) { | ||
|
|
||
| } | ||
|
|
||
| export function dispose(id) { | ||
|
|
||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
117 changes: 117 additions & 0 deletions
117
src/BootstrapBlazor.Server/wwwroot/univer-sheet/controller.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import DataService from '../_content/BootstrapBlazor.UniverSheet/data-service.js' | ||
|
|
||
| const { Disposable, setDependencies, Injector, ICommandService, CommandType, UniverInstanceType } = UniverCore; | ||
| const { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup, ComponentManager, IMenuManagerService, MenuItemType, getMenuHiddenObservable } = UniverUi; | ||
|
|
||
| const GetDataOperation = { | ||
| id: 'report.operation.add-table', | ||
| type: CommandType.OPERATION, | ||
| handler: async (accessor) => { | ||
| const dataService = accessor.get(DataService.name); | ||
| const data = await dataService.getDataAsync({ | ||
| messageName: "getDataMessage", | ||
| commandName: "getDataCommand" | ||
| }); | ||
| if (data) { | ||
| const univerAPI = dataService.getUniverSheet().univerAPI; | ||
| const range = univerAPI.getActiveWorkbook().getActiveSheet().getRange(0, 0, 2, 1) | ||
| const defaultData = [ | ||
| [{ v: data.data.key }], | ||
| [{ v: data.data.value }] | ||
| ] | ||
| range.setValues(defaultData); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| function GetDataIcon() { | ||
| return React.createElement( | ||
| 'svg', | ||
| { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, | ||
| React.createElement( | ||
| 'path', | ||
| { fill: "currentColor", d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m.16 14a6.981 6.981 0 0 0-5.147 2.256A7.966 7.966 0 0 0 12 20a7.97 7.97 0 0 0 5.167-1.892A6.979 6.979 0 0 0 12.16 16M12 4a8 8 0 0 0-6.384 12.821A8.975 8.975 0 0 1 12.16 14a8.972 8.972 0 0 1 6.362 2.634A8 8 0 0 0 12 4m0 1a4 4 0 1 1 0 8a4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4a2 2 0 0 0 0-4" } | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| function ReportGetDataFactory(accessor) { | ||
| return { | ||
| id: GetDataOperation.id, | ||
| type: MenuItemType.BUTTON, | ||
| icon: 'GetDataIcon', | ||
| tooltip: '获取数据', | ||
| title: '获取数据', | ||
| hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET) | ||
| }; | ||
| } | ||
|
|
||
| export class ReportController extends Disposable { | ||
| constructor(_injector, _commandService, _menuManagerService, _componentManager) { | ||
| super(); | ||
|
|
||
| this._injector = _injector; | ||
| this._commandService = _commandService; | ||
| this._menuManagerService = _menuManagerService; | ||
| this._componentManager = _componentManager; | ||
|
|
||
| this._initCommands(); | ||
| this._registerComponents(); | ||
| this._initMenus(); | ||
| this._registerReceiveDataCallback(); | ||
| } | ||
|
|
||
| _registerReceiveDataCallback() { | ||
| const dataService = this._injector.get(DataService.name); | ||
| dataService.registerReceiveDataCallback(data => { | ||
| this.receiveData(data, dataService.getUniverSheet()); | ||
| }); | ||
| } | ||
|
|
||
| _initCommands() { | ||
| [GetDataOperation].forEach((c) => { | ||
| this.disposeWithMe(this._commandService.registerCommand(c)); | ||
| }); | ||
| } | ||
|
|
||
| _registerComponents() { | ||
| const componentMap = { | ||
| GetDataIcon, | ||
| } | ||
| Object.entries(componentMap).forEach((item) => { | ||
| this.disposeWithMe(this._componentManager.register(...item)); | ||
| }); | ||
|
|
||
| } | ||
|
|
||
| _initMenus() { | ||
| this._menuManagerService.mergeMenu({ | ||
| [RibbonStartGroup.HISTORY]: { | ||
| [GetDataOperation.id]: { | ||
| order: -1, | ||
| menuItemFactory: ReportGetDataFactory | ||
| }, | ||
| }, | ||
| [ContextMenuPosition.MAIN_AREA]: { | ||
| [ContextMenuGroup.DATA]: { | ||
| [GetDataOperation.id]: { | ||
| order: 0, | ||
| menuItemFactory: ReportGetDataFactory | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| receiveData(data, sheet) { | ||
| const { univerAPI } = sheet; | ||
| const range = univerAPI.getActiveWorkbook().getActiveSheet().getRange(0, 0, 2, 3) | ||
| const defaultData = [ | ||
| [{ v: 'Id' }, { v: 'Name' }, { v: 'Value' }], | ||
| [{ v: data.data.id }, { v: data.data.name }, { v: data.data.value }] | ||
| ] | ||
| range.setValues(defaultData); | ||
| } | ||
| } | ||
|
|
||
| setDependencies(ReportController, [Injector, ICommandService, IMenuManagerService, ComponentManager]); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import DataService from '../_content/BootstrapBlazor.UniverSheet/data-service.js' | ||
| import { ReportController } from './controller.js' | ||
|
|
||
| const { Plugin, Injector, setDependencies } = UniverCore; | ||
|
|
||
| // 定义插件类 | ||
| export class ReportPlugin extends Plugin { | ||
| static pluginName = 'ReportPlugin'; | ||
|
|
||
| constructor(_injector) { | ||
| super(); | ||
|
|
||
| this._injector = _injector; | ||
| } | ||
|
|
||
| onStarting() { | ||
| this._injector.add([ReportController]); | ||
| this._injector.add([DataService.name, { useClass: DataService }]) | ||
| } | ||
|
|
||
| onReady() { | ||
| this._injector.get(ReportController) | ||
| } | ||
|
|
||
| onRendered() { | ||
|
|
||
| } | ||
| } | ||
|
|
||
| // 设置依赖 | ||
| setDependencies(ReportPlugin, [Injector]); |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.