-
Notifications
You must be signed in to change notification settings - Fork 459
[dev-v5] Migrate PullToRefresh component #4459
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
Merged
vnbaaij
merged 14 commits into
microsoft:dev-v5
from
PascalVorwerk:users/pcwvorwerk/pulltorefresh_v5
Jan 13, 2026
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
04fce1f
First try migrate pulltorefresh
PascalVorwerk 4005478
Fixed styling and docs, test are next
PascalVorwerk c52324a
Added tests and a few fixes
PascalVorwerk ff73877
Comments review
PascalVorwerk 2cd32de
Expanded tests a bunch
PascalVorwerk d45c80b
Review comments Denis
PascalVorwerk 565d2d9
Moved to initialize and made TipHeight a string value with defaul 32px
PascalVorwerk bd5204a
Missed a few doc things and comments of Denis
PascalVorwerk a97ed53
Replaced verified test file
PascalVorwerk 0009d21
Merge branch 'dev-v5' into users/pcwvorwerk/pulltorefresh_v5
vnbaaij f9a8412
Comments Marvin
PascalVorwerk d836092
Merge remote-tracking branch 'origin/users/pcwvorwerk/pulltorefresh_v…
PascalVorwerk 0bd6450
Fix test, removed 1 to many ()
PascalVorwerk 1ddcc60
Merge branch 'dev-v5' into users/pcwvorwerk/pulltorefresh_v5
dvoituron File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
29 changes: 29 additions & 0 deletions
29
...UI.Demo.Client/Documentation/Components/PullToRefresh/Examples/PullToRefreshDefault.razor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <FluentStack Orientation="Orientation.Vertical" VerticalGap="5"> | ||
| <div> | ||
| <FluentSwitch @bind-Value="enabled" Label="@(enabled ? "Pull is enabled" : "Pull is disabled")" /> | ||
| <FluentSwitch @bind-Value="direction" Label="@(direction ? "Pull up" : "Pull down")" /> | ||
| </div> | ||
| <FluentPullToRefresh Disabled="@(!enabled)" | ||
| Direction="@(direction ? PullDirection.Up : PullDirection.Down)" | ||
| OnRefreshAsync="OnRefreshAsync" | ||
| Style="width: 100%" | ||
| > | ||
| <div style="height: 150px; width: 100%; padding: 5px;"> | ||
| Content to refresh. Pull counter: @counter | ||
| </div> | ||
| </FluentPullToRefresh> | ||
| </FluentStack> | ||
|
|
||
| @code { | ||
| bool enabled = true; | ||
| bool direction; | ||
| int counter; | ||
|
|
||
| async Task<bool> OnRefreshAsync() | ||
| { | ||
| counter++; | ||
| await Task.Delay(250); | ||
| return true; | ||
| } | ||
| } | ||
|
|
43 changes: 43 additions & 0 deletions
43
...entUI.Demo.Client/Documentation/Components/PullToRefresh/Examples/PullToRefreshDown.razor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <FluentPullToRefresh OnRefreshAsync="LoadAsync" TipHeight="40px" Style="overflow-x: auto;"> | ||
| <PullingTemplate> | ||
| Pull to refresh | ||
| </PullingTemplate> | ||
| <ReleaseTemplate> | ||
| Release to update | ||
| </ReleaseTemplate> | ||
| <CompletedTemplate> | ||
| Update completed | ||
| </CompletedTemplate> | ||
|
|
||
| <ChildContent> | ||
| <FluentStack VerticalGap="8px" Padding="12px"> | ||
| @foreach (var item in items) | ||
| { | ||
| <FluentCard Padding="@Padding.All2">@item</FluentCard> | ||
| } | ||
| </FluentStack> | ||
| </ChildContent> | ||
| </FluentPullToRefresh> | ||
|
|
||
| @code { | ||
| int counter = 4; | ||
| static readonly Random Rand = new(); | ||
| readonly List<string> items = new() | ||
| { | ||
| "Item 1", | ||
| "Item 2", | ||
| "Item 3" | ||
| }; | ||
|
|
||
| async Task<bool> LoadAsync() | ||
| { | ||
| await Task.Delay(800); | ||
| items.Clear(); | ||
| var count = Rand.Next(1, 6); // random between 1 and 5 inclusive | ||
| for (var i = 0; i < count; i++) | ||
| { | ||
| items.Insert(0, $"New item {counter++}"); | ||
| } | ||
| return true; // indicate more data can still be loaded | ||
| } | ||
| } |
49 changes: 49 additions & 0 deletions
49
...luentUI.Demo.Client/Documentation/Components/PullToRefresh/Examples/PullToRefreshUp.razor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <div class="pull-up-demo"> | ||
| <FluentPullToRefresh Direction="@PullDirection.Up" OnRefreshAsync="OnRefreshAsync" TipHeight="40px" DragDistance="100" Style="width: 100%"> | ||
| <LoadingTemplate> | ||
| <FluentProgressBar 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 = 3; | ||
|
|
||
| async Task<bool> OnRefreshAsync() | ||
| { | ||
| refreshcount++; | ||
| if (count < 15) | ||
| { | ||
| await Task.Delay(1000); | ||
| count += 3; | ||
|
|
||
| return true; | ||
| } | ||
|
|
||
| return false; | ||
| } | ||
| } | ||
|
|
||
| <style> | ||
| .pull-up-demo { | ||
| height: 51.2vh; | ||
| max-width: 400px; | ||
| overflow: auto; | ||
| } | ||
| .pull-content { | ||
| user-select: none; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-end; | ||
| height: calc(100% - 50px); | ||
| } | ||
| </style> |
37 changes: 37 additions & 0 deletions
37
...mo/FluentUI.Demo.Client/Documentation/Components/PullToRefresh/PullToRefresh.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| --- | ||
| title: PullToRefresh | ||
| route: /PullToRefresh | ||
| icon: ArrowSync | ||
| --- | ||
|
|
||
| # PullToRefresh | ||
|
|
||
| The Pull-to-refresh 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 or upward, depending on the parameters), 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. | ||
|
|
||
| These features are mainly used on mobile devices. To maintain compatibility with the majority of desktop browsers, an emulator script is included and loaded automatically by the component. | ||
|
|
||
| ## Default | ||
|
|
||
| {{ PullToRefreshDefault }} | ||
|
|
||
| ## Pull down | ||
|
|
||
| With the default settings, the component uses icons for starting and update 'tips'. These can be replaced by using the <code>...Template</code> parameters. | ||
| In this example we are using plain text templates. Also the inital tip template is hidden until a pull to refresh action is actually started and hidden once an update is finshed. | ||
| The timeout of the update message can be changed. | ||
|
|
||
| {{ PullToRefreshDown }} | ||
|
|
||
| ## Pull up | ||
|
|
||
| This demo has a height set for the 'pull up tip'. Also, the distance the tip has to be pulled has been increased. | ||
|
|
||
| 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. | ||
|
|
||
| {{ PullToRefreshUp }} | ||
|
|
||
| ## API | ||
|
|
||
| {{ API Type=FluentPullToRefresh }} | ||
PascalVorwerk marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
src/Core/Components/PullToRefresh/FluentPullToRefresh.razor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| @namespace Microsoft.FluentUI.AspNetCore.Components | ||
| @inherits FluentComponentBase | ||
|
|
||
| <div id="@Id" | ||
| class="@ClassValue" | ||
| style="@StyleValue" | ||
| @attributes="@AdditionalAttributes" | ||
| @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);"> | ||
| @GetTipContent() | ||
| </div> | ||
| } | ||
| @ChildContent | ||
| @if (Direction == PullDirection.Up && _internalShowStaticTip) | ||
| { | ||
| <div part="tip" direction="up" style="--fluent-pull-refresh-head-height: @(TipHeight);"> | ||
| @GetTipContent() | ||
| </div> | ||
| } | ||
| </div> | ||
| </div> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.