fix: show multi-line in row detail page

appflowy · appflowy · commit 893b6e041d11 · 2022-09-20T16:15:05.000+08:00
diff --git a/frontend/app_flowy/lib/plugins/grid/application/field/field_editor_bloc.dart b/frontend/app_flowy/lib/plugins/grid/application/field/field_editor_bloc.dart
@@ -33,8 +33,10 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
             await dataController.loadTypeOptionData();
           },
           updateName: (name) {
-            dataController.fieldName = name;
-            emit(state.copyWith(name: name));
+            if (state.name != name) {
+              dataController.fieldName = name;
+              emit(state.copyWith(name: name));
+            }
           },
           didReceiveFieldChanged: (FieldPB field) {
             emit(state.copyWith(
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart
@@ -137,9 +137,11 @@ class _DragToExpandLine extends StatelessWidget {
 class FieldCellButton extends StatelessWidget {
   final VoidCallback onTap;
   final FieldPB field;
+  final int? maxLines;
   const FieldCellButton({
     required this.field,
     required this.onTap,
+    this.maxLines = 1,
     Key? key,
   }) : super(key: key);
 
@@ -150,7 +152,11 @@ class FieldCellButton extends StatelessWidget {
       hoverColor: theme.shader6,
       onTap: onTap,
       leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
-      text: FlowyText.medium(field.name, fontSize: 12),
+      text: FlowyText.medium(
+        field.name,
+        fontSize: 12,
+        maxLines: maxLines,
+      ),
       margin: GridSize.cellContentInsets,
     );
   }
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
@@ -1,10 +1,9 @@
 import 'package:app_flowy/plugins/grid/application/field/field_editor_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:dartz/dartz.dart' show none;
 import 'package:easy_localization/easy_localization.dart';
-import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:flowy_infra/theme.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.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';
@@ -59,38 +58,38 @@ class _FieldEditorState extends State<FieldEditor> {
         isGroupField: widget.isGroupField,
         loader: widget.typeOptionLoader,
       )..add(const FieldEditorEvent.initial()),
-      child: BlocBuilder<FieldEditorBloc, FieldEditorState>(
-        builder: (context, state) {
-          return ListView(
-            shrinkWrap: true,
-            children: [
-              FlowyText.medium(
-                LocaleKeys.grid_field_editProperty.tr(),
-                fontSize: 12,
-              ),
-              const VSpace(10),
-              _FieldNameTextField(popoverMutex: popoverMutex),
-              const VSpace(10),
-              ..._addDeleteFieldButton(state),
-              _FieldTypeOptionCell(popoverMutex: popoverMutex),
-            ],
-          );
-        },
+      child: ListView(
+        shrinkWrap: true,
+        children: [
+          FlowyText.medium(
+            LocaleKeys.grid_field_editProperty.tr(),
+            fontSize: 12,
+          ),
+          const VSpace(10),
+          _FieldNameTextField(popoverMutex: popoverMutex),
+          const VSpace(10),
+          ..._addDeleteFieldButton(),
+          _FieldTypeOptionCell(popoverMutex: popoverMutex),
+        ],
       ),
     );
   }
 
-  List<Widget> _addDeleteFieldButton(FieldEditorState state) {
+  List<Widget> _addDeleteFieldButton() {
     if (widget.onDeleted == null) {
       return [];
     }
     return [
-      _DeleteFieldButton(
-        popoverMutex: popoverMutex,
-        onDeleted: () {
-          state.field.fold(
-            () => Log.error('Can not delete the field'),
-            (field) => widget.onDeleted?.call(field.id),
+      BlocBuilder<FieldEditorBloc, FieldEditorState>(
+        builder: (context, state) {
+          return _DeleteFieldButton(
+            popoverMutex: popoverMutex,
+            onDeleted: () {
+              state.field.fold(
+                () => Log.error('Can not delete the field'),
+                (field) => widget.onDeleted?.call(field.id),
+              );
+            },
           );
         },
       ),
@@ -139,13 +138,13 @@ class _FieldNameTextField extends StatefulWidget {
 }
 
 class _FieldNameTextFieldState extends State<_FieldNameTextField> {
-  late String name;
   FocusNode focusNode = FocusNode();
   VoidCallback? _popoverCallback;
-  TextEditingController controller = TextEditingController();
+  late TextEditingController controller;
 
   @override
   void initState() {
+    controller = TextEditingController();
     focusNode.addListener(() {
       if (focusNode.hasFocus) {
         widget.popoverMutex.close();
@@ -158,20 +157,29 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-
-    controller.text = context.read<FieldEditorBloc>().state.name;
-    return BlocListener<FieldEditorBloc, FieldEditorState>(
-      listenWhen: (previous, current) => previous.name != current.name,
-      listener: (context, state) {
-        controller.text = state.name;
-      },
+    return MultiBlocListener(
+      listeners: [
+        BlocListener<FieldEditorBloc, FieldEditorState>(
+          listenWhen: (p, c) => p.field == none(),
+          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) {
           listenOnPopoverChanged(context);
 
           return RoundedInputField(
             height: 36,
-            autoFocus: true,
             focusNode: focusNode,
             style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
             controller: controller,
@@ -202,14 +210,6 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
       }
     });
   }
-
-  @override
-  void didUpdateWidget(covariant _FieldNameTextField oldWidget) {
-    controller.selection = TextSelection.fromPosition(
-        TextPosition(offset: controller.text.length));
-
-    super.didUpdateWidget(oldWidget);
-  }
 }
 
 class _DeleteFieldButton extends StatelessWidget {
@@ -235,29 +235,11 @@ class _DeleteFieldButton extends StatelessWidget {
             fontSize: 12,
             color: enable ? null : theme.shader4,
           ),
+          onTap: () => onDeleted?.call(),
         );
-        if (enable) button = _wrapPopover(button);
+        // if (enable) button = button;
         return button;
       },
     );
   }
-
-  Widget _wrapPopover(Widget widget) {
-    return AppFlowyPopover(
-      triggerActions: PopoverTriggerFlags.click,
-      constraints: BoxConstraints.loose(const Size(400, 240)),
-      mutex: popoverMutex,
-      direction: PopoverDirection.center,
-      popupBuilder: (popupContext) {
-        return PopoverAlertView(
-          title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
-          cancel: () {},
-          confirm: () {
-            onDeleted?.call();
-          },
-        );
-      },
-      child: widget,
-    );
-  }
 }
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart
@@ -285,6 +285,7 @@ class _RowDetailCellState extends State<_RowDetailCell> {
               child: SizedBox(
                 width: 150,
                 child: FieldCellButton(
+                  maxLines: null,
                   field: widget.cellId.fieldContext.field,
                   onTap: () {
                     popover.show();
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart
@@ -8,6 +8,7 @@ class FlowyText extends StatelessWidget {
   final double fontSize;
   final FontWeight fontWeight;
   final TextAlign? textAlign;
+  final int? maxLines;
   final Color? color;
 
   const FlowyText(
@@ -18,28 +19,48 @@ class FlowyText extends StatelessWidget {
     this.fontWeight = FontWeight.w400,
     this.textAlign,
     this.color,
+    this.maxLines = 1,
   }) : super(key: key);
 
-  const FlowyText.semibold(this.title,
-      {Key? key, this.fontSize = 16, this.overflow, this.color, this.textAlign})
-      : fontWeight = FontWeight.w600,
+  const FlowyText.semibold(
+    this.title, {
+    Key? key,
+    this.fontSize = 16,
+    this.overflow,
+    this.color,
+    this.textAlign,
+    this.maxLines = 1,
+  })  : fontWeight = FontWeight.w600,
         super(key: key);
 
-  const FlowyText.medium(this.title,
-      {Key? key, this.fontSize = 16, this.overflow, this.color, this.textAlign})
-      : fontWeight = FontWeight.w500,
+  const FlowyText.medium(
+    this.title, {
+    Key? key,
+    this.fontSize = 16,
+    this.overflow,
+    this.color,
+    this.textAlign,
+    this.maxLines = 1,
+  })  : fontWeight = FontWeight.w500,
         super(key: key);
 
-  const FlowyText.regular(this.title,
-      {Key? key, this.fontSize = 16, this.overflow, this.color, this.textAlign})
-      : fontWeight = FontWeight.w400,
+  const FlowyText.regular(
+    this.title, {
+    Key? key,
+    this.fontSize = 16,
+    this.overflow,
+    this.color,
+    this.textAlign,
+    this.maxLines = 1,
+  })  : fontWeight = FontWeight.w400,
         super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return Text(
       title,
+      maxLines: maxLines,
       textAlign: textAlign,
       overflow: overflow ?? TextOverflow.clip,
       style: TextStyle(
