Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: use popoer for select widget

Browse Source
This commit is contained in:
Vincent Chan 2022-09-01 15:49:47 +08:00
parent 9574f282e7
commit 0cd384802e
7 changed files with 36 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,36 +94,12 @@ class FieldTypeOptionEditor extends StatelessWidget {
required BuildContext context,
required FieldTypeOptionEditState state,
}) {
final overlayDelegate = TypeOptionOverlayDelegate(
showOverlay: _showOverlay,
hideOverlay: _hideOverlay,
);
return makeTypeOptionWidget(
context: context,
overlayDelegate: overlayDelegate,
dataController: dataController,
popoverMutex: popoverMutex,
);
}
void _showOverlay(BuildContext context, Widget child,
{VoidCallback? onRemoved}) {
// FlowyPopover.show(
// context,
// constraints: BoxConstraints.loose(const Size(460, 440)),
// anchorContext: context,
// anchorDirection: AnchorDirection.rightWithCenterAligned,
// anchorOffset: const Offset(20, 0),
// builder: (BuildContext context) {
// return child;
// },
// );
}
void _hideOverlay(BuildContext context) {
//
}
}
abstract class TypeOptionWidget extends StatelessWidget {

11
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/builder.dart
View File

@ -46,19 +46,15 @@ abstract class TypeOptionWidgetBuilder {
Widget? makeTypeOptionWidget({
required BuildContext context,
required TypeOptionDataController dataController,
required TypeOptionOverlayDelegate overlayDelegate,
required PopoverMutex popoverMutex,
}) {
final builder = makeTypeOptionWidgetBuilder(
dataController: dataController,
overlayDelegate: overlayDelegate,
popoverMutex: popoverMutex);
dataController: dataController, popoverMutex: popoverMutex);
return builder.build(context);
}
TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
{required TypeOptionDataController dataController,
required TypeOptionOverlayDelegate overlayDelegate,
required PopoverMutex popoverMutex}) {
final gridId = dataController.gridId;
final fieldType = dataController.field.fieldType;
@ -87,7 +83,7 @@ TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
fieldType: fieldType,
dataController: dataController,
),
overlayDelegate,
popoverMutex,
);
case FieldType.MultiSelect:
return MultiSelectTypeOptionWidgetBuilder(
@ -96,7 +92,7 @@ TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
fieldType: fieldType,
dataController: dataController,
),
overlayDelegate,
popoverMutex,
);
case FieldType.Number:
return NumberTypeOptionWidgetBuilder(
@ -105,7 +101,6 @@ TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
fieldType: fieldType,
dataController: dataController,
),
overlayDelegate,
popoverMutex,
);
case FieldType.RichText:

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

