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

* feat: 支持手动更新值逻辑 * style: 值自动转化为大写样式 * test: 更新单元测试 * feat: 支持禁用状态切换 * style: 增加禁用样式 * perf: 优化性能 * doc: 更新示例 * test: 更新单元测试 * doc: 更新本地化资源文件 * doc: 更新文档资源文件 * chore: bump version 8.9.2-beta01
2024-11-29 18:49:08 +08:00 · 2024-09-09 12:13:30 +08:00 · 2024-09-09 12:13:30 +08:00 · 678a39386b
commit 678a39386b
parent 11d9d1a0a4
9 changed files with 80 additions and 13 deletions
--- 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()" />
--- 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;
    }
--- 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": {
--- 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": {
--- 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'">
--- a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs
+++ b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs
@ -49,8 +49,26 @@ public partial class ColorPicker
    /// <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 @@ public partial class ColorPicker
    public Task OnColorChanged(string value)
    {
        CurrentValueAsString = value;
-        StateHasChanged();
+        if (!ValueChanged.HasDelegate)
+        {
+            StateHasChanged();
+        }
        return Task.CompletedTask;
    }
 }
--- 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);
--- 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;
    }
 }

--- a/test/UnitTest/Components/ColorPickerTest.cs
+++ b/test/UnitTest/Components/ColorPickerTest.cs
@ -62,5 +62,7 @@ public class ColorPickerTest : BootstrapBlazorTestBase

        await cut.InvokeAsync(() => cut.Instance.OnColorChanged("#123456"));
        Assert.Equal("#123456", cut.Instance.Value);
+
+        await cut.InvokeAsync(() => cut.Instance.SetValue("#333333"));
    }
 }