Added onClear and clearIcon param and filterWidgetDelegate to plutoCo…

…lumn
stan-at-work · Dec 17, 2024 · a093683 · a093683
1 parent bca1bb3
commit a093683
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 56 deletions.
diff --git a/lib/src/model/pluto_column.dart b/lib/src/model/pluto_column.dart
@@ -182,36 +182,6 @@ class PlutoColumn {
   /// Valid only when [enableContextMenu] is activated.
   bool enableFilterMenuItem;
 
-  ///Set hint text for filter field
-  String? filterHintText;
-
-  ///Set hint text color for filter field
-  Color? filterHintTextColor;
-
-  ///Set suffix icon for filter field
-  Icon? filterSuffixIcon;
-
-  /// Set a custom on tap event for the filter suffix icon
-  Function(
-    FocusNode focusNode,
-    TextEditingController controller,
-    bool enabled,
-    void Function(String changed) handleOnChanged,
-    PlutoGridStateManager stateManager,
-  )? onFilterSuffixTap;
-
-  ///Set custom widget
-  @Deprecated("Use new filterWidgetBuilder to provide some parameters")
-  Widget? filterWidget;
-
-  Widget Function(
-    FocusNode focusNode,
-    TextEditingController controller,
-    bool enabled,
-    void Function(String changed) handleOnChanged,
-    PlutoGridStateManager stateManager,
-  )? filterWidgetBuilder;
-
   /// Displays Hide column menu in the column context menu.
   /// Valid only when [enableContextMenu] is activated.
   bool enableHideColumnMenuItem;
@@ -230,6 +200,9 @@ class PlutoColumn {
 
   LinearGradient? backgroundGradient;
 
+  /// The widget of the filter column, this can be customized with the multiple constructors, defaults to a [PlutoFilterColumnWidgetDelegate.initial()]
+  PlutoFilterColumnWidgetDelegate? filterWidgetDelegate;
+
   PlutoColumn({
     required this.title,
     required this.field,
@@ -261,18 +234,13 @@ class PlutoColumn {
     this.enableContextMenu = true,
     this.enableDropToResize = true,
     this.enableFilterMenuItem = true,
-    this.filterHintText,
-    this.filterHintTextColor,
-    this.filterSuffixIcon,
-    @Deprecated("Use new filterWidgetBuilder to provide some parameters")
-    this.filterWidget,
-    this.filterWidgetBuilder,
-    this.onFilterSuffixTap,
     this.enableHideColumnMenuItem = true,
     this.enableSetColumnsMenuItem = true,
     this.enableAutoEditing = false,
     this.enableEditingMode = true,
     this.hide = false,
+    this.filterWidgetDelegate =
+        const PlutoFilterColumnWidgetDelegate.textField(),
     this.disableRowCheckboxWhen,
   })  : _key = UniqueKey(),
         _checkReadOnly = checkReadOnly;
@@ -383,6 +351,60 @@ class PlutoColumn {
   }
 }
 
+class PlutoFilterColumnWidgetDelegate {
+  /// This is the default filter widget delegate
+  const PlutoFilterColumnWidgetDelegate.textField({
+    this.filterHintText,
+    this.filterHintTextColor,
+    this.filterSuffixIcon,
+    this.onFilterSuffixTap,
+    this.clearIcon = const Icon(Icons.clear),
+    this.onClear,
+  }) : filterWidgetBuilder = null;
+
+  /// If you don't want a custom widget
+  const PlutoFilterColumnWidgetDelegate.builder({
+    this.filterWidgetBuilder,
+  })  : filterSuffixIcon = null,
+        onFilterSuffixTap = null,
+        filterHintText = null,
+        filterHintTextColor = null,
+        clearIcon = const Icon(Icons.clear),
+        onClear = null;
+
+  ///Set hint text for filter field
+  final String? filterHintText;
+
+  ///Set hint text color for filter field
+  final Color? filterHintTextColor;
+
+  ///Set suffix icon for filter field
+  final Widget? filterSuffixIcon;
+
+  /// Clear icon in the text field, if onClear is null, this will not appear
+  final Widget clearIcon;
+
+  /// If this is set, it will be called when the clear button is tapped, if this is null there won't be a clear icon
+  final Function? onClear;
+
+  /// Set a custom on tap event for the filter suffix icon
+  final Function(
+    FocusNode focusNode,
+    TextEditingController controller,
+    bool enabled,
+    void Function(String changed) handleOnChanged,
+    PlutoGridStateManager stateManager,
+  )? onFilterSuffixTap;
+
+  final Widget Function(
+    FocusNode focusNode,
+    TextEditingController controller,
+    bool enabled,
+    void Function(String changed) handleOnChanged,
+    PlutoGridStateManager stateManager,
+  )? filterWidgetBuilder;
+}
+
 class PlutoColumnRendererContext {
   final PlutoColumn column;
 

diff --git a/lib/src/ui/columns/pluto_column_filter.dart b/lib/src/ui/columns/pluto_column_filter.dart
@@ -241,6 +241,50 @@ class PlutoColumnFilterState extends PlutoStateWithChange<PlutoColumnFilter> {
   @override
   Widget build(BuildContext context) {
     final style = stateManager.style;
+    final filterDelegate = widget.column.filterWidgetDelegate;
+
+    Widget? suffixIcon;
+
+    if (filterDelegate?.filterSuffixIcon != null) {
+      suffixIcon = InkWell(
+        onTap: () {
+          filterDelegate?.onFilterSuffixTap?.call(
+            _focusNode,
+            _controller,
+            _enabled,
+            _handleOnChanged,
+            stateManager,
+          );
+        },
+        child: filterDelegate?.filterSuffixIcon,
+      );
+    }
+
+    final clearIcon = InkWell(
+      onTap: () {
+        _controller.clear();
+        _handleOnChanged(_controller.text);
+        filterDelegate?.onClear?.call();
+      },
+      child: filterDelegate?.clearIcon,
+    );
+
+    if (filterDelegate?.onClear != null) {
+      if (suffixIcon == null) {
+        suffixIcon = clearIcon;
+      } else {
+        suffixIcon = Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          mainAxisSize: MainAxisSize.min,
+          spacing: 8,
+          children: [
+            suffixIcon,
+            clearIcon,
+            SizedBox(width: 4),
+          ],
+        );
+      }
+    }
 
     return SizedBox(
       height: stateManager.columnFilterHeight,
@@ -255,9 +299,8 @@ class PlutoColumnFilterState extends PlutoStateWithChange<PlutoColumnFilter> {
         ),
         child: Padding(
           padding: _padding,
-          child: widget.column.filterWidget ??
-              widget.column.filterWidgetBuilder?.call(_focusNode, _controller,
-                  _enabled, _handleOnChanged, stateManager) ??
+          child: filterDelegate?.filterWidgetBuilder?.call(_focusNode,
+                  _controller, _enabled, _handleOnChanged, stateManager) ??
               TextField(
                 focusNode: _focusNode,
                 controller: _controller,
@@ -267,25 +310,12 @@ class PlutoColumnFilterState extends PlutoStateWithChange<PlutoColumnFilter> {
                 onChanged: _handleOnChanged,
                 onEditingComplete: _handleOnEditingComplete,
                 decoration: InputDecoration(
-                  suffixIcon: widget.column.filterSuffixIcon != null
-                      ? GestureDetector(
-                          onTap: () {
-                            widget.column.onFilterSuffixTap?.call(
-                              _focusNode,
-                              _controller,
-                              _enabled,
-                              _handleOnChanged,
-                              stateManager,
-                            );
-                          },
-                          child: widget.column.filterSuffixIcon,
-                        )
-                      : null,
-                  hintText: widget.column.filterHintText ??
+                  suffixIcon: suffixIcon,
+                  hintText: filterDelegate?.filterHintText ??
                       (_enabled ? widget.column.defaultFilter.title : ''),
                   filled: true,
                   hintStyle:
-                      TextStyle(color: widget.column.filterHintTextColor),
+                      TextStyle(color: filterDelegate?.filterHintTextColor),
                   fillColor: _textFieldColor,
                   border: _border,
                   enabledBorder: _border,