[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,88 @@
             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.EmulateTouch">
+            <summary>
+            Gets or sets if the component should work on non-touch devices (by using an emulation script).
+            Deaults to true.
+            </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.
+            Default is 750
+            </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 +12422,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,27 @@
+<FluentStack Orientation="Orientation.Vertical" VerticalGap="5">
+    <div>
+        <FluentSwitch @bind-Value="@(enabled)" CheckedMessage="Pull is enabled" UncheckedMessage="Pull is disabled" />
+        <FluentSwitch @bind-Value="@direction" CheckedMessage="Pull up" UncheckedMessage="Pull down" />
+    </div>
+    <FluentPullToRefresh Style="border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius)* 1px); width: 100%;"
+                         Disabled="@(!enabled)"
+                         Direction="@(direction ? PullDirection.Up : PullDirection.Down)"
+                         OnRefreshAsync="OnRefreshAsync">
+        <div style="height: 150px; width: 100%; padding: 5px;">
+            Content to refresh. Pull counter: @Counter
+        </div>
+    </FluentPullToRefresh>
+</FluentStack>
+
+@code {
+    bool enabled = true;
+    bool direction = 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,33 @@
+<FluentPullToRefresh Direction="@PullDirection.Down"
+                     OnRefreshAsync="OnRefreshAsync"
+                     ShowStaticTip="false"
+                     Style="height: 400px; width: 400px; ">
+    <PullingTemplate>
+        Pull to refresh
+    </PullingTemplate>
+    <ReleaseTemplate>
+        Release to update
+    </ReleaseTemplate>
+    <CompletedTemplate>
+        Update completed
+    </CompletedTemplate>
+
+    <ChildContent>
+        <FluentListbox Height="300px" Items="@Enumerable.Range(1, ItemsCount).Select(i => $"Item {i}")" />
+    </ChildContent>
+</FluentPullToRefresh>
+
+
+@code {
+    int RefreshCount = 0;
+    int ItemsCount = 2;
+
+    public async Task<bool> OnRefreshAsync()
+    {
+        RefreshCount++;
+        DemoLogger.WriteLine($"Pull down refresh count {RefreshCount}");
+        await Task.Delay(1000);
+        ItemsCount += 3;
+        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);
+        height: calc(100% - 50px);
+    }
+</style>
+
+<div class="pull-up-demo">
+    <FluentPullToRefresh Direction="@PullDirection.Up" OnRefreshAsync="OnRefreshAsync" TipHeight="50" DragDistance="100" >
+        <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 = 3;
+
+    public async Task<bool> OnRefreshAsync()
+    {
+        refreshcount++;
+        if (count < 15)
+        {
+            await Task.Delay(1000);
+            count += 3;
+            DemoLogger.WriteLine($"Pull up refresh count {refreshcount}");
+
+            return true;
+        }
+
+        return false;
+    }
+}

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

@@ -0,0 +1,40 @@
+@page "/PullToRefresh"
+@using FluentUI.Demo.Shared.Pages.PullToRefresh.Examples
+
+<h1>PullToRefresh</h1>
+
+<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>
+
+<h2 id="example">Examples</h2>
+
+<DemoSection Title="Default" Component="typeof(PullDownBasic)"></DemoSection>
+
+<DemoSection Title="Pull down" Component="typeof(PullDownDefault)">
+    <Description>
+        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 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.
+    </Description>
+</DemoSection>
+
+<DemoSection Title="Pull up" Component="typeof(PullUpDefault)">
+    <Description>
+        This demo has a height set for the 'pull up tip'. Also, the distance the tip has to be pullud 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.</Description>
+</DemoSection>
+
+<h2 id="documentation">Documentation</h2>
+
+<ApiDocumentation Component="typeof(FluentPullToRefresh)" />

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>