@ -12,14 +12,14 @@ class MultiSelectTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
MultiSelectTypeOptionWidgetBuilder(
MultiSelectTypeOptionContext typeOptionContext,
TypeOptionOverlayDelegate overlayDelegate,
PopoverMutex popoverMutex,
) : _widget = MultiSelectTypeOptionWidget(
selectOptionAction: MultiSelectAction(
fieldId: typeOptionContext.fieldId,
gridId: typeOptionContext.gridId,
typeOptionContext: typeOptionContext,
),
overlayDelegate: overlayDelegate,
popoverMutex: popoverMutex,
);
@override
@ -28,12 +28,12 @@ class MultiSelectTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
class MultiSelectTypeOptionWidget extends TypeOptionWidget {
final MultiSelectAction selectOptionAction;
final TypeOptionOverlayDelegate overlayDelegate;
final PopoverMutex? popoverMutex;
const MultiSelectTypeOptionWidget({
required this.selectOptionAction,
required this.overlayDelegate,
Key? key,
required this.selectOptionAction,
this.popoverMutex,
}) : super(key: key);
@override
@ -41,10 +41,9 @@ class MultiSelectTypeOptionWidget extends TypeOptionWidget {
return SelectOptionTypeOptionWidget(
options: selectOptionAction.typeOption.options,
beginEdit: () {
overlayDelegate.hideOverlay(context);
PopoverContainerState.of(context).closeAll();
},
overlayDelegate: overlayDelegate,
popoverMutex: popoverMutex,
typeOptionAction: selectOptionAction,
// key: ValueKey(state.typeOption.hashCode),
);

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

@ -24,11 +24,9 @@ class NumberTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
NumberTypeOptionWidgetBuilder(
NumberTypeOptionContext typeOptionContext,
TypeOptionOverlayDelegate overlayDelegate,
PopoverMutex popoverMutex,
) : _widget = NumberTypeOptionWidget(
typeOptionContext: typeOptionContext,
overlayDelegate: overlayDelegate,
popoverMutex: popoverMutex,
);
@ -37,12 +35,10 @@ class NumberTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
}
class NumberTypeOptionWidget extends TypeOptionWidget {
final TypeOptionOverlayDelegate overlayDelegate;
final NumberTypeOptionContext typeOptionContext;
final PopoverMutex popoverMutex;
const NumberTypeOptionWidget({
required this.typeOptionContext,
required this.overlayDelegate,
required this.popoverMutex,
Key? key,
}) : super(key: key);

29
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart
View File

@ -15,20 +15,19 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
import '../../../layout/sizes.dart';
import '../../cell/select_option_cell/extension.dart';
import '../../common/text_field.dart';
import 'builder.dart';
import 'select_option_editor.dart';
class SelectOptionTypeOptionWidget extends StatelessWidget {
final List<SelectOptionPB> options;
final VoidCallback beginEdit;
final TypeOptionOverlayDelegate overlayDelegate;
final ISelectOptionAction typeOptionAction;
final PopoverMutex? popoverMutex;
const SelectOptionTypeOptionWidget({
required this.options,
required this.beginEdit,
required this.overlayDelegate,
required this.typeOptionAction,
this.popoverMutex,
Key? key,
}) : super(key: key);
@ -52,7 +51,7 @@ class SelectOptionTypeOptionWidget extends StatelessWidget {
),
if (state.options.isEmpty && !state.isEditingOption)
const _AddOptionButton(),
_OptionList(overlayDelegate)
_OptionList(popoverMutex: popoverMutex)
];
return Column(children: children);
@ -113,8 +112,8 @@ class _OptionTitleButton extends StatelessWidget {
}
class _OptionList extends StatelessWidget {
final TypeOptionOverlayDelegate delegate;
const _OptionList(this.delegate, {Key? key}) : super(key: key);
final PopoverMutex? popoverMutex;
const _OptionList({Key? key, this.popoverMutex}) : super(key: key);
@override
Widget build(BuildContext context) {
@ -124,7 +123,11 @@ class _OptionList extends StatelessWidget {
},
builder: (context, state) {
final cells = state.options.map((option) {
return _makeOptionCell(context, option);
return _makeOptionCell(
context: context,
option: option,
popoverMutex: popoverMutex,
);
}).toList();
return ListView.separated(
@ -142,16 +145,23 @@ class _OptionList extends StatelessWidget {
);
}
_OptionCell _makeOptionCell(BuildContext context, SelectOptionPB option) {
_OptionCell _makeOptionCell({
required BuildContext context,
required SelectOptionPB option,
PopoverMutex? popoverMutex,
}) {
return _OptionCell(
option: option,
popoverMutex: popoverMutex,
);
}
}
class _OptionCell extends StatefulWidget {
final SelectOptionPB option;
const _OptionCell({required this.option, Key? key}) : super(key: key);
final PopoverMutex? popoverMutex;
const _OptionCell({required this.option, Key? key, this.popoverMutex})
: super(key: key);
@override
State<_OptionCell> createState() => _OptionCellState();
@ -172,6 +182,7 @@ class _OptionCellState extends State<_OptionCell> {
return Popover(
controller: _popoverController,
mutex: widget.popoverMutex,
offset: const Offset(20, 0),
child: SizedBox(
height: GridSize.typeOptionItemHeight,

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

@ -11,14 +11,14 @@ class SingleSelectTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
SingleSelectTypeOptionWidgetBuilder(
SingleSelectTypeOptionContext singleSelectTypeOption,
TypeOptionOverlayDelegate overlayDelegate,
PopoverMutex popoverMutex,
) : _widget = SingleSelectTypeOptionWidget(
selectOptionAction: SingleSelectAction(
fieldId: singleSelectTypeOption.fieldId,
gridId: singleSelectTypeOption.gridId,
typeOptionContext: singleSelectTypeOption,
),
overlayDelegate: overlayDelegate,
popoverMutex: popoverMutex,
);
@override
@ -27,12 +27,12 @@ class SingleSelectTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
class SingleSelectTypeOptionWidget extends TypeOptionWidget {
final SingleSelectAction selectOptionAction;
final TypeOptionOverlayDelegate overlayDelegate;
final PopoverMutex? popoverMutex;
const SingleSelectTypeOptionWidget({
required this.selectOptionAction,
required this.overlayDelegate,
Key? key,
required this.selectOptionAction,
this.popoverMutex,
}) : super(key: key);
@override
@ -40,10 +40,9 @@ class SingleSelectTypeOptionWidget extends TypeOptionWidget {
return SelectOptionTypeOptionWidget(
options: selectOptionAction.typeOption.options,
beginEdit: () {
overlayDelegate.hideOverlay(context);
PopoverContainerState.of(context).closeAll();
},
overlayDelegate: overlayDelegate,
popoverMutex: popoverMutex,
typeOptionAction: selectOptionAction,
// key: ValueKey(state.typeOption.hashCode),
);

1
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart
View File

@ -59,6 +59,7 @@ class _GridPropertyListState extends State<GridPropertyList> {
}).toList();
return ListView.separated(
controller: ScrollController(),
shrinkWrap: true,
itemCount: cells.length,
itemBuilder: (BuildContext context, int index) {