diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart index a8d3993a2f..6a070feed4 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart @@ -1,7 +1,9 @@ import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/plugins/grid/application/prelude.dart'; +import 'package:appflowy_popover/popover.dart'; import 'package:flowy_infra/theme.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui_web.dart'; import 'package:flowy_infra_ui/style_widget/text.dart'; // ignore: unused_import import 'package:flowy_sdk/log.dart'; @@ -133,7 +135,7 @@ class _MultiSelectCellState extends State { } } -class SelectOptionWrap extends StatelessWidget { +class SelectOptionWrap extends StatefulWidget { final List selectOptions; final void Function(bool)? onFocus; final SelectOptionCellStyle? cellStyle; @@ -146,15 +148,28 @@ class SelectOptionWrap extends StatelessWidget { Key? key, }) : super(key: key); + @override + State createState() => _SelectOptionWrapState(); +} + +class _SelectOptionWrapState extends State { + late PopoverController _popover; + + @override + void initState() { + _popover = PopoverController(); + super.initState(); + } + @override Widget build(BuildContext context) { final theme = context.watch(); final Widget child; - if (selectOptions.isEmpty && cellStyle != null) { + if (widget.selectOptions.isEmpty && widget.cellStyle != null) { child = Align( alignment: Alignment.centerLeft, child: FlowyText.medium( - cellStyle!.placeholder, + widget.cellStyle!.placeholder, fontSize: 14, color: theme.shader3, ), @@ -163,7 +178,7 @@ class SelectOptionWrap extends StatelessWidget { child = Align( alignment: Alignment.centerLeft, child: Wrap( - children: selectOptions + children: widget.selectOptions .map((option) => SelectOptionTag.fromOption( context: context, option: option, @@ -179,14 +194,37 @@ class SelectOptionWrap extends StatelessWidget { alignment: AlignmentDirectional.center, fit: StackFit.expand, children: [ - child, + Popover( + controller: _popover, + child: child, + targetAnchor: Alignment.bottomCenter, + followerAnchor: Alignment.topCenter, + offset: const Offset(0, 20), + popupBuilder: (BuildContext context) { + WidgetsBinding.instance.addPostFrameCallback((timeStamp) { + widget.onFocus?.call(true); + }); + return OverlayContainer( + constraints: BoxConstraints.loose( + Size(SelectOptionCellEditor.editorPanelWidth, 300)), + child: SizedBox( + width: SelectOptionCellEditor.editorPanelWidth, + child: SelectOptionCellEditor( + cellController: widget.cellControllerBuilder.build() + as GridSelectOptionCellController, + onDismissed: () { + widget.onFocus?.call(false); + }, + ), + ), + ); + }, + onClose: () { + widget.onFocus?.call(false); + }, + ), InkWell(onTap: () { - onFocus?.call(true); - SelectOptionCellEditor.show( - context, - cellControllerBuilder.build() as GridSelectOptionCellController, - () => onFocus?.call(false), - ); + _popover.show(); }), ], ); diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart index c07eef5617..241ee9d309 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart @@ -28,6 +28,8 @@ class SelectOptionCellEditor extends StatelessWidget with FlowyOverlayDelegate { final GridSelectOptionCellController cellController; final VoidCallback onDismissed; + static double editorPanelWidth = 300; + const SelectOptionCellEditor({ required this.cellController, required this.onDismissed,