chore: close bloc when overlay dismiss

frontend/app_flowy/assets/translations/en.json

@@ -150,7 +150,7 @@
       "duplicate": "Duplicate",
       "delete": "Delete",
       "textFieldName": "Text",
-      "checkboxFieldName": "Number",
+      "checkboxFieldName": "Checkbox",
       "dateFieldName": "Date",
       "numberFieldName": "Number",
       "singleSelectFieldName": "Select",

frontend/app_flowy/lib/workspace/application/grid/field/create_field_bloc.dart

@@ -1,3 +1,4 @@
+import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
@@ -14,8 +15,15 @@ class CreateFieldBloc extends Bloc<CreateFieldEvent, CreateFieldState> {
     on<CreateFieldEvent>(
       (event, emit) async {
         await event.map(
-          initial: (_InitialField value) {},
+          initial: (_InitialField value) async {
+            final result = await service.getDefaultField();
+            result.fold(
+              (field) => emit(state.copyWith(field: Some(field))),
+              (err) => Log.error(err),
+            );
+          },
           updateName: (_UpdateName value) {},
+          done: (_Done value) {},
         );
       },
     );
@@ -31,6 +39,7 @@ class CreateFieldBloc extends Bloc<CreateFieldEvent, CreateFieldState> {
 class CreateFieldEvent with _$CreateFieldEvent {
   const factory CreateFieldEvent.initial() = _InitialField;
   const factory CreateFieldEvent.updateName(String newName) = _UpdateName;
+  const factory CreateFieldEvent.done() = _Done;
 }
 
 @freezed

frontend/app_flowy/lib/workspace/application/grid/field/field_service.dart

@@ -12,9 +12,7 @@ class FieldService {
 
   FieldService({required this.gridId});
 
-  Future<Either<Field, FlowyError>> getDefaultField(
-    String gridId,
-  ) {
+  Future<Either<Field, FlowyError>> getDefaultField() {
     final payload = GridId.create()..value = gridId;
     return GridEventCreateDefaultField(payload).send();
   }
@@ -26,7 +24,7 @@ class FieldService {
     String? startFieldId,
   ) {
     final typeOptionData = typeOption.writeToBuffer();
-    return _createField(gridId, field, typeOptionData, startFieldId);
+    return createField(gridId, field, typeOptionData, startFieldId);
   }
 
   Future<Either<Unit, FlowyError>> createSingleSelectField(
@@ -36,7 +34,7 @@ class FieldService {
     String? startFieldId,
   ) {
     final typeOptionData = typeOption.writeToBuffer();
-    return _createField(gridId, field, typeOptionData, startFieldId);
+    return createField(gridId, field, typeOptionData, startFieldId);
   }
 
   Future<Either<Unit, FlowyError>> createMultiSelectField(
@@ -46,7 +44,7 @@ class FieldService {
     String? startFieldId,
   ) {
     final typeOptionData = typeOption.writeToBuffer();
-    return _createField(gridId, field, typeOptionData, startFieldId);
+    return createField(gridId, field, typeOptionData, startFieldId);
   }
 
   Future<Either<Unit, FlowyError>> createNumberField(
@@ -56,7 +54,7 @@ class FieldService {
     String? startFieldId,
   ) {
     final typeOptionData = typeOption.writeToBuffer();
-    return _createField(gridId, field, typeOptionData, startFieldId);
+    return createField(gridId, field, typeOptionData, startFieldId);
   }
 
   Future<Either<Unit, FlowyError>> createDateField(
@@ -66,19 +64,19 @@ class FieldService {
     String? startFieldId,
   ) {
     final typeOptionData = typeOption.writeToBuffer();
-    return _createField(gridId, field, typeOptionData, startFieldId);
+    return createField(gridId, field, typeOptionData, startFieldId);
   }
 
-  Future<Either<Unit, FlowyError>> _createField(
+  Future<Either<Unit, FlowyError>> createField(
     String gridId,
     Field field,
-    Uint8List typeOptionData,
+    Uint8List? typeOptionData,
     String? startFieldId,
   ) {
     final payload = CreateFieldPayload.create()
       ..gridId = gridId
       ..field_2 = field
-      ..typeOptionData = typeOptionData
+      ..typeOptionData = typeOptionData ?? Uint8List.fromList([])
       ..startFieldId = startFieldId ?? "";
 
     return GridEventCreateField(payload).send();

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/create_field_pannel.dart

@@ -3,55 +3,73 @@ import 'package:app_flowy/workspace/application/grid/field/create_field_bloc.dar
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
-import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' hide Row;
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/meta.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-
 import 'field_name_input.dart';
 import 'field_tyep_switcher.dart';
 
-class CreateFieldPannel extends StatelessWidget {
-  const CreateFieldPannel({Key? key}) : super(key: key);
+class CreateFieldPannel extends FlowyOverlayDelegate {
+  final String gridId;
+  final CreateFieldBloc _createFieldBloc;
+  CreateFieldPannel({required this.gridId, Key? key}) : _createFieldBloc = getIt<CreateFieldBloc>(param1: gridId) {
+    _createFieldBloc.add(const CreateFieldEvent.initial());
+  }
 
-  static void show(BuildContext context) {
-    const pannel = CreateFieldPannel();
+  void show(BuildContext context, String gridId) {
     FlowyOverlay.of(context).insertWithAnchor(
       widget: OverlayContainer(
-        child: pannel,
-        constraints: BoxConstraints.loose(const Size(300, 200)),
+        child: _CreateFieldPannelWidget(_createFieldBloc),
+        constraints: BoxConstraints.loose(const Size(220, 200)),
       ),
-      identifier: pannel.identifier(),
+      identifier: identifier(),
       anchorContext: context,
       anchorDirection: AnchorDirection.bottomWithLeftAligned,
       style: FlowyOverlayStyle(blur: false),
+      delegate: this,
     );
   }
 
+  String identifier() {
+    return toString();
+  }
+
+  @override
+  void didRemove() async {
+    await _createFieldBloc.close();
+    // TODO: implement didRemove
+  }
+}
+
+class _CreateFieldPannelWidget extends StatelessWidget {
+  final CreateFieldBloc createFieldBloc;
+  const _CreateFieldPannelWidget(this.createFieldBloc, {Key? key}) : super(key: key);
+
   @override
   Widget build(BuildContext context) {
-    return BlocProvider(
-      create: (context) => getIt<CreateFieldBloc>()..add(const CreateFieldEvent.initial()),
+    return BlocProvider.value(
+      value: createFieldBloc,
       child: BlocBuilder<CreateFieldBloc, CreateFieldState>(
         builder: (context, state) {
           return state.field.fold(
             () => const SizedBox(),
-            (field) => Column(children: [
-              const FlowyText.medium("Edit property"),
-              const VSpace(10),
-              _FieldNameTextField(field),
-              const VSpace(10),
-              _FieldTypeSwitcher(field),
-            ]),
+            (field) => ListView(
+              shrinkWrap: true,
+              children: [
+                const FlowyText.medium("Edit property", fontSize: 12),
+                const VSpace(10),
+                _FieldNameTextField(field),
+                const VSpace(10),
+                _FieldTypeSwitcher(field),
+                const VSpace(10),
+              ],
+            ),
           );
         },
       ),
     );
   }
-
-  String identifier() {
-    return toString();
-  }
 }
 
 class _FieldTypeSwitcher extends StatelessWidget {

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_operation_list.dart

@@ -55,9 +55,7 @@ class FieldActionItem extends StatelessWidget {
 
 enum FieldAction {
   hide,
-  // insertLeft,
   duplicate,
-  // insertRight,
   delete,
 }
 

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_tyep_switcher.dart

@@ -26,7 +26,8 @@ class FieldTypeSwitcher extends StatelessWidget {
     return SizedBox(
       height: 36,
       child: FlowyButton(
-        text: FlowyText.medium(field.name, fontSize: 12),
+        text: FlowyText.medium(field.fieldType.title(), fontSize: 12),
+        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
         hoverColor: theme.hover,
         onTap: () => FieldTypeList.show(context, onSelectField),
         leftIcon: svg(field.fieldType.iconName(), color: theme.iconColor),

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_type_list.dart

@@ -1,4 +1,3 @@
-import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/header.dart

@@ -65,7 +65,7 @@ class GridHeader extends StatelessWidget {
             children: [
               const _HeaderLeading(),
               ...cells,
-              const _HeaderTrailing(),
+              _HeaderTrailing(gridId: gridId),
             ],
           );
 
@@ -88,7 +88,8 @@ class _HeaderLeading extends StatelessWidget {
 }
 
 class _HeaderTrailing extends StatelessWidget {
-  const _HeaderTrailing({Key? key}) : super(key: key);
+  final String gridId;
+  const _HeaderTrailing({required this.gridId, Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -100,13 +101,14 @@ class _HeaderTrailing extends StatelessWidget {
         border: Border(top: borderSide, bottom: borderSide),
       ),
       padding: GridSize.headerContentInsets,
-      child: const CreateFieldButton(),
+      child: CreateFieldButton(gridId: gridId),
     );
   }
 }
 
 class CreateFieldButton extends StatelessWidget {
-  const CreateFieldButton({Key? key}) : super(key: key);
+  final String gridId;
+  const CreateFieldButton({required this.gridId, Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -114,7 +116,7 @@ class CreateFieldButton extends StatelessWidget {
     return FlowyButton(
       text: const FlowyText.medium('New column', fontSize: 12),
       hoverColor: theme.hover,
-      onTap: () => CreateFieldPannel.show(context),
+      onTap: () => CreateFieldPannel(gridId: gridId).show(context, gridId),
       leftIcon: svg("home/add"),
     );
   }

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

@@ -40,7 +40,7 @@ class FlowyButton extends StatelessWidget {
       children.add(const HSpace(6));
     }
 
-    children.add(Align(child: text));
+    children.add(text);
 
     if (rightIcon != null) {
       children.add(const Spacer());

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

@@ -1,5 +1,5 @@
 import 'package:flowy_infra/theme.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 class FlowyText extends StatelessWidget {
@@ -42,6 +42,7 @@ class FlowyText extends StatelessWidget {
     return Text(title,
         overflow: overflow,
         softWrap: false,
+        textAlign: textAlign,
         style: TextStyle(
           color: theme.textColor,
           fontWeight: fontWeight,

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

@@ -81,6 +81,7 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
           },
           cursorColor: widget.cursorColor,
           obscureText: obscuteText,
+          style: widget.style,
           decoration: InputDecoration(
             contentPadding: widget.contentPadding,
             hintText: widget.hintText,

frontend/rust-lib/flowy-grid/src/services/grid_editor.rs

@@ -64,7 +64,8 @@ impl ClientGridEditor {
 
     pub async fn make_default_field(&self) -> FlowyResult<Field> {
         let field_type = FieldType::default();
-        let field_meta = FieldBuilder::from_field_type(&field_type).build();
+        let name = format!("Property {}", self.pad.read().await.fields().len());
+        let field_meta = FieldBuilder::from_field_type(&field_type).name(&name).build();
         Ok(field_meta.into())
     }