feat: on enter exit editing property field #1295 (#1747)

* feat: on enter exit editing property field #1295

* chore: use FlowyTextField instead of RoundedInputField

* fix: make all text field border radius 10, added errorBorder

* fix: put cursor position at end of text field

See the related discussion here:
https://github.com/AppFlowy-IO/AppFlowy/pull/1747#issuecomment-1407697216

* chore: make errorText optional on FlowyTextField

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart

@@ -6,7 +6,7 @@ import 'package:dartz/dartz.dart' show none;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
+import 'package:flowy_infra_ui/style_widget/text_field.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:flutter/material.dart';
@@ -135,11 +135,9 @@ class _FieldNameTextField extends StatefulWidget {
 
 class _FieldNameTextFieldState extends State<_FieldNameTextField> {
   FocusNode focusNode = FocusNode();
-  late TextEditingController controller;
 
   @override
   void initState() {
-    controller = TextEditingController();
     focusNode.addListener(() {
       if (focusNode.hasFocus) {
         widget.popoverMutex.close();
@@ -157,33 +155,23 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
 
   @override
   Widget build(BuildContext context) {
-    return MultiBlocListener(
+    return BlocListener<FieldEditorBloc, FieldEditorState>(
-      listeners: [
+      listenWhen: (p, c) => p.field == none(),
-        BlocListener<FieldEditorBloc, FieldEditorState>(
+      listener: (context, state) {
-          listenWhen: (p, c) => p.field == none(),
+        focusNode.requestFocus();
-          listener: (context, state) {
+      },
-            focusNode.requestFocus();
-          },
-        ),
-        BlocListener<FieldEditorBloc, FieldEditorState>(
-          listenWhen: (p, c) => controller.text != c.name,
-          listener: (context, state) {
-            controller.text = state.name;
-          },
-        ),
-      ],
       child: BlocBuilder<FieldEditorBloc, FieldEditorState>(
         buildWhen: (previous, current) =>
             previous.errorText != current.errorText,
         builder: (context, state) {
           return Padding(
             padding: const EdgeInsets.symmetric(horizontal: 12.0),
-            child: RoundedInputField(
+            child: FlowyTextField(
-              height: 36,
               focusNode: focusNode,
-              style: Theme.of(context).textTheme.bodyMedium,
+              onSubmitted: (String _) => PopoverContainer.of(context).close(),
-              controller: controller,
+              text: context.read<FieldEditorBloc>().state.name,
-              errorText: context.read<FieldEditorBloc>().state.errorText,
+              errorText: context.read<FieldEditorBloc>().state.errorText.isEmpty ?
+                null : context.read<FieldEditorBloc>().state.errorText,
               onChanged: (newName) {
                 context
                     .read<FieldEditorBloc>()

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_field.dart

@@ -19,6 +19,7 @@ class FlowyTextField extends StatefulWidget {
   final bool autoClearWhenDone;
   final bool submitOnLeave;
   final Duration? debounceDuration;
+  final String? errorText;
 
   const FlowyTextField({
     this.hintText = "",
@@ -34,6 +35,7 @@ class FlowyTextField extends StatefulWidget {
     this.autoClearWhenDone = false,
     this.submitOnLeave = false,
     this.debounceDuration,
+    this.errorText,
     Key? key,
   }) : super(key: key);
 
@@ -117,6 +119,7 @@ class FlowyTextFieldState extends State<FlowyTextField> {
         ),
         isDense: true,
         hintText: widget.hintText,
+        errorText: widget.errorText,
         hintStyle: Theme.of(context)
             .textTheme
             .bodySmall!
@@ -128,7 +131,21 @@ class FlowyTextFieldState extends State<FlowyTextField> {
             color: Theme.of(context).colorScheme.primary,
             width: 1.0,
           ),
-          borderRadius: Corners.s8Border,
+          borderRadius: Corners.s10Border,
+        ),
+        errorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: Theme.of(context).colorScheme.error,
+            width: 1.0,
+          ),
+          borderRadius: Corners.s10Border,
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: Theme.of(context).colorScheme.error,
+            width: 1.0,
+          ),
+          borderRadius: Corners.s10Border,
         ),
       ),
     );

frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart

@@ -27,6 +27,7 @@ class RoundedInputField extends StatefulWidget {
   final TextEditingController? controller;
   final bool autoFocus;
   final int? maxLength;
+  final Function(String)? onFieldSubmitted;
 
   const RoundedInputField({
     Key? key,
@@ -51,6 +52,7 @@ class RoundedInputField extends StatefulWidget {
     this.controller,
     this.autoFocus = false,
     this.maxLength,
+    this.onFieldSubmitted,
   }) : super(key: key);
 
   @override
@@ -106,6 +108,7 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
           maxLength: widget.maxLength,
           maxLengthEnforcement:
               MaxLengthEnforcement.truncateAfterCompositionEnds,
+          onFieldSubmitted: widget.onFieldSubmitted,
           onChanged: (value) {
             inputText = value;
             if (widget.onChanged != null) {