Skip to content

Improve BitPullToRefresh's demo page (#9401) #9605

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.

Sign up for GitHub

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

Merged
msynk merged 3 commits into from
Jan 3, 2025
Merged

Improve BitPullToRefresh's demo page (#9401) #9605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1ae3afc
Improve BitPullToRefresh's demo page (#9401)
Cyrus-Sushiant Jan 2, 2025
2d1f539
Clean code
Cyrus-Sushiant Jan 2, 2025
54a69c1
fix small issues
msynk Jan 3, 2025
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
63 changes: 62 additions & 1 deletion ...orUI.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@

<ComponentExampleBox Title="Multiple" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
<ExamplePreview>
<div style="display:flex; gap:1rem;">
<div class="example-content">
<div>
<BitPullToRefresh OnRefresh="HandleOnRefresh1">
<div class="anchor">
Expand All @@ -72,4 +72,65 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Advanced" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
<ExamplePreview>
<div>An illustrative example of integrating this component into a straightforward mobile application.</div>
<br />
<div class="mobile-frame">
<div class="screen">
<BitLayout>
<Header>
<BitCard FullWidth>
<BitStack Horizontal HorizontalAlign="BitAlignment.Center" VerticalAlign="BitAlignment.Center">
<BitImage Src="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" Width="50" />
<BitText Typography="BitTypography.H4" Color="BitColor.Info">
BlazorUI
</BitText>
</BitStack>
</BitCard>
</Header>
<Main>
<BitPullToRefresh OnRefresh="HandleOnRefreshAdvanced" ScrollerSelector=".advanced-anchor" Style="width:100%">
<div class="advanced-anchor">
@foreach (var (idx, i) in advancedItems)
{
<div class="row" @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
}
</div>
</BitPullToRefresh>
</Main>
</BitLayout>
</div>
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
<ExamplePreview>
<div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
<br /><br />
<div class="example-content">
<BitPullToRefresh OnRefresh="HandleOnRefreshStyle"
Styles="@(new() { Loading = "background-color: rgb(76, 255, 0, 0.1)", Spinner = "padding: 5px;border-radius: 50%;background-color: #4cff00;" })">
<div class="anchor">
@foreach (var (idx, i) in styleItems)
{
<div @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
}
</div>
</BitPullToRefresh>

<BitPullToRefresh OnRefresh="HandleOnRefreshClass"
Classes="@(new() { Loading = "custom-loading", Spinner = "custom-spinner" })">
<div class="anchor">
@foreach (var (idx, i) in classItems)
{
<div @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
}
</div>
</BitPullToRefresh>
</div>
</ExamplePreview>
</ComponentExampleBox>

</ComponentDemo>
231 changes: 91 additions & 140 deletions ...I.Demo.Client.Core/Pages/Components/Utilities/PullToRefresh/BitPullToRefreshDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@ public partial class BitPullToRefreshDemo
Description = "The anchor element that the pull to refresh component adheres to.",
},
new()
{
Name = "Classes",
Type = "BitPullToRefreshClassStyles?",
DefaultValue = "null",
Description = "Custom CSS classes for different parts of the BitPullToRefresh.",
LinkType = LinkType.Link,
Href = "#class-styles",
},
new()
{
Name = "Factor",
Type = "decimal",
Expand Down Expand Up @@ -84,6 +93,15 @@ public partial class BitPullToRefreshDemo
Description = "The CSS selector of the element that is the scroller in the anchor to control the behavior of the pull to refresh.",
},
new()
{
Name = "Styles",
Type = "BitPullToRefreshClassStyles?",
DefaultValue = "null",
Description = "Custom CSS styles for different parts of the BitPullToRefresh.",
LinkType = LinkType.Link,
Href = "#class-styles",
},
new()
{
Name = "Threshold",
Type = "int",
Expand All @@ -96,7 +114,7 @@ public partial class BitPullToRefreshDemo
Type = "int",
DefaultValue = "80",
Description = "The pulling height in pixel that triggers the refresh.",
},
}
];

private readonly List<ComponentSubClass> componentSubClasses =
Expand Down Expand Up @@ -127,6 +145,56 @@ public partial class BitPullToRefreshDemo
},
]
},
new()
{
Id = "class-styles",
Title = "BitPullToRefreshClassStyles",
Parameters =
[
new()
{
Name = "Root",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the root element of the PullToRefresh."
},
new()
{
Name = "Loading",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the loading element."
},
new()
{
Name = "SpinnerWrapper",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the spinner wrapper element."
},
new()
{
Name = "SpinnerWrapperRefreshing",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the spinner wrapper element in refreshing mode."
},
new()
{
Name = "Spinner",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the spinner element."
},
new()
{
Name = "SpinnerRefreshing",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the spinner element in refreshing mode."
},
]
}
];


