From 4d835757d21997abf3dfb98d3438915bc08258c4 Mon Sep 17 00:00:00 2001 From: appflowy Date: Mon, 19 Sep 2022 12:04:06 +0800 Subject: [PATCH] fix: select option pannel didn't disappear --- .../presentation/toolbar/board_setting.dart | 1 - .../select_option_editor.dart | 65 +++++++++++++++---- .../appflowy_popover/lib/popover.dart | 20 +++--- 3 files changed, 61 insertions(+), 25 deletions(-) diff --git a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart index a64df31cc4..dad2b042d5 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart @@ -50,7 +50,6 @@ class BoardSettingList extends StatelessWidget { previous.selectedAction != current.selectedAction, listener: (context, state) { state.selectedAction.foldLeft(null, (_, action) { - // FlowyOverlay.of(context).remove(identifier()); onAction(action, settingContext); }); }, 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 fecb5176f3..e502853b90 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 @@ -25,31 +25,47 @@ import 'text_field.dart'; const double _editorPanelWidth = 300; -class SelectOptionCellEditor extends StatelessWidget { +class SelectOptionCellEditor extends StatefulWidget { final GridSelectOptionCellController cellController; - static double editorPanelWidth = 300; const SelectOptionCellEditor({required this.cellController, Key? key}) : super(key: key); + @override + State createState() => _SelectOptionCellEditorState(); +} + +class _SelectOptionCellEditorState extends State { + late PopoverMutex popoverMutex; + + @override + void initState() { + popoverMutex = PopoverMutex(); + super.initState(); + } + @override Widget build(BuildContext context) { return BlocProvider( create: (context) => SelectOptionCellEditorBloc( - cellController: cellController, + cellController: widget.cellController, )..add(const SelectOptionEditorEvent.initial()), child: BlocBuilder( builder: (context, state) { return CustomScrollView( shrinkWrap: true, slivers: [ - SliverToBoxAdapter(child: _TextField()), + SliverToBoxAdapter( + child: _TextField(popoverMutex: popoverMutex), + ), const SliverToBoxAdapter(child: VSpace(6)), const SliverToBoxAdapter(child: TypeOptionSeparator()), const SliverToBoxAdapter(child: VSpace(6)), const SliverToBoxAdapter(child: _Title()), - const SliverToBoxAdapter(child: _OptionList()), + SliverToBoxAdapter( + child: _OptionList(popoverMutex: popoverMutex), + ), ], ); }, @@ -59,7 +75,11 @@ class SelectOptionCellEditor extends StatelessWidget { } class _OptionList extends StatelessWidget { - const _OptionList({Key? key}) : super(key: key); + final PopoverMutex popoverMutex; + const _OptionList({ + required this.popoverMutex, + Key? key, + }) : super(key: key); @override Widget build(BuildContext context) { @@ -68,7 +88,10 @@ class _OptionList extends StatelessWidget { List cells = []; cells.addAll(state.options.map((option) { return _SelectOptionCell( - option, state.selectedOptions.contains(option)); + option: option, + isSelected: state.selectedOptions.contains(option), + popoverMutex: popoverMutex, + ); }).toList()); state.createOption.fold( @@ -101,9 +124,13 @@ class _OptionList extends StatelessWidget { } class _TextField extends StatelessWidget { + final PopoverMutex popoverMutex; final TextfieldTagsController _tagController = TextfieldTagsController(); - _TextField({Key? key}) : super(key: key); + _TextField({ + required this.popoverMutex, + Key? key, + }) : super(key: key); @override Widget build(BuildContext context) { @@ -121,8 +148,11 @@ class _TextField extends StatelessWidget { selectedOptionMap: optionMap, distanceToText: _editorPanelWidth * 0.7, tagController: _tagController, - onClick: () => FlowyOverlay.of(context) - .remove(SelectOptionTypeOptionEditor.identifier), + onClick: () { + popoverMutex.close(); + // FlowyOverlay.of(context) + // .remove(SelectOptionTypeOptionEditor.identifier); + }, newText: (text) { context .read() @@ -189,9 +219,14 @@ class _CreateOptionCell extends StatelessWidget { class _SelectOptionCell extends StatefulWidget { final SelectOptionPB option; + final PopoverMutex popoverMutex; final bool isSelected; - const _SelectOptionCell(this.option, this.isSelected, {Key? key}) - : super(key: key); + const _SelectOptionCell({ + required this.option, + required this.isSelected, + required this.popoverMutex, + Key? key, + }) : super(key: key); @override State<_SelectOptionCell> createState() => _SelectOptionCellState(); @@ -213,6 +248,7 @@ class _SelectOptionCellState extends State<_SelectOptionCell> { controller: _popoverController, offset: const Offset(20, 0), constraints: BoxConstraints.loose(const Size(200, 300)), + mutex: widget.popoverMutex, child: SizedBox( height: GridSize.typeOptionItemHeight, child: Row( @@ -257,8 +293,9 @@ class _SelectOptionCellState extends State<_SelectOptionCell> { .read() .add(SelectOptionEditorEvent.updateOption(updatedOption)); }, - key: ValueKey(widget.option - .id), // Use ValueKey to refresh the UI, otherwise, it will remain the old value. + key: ValueKey( + widget.option.id, + ), // Use ValueKey to refresh the UI, otherwise, it will remain the old value. ); }, ); diff --git a/frontend/app_flowy/packages/appflowy_popover/lib/popover.dart b/frontend/app_flowy/packages/appflowy_popover/lib/popover.dart index ff090e347e..c10e23ecce 100644 --- a/frontend/app_flowy/packages/appflowy_popover/lib/popover.dart +++ b/frontend/app_flowy/packages/appflowy_popover/lib/popover.dart @@ -6,11 +6,11 @@ import 'package:flutter/services.dart'; /// If multiple popovers are exclusive, /// pass the same mutex to them. class PopoverMutex { - final ValueNotifier _stateNofitier = ValueNotifier(null); + final ValueNotifier _stateNotifier = ValueNotifier(null); PopoverMutex(); void removePopoverStateListener(VoidCallback listener) { - _stateNofitier.removeListener(listener); + _stateNotifier.removeListener(listener); } VoidCallback listenOnPopoverStateChanged(VoidCallback callback) { @@ -18,29 +18,29 @@ class PopoverMutex { callback(); } - _stateNofitier.addListener(listenerCallback); + _stateNotifier.addListener(listenerCallback); return listenerCallback; } void close() { - _stateNofitier.value?.close(); + _stateNotifier.value?.close(); } - PopoverState? get state => _stateNofitier.value; + PopoverState? get state => _stateNotifier.value; set state(PopoverState? newState) { - if (_stateNofitier.value != null && _stateNofitier.value != newState) { - _stateNofitier.value?.close(); + if (_stateNotifier.value != null && _stateNotifier.value != newState) { + _stateNotifier.value?.close(); } - _stateNofitier.value = newState; + _stateNotifier.value = newState; } void _removeState() { - _stateNofitier.value = null; + _stateNotifier.value = null; } void dispose() { - _stateNofitier.dispose(); + _stateNotifier.dispose(); } }