TF-2101 Add text input field widget without suggestion

(cherry picked from commit 1e171250a8b6c33aac705d71da207822cb1e17bc)
2023-12-21 15:54:57 +07:00
parent bf451d6b8f
commit 0cd8771caf
2 changed files with 152 additions and 0 deletions
@@ -0,0 +1,50 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class TextInputFieldWidgetStyles {
+  static const double titleWidth = 112.0;
+  static const double borderWidth = 1.0;
+  static const double suffixIconSize = 8.0;
+  static const double space = 12.0;
+  static const double spaceMobile = 8.0;
+  
+  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(
+    vertical: 8.0
+  );
+  static const EdgeInsetsGeometry suffixIconPadding = EdgeInsets.only(
+    right: 12.0
+  );
+  static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.symmetric(
+    horizontal: 12.0
+  );
+
+  static const BorderRadius borderRadius = BorderRadius.all(Radius.circular(10));
+
+  static const InputBorder border = OutlineInputBorder(
+    borderRadius: borderRadius,
+    borderSide: BorderSide(
+      width: borderWidth,
+      color: AppColor.colorInputBorderCreateMailbox,
+    )
+  );
+  static const InputBorder enableBorder = OutlineInputBorder(
+    borderRadius: borderRadius,
+    borderSide: BorderSide(
+      width: borderWidth,
+      color: AppColor.colorInputBorderCreateMailbox,
+    )
+  );
+  static const InputBorder focusedBorder = OutlineInputBorder(
+    borderRadius: borderRadius,
+    borderSide: BorderSide(
+      width: borderWidth,
+      color: AppColor.primaryColor,
+    )
+  );
+
+  static const TextStyle inputtedTextStyle = TextStyle(
+    fontSize: 16,
+    fontWeight: FontWeight.w400,
+    color: Colors.black,
+  );
+}
@@ -0,0 +1,102 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/text/text_field_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/base/isolate/background_isolate_binary_messenger/background_isolate_binary_messenger_mobile.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_field.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/styles/text_input_field/text_input_field_widget_styles.dart';
+
+typedef OnTextSubmitted = void Function(String text)?;
+
+class TextInputFieldWidget extends StatelessWidget {
+  final EmailRecoveryField field;
+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
+  final TextEditingController textEditingController;
+  final VoidCallback? onTap;
+  final MouseCursor? mouseCursor;
+  final FocusNode? currentFocusNode;
+  final FocusNode? nextFocusNode;
+  final OnTextSubmitted? onTextSubmitted;
+
+  const TextInputFieldWidget({
+    super.key,
+    required this.field,
+    required this.responsiveUtils,
+    required this.imagePaths,
+    required this.textEditingController,
+    this.onTap,
+    this.mouseCursor,
+    this.currentFocusNode,
+    this.nextFocusNode,
+    this.onTextSubmitted,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final title = SizedBox(
+      width: responsiveUtils.isMobile(context) 
+        ? null 
+        : TextInputFieldWidgetStyles.titleWidth,
+      child: Text(
+        field.getTitle(context),
+        style: field.getTitleTextStyle(),
+      ),
+    );
+    final inputField = TextFieldBuilder(
+      controller: textEditingController,
+      readOnly: false,
+      mouseCursor: mouseCursor,
+      maxLines: 1,
+      textInputAction: TextInputAction.next,
+      textStyle: TextInputFieldWidgetStyles.inputtedTextStyle,
+      onTap: onTap,
+      onTextSubmitted: onTextSubmitted,
+      decoration: InputDecoration(
+        filled: true,
+        fillColor: Colors.white,
+        contentPadding: TextInputFieldWidgetStyles.contentPadding,
+        enabledBorder: TextInputFieldWidgetStyles.enableBorder,
+        border: TextInputFieldWidgetStyles.border,
+        focusedBorder: TextInputFieldWidgetStyles.focusedBorder,
+        hintText: field.getHintText(context),
+        hintStyle: field.getHintTextStyle(),
+      ),
+    );
+
+    return RawKeyboardListener(
+      focusNode: currentFocusNode ?? FocusNode(),
+      onKey: (event) {
+        if (event is RawKeyDownEvent && event.logicalKey == LogicalKeyboardKey.tab) {
+          nextFocusNode?.requestFocus();
+        }
+      },
+      child: Padding(
+        padding: TextInputFieldWidgetStyles.padding,
+        child: responsiveUtils.isMobile(context)
+          ? Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              title,
+              const SizedBox(height: TextInputFieldWidgetStyles.spaceMobile),
+              inputField,
+            ]
+          )
+          : SizedBox(
+            height: 44,
+            child: Row(
+              children: [
+                title,
+                const SizedBox(width: TextInputFieldWidgetStyles.space),
+                Expanded(
+                  child: inputField,
+                )
+              ],
+            ),
+          ),
+      )
+    );
+  }
+}