Skip to content

Commit de6c9b6

Browse files
ArgoZhangArgoZhang
authored
feat(ColorPicker): support IsSupportOpacity toggle (#4423)
* doc: 增加排序功能 * chore: 更新依赖包 * chore: 精简配置文件 * feat: 支持动态切换值 * doc: 更新示例 * test: 更新单元测试
1 parent 17f93f6 commit de6c9b6

File tree

10 files changed

+127
-80
lines changed

10 files changed

+127
-80
lines changed

‎src/BootstrapBlazor.Server/Components/Pages/Online.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ private void BuildContext()
8989
{
9090
_table.Rows.Clear();
9191
var rows = ConnectionService.Connections.Sort(["ConnectionTime"]);
92-
foreach (var item in ConnectionService.Connections)
92+
foreach (var item in rows)
9393
{
9494
_table.Rows.Add(
9595
item.Id,

‎src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,17 @@
4747
</DemoBlock>
4848

4949
<DemoBlock Title="@Localizer["IsSupportOpacityTitle"]" Introduction="@Localizer["IsSupportOpacityIntro"]" Name="IsSupportOpacity">
50-
<Switch @bind-Value="_opacityDisabled"></Switch>
51-
<ColorPicker @bind-Value="@_opacityValue" IsSupportOpacity="true" IsDisabled="_opacityDisabled" />
50+
<section ignore>
51+
<div class="row form-inline">
52+
<div class="col-12 col-sm-6">
53+
<Switch @bind-Value="_opacityIsSupport" DisplayText="SupportOpacity" ShowLabel="true"></Switch>
54+
</div>
55+
<div class="col-12 col-sm-6">
56+
<Switch @bind-Value="_opacityIsDisabled" DisplayText="Disabled" ShowLabel="true"></Switch>
57+
</div>
58+
</div>
59+
</section>
60+
<ColorPicker @bind-Value="@_opacityValue" IsSupportOpacity="_opacityIsSupport" IsDisabled="_opacityIsDisabled" />
5261
</DemoBlock>
5362

5463
<AttributeTable Items="@GetAttributes()" />

‎src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor.cs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ public partial class ColorPickers
2020

2121
private string _opacityValue = "#dd0324";
2222

23-
private bool _opacityDisabled = false;
23+
private bool _opacityIsDisabled = false;
24+
25+
private bool _opacityIsSupport = true;
2426

2527
[NotNull]
2628
private ConsoleLogger? NormalLogger { get; set; }

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,32 @@
55
</PropertyGroup>
66

77
<ItemGroup Condition="'$(TargetFramework)' == 'net6.0'">
8-
<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="6.0.0" />
9-
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.0" />
10-
<PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="6.0.0" />
11-
<PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="6.0.0" />
12-
<PackageReference Include="Microsoft.Extensions.Http" Version="6.0.0" />
13-
<PackageReference Include="Microsoft.Extensions.Localization" Version="6.0.0" />
14-
<PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="6.0.0" />
8+
<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="$(NET6Version)" />
9+
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="$(NET6Version)" />
10+
<PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="$(NET6Version)" />
11+
<PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="$(NET6Version)" />
12+
<PackageReference Include="Microsoft.Extensions.Http" Version="$(NET6Version)" />
13+
<PackageReference Include="Microsoft.Extensions.Localization" Version="$(NET6Version)" />
14+
<PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="$(NET6Version)" />
1515
</ItemGroup>
1616

1717
<ItemGroup Condition="'$(TargetFramework)' == 'net7.0'">
18-
<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="7.0.0" />
19-
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.0" />
20-
<PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="7.0.0" />
21-
<PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="7.0.0" />
22-
<PackageReference Include="Microsoft.Extensions.Http" Version="7.0.0" />
23-
<PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0" />
24-
<PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="7.0.0" />
18+
<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="$(NET7Version)" />
19+
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="$(NET7Version)" />
20+
<PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="$(NET7Version)" />
21+
<PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="$(NET7Version)" />
22+
<PackageReference Include="Microsoft.Extensions.Http" Version="$(NET7Version)" />
23+
<PackageReference Include="Microsoft.Extensions.Localization" Version="$(NET7Version)" />
24+
<PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="$(NET7Version)" />
2525
</ItemGroup>
2626

2727
<ItemGroup Condition="'$(TargetFramework)' == 'net8.0'">
28-
<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="8.0.0" />
29-
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
30-
<PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="8.0.0" />
31-
<PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="8.0.0" />
32-
<PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
33-
<PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.0" />
28+
<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="$(NET8Version)" />
29+
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="$(NET8Version)" />
30+
<PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="$(NET8Version)" />
31+
<PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="$(NET8Version)" />
32+
<PackageReference Include="Microsoft.Extensions.Http" Version="$(NET8Version)" />
33+
<PackageReference Include="Microsoft.Extensions.Localization" Version="$(NET8Version)" />
3434
</ItemGroup>
3535

3636
<ItemGroup>

‎src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616
else
1717
{
18-
<input @attributes="@AdditionalAttributes" type="color" class="form-control form-control-color" disabled="@Disabled" value="@CurrentValueAsString" @onchange="EventCallback.Factory.CreateBinder<string>(this, async v => await Setter(v), CurrentValueAsString)" />
18+
<input @attributes="@AdditionalAttributes" type="color" id="@Id" class="form-control form-control-color" disabled="@Disabled" value="@CurrentValueAsString" @onchange="EventCallback.Factory.CreateBinder<string>(this, async v => await Setter(v), CurrentValueAsString)" />
1919
}
2020

2121
@if (Template != null)

‎src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ public partial class ColorPicker
3838

3939
private string? _formattedValueString;
4040

41+
private bool _originalSupportOpacityValue;
42+
43+
private bool _originalIsDisabledValue;
44+
4145
/// <summary>
4246
/// <inheritdoc/>
4347
/// </summary>
@@ -57,12 +61,17 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
5761
{
5862
await base.OnAfterRenderAsync(firstRender);
5963

60-
if (!firstRender)
64+
if (firstRender)
65+
{
66+
_originalSupportOpacityValue = IsSupportOpacity;
67+
_originalIsDisabledValue = IsDisabled;
68+
}
69+
70+
if (_originalSupportOpacityValue != IsSupportOpacity || _originalIsDisabledValue != IsDisabled)
6171
{
62-
if (IsSupportOpacity)
63-
{
64-
await InvokeVoidAsync("update", Id, new { Value, IsDisabled });
65-
}
72+
_originalSupportOpacityValue = IsSupportOpacity;
73+
_originalIsDisabledValue = IsDisabled;
74+
await InvokeVoidAsync("update", Id, new { IsSupportOpacity, Value, Disabled = IsDisabled, Lang = CultureInfo.CurrentUICulture.Name });
6675
}
6776
}
6877

‎src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.js‎

Lines changed: 57 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,64 @@ import { addLink } from "../../modules/utility.js"
33
import Data from "../../modules/data.js"
44

55
export async function init(id, invoke, options) {
6+
const obj = { invoke, pickr: null };
7+
Data.set(id, obj);
8+
await getOrCreatePickr(id, obj, options);
9+
}
10+
11+
export async function update(id, options) {
12+
const obj = Data.get(id);
13+
await getOrCreatePickr(id, obj, options);
14+
}
15+
16+
export function dispose(id) {
17+
const data = Data.get(id);
18+
Data.remove(id);
19+
if (data) {
20+
data.pickr.destroyAndRemove();
21+
}
22+
}
23+
24+
const getOrCreatePickr = async (id, picker, options) => {
625
const { isSupportOpacity } = options;
26+
727
if (isSupportOpacity === true) {
828
await addLink("./_content/BootstrapBlazor/css/nano.min.css");
929

10-
const el = document.getElementById(id);
11-
const config = getOptions(el, options)
12-
const pickr = Pickr.create(config);
30+
const { invoke, pickr } = picker;
31+
if (pickr) {
32+
const { value, disabled } = options;
33+
const original = formatColorString(pickr.getColor());
34+
if (original !== value) {
35+
pickr.setColor(value, true);
36+
}
37+
if (pickr.options.disabled !== disabled) {
38+
if (disabled) {
39+
pickr.disable();
40+
}
41+
else {
42+
pickr.enable();
43+
}
44+
}
45+
}
46+
else {
47+
const el = document.getElementById(id);
48+
const config = getOptions(el, options)
49+
const pickr = Pickr.create(config);
1350

14-
Data.set(id, { pickr });
51+
pickr.on('save', (color, instance) => {
52+
instance.hide();
53+
invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
54+
}).on('swatchselect', color => {
55+
invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
56+
});
1557

16-
pickr.on('save', (color, instance) => {
17-
instance.hide();
18-
invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
19-
}).on('swatchselect', color => {
20-
invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
21-
});
58+
picker.pickr = pickr;
59+
}
60+
}
61+
else if (picker.pickr) {
62+
picker.pickr.destroyAndRemove();
63+
picker.pickr = null;
2264
}
2365
}
2466

@@ -39,6 +81,11 @@ const formatColorString = color => {
3981
const formatHexString = hex => Math.round(hex).toString(16).padStart(2, '0');
4082

4183
const getOptions = (el, options) => {
84+
delete options.isSupportOpacity;
85+
if (options.value) {
86+
options.default = options.value;
87+
delete options.value;
88+
}
4289
const config = {
4390
el,
4491
theme: 'nano',
@@ -77,31 +124,3 @@ const getOptions = (el, options) => {
77124
}
78125
return config;
79126
}
80-
81-
export function update(id, options) {
82-
const data = Data.get(id);
83-
if (data) {
84-
const { value, isDisabled } = options;
85-
const { pickr } = data;
86-
const original = formatColorString(pickr.getColor());
87-
if (original !== value) {
88-
pickr.setColor(value, true);
89-
}
90-
if (pickr.options.disabled !== isDisabled) {
91-
if (isDisabled) {
92-
pickr.disable();
93-
}
94-
else {
95-
pickr.enable();
96-
}
97-
}
98-
}
99-
}
100-
101-
export function dispose(id) {
102-
const data = Data.get(id);
103-
Data.remove(id);
104-
if (data) {
105-
data.pickr.destroyAndRemove();
106-
}
107-
}

‎src/BootstrapBlazor/Directory.Build.props‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<Project>
22

33
<Import Project="..\Directory.Build.props" />
4-
<Import Project="..\Frameworks.props" />
54
<Import Project="..\Logo.props" />
65
<Import Project="..\Bundle.props" />
76
<Import Project="..\SourceLink.targets" />
@@ -14,12 +13,18 @@
1413
<PackageReleaseNotes>https://github.com/dotnetcore/BootstrapBlazor/releases?wt.mc_id=DT-MVP-5004174</PackageReleaseNotes>
1514
</PropertyGroup>
1615

17-
<ItemGroup>
18-
<None Include="readme.md" Pack="true" PackagePath="" />
19-
</ItemGroup>
16+
<PropertyGroup>
17+
<TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
18+
</PropertyGroup>
2019

2120
<PropertyGroup>
22-
<NoWarn>NU1902;NU1903;CS8002</NoWarn>
21+
<NET6Version>6.0.*</NET6Version>
22+
<NET7Version>7.0.*</NET7Version>
23+
<NET8Version>8.0</NET8Version>
2324
</PropertyGroup>
2425

26+
<ItemGroup>
27+
<None Include="readme.md" Pack="true" PackagePath="" />
28+
</ItemGroup>
29+
2530
</Project>

‎src/Frameworks.props‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎test/UnitTest/Components/ColorPickerTest.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,5 +64,15 @@ public async Task IsSupportOpacity_Ok()
6464
Assert.Equal("#123456", cut.Instance.Value);
6565

6666
await cut.InvokeAsync(() => cut.Instance.SetValue("#333333"));
67+
68+
cut.SetParametersAndRender(pb =>
69+
{
70+
pb.Add(a => a.IsSupportOpacity, false);
71+
});
72+
73+
cut.SetParametersAndRender(pb =>
74+
{
75+
pb.Add(a => a.IsDisabled, true);
76+
});
6777
}
6878
}

0 commit comments

Comments
 (0)