Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add BitProModal component (#9503) #9523

Draft
wants to merge 7 commits into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
@namespace Bit.BlazorUI
@inherits BitComponentBase

<BitModal AriaLabel="@AriaLabel"
Class="@ClassBuilder.Value"
Dir="Dir"
@attributes="HtmlAttributes"
Id="@Id"
IsEnabled="IsEnabled"
Style="@StyleBuilder.Value"
Visibility="Visibility"
AbsolutePosition="AbsolutePosition"
Alert="Alert"
AutoToggleScroll="AutoToggleScroll"
Blocking="Blocking"
Classes="Classes"
DragElementSelector="@DragElementSelector"
Draggable="Draggable"
IsOpen="IsOpen"
IsOpenChanged="AssignIsOpen"
Modeless="Modeless"
OnDismiss="OnDismiss"
OnOverlayClick="OnOverlayClick"
Position="Position"
ScrollerSelector="@ScrollerSelector"
Styles="Styles">
@if (Header is not null || HeaderText is not null || ShowCloseButton)
{
<div style="@Styles?.HeaderContainer" class="bit-pmd-hcn @Classes?.HeaderContainer">
@if (Header is not null)
{
<div style="@Styles?.Header" class="bit-pmd-hdr @Classes?.Header">
@Header
</div>
}
else if (HeaderText is not null)
{
<div style="@Styles?.Header" class="bit-pmd-hdr @Classes?.Header">
@HeaderText
</div>
}

@if (ShowCloseButton)
{
<button @onclick="CloseModal"
style="@Styles?.CloseButton"
class="bit-pmd-cls @Classes?.CloseButton">
<i style="@Styles?.CloseIcon" class="bit-icon bit-icon--Cancel @Classes?.CloseIcon" />
</button>
}
</div>
}

<div style="@Styles?.Body" class="bit-pmd-bdy @Classes?.Body">
@(Body ?? ChildContent)
</div>

@if (Footer is not null)
{
<div style="@Styles?.Footer" class="bit-pmd-fcn @Classes?.Footer">
@Footer
</div>
}
else if (FooterText is not null)
{
<div style="@Styles?.Footer" class="bit-pmd-fcn @Classes?.Footer">
@FooterText
</div>
}
</BitModal>
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
namespace Bit.BlazorUI;

public partial class BitProModal : BitComponentBase
{
[Inject] private IJSRuntime _js { get; set; } = default!;



/// <summary>
/// When true, the Modal will be positioned absolute instead of fixed.
/// </summary>
[Parameter, ResetClassBuilder]
public bool AbsolutePosition { get; set; }

/// <summary>
/// Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.
/// </summary>
[Parameter] public bool? Alert { get; set; }

/// <summary>
/// Enables the auto scrollbar toggle behavior of the Modal.
/// </summary>
[Parameter] public bool AutoToggleScroll { get; set; }

/// <summary>
/// Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay).
/// </summary>
[Parameter] public bool Blocking { get; set; }

/// <summary>
/// The alias of the ChildContent.
/// </summary>
[Parameter] public RenderFragment? Body { get; set; }

/// <summary>
/// The content of the Modal, it can be any custom tag or text.
/// </summary>
[Parameter] public RenderFragment? ChildContent { get; set; }

/// <summary>
/// Custom CSS classes for different parts of the BitModal component.
/// </summary>
[Parameter] public BitProModalClassStyles? Classes { get; set; }

/// <summary>
/// The CSS selector of the drag element. by default it's the Modal container.
/// </summary>
[Parameter] public string? DragElementSelector { get; set; }

/// <summary>
/// Whether the Modal can be dragged around.
/// </summary>
[Parameter] public bool Draggable { get; set; }

/// <summary>
/// The template used to render the footer section of the panel.
/// </summary>
[Parameter] public RenderFragment? Footer { get; set; }

/// <summary>
/// The text of the footer section of the panel.
/// </summary>
[Parameter] public string? FooterText { get; set; }

/// <summary>
/// The template used to render the header section of the panel.
/// </summary>
[Parameter] public RenderFragment? Header { get; set; }

/// <summary>
/// The text of the header section of the panel.
/// </summary>
[Parameter] public string? HeaderText { get; set; }

/// <summary>
/// Makes the Modal height 100% of its parent container.
/// </summary>
[Parameter, ResetClassBuilder]
public bool FullHeight { get; set; }

/// <summary>
/// Makes the Modal width and height 100% of its parent container.
/// </summary>
[Parameter, ResetClassBuilder]
public bool FullSize { get; set; }

/// <summary>
/// Makes the Modal width 100% of its parent container.
/// </summary>
[Parameter, ResetClassBuilder]
public bool FullWidth { get; set; }

/// <summary>
/// Whether the Modal is displayed.
/// </summary>
[Parameter, TwoWayBound]
public bool IsOpen { get; set; }

/// <summary>
/// Renders the overlay in full mode that gives it an opaque background.
/// </summary>
[Parameter, ResetClassBuilder]
public bool ModeFull { get; set; }

/// <summary>
/// Whether the Modal should be modeless (e.g. not dismiss when focusing/clicking outside of the Modal). if true: Blocking is ignored, there will be no overlay.
/// </summary>
[Parameter] public bool Modeless { get; set; }

/// <summary>
/// Removes the default top border of the modal.
/// </summary>
[Parameter, ResetClassBuilder]
public bool NoBorder { get; set; }

/// <summary>
/// A callback function for when the Modal is dismissed.
/// </summary>
[Parameter] public EventCallback<MouseEventArgs> OnDismiss { get; set; }

/// <summary>
/// A callback function for when somewhere on the overlay element of the Modal is clicked.
/// </summary>
[Parameter] public EventCallback<MouseEventArgs> OnOverlayClick { get; set; }

/// <summary>
/// Position of the Modal on the screen.
/// </summary>
[Parameter, ResetClassBuilder]
public BitPosition? Position { get; set; }

/// <summary>
/// Set the element selector for which the Modal disables its scroll if applicable.
/// </summary>
[Parameter] public string? ScrollerSelector { get; set; }

/// <summary>
/// Shows the close button of the Panel.
/// </summary>
[Parameter] public bool ShowCloseButton { get; set; }

/// <summary>
/// Custom CSS styles for different parts of the BitModal component.
/// </summary>
[Parameter] public BitProModalClassStyles? Styles { get; set; }



public async Task Open()
{
if (await AssignIsOpen(true) is false) return;

StateHasChanged();
}

public async Task Close()
{
if (await AssignIsOpen(false) is false) return;

StateHasChanged();
}



protected override string RootElementClass => "bit-pmd";

protected override void RegisterCssClasses()
{
ClassBuilder.Register(() => FullSize || FullHeight ? "bit-pmd-fhe" : string.Empty);
ClassBuilder.Register(() => FullSize || FullWidth ? "bit-pmd-fwi" : string.Empty);

ClassBuilder.Register(() => ModeFull ? "bit-pmd-mfl" : string.Empty);
ClassBuilder.Register(() => NoBorder ? "" : "bit-pmd-tbr");
}



private async Task CloseModal(MouseEventArgs e)
{
if (IsEnabled is false) return;

if (await AssignIsOpen(false) is false) return;

await OnDismiss.InvokeAsync(e);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
@import '../../../Bit.BlazorUI/Styles/functions.scss';

.bit-pmd {
}

.bit-pmd-mfl {
.bit-mdl-ovl {
background-color: $clr-bg-overlay;
}
}

.bit-pmd-tbr {
.bit-mdl-ctn {
border-top: spacing(0.5) solid $clr-pri;
}
}

.bit-pmd-fhe {
.bit-mdl-ctn {
height: 100%;
border-top: none;
}
}

.bit-pmd-fwi {
.bit-mdl-ctn {
width: 100%;
}

.bit-pmd-bdy {
max-width: unset;
}
}

.bit-pmd-hcn {
top: 0;
z-index: 1;
display: flex;
position: sticky;
font-weight: 600;
color: $clr-fg-pri;
overflow-wrap: anywhere;
background-color: $clr-bg-pri;
padding: spacing(2) spacing(2) 0;
}

.bit-pmd-hdr {
flex-grow: 1;
display: flex;
align-items: center;
font-size: spacing(2.5);
}

.bit-pmd-cls {
display: flex;
cursor: pointer;
width: spacing(5);
height: spacing(5);
align-items: center;
justify-content: center;
font-size: spacing(1.75);
border-radius: spacing(0.25);
background-color: transparent;

@media (hover: hover) {
&:hover {
color: $clr-fg-pri-hover;
background-color: $clr-bg-pri-hover;
}
}

&:active {
color: $clr-fg-pri-active;
background-color: $clr-bg-pri-active;
}
}

.bit-pmd-bdy {
flex-grow: 1;
overflow-y: auto;
padding: spacing(2);
max-width: spacing(75);
}

.bit-pmd-fcn {
bottom: 0;
z-index: 1;
position: sticky;
background-color: $clr-bg-pri;
padding: 0 spacing(2) spacing(2) spacing(2);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
namespace Bit.BlazorUI;

public class BitProModalClassStyles : BitModalClassStyles
{
/// <summary>
/// Custom CSS classes/styles for the header container of the BitProModal.
/// </summary>
public string? HeaderContainer { get; set; }

/// <summary>
/// Custom CSS classes/styles for the header of the BitProModal.
/// </summary>
public string? Header { get; set; }

/// <summary>
/// Custom CSS classes/styles for the close button of the BitProModal.
/// </summary>
public string? CloseButton { get; set; }

/// <summary>
/// Custom CSS classes/styles for the close button of the BitProModal.
/// </summary>
public string? CloseIcon { get; set; }

/// <summary>
/// Custom CSS classes/styles for the body of the BitProModal.
/// </summary>
public string? Body { get; set; }

/// <summary>
/// Custom CSS classes/styles for the footer of the BitProModal.
/// </summary>
public string? Footer { get; set; }
}
Loading
Loading