feat(ColorPicker): support IsDiabled parameter (#4231)

* feat: 支持手动更新值逻辑 * style: 值自动转化为大写样式 * test: 更新单元测试 * feat: 支持禁用状态切换 * style: 增加禁用样式 * perf: 优化性能 * doc: 更新示例 * test: 更新单元测试 * doc: 更新本地化资源文件 * doc: 更新文档资源文件 * chore: bump version 8.9.2-beta01
dotnetcore · Sep 9, 2024 · 678a393 · 678a393
1 parent 11d9d1a
commit 678a393
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 13 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor b/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor
@@ -5,10 +5,6 @@
 
 <h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
- <ColorPicker Value="@Value" OnValueChanged="@OnColorChanged" IsSupportOpacity="true" />
-</DemoBlock>
-
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
  <ColorPicker Value="@Value" OnValueChanged="@OnColorChanged" />
  <ConsoleLogger @ref="NormalLogger" />
@@ -50,4 +46,9 @@
  </ValidateForm>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["IsSupportOpacityTitle"]" Introduction="@Localizer["IsSupportOpacityIntro"]" Name="IsSupportOpacity">
+ <Switch @bind-Value="_opacityDisabled"></Switch>
+ <ColorPicker @bind-Value="@_opacityValue" IsSupportOpacity="true" IsDisabled="_opacityDisabled" />
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor.cs
@@ -18,11 +18,16 @@ public partial class ColorPickers
 
  private string Value { get; set; } = "#FFFFFF";
 
+ private string _opacityValue = "#dd0324";
+
+ private bool _opacityDisabled = false;
+
  [NotNull]
  private ConsoleLogger? NormalLogger { get; set; }
 
  private Task OnColorChanged(string color)
  {
+ Value = color;
  NormalLogger.Log($"Selected color: {color}");
  return Task.CompletedTask;
  }

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2479,8 +2479,12 @@
  "BindValueIntro": "Set the color value by setting the <code>Value</code> property",
  "DisabledTitle": "Disabled",
  "DisabledIntro": "Disable this component by setting the <code>IsDisabled</code> property",
+ "FormatterTitle": "Formatter",
+ "FormatterIntro": "Set the display value by setting the <code>Formatter</code> callback method",
  "ValidateFormTitle": "Used in the verification form",
  "ValidateFormIntro": "Built in <code>ValidateForm</code> to use",
+ "IsSupportOpacityTitle": "Support Opacity",
+ "IsSupportOpacityIntro": "Enable transparency support by setting <code>IsSupportOpacity=\"true\"</code>",
  "Event1": "Color change callback delegate method"
  },
  "BootstrapBlazor.Server.Components.Samples.DateTimePickers": {

diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -2479,8 +2479,12 @@
  "BindValueIntro": "通过设置 <code>Value</code> 属性设定颜色值",
  "DisabledTitle": "禁用",
  "DisabledIntro": "通过设置 <code>IsDisabled</code> 属性禁用此组件",
+ "FormatterTitle": "格式化",
+ "FormatterIntro": "通过设置 <code>Formatter</code> 回调方法设置显示值",
  "ValidateFormTitle": "验证表单中使用",
  "ValidateFormIntro": "内置于 <code>ValidateForm</code> 中使用",
+ "IsSupportOpacityTitle": "支持透明度",
+ "IsSupportOpacityIntro": "通过设置 <code>IsSupportOpacity=\"true\"</code> 开启透明度支持",
  "Event1": "颜色改变回调委托方法"
  },
  "BootstrapBlazor.Server.Components.Samples.DateTimePickers": {

diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
  <PropertyGroup>
- <Version>8.9.1</Version>
+ <Version>8.9.2-beta01</Version>
  </PropertyGroup>
 
  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs
@@ -49,8 +49,26 @@ protected override async Task OnParametersSetAsync()
  /// <summary>
  /// <inheritdoc/>
  /// </summary>
+ /// <param name="firstRender"></param>
  /// <returns></returns>
- protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { IsSupportOpacity, Value });
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ await base.OnAfterRenderAsync(firstRender);
+
+ if (!firstRender)
+ {
+ if (IsSupportOpacity)
+ {
+ await InvokeVoidAsync("update", Id, new { Value, IsDisabled });
+ }
+ }
+ }
+
+ /// <summary>
+ /// <inheritdoc/>
+ /// </summary>
+ /// <returns></returns>
+ protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { IsSupportOpacity, Value, IsDisabled });
 
  private async Task Setter(string v)
  {
@@ -77,7 +95,10 @@ private async Task FormatValue()
  public Task OnColorChanged(string value)
  {
  CurrentValueAsString = value;
- StateHasChanged();
+ if (!ValueChanged.HasDelegate)
+ {
+ StateHasChanged();
+ }
  return Task.CompletedTask;
  }
 }
diff --git a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.js b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.js
@@ -3,14 +3,16 @@ import { addLink } from "../../modules/utility.js"
 import Data from "../../modules/data.js"
 
 export async function init(id, invoke, options) {
- if (options.isSupportOpacity === true) {
+ const { isSupportOpacity, value, isDisabled } = options;
+ if (isSupportOpacity === true) {
  await addLink("./_content/BootstrapBlazor/css/nano.min.css");
 
  const el = document.getElementById(id);
  const pickr = Pickr.create({
  el,
  theme: 'nano',
- default: options.value,
+ default: value,
+ disabled: isDisabled,
  useAsButton: true,
  swatches: [
  'rgba(244, 67, 54, 1)',
@@ -65,6 +67,26 @@ const formatColorString = color => {
 
 const formatHexString = hex => Math.round(hex).toString(16).padStart(2, '0');
 
+export function update(id, options) {
+ const data = Data.get(id);
+ if (data) {
+ const { value, isDisabled } = options;
+ const { pickr } = data;
+ const original = formatColorString(pickr.getColor());
+ if (original !== value) {
+ pickr.setColor(value, true);
+ }
+ if (pickr.options.disabled !== isDisabled) {
+ if (isDisabled) {
+ pickr.disable();
+ }
+ else {
+ pickr.enable();
+ }
+ }
+ }
+}
+
 export function dispose(id) {
  const data = Data.get(id);
  data.remove(id);

diff --git a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.scss b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.scss
@@ -1,12 +1,20 @@
 .bb-color-picker {
  .form-control-color {
  max-width: 3rem;
+
+ &.disabled {
+ background-color: var(--bs-secondary-bg);
+ }
+
+ .bb-color-picker-body {
+ height: 100%;
+ background-color: var(--bb-color-pick-val);
+ border-radius: var(--bs-border-radius);
+ }
  }
 
- .bb-color-picker-body {
- height: 100%;
- background-color: var(--bb-color-pick-val);
- border-radius: var(--bs-border-radius);
+ input[type="text"] {
+ text-transform: uppercase;
  }
 }
 

diff --git a/test/UnitTest/Components/ColorPickerTest.cs b/test/UnitTest/Components/ColorPickerTest.cs
@@ -62,5 +62,7 @@ public async Task IsSupportOpacity_Ok()
 
  await cut.InvokeAsync(() => cut.Instance.OnColorChanged("#123456"));
  Assert.Equal("#123456", cut.Instance.Value);
+
+ await cut.InvokeAsync(() => cut.Instance.SetValue("#333333"));
  }
 }