MudSplitter: Add 2-way bindable Dimension property (#90)

Yomodo · web-flow · commit 7d9b8a55ffe1 · 2023-01-13T14:55:36.000+03:00
* Added 2-way bindable Dimension property

* Changed bool? to bool
diff --git a/CodeBeam.MudExtensions/Components/Splitter/MudSplitter.razor b/CodeBeam.MudExtensions/Components/Splitter/MudSplitter.razor
@@ -2,7 +2,9 @@
 @inherits MudComponentBase
 
 <div class="@Classname" style="@Style">
-    <MudSlider @ref="_slider" ondblclick="@OnDoubleClick" Class="@SliderClassname" Style="overflow: hidden; z-index: 6" T="double" Min="0" Max="100" Step="@Sensitivity" ValueChanged="UpdateDimensions" Disabled="DisableSlide"/>
+    <MudSlider @ref="_slider" Value="@Dimension" ValueChanged="@UpdateDimension" ondblclick="@OnDoubleClick"
+               T="double" Min="0" Max="100" Step="@Sensitivity" Disabled="@(!EnableSlide)"
+               Class="@SliderClassname" Style="overflow: hidden; z-index: 6" />
 
     <div class="@ContentClassname" style="@StyleContent">
         @StartContent
@@ -13,7 +15,7 @@
 </div>
 
 <style>
-    @($".mud-splitter-generate-{_styleGuid} {{ grid-template-columns: {_firstContentDimension.ToInvariantString()}% {_secondContentDimension.ToInvariantString()}%; }}")
+    @($".mud-splitter-generate-{_styleGuid} {{ grid-template-columns: {Dimension.ToInvariantString()}% {(100 - Dimension).ToInvariantString()}%; }}")
 
     .mud-splitter-thumb-@(_styleGuid) ::-webkit-slider-thumb {
         @(Color == Color.Default ? "background-color: var(--mud-palette-action-default) !important;" : $"background-color: var(--mud-palette-{Color.ToDescriptionString()}) !important;") @(StyleBar)
diff --git a/CodeBeam.MudExtensions/Components/Splitter/MudSplitter.razor.cs b/CodeBeam.MudExtensions/Components/Splitter/MudSplitter.razor.cs
@@ -1,16 +1,7 @@
 ﻿using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Web;
 using MudBlazor;
-using MudBlazor.Components.Highlighter;
 using MudBlazor.Extensions;
 using MudBlazor.Utilities;
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using MudExtensions.Extensions;
-using static MudBlazor.CategoryTypes;
 
 namespace MudExtensions
 {
@@ -21,13 +12,13 @@ public partial class MudSplitter : MudComponentBase
         MudSlider<double> _slider;
 
         protected string Classname => new CssBuilder("mud-splitter")
-            .AddClass($"border-solid border-8 mud-border-{Color.ToDescriptionString()}", Bordered == true)
+            .AddClass($"border-solid border-2 mud-border-{Color.ToDescriptionString()}", Bordered == true)
             .AddClass($"mud-splitter-generate mud-splitter-generate-{_styleGuid}")
             .AddClass(Class)
             .Build();
 
         protected string ContentClassname => new CssBuilder($"mud-splitter-content mud-splitter-content-{_styleGuid} d-flex")
-            .AddClass("ma-2", !DisableMargin)
+            .AddClass("ma-2", EnableMargin)
             .AddClass(ClassContent)
             .Build();
 
@@ -40,24 +31,12 @@ public partial class MudSplitter : MudComponentBase
         [Parameter]
         public string ClassContent { get; set; }
 
-        string _height;
+        //string _height;
         /// <summary>
         /// The height of splitter.
         /// </summary>
         [Parameter]
-        public string Height 
-        { 
-            get => _height; 
-            set
-            {
-                if (value == _height)
-                {
-                    return;
-                }
-                _height = value;
-                UpdateDimensions().AndForgetExt();
-            }
-        }
+        public string Height { get; set; }
 
         /// <summary>
         /// The height of splitter.
@@ -81,25 +60,42 @@ public string Height
         /// The splitter bar's styles, seperated by space. All styles have to include !important and end with ';'
         /// </summary>
         [Parameter]
-        public string StyleBar { get; set; }
+        public string StyleBar { get; set; } = "width:2px !important;";
 
         /// <summary>
         /// The slide sensitivity that should between 0.01 and 10. Smaller values increase the smooth but reduce performance. Default is 0.1
         /// </summary>
         [Parameter]
         public double Sensitivity { get; set; } = 0.1d;
 
+        [Obsolete("DisableSlide is deprecated, please use property EnableSlide to set Slide.")]
+        [Parameter]
+        public bool DisableSlide
+        {
+            get { return !EnableSlide; }
+            set { EnableSlide = !value; }
+        }
         /// <summary>
-        /// If true, user cannot interact with splitter bar.
+        /// If true, user can interact with splitter bar.
+        /// Default is true.
         /// </summary>
         [Parameter]
-        public bool DisableSlide { get; set; }
+        public bool EnableSlide { get; set; } = true;
 
+        [Obsolete("DisableMargin is deprecated, please use property EnableMargin to set Margin.")]
+        [Parameter]
+        public bool DisableMargin
+        {
+            get { return !EnableMargin; }
+            set { EnableMargin = !value; }
+        }
         /// <summary>
-        /// Disables the default margin.
+        /// Enables the default margin.
+        /// Default is true.
         /// </summary>
         [Parameter]
-        public bool DisableMargin { get; set; }
+        public bool EnableMargin { get; set; } = true;
+
 
         ///// <summary>
         ///// If true, splitter bar goes vertical.
@@ -113,47 +109,44 @@ public string Height
         [Parameter]
         public RenderFragment EndContent { get; set; }
 
+
+        /// <summary>
+        /// The start content's percentage.
+        /// Default is 50.
+        /// </summary>
+        [Parameter]
+        public double Dimension { get; set; } = 50;
+
         [Parameter]
-        public EventCallback DimensionChanged { get; set; }
+        public EventCallback<double> DimensionChanged { get; set; }
 
         [Parameter]
         public EventCallback OnDoubleClicked { get; set; }
 
-      protected override async Task OnInitializedAsync()
+        protected override async Task OnInitializedAsync()
         {
             await base.OnInitializedAsync();
-            await UpdateDimensions();
+            await UpdateDimension(Dimension);
         }
 
-        double _firstContentDimension = 50;
-        double _secondContentDimension = 50;
-        protected async Task UpdateDimensions()
+        protected async Task UpdateDimension(double percentage)
         {
-            if (_slider == null)
-            {
-                return;
-            }
-            _firstContentDimension = _slider.Value;
-            _secondContentDimension = 100d - _firstContentDimension;
-            await DimensionChanged.InvokeAsync();
+            Dimension = percentage;
+            if (DimensionChanged.HasDelegate)
+                await DimensionChanged.InvokeAsync(percentage);
         }
 
-        public double GetStartContentPercentage() => _firstContentDimension;
-
         /// <summary>
         /// Updates the dimension with given the start content's percentage
         /// </summary>
         /// <param name="percentage"></param>
-        public async Task SetDimensions(double percentage)
-        {
-            _slider.Value = percentage;
-            await UpdateDimensions();
-        }
+        [Obsolete("SetDimensions is deprecated, please use property Dimension to set start content's percentage.")]
+        public Task SetDimensions(double percentage) => UpdateDimension(percentage);
 
         async Task OnDoubleClick()
         {
-           if (OnDoubleClicked.HasDelegate)
-              await OnDoubleClicked.InvokeAsync();
+            if (OnDoubleClicked.HasDelegate)
+                await OnDoubleClicked.InvokeAsync();
         }
     }
 }
diff --git a/ComponentViewer.Docs/Pages/Examples/SplitterExample1.razor b/ComponentViewer.Docs/Pages/Examples/SplitterExample1.razor
@@ -3,7 +3,11 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8">
-        <MudSplitter @ref="_splitter" Height="@_height" Color="_color" Bordered="_bordered" OnDoubleClicked="@OnDoubleClicked" DimensionChanged="DimensionChanged" DisableSlide="_disableSlide" DisableMargin="_disableMargin" Sensitivity="_sensitivity" Overlap="true">
+        <MudSplitter @ref="_splitter"
+                     @bind-Dimension="@_percentage"
+                     OnDoubleClicked="@OnDoubleClicked"
+                     EnableSlide="@_sliderEnabled" EnableMargin="@_marginEnabled" Sensitivity="_sensitivity"
+                     Height="@_height" Color="_color" Bordered="_borderedEnabled">
             <StartContent>
                 <MudText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</MudText>
             </StartContent>
@@ -16,42 +20,38 @@
 
     <MudItem xs="12" sm="4">
         <MudStack>
-            <MudTextField @bind-Value="_height" Variant="Variant.Outlined" Label="Height" Clearable="true" />
-            <MudSelect @bind-Value="_color" Variant="Variant.Outlined">
-                @foreach (Color col in Enum.GetValues<Color>())
-                {
-                    <MudSelectItem Value="col">@col.ToDescriptionString()</MudSelectItem>
-                }
+            <MudTextField @bind-Value="_height" Variant="Variant.Outlined" Label="Height px" Clearable />
+            <MudSelect @bind-Value="_color" Variant="Variant.Outlined" Clearable>
+            @foreach (Color col in Enum.GetValues<Color>())
+            {
+                   <MudSelectItem Value="col">@col.ToDescriptionString()</MudSelectItem>
+            }
             </MudSelect>
-            <MudSwitchM3 @bind-Checked="_bordered" Color="Color.Primary" Label="Border" />
-            <MudSwitchM3 @bind-Checked="_disableSlide" Color="Color.Primary" Label="Disable" />
-            <MudSwitchM3 @bind-Checked="_disableMargin" Color="Color.Primary" Label="Disable Margin" />
+            <MudSwitchM3 @bind-Checked="_borderedEnabled" Color="Color.Primary" Label="Enable splitter-border" />
+            <MudSwitchM3 @bind-Checked="_sliderEnabled" Color="Color.Primary" Label="Enable splitter-bar" />
+            <MudSwitchM3 @bind-Checked="_marginEnabled" Color="Color.Primary" Label="Enable margin" />
+            <MudSwitchM3 @bind-Checked="@_doubleClickEnabled" Color="Color.Primary" Label="Enable double-click" />
             <MudDivider />
             <MudNumericField @bind-Value="_sensitivity" Variant="Variant.Outlined" Min="0.01" Max="10" Step="0.1" Label="Sensitivity" />
-            <MudNumericField @bind-Value="_percentage" Variant="Variant.Outlined" Label="Start Content Percentage" />
-            <MudButton OnClick="@(() => _splitter.SetDimensions(_percentage))">Set Dimension (@_percentage)</MudButton>
+            <MudNumericField @bind-Value="@_percentage" Variant="Variant.Outlined" Label="Dimension percentage" />
         </MudStack>
     </MudItem>
 </MudGrid>
 
-@code{
-    MudSplitter _splitter;
-    string _height;
-    Color _color;
-    double _percentage = 50;
-    bool _bordered = false;
-    bool _disableSlide = false;
-    bool _disableMargin = false;
-    double _sensitivity = 0.1d;
+@code {
+   MudSplitter _splitter;
+   Color _color;
+   string _height = "400px";
+   double _sensitivity = 0.1d;
+   double _percentage = 50;
+   bool _sliderEnabled = true;
+   bool _marginEnabled = true;
+   bool _borderedEnabled = true;
+   bool _doubleClickEnabled = true;
 
-    private void DimensionChanged()
-    {
-        _percentage = _splitter.GetStartContentPercentage();
-    }
-
-    private async Task OnDoubleClicked()
-    {
-        _percentage = 50;
-        await _splitter.SetDimensions(_percentage);
-    }
+   void OnDoubleClicked()
+   {
+      if (_doubleClickEnabled)
+         _percentage = 50;
+   }
 }
diff --git a/ComponentViewer.Docs/Pages/Examples/SplitterExample2.razor b/ComponentViewer.Docs/Pages/Examples/SplitterExample2.razor
@@ -3,7 +3,7 @@
         <MudSplitter Height="@_height" Color="Color.Secondary">
             <StartContent>
                 <div>
-                    <MudImage Src="https://cdn.pixabay.com/photo/2022/08/15/03/07/path-7387018_960_720.jpg" Fluid="true" />
+                    <MudImage Src="https://cdn.pixabay.com/photo/2022/08/15/03/07/path-7387018_960_720.jpg" Fluid />
                 </div>
             </StartContent>
 
@@ -14,10 +14,10 @@
     </MudItem>
 
     <MudItem xs="12" sm="4">
-        <MudTextField @bind-Value="_height" Variant="Variant.Outlined" Label="Height" Clearable="true" />
+        <MudTextField @bind-Value="@_height" Variant="Variant.Outlined" Label="Height px" Clearable />
     </MudItem>
 </MudGrid>
 
 @code {
-    string _height;
+    string _height = "400px";
 }
