diff --git a/lib/src/model/pluto_column.dart b/lib/src/model/pluto_column.dart index d0cadebc..20687f79 100644 --- a/lib/src/model/pluto_column.dart +++ b/lib/src/model/pluto_column.dart @@ -182,27 +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 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; @@ -221,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, @@ -252,16 +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.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; @@ -372,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 e669d515..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,12 +310,12 @@ class PlutoColumnFilterState extends PlutoStateWithChange { onChanged: _handleOnChanged, onEditingComplete: _handleOnEditingComplete, decoration: InputDecoration( - suffixIcon: widget.column.filterSuffixIcon, - 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,