From 721781f0aea74f2c139ed85869174bf34f3eab2c Mon Sep 17 00:00:00 2001
From: "Nathan.fooo" <86001920+appflowy@users.noreply.github.com>
Date: Mon, 5 Dec 2022 09:55:37 +0800
Subject: [PATCH] chore: refresh the grid rows after typing text in the text
 filter (#1533)

Co-authored-by: nathan <nathan@appflowy.io>
---
 .../widgets/filter/choicechip/text.dart       |  3 +-
 .../lib/style_widget/text_field.dart          | 39 +++++++++++++++----
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/filter/choicechip/text.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/filter/choicechip/text.dart
index 74fa8d71ec..1c51eba0ff 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/filter/choicechip/text.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/filter/choicechip/text.dart
@@ -152,8 +152,9 @@ class _TextFilterEditorState extends State<TextFilterEditor> {
     return FlowyTextField(
       text: state.filter.content,
       hintText: LocaleKeys.grid_settings_typeAValue.tr(),
+      debounceDuration: const Duration(milliseconds: 300),
       autoFocus: false,
-      onSubmitted: (text) {
+      onChanged: (text) {
         context
             .read<TextFilterEditorBloc>()
             .add(TextFilterEditorEvent.updateContent(text));
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_field.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_field.dart
index 13d38e9e7c..bea515fb46 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_field.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_field.dart
@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:flowy_infra/size.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -13,6 +15,7 @@ class FlowyTextField extends StatefulWidget {
   final int? maxLength;
   final TextEditingController? controller;
   final bool autoClearWhenDone;
+  final Duration? debounceDuration;
 
   const FlowyTextField({
     this.hintText = "",
@@ -24,6 +27,7 @@ class FlowyTextField extends StatefulWidget {
     this.maxLength,
     this.controller,
     this.autoClearWhenDone = false,
+    this.debounceDuration,
     Key? key,
   }) : super(key: key);
 
@@ -34,6 +38,7 @@ class FlowyTextField extends StatefulWidget {
 class FlowyTextFieldState extends State<FlowyTextField> {
   late FocusNode focusNode;
   late TextEditingController controller;
+  Timer? _debounceOnChanged;
 
   @override
   void initState() {
@@ -54,22 +59,40 @@ class FlowyTextFieldState extends State<FlowyTextField> {
     super.initState();
   }
 
+  void _debounceOnChangedText(Duration duration, String text) {
+    _debounceOnChanged?.cancel();
+    _debounceOnChanged = Timer(duration, () async {
+      if (mounted) {
+        _onChanged(text);
+      }
+    });
+  }
+
+  void _onChanged(String text) {
+    widget.onChanged?.call(text);
+    setState(() {});
+  }
+
+  void _onSubmitted(String text) {
+    widget.onSubmitted?.call(text);
+    if (widget.autoClearWhenDone) {
+      controller.text = "";
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return TextField(
       controller: controller,
       focusNode: focusNode,
       onChanged: (text) {
-        widget.onChanged?.call(text);
-        setState(() {});
-      },
-      onSubmitted: (text) {
-        widget.onSubmitted?.call(text);
-
-        if (widget.autoClearWhenDone) {
-          controller.text = "";
+        if (widget.debounceDuration != null) {
+          _debounceOnChangedText(widget.debounceDuration!, text);
+        } else {
+          _onChanged(text);
         }
       },
+      onSubmitted: (text) => _onSubmitted(text),
       maxLines: 1,
       maxLength: widget.maxLength,
       maxLengthEnforcement: MaxLengthEnforcement.truncateAfterCompositionEnds,