feat(blazorui): add BitProLayout component #9502 (#9509)

bitfoundation · Dec 25, 2024 · 5dd42e9 · 5dd42e9
1 parent 634f534
commit 5dd42e9
Show file tree

Hide file tree

Showing 17 changed files with 502 additions and 23 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs
@@ -0,0 +1,44 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// The cascading value to be provided using the <see cref="BitCascadingValueProvider"/> component.
+/// </summary>
+public class BitCascadingValue
+{
+    /// <summary>
+    /// The optional name of the cascading value.
+    /// </summary>
+    public string? Name { get; set; }
+
+    /// <summary>
+    /// The value to be provided.
+    /// </summary>
+    public object? Value { get; set; }
+
+    /// <summary>
+    /// If true, indicates that <see cref="Value"/> will not change.
+    /// </summary>
+    public bool IsFixed { get; set; }
+
+
+
+    public BitCascadingValue() { }
+    public BitCascadingValue(object? value, string? name = null) : this(value, name, false) { }
+    public BitCascadingValue(object? value, bool isFixed) : this(value, null, isFixed) { }
+    public BitCascadingValue(object? value, string? name, bool isFixed)
+    {
+        Value = value;
+        Name = name;
+        IsFixed = isFixed;
+    }
+
+
+
+    public static implicit operator BitCascadingValue(int value) => new(value);
+    public static implicit operator BitCascadingValue(int? value) => new(value);
+    public static implicit operator BitCascadingValue(bool value) => new(value);
+    public static implicit operator BitCascadingValue(bool? value) => new(value);
+    public static implicit operator BitCascadingValue(string value) => new(value);
+    public static implicit operator BitCascadingValue(BitDir? value) => new(value);
+    public static implicit operator BitCascadingValue(RouteData value) => new(value);
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs
@@ -0,0 +1,69 @@
+using System.Diagnostics.CodeAnalysis;
+
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// A component that provides a list of cascading values to all descendant components.
+/// </summary>
+public class BitCascadingValueProvider : ComponentBase
+{
+    /// <summary>
+    /// The content to which the values should be provided.
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// The cascading values to be provided for the children.
+    /// </summary>
+    [Parameter] public IEnumerable<BitCascadingValue>? Values { get; set; }
+
+
+
+    [DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)]
+    private Type _cascadingValueType = typeof(CascadingValue<>);
+
+
+
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitCascadingValue))]
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        var seq = 0;
+        RenderFragment? rf = ChildContent;
+
+        foreach (var value in Values ?? [])
+        {
+            if (value.Value is null) continue;
+
+            var r = rf;
+            var s = seq;
+            var v = value;
+
+            rf = b => { CreateCascadingValue(b, s, v.Name, v.Value, v.IsFixed, r); };
+
+            seq += v.Name.HasValue() ? 5 : 4;
+        }
+
+        builder.AddContent(seq, rf);
+    }
+
+
+    private void CreateCascadingValue(RenderTreeBuilder builder,
+        int seq,
+        string? name,
+        object value,
+        bool isFixed,
+        RenderFragment? childContent)
+    {
+#pragma warning disable IL2055 // Either the type on which the MakeGenericType is called can't be statically determined, or the type parameters to be used for generic arguments can't be statically determined.
+        builder.OpenComponent(seq, _cascadingValueType.MakeGenericType(value.GetType()));
+#pragma warning restore IL2055 // Either the type on which the MakeGenericType is called can't be statically determined, or the type parameters to be used for generic arguments can't be statically determined.
+        if (string.IsNullOrEmpty(name) is false)
+        {
+            builder.AddComponentParameter(++seq, "Name", name);
+        }
+        builder.AddComponentParameter(++seq, "Value", value);
+        builder.AddComponentParameter(++seq, "IsFixed", isFixed);
+        builder.AddComponentParameter(++seq, "ChildContent", childContent);
+        builder.CloseComponent();
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor
@@ -0,0 +1,23 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<div @ref="RootElement"
+     @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()">
+    <div style="@Styles?.Top" class="bit-ply-top @Classes?.Top" />
+    <div style="@Styles?.Center"
+         class="bit-ply-center @Classes?.Center"
+         dir="@Dir?.ToString().ToLower()">
+        <div style="@Styles?.Left" class="bit-ply-left @Classes?.Left"></div>
+        <div style="@Styles?.Main" class="bit-ply-main @Classes?.Main">
+            <BitCascadingValueProvider Values="CascadingValues">
+                @ChildContent
+            </BitCascadingValueProvider>
+        </div>
+        <div style="@Styles?.Right" class="bit-ply-right @Classes?.Right"></div>
+    </div>
+    <div style="@Styles?.Bottom" class="bit-ply-bottom @Classes?.Bottom"></div>
+</div>
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs
@@ -0,0 +1,38 @@
+namespace Bit.BlazorUI;
+
+public partial class BitProLayout : BitComponentBase
+{
+    /// <summary>
+    /// The cascading values to be provided for the children of the layout.
+    /// </summary>
+    [Parameter] public IEnumerable<BitCascadingValue>? CascadingValues { get; set; }
+
+    /// <summary>
+    /// The content of the layout.
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the layout.
+    /// </summary>
+    [Parameter] public BitProLayoutClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the layout.
+    /// </summary>
+    [Parameter] public BitProLayoutClassStyles? Styles { get; set; }
+
+
+
+    protected override string RootElementClass => "bit-ply";
+
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => Classes?.Root);
+    }
+
+    protected override void RegisterCssStyles()
+    {
+        StyleBuilder.Register(() => Styles?.Root);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss
@@ -0,0 +1,54 @@
+@import '../../Styles/extra-variables.scss';
+@import '../../../Bit.BlazorUI/Styles/functions.scss';
+
+.bit-ply {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: $clr-bg-pri;
+}
+
+.bit-ply-top {
+    width: 100%;
+    z-index: 999999;
+    height: $bit-env-inset-top;
+    background-color: $clr-bg-pri;
+}
+
+.bit-ply-bottom {
+    width: 100%;
+    z-index: 999999;
+    height: $bit-env-inset-bottom;
+    background-color: $clr-bg-pri;
+}
+
+.bit-ply-center {
+    width: 100%;
+    display: flex;
+    height: calc(100% - $bit-env-inset-top - $bit-env-inset-bottom);
+}
+
+.bit-ply-main {
+    height: 100%;
+    display: flex;
+    overflow: auto;
+    position: relative;
+    scroll-behavior: smooth;
+    overscroll-behavior: none;
+    width: calc(100% - $bit-env-inset-left - $bit-env-inset-right);
+}
+
+.bit-ply-left {
+    height: 100%;
+    z-index: 999999;
+    width: $bit-env-inset-left;
+    background-color: $clr-bg-pri;
+}
+
+.bit-ply-right {
+    height: 100%;
+    z-index: 999999;
+    width: $bit-env-inset-right;
+    background-color: $clr-bg-pri;
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayoutClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayoutClassStyles.cs
@@ -0,0 +1,39 @@
+namespace Bit.BlazorUI;
+
+public class BitProLayoutClassStyles
+{
+    /// <summary>
+    /// Custom CSS classes/styles for the root of the BitProLayout.
+    /// </summary>
+    public string? Root { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the top area of the BitProLayout.
+    /// </summary>
+    public string? Top { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the center area of the BitProLayout.
+    /// </summary>
+    public string? Center { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the left area of the BitProLayout.
+    /// </summary>
+    public string? Left { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the main area of the BitProLayout.
+    /// </summary>
+    public string? Main { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the right area of the BitProLayout.
+    /// </summary>
+    public string? Right { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the bottom area of the BitProLayout.
+    /// </summary>
+    public string? Bottom { get; set; }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts b/src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts
@@ -0,0 +1,4 @@
+window.addEventListener('load', () => {
+    document.documentElement.style.setProperty('--bit-env-win-width', `${window.innerWidth}px`);
+    document.documentElement.style.setProperty('--bit-env-win-height', `${window.innerHeight}px`);
+});
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss
@@ -1,2 +1,3 @@
-@import "components.scss";
+@import "general.scss";
+@import "components.scss";
 @import "fabric.mdl2.bit.blazoui.extras.scss";
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss
@@ -2,3 +2,4 @@
 @import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss";
 @import "../Components/PdfReader/BitPdfReader.scss";
 @import "../Components/ProPanel/BitProPanel.scss";
+@import "../Components/ProLayout/BitProLayout.scss";
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss
@@ -0,0 +1,17 @@
+$bit-env-inset-top: var(--bit-env-inset-top);
+$bit-env-inset-left: var(--bit-env-inset-left);
+$bit-env-inset-right: var(--bit-env-inset-right);
+$bit-env-inset-bottom: var(--bit-env-inset-bottom);
+//--
+$bit-env-width-vw: var(--bit-env-width-vw);
+$bit-env-height-vh: var(--bit-env-height-vh);
+$bit-env-width-percent: var(--bit-env-width-per);
+$bit-env-height-percent: var(--bit-env-height-per);
+$bit-env-width-available: var(--bit-env-width-avl);
+$bit-env-height-available: var(--bit-env-height-avl);
+//--
+$bit-env-inset-inline-start: var(--bit-env-inset-inline-start);
+$bit-env-inset-inline-end: var(--bit-env-inset-inline-end);
+//--
+$bit-env-window-width: var(--bit-env-win-width);
+$bit-env-window-height: var(--bit-env-win-height);
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss
@@ -0,0 +1,21 @@
+:root {
+    --bit-env-inset-top: env(safe-area-inset-top, 0px);
+    --bit-env-inset-left: env(safe-area-inset-left, 0px);
+    --bit-env-inset-right: env(safe-area-inset-right, 0px);
+    --bit-env-inset-bottom: env(safe-area-inset-bottom, 0px);
+    //--
+    --bit-env-width-vw: calc(100vw - var(--bit-env-inset-left) - var(--bit-env-inset-right));
+    --bit-env-height-vh: calc(100vh - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
+    --bit-env-width-per: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right));
+    --bit-env-height-per: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
+    --bit-env-width-avl: calc(var(--bit-env-win-width) - var(--bit-env-inset-left) - var(--bit-env-inset-right));
+    --bit-env-height-avl: calc(var(--bit-env-win-height) - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
+    //--
+    --bit-env-inset-inline-start: var(--bit-env-inset-left);
+    --bit-env-inset-inline-end: var(--bit-env-inset-right);
+
+    [dir="rtl"] {
+        --bit-env-inset-inline-start: var(--bit-env-inset-right);
+        --bit-env-inset-inline-end: var(--bit-env-inset-left);
+    }
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor
@@ -3,25 +3,28 @@
 <section class="box">
     <div class="box-header">
         <BitText Typography="BitTypography.H5" Class="section-title" Id="@Id" example-section-title>@Title</BitText>
-        <div class="header-btn-group">
-            <BitActionButton OnClick="() => showCode = !showCode"
-                             Class="@($"header-btn show-code{(showCode ? " code-shown":"")}")"
-                             Classes="@(new() { Content = "show-code-lbl" })"
-                             IconName="@BitIconName.CodeEdit"
-                             Title="@(showCode ? "Hide code" : "Show code")">
-                @(showCode ? "Hide code" : "Show code")
-            </BitActionButton>
-            <BitActionButton Class="@($"header-btn copy-link {(isLinkCopied ? "copied" : "")}")"
-                             Styles="@(new() { Content = (isLinkCopied ? "" : "display: none") })"
-                             Title="@copyLinkMessage"
-                             IconName="@linkIcon"
-                             OnClick="@CopyLinkToClipboard">
-                @if (isLinkCopied)
-                {
-                    <span>@copyLinkMessage</span>
-                }
-            </BitActionButton>
-        </div>
+        @if (RazorCode is not null || CsharpCode is not null)
+        {
+            <div class="header-btn-group">
+                <BitActionButton OnClick="() => showCode = !showCode"
+                                 Class="@($"header-btn show-code{(showCode ? " code-shown":"")}")"
+                                 Classes="@(new() { Content = "show-code-lbl" })"
+                                 IconName="@BitIconName.CodeEdit"
+                                 Title="@(showCode ? "Hide code" : "Show code")">
+                    @(showCode ? "Hide code" : "Show code")
+                </BitActionButton>
+                <BitActionButton Class="@($"header-btn copy-link {(isLinkCopied ? "copied" : "")}")"
+                                 Styles="@(new() { Content = (isLinkCopied ? "" : "display: none") })"
+                                 Title="@copyLinkMessage"
+                                 IconName="@linkIcon"
+                                 OnClick="@CopyLinkToClipboard">
+                    @if (isLinkCopied)
+                    {
+                        <span>@copyLinkMessage</span>
+                    }
+                </BitActionButton>
+            </div>
+        }
     </div>
 
     <div class="box-content">
@@ -39,14 +42,18 @@
             </BitActionButton>
 
             <pre class="code">
-                <code class="language-cshtml">@RazorCode.Trim()</code>
+
+                <code class="language-cshtml">
+                    @RazorCode?.Trim()
+                </code>
 
                 @if (CsharpCode.HasValue())
                 {
                     <code class="language-csharp">
 &#64code {
-     @CsharpCode.Trim().Replace("\n", "\n     ")
-}</code>
+    @CsharpCode?.Trim().Replace("\n", "\n     ")
+}
+                    </code>
                 }
             </pre>
         }