feat: field action sheet use popover

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

@@ -1,8 +1,10 @@
 import 'package:app_flowy/plugins/grid/application/field/field_cell_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/field/field_service.dart';
 import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
+import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -15,21 +17,42 @@ import 'field_type_extension.dart';
 import 'field_cell_action_sheet.dart';
 import 'field_editor.dart';
 
-class GridFieldCell extends StatelessWidget {
+class GridFieldCell extends StatefulWidget {
   final GridFieldCellContext cellContext;
   const GridFieldCell(this.cellContext, {Key? key}) : super(key: key);
 
   @override
-  Widget build(BuildContext context) {
+  State<StatefulWidget> createState() => _GridFieldCellState();
+}
+
+class _GridFieldCellState extends State<GridFieldCell> {
+  final popover = AppFlowyPopoverController();
+
+  @override
+  Widget build(BuildContext gridCellContext) {
     return BlocProvider(
-      create: (context) => FieldCellBloc(cellContext: cellContext)
+      create: (context) => FieldCellBloc(cellContext: widget.cellContext)
         ..add(const FieldCellEvent.initial()),
       child: BlocBuilder<FieldCellBloc, FieldCellState>(
         // buildWhen: (p, c) => p.field != c.field,
         builder: (context, state) {
-          final button = FieldCellButton(
-            field: state.field,
-            onTap: () => _showActionSheet(context),
+          final button = AppFlowyPopover(
+            controller: popover,
+            child: FieldCellButton(
+              field: state.field,
+              onTap: () => popover.show(),
+            ),
+            targetAnchor: Alignment.bottomLeft,
+            followerAnchor: Alignment.topLeft,
+            offset: const Offset(0, 10),
+            popupBuilder: (BuildContext context) {
+              return OverlayContainer(
+                constraints: BoxConstraints.loose(const Size(240, 200)),
+                child: GridFieldCellActionSheet(
+                  cellContext: widget.cellContext,
+                ),
+              );
+            },
           );
 
           const line = Positioned(
@@ -51,32 +74,6 @@ class GridFieldCell extends StatelessWidget {
       ),
     );
   }
-
-  void _showActionSheet(BuildContext context) {
-    final state = context.read<FieldCellBloc>().state;
-    GridFieldCellActionSheetPopover.show(
-      context,
-      cellContext:
-          GridFieldCellContext(gridId: state.gridId, field: state.field),
-      onEdited: () => _showFieldEditor(context),
-    );
-  }
-
-  void _showFieldEditor(BuildContext context) {
-    final state = context.read<FieldCellBloc>().state;
-    final field = state.field;
-
-    FieldEditorPopOver.show(
-      context,
-      anchorContext: context,
-      gridId: state.gridId,
-      fieldName: field.name,
-      typeOptionLoader: FieldTypeOptionLoader(
-        gridId: state.gridId,
-        field: field,
-      ),
-    );
-  }
 }
 
 class _GridHeaderCellContainer extends StatelessWidget {

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

@@ -1,3 +1,5 @@
+import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_editor.dart';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import 'package:flowy_infra/image.dart';
@@ -9,6 +11,7 @@ import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 
 import '../../layout/sizes.dart';
@@ -16,9 +19,7 @@ import '../../layout/sizes.dart';
 class GridFieldCellActionSheet extends StatelessWidget
     with FlowyOverlayDelegate {
   final GridFieldCellContext cellContext;
-  final VoidCallback onEdited;
-  const GridFieldCellActionSheet(
-      {required this.cellContext, required this.onEdited, Key? key})
+  const GridFieldCellActionSheet({required this.cellContext, Key? key})
       : super(key: key);
 
   @override
@@ -29,10 +30,7 @@ class GridFieldCellActionSheet extends StatelessWidget
         child: Column(
           children: [
             _EditFieldButton(
-              onEdited: () {
-                FlowyOverlay.of(context).remove(identifier());
-                onEdited();
-              },
+              cellContext: cellContext,
             ),
             const VSpace(6),
             _FieldOperationList(cellContext,
@@ -53,9 +51,17 @@ class GridFieldCellActionSheet extends StatelessWidget
   }
 }
 
-class _EditFieldButton extends StatelessWidget {
-  final Function() onEdited;
-  const _EditFieldButton({required this.onEdited, Key? key}) : super(key: key);
+class _EditFieldButton extends StatefulWidget {
+  final GridFieldCellContext cellContext;
+  const _EditFieldButton({required this.cellContext, Key? key})
+      : super(key: key);
+
+  @override
+  State<StatefulWidget> createState() => _EditFieldButtonState();
+}
+
+class _EditFieldButtonState extends State<_EditFieldButton> {
+  final popover = AppFlowyPopoverController();
 
   @override
   Widget build(BuildContext context) {
@@ -64,11 +70,33 @@ class _EditFieldButton extends StatelessWidget {
       builder: (context, state) {
         return SizedBox(
           height: GridSize.typeOptionItemHeight,
-          child: FlowyButton(
-            text: FlowyText.medium(LocaleKeys.grid_field_editProperty.tr(),
-                fontSize: 12),
-            hoverColor: theme.hover,
-            onTap: onEdited,
+          child: AppFlowyPopover(
+            controller: popover,
+            targetAnchor: Alignment.topRight,
+            followerAnchor: Alignment.topLeft,
+            offset: const Offset(20, 0),
+            popupBuilder: (context) {
+              final field = widget.cellContext.field;
+              return OverlayContainer(
+                constraints: BoxConstraints.loose(const Size(240, 200)),
+                child: FieldEditor(
+                  gridId: widget.cellContext.gridId,
+                  fieldName: field.name,
+                  typeOptionLoader: FieldTypeOptionLoader(
+                    gridId: widget.cellContext.gridId,
+                    field: field,
+                  ),
+                ),
+              );
+            },
+            child: FlowyButton(
+              text: FlowyText.medium(
+                LocaleKeys.grid_field_editProperty.tr(),
+                fontSize: 12,
+              ),
+              hoverColor: theme.hover,
+              onTap: () => popover.show(),
+            ),
           ),
         );
       },
@@ -200,20 +228,3 @@ extension _FieldActionExtension on FieldAction {
     }
   }
 }
-
-class GridFieldCellActionSheetPopover {
-  static show(
-    BuildContext context, {
-    required GridFieldCellContext cellContext,
-    required VoidCallback onEdited,
-  }) {
-    FlowyPopover.show(context,
-        anchorContext: context,
-        anchorDirection: AnchorDirection.bottomWithLeftAligned,
-        constraints: BoxConstraints.loose(const Size(240, 200)),
-        builder: (BuildContext context) {
-      return GridFieldCellActionSheet(
-          cellContext: cellContext, onEdited: onEdited);
-    });
-  }
-}

frontend/app_flowy/pubspec.lock

@@ -36,6 +36,13 @@ packages:
       relative: true
     source: path
     version: "0.0.2"
+  appflowy_popover:
+    dependency: "direct main"
+    description:
+      path: "packages/appflowy_popover"
+      relative: true
+    source: path
+    version: "0.0.1"
   args:
     dependency: transitive
     description:
@@ -1480,5 +1487,5 @@ packages:
     source: hosted
     version: "8.1.0"
 sdks:
-  dart: ">=2.17.0 <3.0.0"
+  dart: ">=2.17.6 <3.0.0"
   flutter: ">=3.0.0"

frontend/app_flowy/pubspec.yaml

@@ -41,6 +41,8 @@ dependencies:
     path: packages/appflowy_board
   appflowy_editor:
     path: packages/appflowy_editor
+  appflowy_popover:
+    path: packages/appflowy_popover
   flutter_quill:
     git:
       url: https://github.com/appflowy/flutter-quill.git