@page "/transitions"

<h3>Transition 过渡效果</h3>

<h4>BootstarpBlazor 应用在部分组件的过渡动画，你也可以直接使用。</h4>

<Block Title="基础用法" Introduction="基础动画效果演示">
    <Button Color="Color.Primary" OnClick="OnShow" Text="FadeOut" />
    <Transition TransitionType="TransitionType.FadeOut" Show="Show" OnTransitionEnd="OnShowEnd">
        <div class="my-3">FadeOut</div>
    </Transition>
</Block>

<Block Title="动画执行完成回调" Introduction="动画执行完成后执行回调函数">
    <Button Color="Color.Primary" OnClick="OnTransitionShow" Text="FadeOut"></Button>
    <Transition TransitionType="TransitionType.FadeOut" Show="TransitionEndShow" OnTransitionEnd="OnTransitionEndShow">
        <div class="my-3">FadeOut</div>
    </Transition>
    <BlockLogger @ref="Trace" />
</Block>

<Block Title="设置动画时长" Introduction="通过设置 <code>Duration</code> 参数控制动画时长单位为毫秒">
    <Button Color="Color.Primary" OnClick="OnFadeInShow" Text="FadeIn"></Button>
    <Transition TransitionType="TransitionType.FadeIn" Show="FadeInShow" Duration="3000" OnTransitionEnd="OnFadeInEndShow">
        <div class="my-3">FadeIn</div>
    </Transition>
</Block>

<AttributeTable Items="@GetAttributes()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public partial class Transitions
    {
        private bool Show { get; set; }

        [NotNull]
        private BlockLogger? Trace { get; set; }

        private void OnShow()
        {
            Show = true;
        }

        private Task OnShowEnd()
        {
            Show = false;
            StateHasChanged();
            return Task.CompletedTask;
        }

        private bool TransitionEndShow { get; set; }

        private void OnTransitionShow()
        {
            TransitionEndShow = true;
        }

        private Task OnTransitionEndShow()
        {
            TransitionEndShow = false;
            Trace.Log("动画结束");
            StateHasChanged();
            return Task.CompletedTask;
        }

        private bool FadeInShow { get; set; }

        private void OnFadeInShow()
        {
            FadeInShow = true;
        }

        private Task OnFadeInEndShow()
        {
            FadeInShow = false;
            StateHasChanged();
            return Task.CompletedTask;
        }

        private static IEnumerable<AttributeItem> GetAttributes() => new[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "TransitionType",
                Description = "动画效果名称",
                Type = "TransitionType",
                ValueList = "FadeIn/FadeOut",
                DefaultValue = "FadeIn"
            },
            new AttributeItem() {
                Name = "Show",
                Description = "控制动画执行",
                Type = "Boolean",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "Duration",
                Description = "控制动画时长",
                Type = "int",
                ValueList = " - ",
                DefaultValue = "0"
            },
            new AttributeItem() {
                Name = "OnTransitionEnd",
                Description = "动画执行完成回调",
                Type = "Func<Task>",
                ValueList = " - ",
                DefaultValue = " - "
            }
        };
    }
}