ant-design-blazor/components/carousel/CarouselSlick.cs
LI ZICHAO 71bac2e85d fix: children components dispose (#399)
* Children components using CascadingParameter add itself to parent component.However, when children components disposed, they are not remove from parent component. For example, when items in checkgroup have changed , it may causes Index was outside the bounds of the array at AntDesign.CheckboxGroup.OnCheckboxChange.To fix these bug, Adding remove function in dispose process is the solution of this commit.

* fix: some exception

Co-authored-by: ElderJames <shunjiey@hotmail.com>
2020-07-21 23:48:43 +08:00

94 lines
2.3 KiB
C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
namespace AntDesign
{
public class CarouselSlick : AntDomComponentBase
{
private const string PreFixCls = "slick";
private Carousel _parent;
internal bool Active { get; private set; }
internal new string Class => ClassMapper.Class;
#region Parameters
[CascadingParameter]
internal Carousel Parent
{
get => _parent;
set
{
if (_parent == null)
{
_parent = value;
OnParentSet();
}
}
}
private RenderFragment _childContent;
[Parameter]
public RenderFragment ChildContent
{
get => _childContent;
set
{
_childContent = value;
}
}
#endregion Parameters
protected override void Dispose(bool disposing)
{
Parent.RemoveSlick(this);
base.Dispose(disposing);
}
private void OnParentSet()
{
Parent.AddSlick(this);
}
protected override void OnParametersSet()
{
base.OnParametersSet();
ClassMapper.Clear()
.Add($"{PreFixCls}-slide")
.If($"{PreFixCls}-active", () => Active)
.If($"{PreFixCls}-current", () => Active);
}
internal void Activate()
{
Active = true;
//StateHasChanged();
}
internal void Deactivate()
{
Active = false;
//StateHasChanged();
}
internal string GetStyle(int index, int width, string effect)
{
if (effect == CarouselEffect.Fade)
{
return $"outline: none; width: {width}px; position: relative; left: {-width * index}px; opacity: {(Active ? 1 : 0)}; transition: opacity 500ms ease 0s, visibility 500ms ease 0s;";
}
else
{
return $"outline: none; width: {width}px;";
}
}
}
}