Expand Down Expand Up @@ -154,6 +222,7 @@ private async Task HandleOnRefresh1()
multiItems1 = GenerateRandomNumbers(1, 51);
_ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
}

private (int, int)[] multiItems2 = GenerateRandomNumbers(51, 101);
private async Task HandleOnRefresh2()
{
Expand All @@ -162,152 +231,34 @@ private async Task HandleOnRefresh2()
_ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
}


private static (int, int)[] GenerateRandomNumbers(int min, int max)
private (int, int)[] advancedItems = GenerateRandomNumbers(1, 51);
private async Task HandleOnRefreshAdvanced()
{
var random = new Random();
return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
await Task.Delay(2000);
advancedItems = GenerateRandomNumbers(1, 51);
_ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
}


private readonly string example1RazorCode = @"
<style>
.anchor {
width: 150px;
padding: 4px;
cursor: grab;
height: 300px;
overflow: auto;
user-select: none;
border: 1px gray solid;
private (int, int)[] styleItems = GenerateRandomNumbers(1, 51);
private async Task HandleOnRefreshStyle()
{
await Task.Delay(2000);
styleItems = GenerateRandomNumbers(1, 51);
_ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
}
</style>

<BitPullToRefresh OnRefresh=""HandleOnRefreshBasic"">
<div class=""anchor"">
@foreach (var (idx, i) in basicItems)
{
<div @key=""idx"">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
}
</div>
</BitPullToRefresh>";
private readonly string example1CsharpCode = @"
private (int, int)[] basicItems = GenerateRandomNumbers(1, 51);
private async Task HandleOnRefreshBasic()
{
await Task.Delay(2000);
basicItems = GenerateRandomNumbers(1, 51);
_ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
}

private static (int, int)[] GenerateRandomNumbers(int min, int max)
{
var random = new Random();
return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
}";

private readonly string example2RazorCode = @"
<style>
.anchor {
width: 150px;
padding: 4px;
cursor: grab;
height: 300px;
overflow: auto;
user-select: none;
border: 1px gray solid;
private (int, int)[] classItems = GenerateRandomNumbers(51, 101);
private async Task HandleOnRefreshClass()
{
await Task.Delay(2000);
classItems = GenerateRandomNumbers(51, 101);
_ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
}
</style>

<BitPullToRefresh OnRefresh=""HandleOnRefreshCustom"">
<Anchor>
<div class=""anchor"">
@foreach (var (idx, i) in customItems)
{
<div @key=""idx"">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
}
</div>
</Anchor>
<Loading>
<svg viewBox=""0 0 490 490"" fill=""currentColor"">
<path d=""M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13 c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13 c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1 c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z"">
</path>
<path d=""M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7 c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8 c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1 c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4 C456.056,357.911,481.656,274.811,462.456,195.511z"">
</path>
</svg>
</Loading>
</BitPullToRefresh>";
private readonly string example2CsharpCode = @"
private (int, int)[] customItems = GenerateRandomNumbers(1, 51);
private async Task HandleOnRefreshCustom()
{
await Task.Delay(2000);
customItems = GenerateRandomNumbers(1, 51);
_ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
}

private static (int, int)[] GenerateRandomNumbers(int min, int max)
{
var random = new Random();
return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
}";

private readonly string example3RazorCode = @"
<style>
.anchor {
width: 150px;
padding: 4px;
cursor: grab;
height: 300px;
overflow: auto;
user-select: none;
border: 1px gray solid;
private static (int, int)[] GenerateRandomNumbers(int min, int max)
{
var random = new Random();
return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
}
</style>

<div style=""display:flex; gap:1rem;"">
<div>
<BitPullToRefresh OnRefresh=""HandleOnRefresh1"">
<div class=""anchor"">
@foreach (var (idx, i) in multiItems1)
{
<div @key=""idx"">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
}
</div>
</BitPullToRefresh>
</div>

<div>
<BitPullToRefresh OnRefresh=""HandleOnRefresh2"">
<div class=""anchor"">
@foreach (var (idx, i) in multiItems2)
{
<div @key=""idx"">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
}
</div>
</BitPullToRefresh>
</div>
</div>";
private readonly string example3CsharpCode = @"
private (int, int)[] multiItems1 = GenerateRandomNumbers(0, 50);
private async Task HandleOnRefresh1()
{
await Task.Delay(2000);
multiItems1 = GenerateRandomNumbers(1, 51);
_ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
}
private (int, int)[] multiItems2 = GenerateRandomNumbers(51, 101);
private async Task HandleOnRefresh2()
{
await Task.Delay(2000);
multiItems2 = GenerateRandomNumbers(51, 101);
_ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
}

private static (int, int)[] GenerateRandomNumbers(int min, int max)
{
var random = new Random();
return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
}";

}
Loading