TF-933 Apply new design for SearchInputForm on Web Desktop

2022-09-15 19:15:29 +07:00
parent 0fb78cef5e
commit e23f4b7756
9 changed files with 456 additions and 367 deletions
@@ -3,6 +3,7 @@ import 'dart:async';
 import 'dart:math';
 import 'dart:io';

+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/foundation.dart';

 import 'package:flutter/material.dart';
@@ -85,6 +86,8 @@ class QuickSearchInputForm<T, R> extends FormField<String> {
        RecentSelectionCallback<R>? onRecentSelected,
        EdgeInsets? listActionPadding,
        bool hideSuggestionsBox: false,
+        BoxDecoration? decoration,
+        double? maxHeight,
      }) : assert(
  initialValue == null || textFieldConfiguration.controller == null),
        assert(minCharsForSuggestions >= 0),
@@ -146,6 +149,8 @@ class QuickSearchInputForm<T, R> extends FormField<String> {
              onRecentSelected: onRecentSelected,
              listActionPadding: listActionPadding,
              hideSuggestionsBox: hideSuggestionsBox,
+              decoration: decoration,
+              maxHeight: maxHeight,
            );
          });

@@ -505,6 +510,10 @@ class TypeAheadFieldQuickSearch<T, R> extends StatefulWidget {
  /// Padding button action
  final EdgeInsets? listActionPadding;
  final bool hideSuggestionsBox;
+  /// Box decoration search input
+  final BoxDecoration? decoration;
+  /// Max height search input
+  final double? maxHeight;

  /// Creates a [TypeAheadFieldQuickSearch]
  TypeAheadFieldQuickSearch(
@@ -545,6 +554,8 @@ class TypeAheadFieldQuickSearch<T, R> extends StatefulWidget {
        this.onRecentSelected,
        this.listActionPadding,
        this.hideSuggestionsBox = false,
+        this.decoration,
+        this.maxHeight,
      }) : assert(animationStart >= 0.0 && animationStart <= 1.0),
        assert(
        direction == AxisDirection.down || direction == AxisDirection.up),
@@ -631,6 +642,7 @@ class _TypeAheadFieldQuickSearchState<T, R> extends State<TypeAheadFieldQuickSea
          this._suggestionsBox!.close();
        }
      }
+      setState(() {});
    };

    this._effectiveFocusNode!.addListener(_focusNodeListener);
@@ -653,6 +665,7 @@ class _TypeAheadFieldQuickSearchState<T, R> extends State<TypeAheadFieldQuickSea
        if (this._effectiveFocusNode!.hasFocus) {
          this._suggestionsBox!.open();
        }
+        setState(() {});
      }
    });
  }
@@ -762,15 +775,13 @@ class _TypeAheadFieldQuickSearchState<T, R> extends State<TypeAheadFieldQuickSea
          offset: Offset(
              widget.suggestionsBoxDecoration.offsetX,
              _suggestionsBox!.direction == AxisDirection.down
-                  ? _suggestionsBox!.textBoxHeight +
-                  widget.suggestionsBoxVerticalOffset
+                  ? _suggestionsBox!.textBoxHeight + widget.suggestionsBoxVerticalOffset
                  : _suggestionsBox!.directionUpOffset),
          child: _suggestionsBox!.direction == AxisDirection.down
              ? suggestionsList
              : FractionalTranslation(
-            translation:
-            Offset(0.0, -1.0), // visually flips list to go up
-            child: suggestionsList,
+                  translation: Offset(0.0, -1.0), // visually flips list to go up
+                  child: suggestionsList,
          ),
        ),
      );
