[PullToRefresh] New component PullToRefresh

examples/Demo/Server/Pages/_Layout.cshtml

@@ -36,4 +36,4 @@
     <!-- highlight -->
     <script type="text/javascript" src="_content/FluentUI.Demo.Shared/js/highlight-extensions.js"></script>
 </body>
-</html>
+</html>

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

@@ -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"/>. 
@@ -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.

examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingStroke.razor

@@ -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;">
@@ -30,4 +30,4 @@
     int Percentage = 30;
     bool Indeterminate = false;
     OfficeColor Color = OfficeColor.Default;
-}
+}

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

@@ -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">
+    <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;
+    }
+}

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

@@ -0,0 +1,46 @@
+<style>
+    .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;
+    }
+}

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

@@ -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;
+    }
+}

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

@@ -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>

examples/Demo/Shared/Pages/Tabs/Examples/TabsDynamic.razor

@@ -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;

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>

src/Core.Assets/Microsoft.FluentUI.AspNetCore.Components.Assets.esproj

@@ -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>

src/Core/Components/PullToRefresh/FluentPullToRefresh.razor

@@ -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>