blazor-use-devextreme-slider/BlazorSlider/Components/Slider/DxSlider.razor at d8d4a4fa928ef99c53cdbdd59a30f38c7a1720cd · DevExpress-Examples/blazor-use-devextreme-slider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
@inject IJSRuntime JS
@attribute [CascadingTypeParameter(nameof(T))]
@typeparam T where T : struct
@implements IAsyncDisposable

<CascadingValue IsFixed="true" Value="sliderState">
    @ChildContent
    <div @ref="sliderElement"></div>
</CascadingValue>

@code {
    #region Fields
    readonly SliderState<T> sliderState = new();
    T prevValue;
    T internalValue;
    ElementReference sliderElement;
    DotNetObjectReference<DxSlider<T>>? dotNetRef;
    IJSObjectReference? clientModule;
    IJSObjectReference? clientSlider;
    #endregion

    #region Properties
    DotNetObjectReference<DxSlider<T>> DotNetRef
        => dotNetRef ??= DotNetObjectReference.Create(this);
    #endregion

    #region Parameters
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public T MinValue { get; set; }

    [Parameter]
    public T MaxValue { get; set; }

    [Parameter]
    public T? Step { get; set; }

    [Parameter]
    public T Value { get; set; }

    [Parameter]
    public EventCallback<T> ValueChanged { get; set; }

    [Parameter]
    public SliderValueChangeMode ValueChangeMode { get; set; }

    [Parameter]
    public bool ShowRange { get; set; } = true;

    [Parameter]
    public bool Enabled { get; set; } = true;
    #endregion

    #region Lifecycle Events
    protected override async Task OnParametersSetAsync() {
        if(!Value.Equals(prevValue)) {
            internalValue = Value;
            prevValue = Value;
        }
        await UpdateServerState();
        await UpdateClientState();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender) {
            await JS.LoadDxResources();
            clientModule = await LoadSliderModule();
            clientSlider = await LoadClientInstance(clientModule);
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync() {
        if(clientSlider != null)
            await clientSlider.DisposeAsync();
        if(clientModule != null)
            await clientModule.DisposeAsync();
        DotNetRef?.Dispose();
    }
    #endregion

    #region Methods
    [JSInvokable]
    public async Task UpdateValueFromClient(T clientValue) {
        if(!internalValue.Equals(clientValue)) {
            internalValue = clientValue;
            await UpdateServerState();
            await ValueChanged.InvokeAsync(clientValue);
        }
    }

    ValueTask UpdateServerState() {
        sliderState.Value = internalValue;
        sliderState.Step = Step;
        sliderState.ShowRange = ShowRange;
        sliderState.MinValue = MinValue;
        sliderState.MaxValue = MaxValue;
        sliderState.Enabled = Enabled;
        sliderState.ValueChangeMode = ValueChangeMode;
        return ValueTask.CompletedTask;
    }

    ValueTask UpdateClientState() {
        if(clientSlider != null && clientModule != null) {
            return clientModule.InvokeVoidAsync("updateStateFromServer",
                clientSlider, sliderState);
        }
        return ValueTask.CompletedTask;
    }

    ValueTask<IJSObjectReference> LoadSliderModule() {
        return JS.InvokeAsync<IJSObjectReference>(
                "import", "./Components/Slider/DxSlider.razor.js");
    }

    ValueTask<IJSObjectReference> LoadClientInstance(IJSObjectReference module) {
        return module.InvokeAsync<IJSObjectReference>(
                "initializeSlider",
                sliderElement,
                DotNetRef,
                sliderState
            );
    }
    #endregion
}