@@ -781,52 +792,72 @@ class _TypeAheadFieldQuickSearchState<T, R> extends State<TypeAheadFieldQuickSea
  Widget build(BuildContext context) {
    return CompositedTransformTarget(
      link: this._layerLink,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          if (widget.textFieldConfiguration.leftButton != null)
-            widget.textFieldConfiguration.leftButton!,
-          Expanded(
-            child: TextField(
-              focusNode: this._effectiveFocusNode,
-              controller: this._effectiveController,
-              decoration: widget.textFieldConfiguration.decoration,
-              style: widget.textFieldConfiguration.style,
-              textAlign: widget.textFieldConfiguration.textAlign,
-              enabled: widget.textFieldConfiguration.enabled,
-              keyboardType: widget.textFieldConfiguration.keyboardType,
-              autofocus: widget.textFieldConfiguration.autofocus,
-              inputFormatters: widget.textFieldConfiguration.inputFormatters,
-              autocorrect: widget.textFieldConfiguration.autocorrect,
-              maxLines: widget.textFieldConfiguration.maxLines,
-              textAlignVertical: widget.textFieldConfiguration.textAlignVertical,
-              minLines: widget.textFieldConfiguration.minLines,
-              maxLength: widget.textFieldConfiguration.maxLength,
-              maxLengthEnforcement: widget.textFieldConfiguration.maxLengthEnforcement,
-              obscureText: widget.textFieldConfiguration.obscureText,
-              onChanged: widget.textFieldConfiguration.onChanged,
-              onSubmitted: widget.textFieldConfiguration.onSubmitted,
-              onEditingComplete: widget.textFieldConfiguration.onEditingComplete,
-              onTap: widget.textFieldConfiguration.onTap,
-              scrollPadding: widget.textFieldConfiguration.scrollPadding,
-              textInputAction: widget.textFieldConfiguration.textInputAction,
-              textCapitalization: widget.textFieldConfiguration.textCapitalization,
-              keyboardAppearance: widget.textFieldConfiguration.keyboardAppearance,
-              cursorWidth: widget.textFieldConfiguration.cursorWidth,
-              cursorRadius: widget.textFieldConfiguration.cursorRadius,
-              cursorColor: widget.textFieldConfiguration.cursorColor,
-              textDirection: widget.textFieldConfiguration.textDirection,
-              enableInteractiveSelection:
-              widget.textFieldConfiguration.enableInteractiveSelection,
-              readOnly: widget.hideKeyboard,
+      child: Container(
+        decoration: this._suggestionsBox?.isOpened == true
+          ? const BoxDecoration(
+              borderRadius: BorderRadius.only(
+                  topRight: Radius.circular(16),
+                  topLeft: Radius.circular(16)),
+              boxShadow: [
+                BoxShadow(
+                    color: AppColor.colorShadowComposer,
+                    blurRadius: 32),
+                BoxShadow(
+                    color: AppColor.colorShadowComposer,
+                    blurRadius: 4),
+              ],
+              color: Colors.white)
+          : const BoxDecoration(
+              borderRadius: BorderRadius.all(Radius.circular(12)),
+              color: AppColor.colorBgSearchBar),
+        height: widget.maxHeight,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            if (widget.textFieldConfiguration.leftButton != null)
+              widget.textFieldConfiguration.leftButton!,
+            Expanded(
+              child: TextField(
+                focusNode: this._effectiveFocusNode,
+                controller: this._effectiveController,
+                decoration: widget.textFieldConfiguration.decoration,
+                style: widget.textFieldConfiguration.style,
+                textAlign: widget.textFieldConfiguration.textAlign,
+                enabled: widget.textFieldConfiguration.enabled,
+                keyboardType: widget.textFieldConfiguration.keyboardType,
+                autofocus: widget.textFieldConfiguration.autofocus,
+                inputFormatters: widget.textFieldConfiguration.inputFormatters,
+                autocorrect: widget.textFieldConfiguration.autocorrect,
+                maxLines: widget.textFieldConfiguration.maxLines,
+                textAlignVertical: widget.textFieldConfiguration.textAlignVertical,
+                minLines: widget.textFieldConfiguration.minLines,
+                maxLength: widget.textFieldConfiguration.maxLength,
+                maxLengthEnforcement: widget.textFieldConfiguration.maxLengthEnforcement,
+                obscureText: widget.textFieldConfiguration.obscureText,
+                onChanged: widget.textFieldConfiguration.onChanged,
+                onSubmitted: widget.textFieldConfiguration.onSubmitted,
+                onEditingComplete: widget.textFieldConfiguration.onEditingComplete,
+                onTap: widget.textFieldConfiguration.onTap,
+                scrollPadding: widget.textFieldConfiguration.scrollPadding,
+                textInputAction: widget.textFieldConfiguration.textInputAction,
+                textCapitalization: widget.textFieldConfiguration.textCapitalization,
+                keyboardAppearance: widget.textFieldConfiguration.keyboardAppearance,
+                cursorWidth: widget.textFieldConfiguration.cursorWidth,
+                cursorRadius: widget.textFieldConfiguration.cursorRadius,
+                cursorColor: widget.textFieldConfiguration.cursorColor,
+                textDirection: widget.textFieldConfiguration.textDirection,
+                enableInteractiveSelection:
+                widget.textFieldConfiguration.enableInteractiveSelection,
+                readOnly: widget.hideKeyboard,
+              ),
            ),
-          ),
-          if (widget.textFieldConfiguration.clearTextButton != null
-              && this._effectiveController?.text.isNotEmpty == true)
-            widget.textFieldConfiguration.clearTextButton!,
-          if (widget.textFieldConfiguration.rightButton != null)
-            widget.textFieldConfiguration.rightButton!,
-        ],
+            if (widget.textFieldConfiguration.clearTextButton != null
+                && this._effectiveController?.text.isNotEmpty == true)
+              widget.textFieldConfiguration.clearTextButton!,
+            if (widget.textFieldConfiguration.rightButton != null)
+              widget.textFieldConfiguration.rightButton!,
+          ],
+        ),
      ),
    );
  }
