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

[PullToRefresh] New component PullToRefresh #1679

Merged
merged 21 commits into from
Mar 25, 2024
Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
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
2 changes: 1 addition & 1 deletion examples/Demo/Server/Pages/_Layout.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,4 @@
<!-- highlight -->
<script type="text/javascript" src="_content/FluentUI.Demo.Shared/js/highlight-extensions.js"></script>
</body>
</html>
</html>
115 changes: 115 additions & 0 deletions examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
Original file line number Diff line number Diff line change
Expand Up @@ -6425,6 +6425,81 @@
Gets or sets the color to be used for the progress ring. If not set, the default theme color is used.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ClassValue">
<summary />
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.StyleValue">
<summary />
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.Direction">
<summary>
Gets or sets the direction to pull the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ChildContent"/>.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.Disabled">
<summary>
Gets or sets if the pull action is disabled.
Deaults to false.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ShowStaticTip">
<summary>
Gets or sets if a tip is shown when <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ChildContent"/> is not being pulled.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ChildContent">
<summary>
Gets or set the content to show.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.OnRefreshAsync">
<summary>
Returns whether there is more data available.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.PullingTemplate">
<summary>
Gets or sets the the content to indicate the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ChildContent"/> can be refreshed by a pull down/up action.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ReleaseTemplate">
<summary>
Gets or sets the the content to indicate the pulled <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ChildContent"/> must be released to start the refresh action.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.LoadingTemplate">
<summary>
Gets or sets the the content to indicate the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ChildContent"/> is being refreshed.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.CompletedTemplate">
<summary>
Gets or sets the the content to indicate the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ChildContent"/> has been refreshed.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.NoDataTemplate">
<summary>
Gets or sets the the content to indicate the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ChildContent"/> can not be refreshed anymore.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.DragDistance">
<summary>
Gets or sets the distance the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.ChildContent"/> needs to be pulled (in pixels) to initiate a refresh action.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.TipHeight">
<summary>
Gets or sets the height (in pixels) of the tip fragment (if shown).
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.StatusUpdateMessageTimeout">
<summary>
Gets or sets the amount of time (in milliseconds) a status update message will be displayed.
</summary>
</member>
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh.OnAfterRenderAsync(System.Boolean)">
<summary />
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1.Context">
<summary>
Gets context for this <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1"/>.
Expand Down Expand Up @@ -12340,6 +12415,46 @@
<member name="F:Microsoft.FluentUI.AspNetCore.Components.PresenceStatus.Unknown">
<summary />
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.PullDirection.Down">
<summary>
Pull down
</summary>
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.PullDirection.Up">
<summary>
Pull up
</summary>
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.PullStatus.Awaiting">
<summary>
Not started yet
</summary>
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.PullStatus.Pulling">
<summary>
Pulling down has started and triggerpoint has not been reached
</summary>
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.PullStatus.WaitingForRelease">
<summary>
Reached the triggerpoint and waiting to let loose
</summary>
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.PullStatus.Loading">
<summary>
Already let loose, refreshing
</summary>
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.PullStatus.Completed">
<summary>
The refresh is complete
</summary>
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.PullStatus.NoData">
<summary>
The refresh completes, but there is no more data to load
</summary>
</member>
<member name="T:Microsoft.FluentUI.AspNetCore.Components.ScrollEasing">
<summary>
The easing function to use when scrolling.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<h4>Stroke and Color</h4>

<FluentSelect Label="Width" Items="@(new [] { ProgressStroke.Small, ProgressStroke.Normal, ProgressStroke.Large })" @bind-SelectedOption="@Stroke" Width="60px" />
<FluentSelect Label="Width" Items="@(new [] { ProgressStroke.Small, ProgressStroke.Normal, ProgressStroke.Large })" @bind-SelectedOption="@Stroke" Width="160px" />
<FluentCheckbox Label="Indeterminate" @bind-Value="@Indeterminate" />
<FluentSelect Label="Color" Items="@(Enum.GetValues<OfficeColor>())" @bind-SelectedOption="@Color" Width="100px" Height="200px" />
<FluentSelect Label="Color" Items="@(Enum.GetValues<OfficeColor>())" @bind-SelectedOption="@Color" Width="160px" Height="200px" />
<FluentSlider Min="0" Max="100" Step="5" @bind-Value="@Percentage" Style="max-width: 200px; margin: 20px 0px;" Disabled="@Indeterminate" />

