Add feature to disable the Dropdown (#378)

* Add feature to disable Dropdown #373
vikramlearning · Sep 23, 2023 · 30eb31e · 30eb31e
1 parent d4f37af
commit 30eb31e
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 64 deletions.
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/DropdownDocumentation.razor
@@ -56,9 +56,13 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Disabled" PageUrl="@pageUrl" HashTagName="disabled" />
 <div class="mb-3">
-    To style <b>DropdownItem</b> as disabled, add the <code>Disabled="true"</code> parameter to the <b>DropdownItem</b> element in the <b>DropdownMenu</b> component.
+    To disable the dropdown, set the <b>Disabled</b> parameter to <b>true</b> on the <b>Dropdown</b> component.
 </div>
-<Demo Type="typeof(Dropdown_Demo_07_Disabled)" Tabs="false" />
+<Demo Type="typeof(Dropdown_Demo_07_A_Disabled)" Tabs="false" />
+<div class="mb-3">
+    To style a dropdown item as disabled, set the <b>Disabled</b> parameter to <b>true</b> on the <b>DropdownItem</b> element in the <b>DropdownMenu</b> component.
+</div>
+<Demo Type="typeof(Dropdown_Demo_07_B_Disabled)" Tabs="false" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Menu position" PageUrl="@pageUrl" HashTagName="menu-position" />
 <div class="mb-3">

diff --git a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor
@@ -1,15 +1,15 @@
 <div class="d-flex gap-2 mb-4">
-    <Dropdown>
-        <DropdownToggleButton Color="ButtonColor.Secondary" Size="Size.Large">Large button</DropdownToggleButton>
+    <Dropdown Size="Size.Large">
+        <DropdownToggleButton Color="ButtonColor.Secondary">Large button</DropdownToggleButton>
         <DropdownMenu>
             <DropdownItem Size="Size.Large" To="#" Type="ButtonType.Link">Action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
         </DropdownMenu>
     </Dropdown>
-    <Dropdown Split="true">
-        <DropdownActionButton Color="ButtonColor.Secondary" Size="Size.Large">Large split button</DropdownActionButton>
-        <DropdownToggleButton Color="ButtonColor.Secondary" Size="Size.Large" />
+    <Dropdown Size="Size.Large" Split="true">
+        <DropdownActionButton Color="ButtonColor.Secondary">Large split button</DropdownActionButton>
+        <DropdownToggleButton Color="ButtonColor.Secondary" />
         <DropdownMenu>
             <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>

diff --git a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor
@@ -1,15 +1,15 @@
 <div class="d-flex gap-2 mb-4">
-    <Dropdown>
-        <DropdownToggleButton Color="ButtonColor.Secondary" Size="Size.Small">Small button</DropdownToggleButton>
+    <Dropdown Size="Size.Small">
+        <DropdownToggleButton Color="ButtonColor.Secondary">Small button</DropdownToggleButton>
         <DropdownMenu>
             <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
         </DropdownMenu>
     </Dropdown>
-    <Dropdown Split="true">
-        <DropdownActionButton Color="ButtonColor.Secondary" Size="Size.Small">Small split button</DropdownActionButton>
-        <DropdownToggleButton Color="ButtonColor.Secondary" Size="Size.Small" />
+    <Dropdown Size="Size.Small" Split="true">
+        <DropdownActionButton Color="ButtonColor.Secondary">Small split button</DropdownActionButton>
+        <DropdownToggleButton Color="ButtonColor.Secondary" />
         <DropdownMenu>
             <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
             <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>

diff --git a/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_A_Disabled.razor b/BlazorBootstrap.Demo.RCL/Pages/Dropdowns/Dropdown_Demo_07_A_Disabled.razor
@@ -0,0 +1,19 @@
+<Dropdown Disabled="@isDropdownDisabled">
+    <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
+    <DropdownMenu>
+        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
+        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
+        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
+    </DropdownMenu>
+</Dropdown>
+
+<div class="mt-3">
+    <Button Color="ButtonColor.Primary" Size="Size.Small" @onclick="EnableDropdown">Enable</Button>
+    <Button Color="ButtonColor.Danger" Size="Size.Small" @onclick="DisableDropdown">Disable</Button>
+</div>
+@code
+{
+    private bool isDropdownDisabled = true;
+    private void EnableDropdown() => isDropdownDisabled = false;
+    private void DisableDropdown() => isDropdownDisabled = true;
+}
diff --git a/...Dropdowns/Dropdown_Demo_07_Disabled.razor → ...opdowns/Dropdown_Demo_07_B_Disabled.razor b/...Dropdowns/Dropdown_Demo_07_Disabled.razor → ...opdowns/Dropdown_Demo_07_B_Disabled.razor
diff --git a/blazorbootstrap/Components/Dropdown/Dropdown.razor b/blazorbootstrap/Components/Dropdown/Dropdown.razor
@@ -1,12 +1,16 @@
 @namespace BlazorBootstrap
 @inherits BlazorBootstrapComponentBase
 
-<CascadingValue IsFixed="true" Value="@Split" Name="Split">
-    <CascadingValue IsFixed="true" Value="@AutoClose" Name="AutoClose">
-        <CascadingValue IsFixed="true" Value="@AutoCloseBehavior" Name="AutoCloseBehavior">
-            <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
-                @ChildContent
-            </div>
+<CascadingValue IsFixed="true" Value="@AutoClose" Name="AutoClose">
+    <CascadingValue IsFixed="true" Value="@AutoCloseBehavior" Name="AutoCloseBehavior">
+        <CascadingValue IsFixed="true" Value="@Disabled" Name="Disabled">
+            <CascadingValue IsFixed="true" Value="@Size" Name="Size">
+                <CascadingValue IsFixed="true" Value="@Split" Name="Split">
+                    <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+                        @ChildContent
+                    </div>
+                </CascadingValue>
+            </CascadingValue>
         </CascadingValue>
     </CascadingValue>
-</CascadingValue>
+</CascadingValue>
diff --git a/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs b/blazorbootstrap/Components/Dropdown/Dropdown.razor.cs
@@ -102,11 +102,17 @@ protected override void OnInitialized()
     public RenderFragment ChildContent { get; set; } = default!;
 
     /// <summary>
-    /// Gets or sets the dropdown direction.
+    /// Gets or sets the direction of the dropdown menu.
     /// </summary>
     [Parameter]
     public DropdownDirection Direction { get; set; } = DropdownDirection.Dropdown;
 
+    /// <summary>
+    /// Gets or sets whether the dropdown menu is disabled.
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; }
+
     /// <summary>
     /// This event is fired when an dropdown element has been hidden from the user (will wait for CSS transitions to complete).
     /// </summary>