@@ -1066,12 +1097,12 @@ class _SuggestionsListState<T, R> extends State<_SuggestionsList<T, R>>
    final animationChild = widget.transitionBuilder != null
        ? widget.transitionBuilder!(context, child, this._animationController)
        : SizeTransition(
-      axisAlignment: -1.0,
-      sizeFactor: CurvedAnimation(
-          parent: this._animationController!,
-          curve: Curves.fastOutSlowIn),
-      child: child,
-    );
+            axisAlignment: -1.0,
+            sizeFactor: CurvedAnimation(
+                parent: this._animationController!,
+                curve: Curves.fastOutSlowIn),
+            child: child,
+          );

    BoxConstraints constraints;
    if (widget.decoration!.constraints == null) {
@@ -1088,10 +1119,16 @@ class _SuggestionsListState<T, R> extends State<_SuggestionsList<T, R>>
    }

    var container = Material(
-      elevation: widget.decoration!.elevation,
+      elevation: widget.suggestionsBox?.isOpened == true
+        ? 1
+        : widget.decoration!.elevation,
      color: widget.decoration!.color,
      shape: widget.decoration!.shape,
-      borderRadius: widget.decoration!.borderRadius,
+      borderRadius:  widget.suggestionsBox?.isOpened == true
+        ? const BorderRadius.only(
+            bottomLeft: Radius.circular(16),
+            bottomRight: Radius.circular(16))
+        : widget.decoration!.borderRadius,
      shadowColor: widget.decoration!.shadowColor,
      clipBehavior: widget.decoration!.clipBehavior,
      child: ConstrainedBox(
@@ -1258,7 +1295,7 @@ class _SuggestionsListState<T, R> extends State<_SuggestionsList<T, R>>
    if (widget.decoration!.hasScrollbar) {
      child = Scrollbar(
        controller: _scrollController,
-        child: child,
+        child: Container(child: child),
      );
    }

@@ -6,62 +6,42 @@ import 'package:flutter_svg/flutter_svg.dart';

 typedef OnOpenSearchViewAction = Function();

-class SearchBarView {
-  OnOpenSearchViewAction? _onOpenSearchViewAction;
+class SearchBarView extends StatelessWidget {

+  final OnOpenSearchViewAction? onOpenSearchViewAction;
  final ImagePaths _imagePaths;
+  final double? heightSearchBar;
+  final EdgeInsets? padding;
+  final EdgeInsets? margin;
+  final String? hintTextSearch;
+  final double? maxSizeWidth;
+  final Widget? rightButton;
+  final double? radius;

-  double? _heightSearchBar;
-  EdgeInsets? _padding;
-  EdgeInsets? _margin;
-  String? _hintTextSearch;
-  double? _maxSizeWidth;
-  Widget? _rightButton;
+  const SearchBarView(this._imagePaths, {
+    this.heightSearchBar,
+    this.padding,
+    this.margin,
+    this.hintTextSearch,
+    this.maxSizeWidth,
+    this.rightButton,
+    this.onOpenSearchViewAction,
+    this.radius,
+  });

-
-  SearchBarView(this._imagePaths);
-
-  void addOnOpenSearchViewAction(OnOpenSearchViewAction onOpenSearchViewAction) {
-    _onOpenSearchViewAction = onOpenSearchViewAction;
-  }
-
-  void setHeightSearchBar(double heightSearchBar) {
-    _heightSearchBar = heightSearchBar;
-  }
-
-  void addPadding(EdgeInsets padding) {
-    _padding = padding;
-  }
-
-  void addRightButton(Widget rightButton) {
-    _rightButton = rightButton;
-  }
-
-  void addMargin(EdgeInsets margin) {
-    _margin = margin;
-  }
-
-  void hintTextSearch(String text) {
-    _hintTextSearch = text;
-  }
-
-  void maxSizeWidth(double? size) {
-    _maxSizeWidth = size;
-  }
-
-  Widget build() {
+  Widget build(BuildContext context) {
    return Container(
        key: Key('search_bar_widget'),
        alignment: Alignment.center,
-        height: _heightSearchBar ?? 40,
-        width: _maxSizeWidth ?? double.infinity,
+        height: heightSearchBar ?? 40,
+        width: maxSizeWidth ?? double.infinity,
        decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(10),
+            borderRadius: BorderRadius.circular(radius ?? 10),
            color: AppColor.colorBgSearchBar),
-        padding: _padding ?? EdgeInsets.zero,
-        margin: _margin ?? EdgeInsets.zero,
+        padding: padding ?? EdgeInsets.zero,
+        margin: margin ?? EdgeInsets.zero,
        child: InkWell(
-          onTap: () => _onOpenSearchViewAction?.call(),
+          onTap: onOpenSearchViewAction,
          mouseCursor: SystemMouseCursors.text,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
@@ -71,16 +51,24 @@ class SearchBarView {
                  splashRadius: 15,
                  minSize: 40,
                  iconPadding: EdgeInsets.zero,
-                  icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 16, height: 16, fit: BoxFit.fill),
-                  onTap: () => _onOpenSearchViewAction?.call()),
+                  icon: SvgPicture.asset(
+                      _imagePaths.icSearchBar,
+                      width: 16,
+                      height: 16,
+                      fit: BoxFit.fill),
+                  onTap: onOpenSearchViewAction),
              Expanded(
                child: Text(
-                    _hintTextSearch ?? '',
+                    hintTextSearch ?? '',
                    maxLines: 1,
-                    style: TextStyle(fontSize: kIsWeb ? 15 : 17, color: AppColor.colorHintSearchBar)),
+                    overflow: CommonTextStyle.defaultTextOverFlow,
+                    softWrap: CommonTextStyle.defaultSoftWrap,
+                    style: TextStyle(
+                        fontSize: kIsWeb ? 15 : 17,
+                        color: AppColor.colorHintSearchBar)),
              ),
-              if(_rightButton != null)
-                _rightButton!
+              if(rightButton != null)
+                rightButton!
            ]
          ),
        ),