[PullToRefresh] New component PullToRefresh

examples/Demo/Client/wwwroot/index.html

@@ -50,6 +50,8 @@
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <!-- highlight -->
     <script type="text/javascript" src="_content/FluentUI.Demo.Shared/js/highlight-extensions.js"></script>
+    <!-- Touch emulator, included for better browser compatibility for PullToRefresh component -->
+    <script type="text/javascript" src="_content/FluentUI.Demo.Shared/js/vant-touch-emulator.js"></script>
 </body>
 
 </html>

examples/Demo/Server/Pages/_Layout.cshtml

@@ -35,5 +35,7 @@
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <!-- highlight -->
     <script type="text/javascript" src="_content/FluentUI.Demo.Shared/js/highlight-extensions.js"></script>
+    <!-- Touch emulator, included for better browser compatibility for PullToRefresh component -->
+    <script type="text/javascript" src="_content/FluentUI.Demo.Shared/js/vant-touch-emulator.js"></script>
 </body>
-</html>
+</html>

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -6425,6 +6425,20 @@
             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.OnRefresh">
+            <summary>
+            returns whether there is more data
+            </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"/>. 
@@ -12340,6 +12354,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.

examples/Demo/Shared/Pages/PullToRefresh/Examples/PullDownDefault.razor

@@ -0,0 +1,46 @@
+@inject IJSRuntime js
+
+<style>
+    .pull-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: auto;
+    }
+</style>
+
+<div class="pull-demo">
+    <FluentPullToRefresh Direction="@PullDirection.Down" OnRefresh="OnRefresh">
+        <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>
+    </FluentPullToRefresh>
+</div>
+
+@code {
+    int refreshcount = 0;
+    int count = 20;
+
+    public async Task<bool> OnRefresh()
+    {
+        refreshcount++;
+        DemoLogger.WriteLine($"Pull down refresh count {refreshcount}");
+        await Task.Delay(1000);
+        count += 20;
+        return true;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Load touch emulator. This is included to enable touch events on desktop and to add compatibility
+            // with all browsers. It is not needed for the actual component.
+            await js.InvokeVoidAsync("loadTouchEmulator");
+        }
+    }
+}

examples/Demo/Shared/Pages/PullToRefresh/Examples/PullUpDefault.razor

@@ -0,0 +1,64 @@
+@inject IJSRuntime js
+<style>
+    .pull-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-demo">
+    <FluentPullToRefresh Direction="@PullDirection.Up" OnRefresh="OnRefresh" PullTipHeight="32">
+        <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> OnRefresh()
+    {
+        refreshcount++;
+        if (count < 100)
+        {
+            await Task.Delay(1000);
+            count += 20;
+            DemoLogger.WriteLine($"Pull up refresh count {refreshcount}");
+
+            return true;
+        }
+
+        return false;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Load touch emulator. This is included to enable touch events on desktop and to add compatibility
+            // with all browsers. It is not needed for the actual component.
+            await js.InvokeVoidAsync("loadTouchEmulator");
+        }
+    }
+}

examples/Demo/Shared/Pages/PullToRefresh/PullToRefreshPage.razor

@@ -0,0 +1,10 @@
+@page "/PullToRefresh"
+@using FluentUI.Demo.Shared.Pages.PullToRefresh.Examples
+
+<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>

examples/Demo/Shared/Shared/DemoNavProvider.cs

@@ -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(),

examples/Demo/Shared/Shared/EmptyLayout.razor

@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<div style="overflow: auto;">
+    @Body
+</div>