<FluentStack Style="margin: 30px;">
Expand Down Expand Up @@ -30,4 +30,4 @@
int Percentage = 30;
bool Indeterminate = false;
OfficeColor Color = OfficeColor.Default;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<style>
.pull-demo-basic {
border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-rest);
border-radius: calc(var(--control-corner-radius)* 1px);
width: 100%;
}
</style>

<FluentStack Orientation="Orientation.Vertical" VerticalGap="5">
vnbaaij marked this conversation as resolved.
Show resolved Hide resolved
<FluentSwitch @bind-Value="@disabled" CheckedMessage="Pull is disabled" UncheckedMessage="Pull is enabled" />
<FluentPullToRefresh Class="pull-demo-basic" Direction="@PullDirection.Down" Disabled="@disabled" OnRefreshAsync="OnRefreshAsync">
<div style="height: 150px; width: 100%; padding: 5px;">
My content to refresh: @Counter
</div>
</FluentPullToRefresh>
</FluentStack>

@code {
bool disabled = false;
int Counter = 0;

async Task<bool> OnRefreshAsync()
{
Counter++;
await Task.Delay(250);
return true;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<style>
vnbaaij marked this conversation as resolved.
Show resolved Hide resolved
.pull-down-demo {
height: 51vh;
max-width: 400px;
border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-rest);
border-radius: calc(var(--control-corner-radius)* 1px);
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<div class="pull-down-demo">
<FluentPullToRefresh Direction="@PullDirection.Down" OnRefreshAsync="OnRefreshAsync" ShowStaticTip="false">
<PullingTemplate>
<FluentIcon Value="@(new Icons.Regular.Size24.ArrowCircleDown())" />
</PullingTemplate>
<ReleaseTemplate>
<FluentIcon Value="@(new Icons.Regular.Size24.ArrowSyncCircle())" />
</ReleaseTemplate>
<CompletedTemplate>
<FluentIcon Value="@(new Icons.Regular.Size24.CheckmarkCircle())" />
</CompletedTemplate>

<ChildContent>
<div style="user-select: none; display:flex; flex-direction:column; align-items: flex-start; padding: calc(var(--design-unit) * 1px);">
@for (int i = 1; i <= count; i++)
{
<span @key="i">item @i</span>
}
</div>
</ChildContent>
</FluentPullToRefresh>
</div>

@code {
int refreshcount = 0;
int count = 20;

public async Task<bool> OnRefreshAsync()
{
refreshcount++;
DemoLogger.WriteLine($"Pull down refresh count {refreshcount}");
await Task.Delay(1000);
count += 20;
return true;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
@inject IJSRuntime js
<style>
.pull-up-demo {
height: 51.2vh;
max-width: 400px;
border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-rest);
border-radius: calc(var(--control-corner-radius)* 1px);
overflow: auto;
}
.pull-content {
user-select: none;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: calc(var(--design-unit) * 2px);
}
</style>

<div class="pull-up-demo">
<FluentPullToRefresh Direction="@PullDirection.Up" OnRefreshAsync="OnRefreshAsync" TipHeight="50" DragDistance="100" >
<PullingTemplate>Pull up to refresh</PullingTemplate>
<LoadingTemplate>
<FluentProgress Width="150px;"/>
</LoadingTemplate>
<ChildContent>
<div class="pull-content">
@for (int i = 1; i <= count; i++)
{
<span @key="i">item @i</span>
}
</div>
</ChildContent>
</FluentPullToRefresh>
</div>

@code {
int refreshcount = 0;
int count = 20;

public async Task<bool> OnRefreshAsync()
{
refreshcount++;
if (count < 100)
{
await Task.Delay(1000);
count += 20;
DemoLogger.WriteLine($"Pull up refresh count {refreshcount}");

return true;
}

return false;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@page "/PullToRefresh"
@using FluentUI.Demo.Shared.Pages.PullToRefresh.Examples

<p>
The <b>Pull-to-refresh</b> is a touchscreen gesture. It involves touching the screen of a computing device with a finger
or pressing a button on a pointing device, dragging the screen downward, and then releasing it.
This action signals the application to refresh the contents of the component.
Its purpose is to make refreshing immediately accessible and to save valuable screen space that would otherwise be occupied by a refresh button.
</p>

<p>
These features are mainly used on mobile devices. To maintain compatibility with the majority of <b>desktop browsers</b>, an emulator script is included
and loaded automatically by the component.
</p>
<DemoSection Title="Default" Component="typeof(PullDownBasic)"></DemoSection>

<DemoSection Title="Pull down" Component="typeof(PullDownDefault)"></DemoSection>

<DemoSection Title="Pull up" Component="typeof(PullUpDefault)">
<Description>
This demo has a height set for the 'pull up tip'. Instead of using a progress ring, this one shows a progress bar. The maximum number of
items that can be shown is set to 100, so the number of 'pull up's' is limited to 4.</Description>
</DemoSection>
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
<FluentButton OnClick="@AddAndSelect">Add and select</FluentButton>
@code
{
private FluentTabs? tabs;
List<DataSource.MonthItem> Items = new List<DataSource.MonthItem>(DataSource.AllMonths);
string SelectedTabId = "tab-03";
int i = 20;
Expand Down
5 changes: 5 additions & 0 deletions examples/Demo/Shared/Shared/DemoNavProvider.cs
Original file line number Diff line number Diff line change
Expand Up @@ -460,6 +460,11 @@ public DemoNavProvider()
icon: new Icons.Regular.Size20.ArrowClockwiseDashes(),
title: "Progress Ring"
),
new NavLink(
href: "/PullToRefresh",
icon: new Icons.Regular.Size20.ArrowClockwise(),
title: "Pull to refresh"
),
new NavLink(
href: "/Skeleton",
icon: new Icons.Regular.Size20.Shortpick(),
Expand Down
5 changes: 5 additions & 0 deletions examples/Demo/Shared/Shared/EmptyLayout.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@inherits LayoutComponentBase

<div style="overflow: auto;">
@Body
</div>
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.705950">
<PropertyGroup>
<DefaultProjectTypeGuid Condition="'$(BuildingInsideVisualStudio)' == 'false'">FAE04EC0-301F-11D3-BF4B-00C04F79EFBC</DefaultProjectTypeGuid>
<DebugAssetsDirectory>dist\</DebugAssetsDirectory>
<StaticWebAssetSourceId>Microsoft.FluentUI.AspNetCore.Components</StaticWebAssetSourceId>
<IsPackable>false</IsPackable>
<BuildCommand>npm run build</BuildCommand>
</PropertyGroup>
<Target Name="Pack" />
<PropertyGroup>
<DefaultProjectTypeGuid Condition="'$(BuildingInsideVisualStudio)' == 'false'">FAE04EC0-301F-11D3-BF4B-00C04F79EFBC</DefaultProjectTypeGuid>
<DebugAssetsDirectory>dist\</DebugAssetsDirectory>
<StaticWebAssetSourceId>Microsoft.FluentUI.AspNetCore.Components</StaticWebAssetSourceId>
<IsPackable>false</IsPackable>
<BuildCommand>npm run build</BuildCommand>
</PropertyGroup>

<Target Name="Pack" />

</Project>
20 changes: 20 additions & 0 deletions src/Core/Components/PullToRefresh/FluentPullToRefresh.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@namespace Microsoft.FluentUI.AspNetCore.Components
@inherits FluentComponentBase

<div class="@ClassValue" style="@StyleValue" @ontouchstart="OnTouchStartAsync" @ontouchmove="OnTouchMoveAsync" @ontouchend="OnTouchEndAsync">
<div style="@WrapperStyle">
@if (Direction == PullDirection.Down && _internalShowStaticTip)
{
<div part="tip" direction="down" style="--fluent-pull-refresh-head-height: @(TipHeight)px;">
@GetTipContent()
</div>
}
@ChildContent
@if (Direction == PullDirection.Up && _internalShowStaticTip)
{
<div part="tip" direction="up" style="--fluent-pull-refresh-head-height: @(TipHeight)px;">
@GetTipContent()
</div>
}
</div>
</div>
Loading
Loading