using System.Text.Json;
using System.Threading.Tasks;
using AntDesign.JsInterop;
using Microsoft.AspNetCore.Components;
namespace AntDesign
{
public partial class Affix : AntDomComponentBase
{
private const string PrefixCls = "ant-affix";
private const string RootScollSelector = "window";
private bool _affixed;
private bool _rootListened;
private bool _targetListened;
private bool Affixed
{
get => _affixed;
set
{
if (_affixed != value)
{
_affixed = value;
if (OnChange.HasDelegate)
{
OnChange.InvokeAsync(_affixed);
}
}
}
}
private ElementReference _childRef;
private string _hiddenStyle;
private string _affixStyle;
[Inject]
private DomEventService DomEventService { get; set; }
#region Parameters
///
/// Offset from the bottom of the viewport (in pixels)
///
[Parameter]
public int OffsetBottom { get; set; }
///
/// Offset from the top of the viewport (in pixels)
///
[Parameter]
public int OffsetTop { get; set; }
[Parameter]
public string TargetSelector { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public EventCallback OnChange { get; set; }
#endregion Parameters
protected override void OnInitialized()
{
base.OnInitialized();
ClassMapper
.If(PrefixCls, () => _affixed);
}
public async override Task SetParametersAsync(ParameterView parameters)
{
await base.SetParametersAsync(parameters);
}
protected async override Task OnFirstAfterRenderAsync()
{
await base.OnFirstAfterRenderAsync();
if (ChildContent == null)
{
return;
}
var domRect = await JsInvokeAsync(JSInteropConstants.GetBoundingClientRect, _childRef);
_hiddenStyle = $"width: {domRect.Width}px; height: {domRect.Height}px;";
await RenderAffixAsync();
if (!_rootListened && string.IsNullOrEmpty(TargetSelector))
{
DomEventService.AddEventListener(RootScollSelector, "scroll", OnWindowScroll, false);
DomEventService.AddEventListener(RootScollSelector, "resize", OnWindowResize, false);
_rootListened = true;
}
else if (!string.IsNullOrEmpty(TargetSelector))
{
DomEventService.AddEventListener(TargetSelector, "scroll", OnTargetScroll);
DomEventService.AddEventListener(TargetSelector, "resize", OnTargetResize);
_targetListened = true;
}
}
private async void OnWindowScroll(JsonElement obj) => await RenderAffixAsync();
private async void OnWindowResize(JsonElement obj) => await RenderAffixAsync();
private async void OnTargetScroll(JsonElement obj) => await RenderAffixAsync();
private async void OnTargetResize(JsonElement obj) => await RenderAffixAsync();
private async Task RenderAffixAsync()
{
var originalAffixStyle = _affixStyle;
DomRect domRect = null;
Window window = null;
async Task GetWindow()
{
window = await JsInvokeAsync(JSInteropConstants.GetWindow);
}
async Task GetDomReact()
{
domRect = await JsInvokeAsync(JSInteropConstants.GetBoundingClientRect, Ref);
}
await Task.WhenAll(new[] { GetWindow(), GetDomReact() });
if (domRect == null || window == null)
{
return;
}
_hiddenStyle = $"width: {domRect.Width}px; height: {domRect.Height}px;";
DomRect containerRect;
if (string.IsNullOrEmpty(TargetSelector))
{
containerRect = new DomRect()
{
Top = 0,
Bottom = window.innerHeight,
Height = window.innerHeight,
};
}
else
{
containerRect = await JsInvokeAsync(JSInteropConstants.GetBoundingClientRect, TargetSelector);
}
var topDist = containerRect.Top + OffsetTop;
var bottomDist = containerRect.Bottom - OffsetBottom;
if (OffsetBottom > 0) // only affix bottom
{
if (domRect.Bottom > bottomDist)
{
_affixStyle = _hiddenStyle + $"bottom: { window.innerHeight - bottomDist}px; position: fixed;";
Affixed = true;
}
else
{
_affixStyle = string.Empty;
Affixed = false;
}
}
else if (domRect.Top < topDist)
{
_affixStyle = _hiddenStyle + $"top: {topDist}px; position: fixed;";
Affixed = true;
}
else
{
_affixStyle = string.Empty;
Affixed = false;
}
if (originalAffixStyle != _affixStyle)
{
StateHasChanged();
}
}
protected override void Dispose(bool disposing)
{
base.Dispose(disposing);
if (_rootListened)
{
DomEventService.RemoveEventListerner(RootScollSelector, "scroll", OnWindowScroll);
DomEventService.RemoveEventListerner(RootScollSelector, "resize", OnWindowResize);
}
if (_targetListened)
{
DomEventService.RemoveEventListerner(TargetSelector, "scroll", OnTargetScroll);
DomEventService.RemoveEventListerner(TargetSelector, "resize", OnTargetResize);
}
}
}
}