feat: use stateless widget

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

@@ -24,7 +24,7 @@ typedef SwitchToFieldCallback
   FieldType fieldType,
 );
 
-class FieldTypeOptionEditor extends StatefulWidget {
+class FieldTypeOptionEditor extends StatelessWidget {
   final TypeOptionDataController dataController;
   final PopoverMutex popoverMutex;
 
@@ -34,29 +34,15 @@ class FieldTypeOptionEditor extends StatefulWidget {
     Key? key,
   }) : super(key: key);
 
-  @override
-  State<FieldTypeOptionEditor> createState() => _FieldTypeOptionEditorState();
-}
-
-class _FieldTypeOptionEditorState extends State<FieldTypeOptionEditor> {
-  late PopoverController popover;
-  String? currentOverlayIdentifier;
-
-  @override
-  void initState() {
-    popover = PopoverController(mutex: widget.popoverMutex);
-    super.initState();
-  }
-
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (context) => FieldTypeOptionEditBloc(widget.dataController)
+      create: (context) => FieldTypeOptionEditBloc(dataController)
         ..add(const FieldTypeOptionEditEvent.initial()),
       child: BlocBuilder<FieldTypeOptionEditBloc, FieldTypeOptionEditState>(
         builder: (context, state) {
           List<Widget> children = [
-            _switchFieldTypeButton(context, widget.dataController.field)
+            _switchFieldTypeButton(context, dataController.field)
           ];
           final typeOptionWidget =
               _typeOptionWidget(context: context, state: state);
@@ -79,13 +65,15 @@ class _FieldTypeOptionEditorState extends State<FieldTypeOptionEditor> {
     return SizedBox(
       height: GridSize.typeOptionItemHeight,
       child: Popover(
-        controller: popover,
+        triggerActions:
+            PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
+        mutex: popoverMutex,
         offset: const Offset(20, 0),
         targetAnchor: Alignment.topRight,
         followerAnchor: Alignment.topLeft,
         popupBuilder: (context) {
           final list = FieldTypeList(onSelectField: (newFieldType) {
-            widget.dataController.switchToField(newFieldType);
+            dataController.switchToField(newFieldType);
           });
           return OverlayContainer(
             constraints: BoxConstraints.loose(const Size(460, 440)),
@@ -96,11 +84,6 @@ class _FieldTypeOptionEditorState extends State<FieldTypeOptionEditor> {
           text: FlowyText.medium(field.fieldType.title(), fontSize: 12),
           margin: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
           hoverColor: theme.hover,
-          onHover: (bool hover) {
-            if (hover) {
-              popover.show();
-            }
-          },
           leftIcon:
               svgWidget(field.fieldType.iconName(), color: theme.iconColor),
           rightIcon: svgWidget("grid/more", color: theme.iconColor),
@@ -121,8 +104,8 @@ class _FieldTypeOptionEditorState extends State<FieldTypeOptionEditor> {
     return makeTypeOptionWidget(
       context: context,
       overlayDelegate: overlayDelegate,
-      dataController: widget.dataController,
+      dataController: dataController,
-      popoverMutex: widget.popoverMutex,
+      popoverMutex: popoverMutex,
     );
   }
 
@@ -141,12 +124,10 @@ class _FieldTypeOptionEditorState extends State<FieldTypeOptionEditor> {
   }
 
   void _hideOverlay(BuildContext context) {
-    if (currentOverlayIdentifier != null) {
+    //
-      FlowyOverlay.of(context).remove(currentOverlayIdentifier!);
-    }
   }
 }
 
-abstract class TypeOptionWidget extends StatefulWidget {
+abstract class TypeOptionWidget extends StatelessWidget {
   const TypeOptionWidget({Key? key}) : super(key: key);
 }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart

@@ -42,29 +42,14 @@ class DateTypeOptionWidget extends TypeOptionWidget {
     Key? key,
   }) : super(key: key);
 
-  @override
-  State<StatefulWidget> createState() => _DateTypeOptionWidgetState();
-}
-
-class _DateTypeOptionWidgetState extends State<DateTypeOptionWidget> {
-  late PopoverController dateFormatPopover;
-  late PopoverController timeFormatPopover;
-
-  @override
-  void initState() {
-    dateFormatPopover = PopoverController(mutex: widget.popoverMutex);
-    timeFormatPopover = PopoverController(mutex: widget.popoverMutex);
-    super.initState();
-  }
-
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
       create: (context) =>
-          DateTypeOptionBloc(typeOptionContext: widget.typeOptionContext),
+          DateTypeOptionBloc(typeOptionContext: typeOptionContext),
       child: BlocConsumer<DateTypeOptionBloc, DateTypeOptionState>(
         listener: (context, state) =>
-            widget.typeOptionContext.typeOption = state.typeOption,
+            typeOptionContext.typeOption = state.typeOption,
         builder: (context, state) {
           return Column(children: [
             _renderDateFormatButton(context, state.typeOption.dateFormat),
@@ -78,14 +63,10 @@ class _DateTypeOptionWidgetState extends State<DateTypeOptionWidget> {
 
   Widget _renderDateFormatButton(BuildContext context, DateFormat dataFormat) {
     return Popover(
-      controller: dateFormatPopover,
+      mutex: popoverMutex,
-      child: DateFormatButton(onTap: () {
+      triggerActions:
-        dateFormatPopover.show();
+          PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
-      }, onHover: ((hover) {
+      child: const DateFormatButton(),
-        if (hover) {
-          dateFormatPopover.show();
-        }
-      })),
       targetAnchor: Alignment.topRight,
       followerAnchor: Alignment.topLeft,
       offset: const Offset(20, 0),
@@ -107,18 +88,10 @@ class _DateTypeOptionWidgetState extends State<DateTypeOptionWidget> {
 
   Widget _renderTimeFormatButton(BuildContext context, TimeFormat timeFormat) {
     return Popover(
-      controller: timeFormatPopover,
+      mutex: popoverMutex,
-      child: TimeFormatButton(
+      triggerActions:
-        timeFormat: timeFormat,
+          PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
-        onTap: () {
+      child: TimeFormatButton(timeFormat: timeFormat),
-          timeFormatPopover.show();
-        },
-        onHover: (hover) {
-          if (hover) {
-            timeFormatPopover.show();
-          }
-        },
-      ),
       targetAnchor: Alignment.topRight,
       followerAnchor: Alignment.topLeft,
       offset: const Offset(20, 0),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/multi_select.dart

@@ -35,19 +35,13 @@ class MultiSelectTypeOptionWidget extends TypeOptionWidget {
     Key? key,
   }) : super(key: key);
 
-  @override
-  State<StatefulWidget> createState() => _MultiSelectTypeOptionWidgetState();
-}
-
-class _MultiSelectTypeOptionWidgetState
-    extends State<MultiSelectTypeOptionWidget> {
   @override
   Widget build(BuildContext context) {
     return SelectOptionTypeOptionWidget(
-      options: widget.selectOptionAction.typeOption.options,
+      options: selectOptionAction.typeOption.options,
-      beginEdit: () => widget.overlayDelegate.hideOverlay(context),
+      beginEdit: () => overlayDelegate.hideOverlay(context),
-      overlayDelegate: widget.overlayDelegate,
+      overlayDelegate: overlayDelegate,
-      typeOptionAction: widget.selectOptionAction,
+      typeOptionAction: selectOptionAction,
       // key: ValueKey(state.typeOption.hashCode),
     );
   }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart

@@ -47,33 +47,22 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
     Key? key,
   }) : super(key: key);
 
-  @override
-  State<StatefulWidget> createState() => _NumberTypeOptionWidgetState();
-}
-
-class _NumberTypeOptionWidgetState extends State<NumberTypeOptionWidget> {
-  late PopoverController controller;
-
-  @override
-  void initState() {
-    controller = PopoverController(mutex: widget.popoverMutex);
-    super.initState();
-  }
-
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return BlocProvider(
       create: (context) =>
-          NumberTypeOptionBloc(typeOptionContext: widget.typeOptionContext),
+          NumberTypeOptionBloc(typeOptionContext: typeOptionContext),
       child: SizedBox(
         height: GridSize.typeOptionItemHeight,
         child: BlocConsumer<NumberTypeOptionBloc, NumberTypeOptionState>(
           listener: (context, state) =>
-              widget.typeOptionContext.typeOption = state.typeOption,
+              typeOptionContext.typeOption = state.typeOption,
           builder: (context, state) {
             return Popover(
-              controller: controller,
+              mutex: popoverMutex,
+              triggerActions: PopoverTriggerActionFlags.hover |
+                  PopoverTriggerActionFlags.click,
               targetAnchor: Alignment.topRight,
               followerAnchor: Alignment.topLeft,
               offset: const Offset(20, 0),
@@ -91,12 +80,6 @@ class _NumberTypeOptionWidgetState extends State<NumberTypeOptionWidget> {
                         fontSize: 12),
                   ],
                 ),
-                onTap: () => controller.show(),
-                onHover: (hover) {
-                  if (hover) {
-                    controller.show();
-                  }
-                },
               ),
               popupBuilder: (BuildContext context) {
                 return OverlayContainer(

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/single_select.dart

@@ -34,19 +34,13 @@ class SingleSelectTypeOptionWidget extends TypeOptionWidget {
     Key? key,
   }) : super(key: key);
 
-  @override
-  State<StatefulWidget> createState() => _SingleSelectTypeOptionWidgetState();
-}
-
-class _SingleSelectTypeOptionWidgetState
-    extends State<SingleSelectTypeOptionWidget> {
   @override
   Widget build(BuildContext context) {
     return SelectOptionTypeOptionWidget(
-      options: widget.selectOptionAction.typeOption.options,
+      options: selectOptionAction.typeOption.options,
-      beginEdit: () => widget.overlayDelegate.hideOverlay(context),
+      beginEdit: () => overlayDelegate.hideOverlay(context),
-      overlayDelegate: widget.overlayDelegate,
+      overlayDelegate: overlayDelegate,
-      typeOptionAction: widget.selectOptionAction,
+      typeOptionAction: selectOptionAction,
       // key: ValueKey(state.typeOption.hashCode),
     );
   }