@@ -132,6 +138,12 @@ protected override void OnInitialized()
     [Parameter]
     public EventCallback OnShown { get; set; }
 
+    /// <summary>
+    /// Gets or sets the size of the <see cref="Dropdown" />.
+    /// </summary>
+    [Parameter]
+    public Size Size { get; set; }
+
     /// <summary>
     /// Gets or sets the toggle button split behavior.
     /// </summary>

diff --git a/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor b/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor
@@ -1,6 +1,11 @@
 @namespace BlazorBootstrap
 @inherits BlazorBootstrapComponentBase
 
-<button @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+<button @ref="@ElementRef"
+        @attributes="@Attributes"
+        class="@ClassNames"
+        disabled="@Disabled"
+        id="@ElementId"
+        style="@StyleNames">
     @ChildContent
 </button>
diff --git a/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor.cs b/blazorbootstrap/Components/Dropdown/DropdownActionButton.razor.cs
@@ -60,9 +60,15 @@ public ButtonColor Color
     }
 
     /// <summary>
-    /// Changes the size of a button.
+    /// Gets or sets the disabled.
     /// </summary>
-    [Parameter]
+    [CascadingParameter(Name = "Disabled")]
+    public bool Disabled { get; set; }
+
+    /// <summary>
+    /// Gets or sets the size of the <see cref="DropdownActionButton" />.
+    /// </summary>
+    [CascadingParameter(Name = "Size")]
     public Size Size
     {
         get => size;

diff --git a/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor b/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor
@@ -1,6 +1,11 @@
 @namespace BlazorBootstrap
 @inherits BlazorBootstrapComponentBase
 
-<button @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+<button @ref="@ElementRef"
+        @attributes="@Attributes"
+        class="@ClassNames"
+        disabled="@Disabled"
+        id="@ElementId"
+        style="@StyleNames">
     @ChildContent
 </button>
diff --git a/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor.cs b/blazorbootstrap/Components/Dropdown/DropdownToggleButton.razor.cs
@@ -99,9 +99,15 @@ public ButtonColor Color
     }
 
     /// <summary>
-    /// Gets or sets the button size.
+    /// Gets or sets the disabled.
     /// </summary>
-    [Parameter]
+    [CascadingParameter(Name = "Disabled")]
+    public bool Disabled { get; set; }
+
+    /// <summary>
+    /// Gets or sets the size of the <see cref="DropdownToggleButton" />.
+    /// </summary>
+    [CascadingParameter(Name = "Size")]
     public Size Size
     {
         get => size;