chore: refresh the grid rows after typing text in the text filter (#1533)

Co-authored-by: nathan <nathan@appflowy.io>
This commit is contained in:
Nathan.fooo 2022-12-05 09:55:37 +08:00 committed by GitHub
parent 0d879a6091
commit 721781f0ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 9 deletions

View File

@ -152,8 +152,9 @@ class _TextFilterEditorState extends State<TextFilterEditor> {
return FlowyTextField( return FlowyTextField(
text: state.filter.content, text: state.filter.content,
hintText: LocaleKeys.grid_settings_typeAValue.tr(), hintText: LocaleKeys.grid_settings_typeAValue.tr(),
debounceDuration: const Duration(milliseconds: 300),
autoFocus: false, autoFocus: false,
onSubmitted: (text) { onChanged: (text) {
context context
.read<TextFilterEditorBloc>() .read<TextFilterEditorBloc>()
.add(TextFilterEditorEvent.updateContent(text)); .add(TextFilterEditorEvent.updateContent(text));

View File

@ -1,3 +1,5 @@
import 'dart:async';
import 'package:flowy_infra/size.dart'; import 'package:flowy_infra/size.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
@ -13,6 +15,7 @@ class FlowyTextField extends StatefulWidget {
final int? maxLength; final int? maxLength;
final TextEditingController? controller; final TextEditingController? controller;
final bool autoClearWhenDone; final bool autoClearWhenDone;
final Duration? debounceDuration;
const FlowyTextField({ const FlowyTextField({
this.hintText = "", this.hintText = "",
@ -24,6 +27,7 @@ class FlowyTextField extends StatefulWidget {
this.maxLength, this.maxLength,
this.controller, this.controller,
this.autoClearWhenDone = false, this.autoClearWhenDone = false,
this.debounceDuration,
Key? key, Key? key,
}) : super(key: key); }) : super(key: key);
@ -34,6 +38,7 @@ class FlowyTextField extends StatefulWidget {
class FlowyTextFieldState extends State<FlowyTextField> { class FlowyTextFieldState extends State<FlowyTextField> {
late FocusNode focusNode; late FocusNode focusNode;
late TextEditingController controller; late TextEditingController controller;
Timer? _debounceOnChanged;
@override @override
void initState() { void initState() {
@ -54,22 +59,40 @@ class FlowyTextFieldState extends State<FlowyTextField> {
super.initState(); 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return TextField( return TextField(
controller: controller, controller: controller,
focusNode: focusNode, focusNode: focusNode,
onChanged: (text) { onChanged: (text) {
widget.onChanged?.call(text); if (widget.debounceDuration != null) {
setState(() {}); _debounceOnChangedText(widget.debounceDuration!, text);
}, } else {
onSubmitted: (text) { _onChanged(text);
widget.onSubmitted?.call(text);
if (widget.autoClearWhenDone) {
controller.text = "";
} }
}, },
onSubmitted: (text) => _onSubmitted(text),
maxLines: 1, maxLines: 1,
maxLength: widget.maxLength, maxLength: widget.maxLength,
maxLengthEnforcement: MaxLengthEnforcement.truncateAfterCompositionEnds, maxLengthEnforcement: MaxLengthEnforcement.truncateAfterCompositionEnds,