From bca1bb35a47da1e9df092a2d78ac677052db26cc Mon Sep 17 00:00:00 2001 From: Stan Persoons <147701137+stan-at-work@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:22:37 +0100 Subject: [PATCH 1/2] Added missing parameter filterWidgetBuilder and onFilterSuffixTap --- lib/src/model/pluto_column.dart | 11 +++++++++++ lib/src/ui/columns/pluto_column_filter.dart | 15 ++++++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/lib/src/model/pluto_column.dart b/lib/src/model/pluto_column.dart index d0cadebc..ef2c42ca 100644 --- a/lib/src/model/pluto_column.dart +++ b/lib/src/model/pluto_column.dart @@ -191,6 +191,15 @@ class PlutoColumn { ///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; @@ -257,6 +266,8 @@ class PlutoColumn { 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, diff --git a/lib/src/ui/columns/pluto_column_filter.dart b/lib/src/ui/columns/pluto_column_filter.dart index e669d515..2f64787d 100644 --- a/lib/src/ui/columns/pluto_column_filter.dart +++ b/lib/src/ui/columns/pluto_column_filter.dart @@ -267,7 +267,20 @@ class PlutoColumnFilterState extends PlutoStateWithChange { onChanged: _handleOnChanged, onEditingComplete: _handleOnEditingComplete, decoration: InputDecoration( - suffixIcon: widget.column.filterSuffixIcon, + 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 ?? (_enabled ? widget.column.defaultFilter.title : ''), filled: true, From a093683c2a92aab5d6ed3c902d50725edc7cd520 Mon Sep 17 00:00:00 2001 From: Stan Persoons <147701137+stan-at-work@users.noreply.github.com> Date: Tue, 17 Dec 2024 16:25:14 +0100 Subject: [PATCH 2/2] Added onClear and clearIcon param and filterWidgetDelegate to plutoColumn --- lib/src/model/pluto_column.dart | 96 +++++++++++++-------- lib/src/ui/columns/pluto_column_filter.dart | 68 +++++++++++---- 2 files changed, 108 insertions(+), 56 deletions(-) diff --git a/lib/src/model/pluto_column.dart b/lib/src/model/pluto_column.dart index ef2c42ca..20687f79 100644 --- 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 index 2f64787d..d9345b32 100644 --- 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 { @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 { ), 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 { 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,