Reactive UI, Implement Custom Control that run SearchCommand after typing ang waiting for 500ms

Viewed 25

XAML

<?xml version="1.0" encoding="UTF-8" ?>
<yummy:PancakeView
    x:Class="Endeavor.App.Mobile.Controls.SearchControlWithDelay"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:effects="clr-namespace:Endeavor.App.Mobile.Effects"
    xmlns:i18n="clr-namespace:JEndeavor.App.Mobile.Resources"
    xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
    x:Name="control"
    Padding="0"
    BackgroundColor="White"
    CornerRadius="20"
    VerticalOptions="Center"
    AutomationId="searchControlView">

    <SearchBar
        x:Name="searchBar"
        AutomationId="searchBar"
        BackgroundColor="White"
        HeightRequest="50"
        Placeholder="{x:Static i18n:Translator.Header_Search}"
        SearchCommand="{x:Binding Source={x:Reference control},
                                  Path=SearchCommand}"
        Text="{x:Binding Source={x:Reference control},
                         Path=Text,
                         Mode=TwoWay}">
        <SearchBar.Effects>
            <effects:SearchBarBackgroundEffect />
        </SearchBar.Effects>
    </SearchBar>
</yummy:PancakeView>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reactive.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.PancakeView;
using Xamarin.Forms.Xaml;

namespace Endeavor.App.Mobile.Controls
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class SearchControlWithDelay : PancakeView
    {
        private readonly IDisposable searchPredicate;
        public static BindableProperty TextProperty =
            BindableProperty.Create(nameof(Text), typeof(string), typeof(SearchControlWithDelay), null, BindingMode.TwoWay);

        public static BindableProperty SearchCommandProperty =
            BindableProperty.Create(nameof(SearchCommand), typeof(ICommand), typeof(SearchControlWithDelay), null, BindingMode.TwoWay);

        public ICommand SearchCommand
        {
            get { return (ICommand)GetValue(SearchCommandProperty); }
            set { SetValue(SearchCommandProperty, value); }
        }

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public SearchControlWithDelay()
        {
            searchPredicate = this.WhenAnyValue(x => x.Text)
                                  .Throttle(TimeSpan.FromMilliseconds(500), RxApp.MainThreadScheduler)
                                  .DistinctUntilChanged()
                                  .Subscribe(x => SearchCommand?.Execute(x));

            InitializeComponent();
        }
    }
}

The problem is that in every letter that I input, the command runs , but supposed to be the Command should run if there is a 500ms gap from typing the search

Did I do something wrong in my code? I am really new in using ReactiveUI and I am not yet familiar with it.

Can anyone help me correct my code? It would be greatly appreciated.

0 Answers
Related