From 1718d03884810f413a495fb0bab89fc51572c7c5 Mon Sep 17 00:00:00 2001
From: Vincent Chan <okcdz@diverse.space>
Date: Tue, 30 Aug 2022 19:19:52 +0800
Subject: [PATCH] feat: use stateless widget
---
.../header/field_type_option_editor.dart | 41 +++++-----------
.../widgets/header/type_option/date.dart | 47 ++++---------------
.../header/type_option/multi_select.dart | 14 ++----
.../widgets/header/type_option/number.dart | 27 ++---------
.../header/type_option/single_select.dart | 14 ++----
5 files changed, 34 insertions(+), 109 deletions(-)
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart
index ee33e06601..b3c0c87301 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart
+++ b/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,
- popoverMutex: widget.popoverMutex,
+ dataController: dataController,
+ 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);
}
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart
index bae1dc175d..81fcf00402 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart
+++ b/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,
- child: DateFormatButton(onTap: () {
- dateFormatPopover.show();
- }, onHover: ((hover) {
- if (hover) {
- dateFormatPopover.show();
- }
- })),
+ mutex: popoverMutex,
+ triggerActions:
+ PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
+ child: const DateFormatButton(),
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,
- child: TimeFormatButton(
- timeFormat: timeFormat,
- onTap: () {
- timeFormatPopover.show();
- },
- onHover: (hover) {
- if (hover) {
- timeFormatPopover.show();
- }
- },
- ),
+ mutex: popoverMutex,
+ triggerActions:
+ PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
+ child: TimeFormatButton(timeFormat: timeFormat),
targetAnchor: Alignment.topRight,
followerAnchor: Alignment.topLeft,
offset: const Offset(20, 0),
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/multi_select.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/multi_select.dart
index 6d67c9a589..ab8a628146 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/multi_select.dart
+++ b/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,
- beginEdit: () => widget.overlayDelegate.hideOverlay(context),
- overlayDelegate: widget.overlayDelegate,
- typeOptionAction: widget.selectOptionAction,
+ options: selectOptionAction.typeOption.options,
+ beginEdit: () => overlayDelegate.hideOverlay(context),
+ overlayDelegate: overlayDelegate,
+ typeOptionAction: selectOptionAction,
// key: ValueKey(state.typeOption.hashCode),
);
}
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart
index 3c8c0575e8..b98c073da7 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart
+++ b/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(
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/single_select.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/single_select.dart
index 096426c432..d9d699fdff 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/single_select.dart
+++ b/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,
- beginEdit: () => widget.overlayDelegate.hideOverlay(context),
- overlayDelegate: widget.overlayDelegate,
- typeOptionAction: widget.selectOptionAction,
+ options: selectOptionAction.typeOption.options,
+ beginEdit: () => overlayDelegate.hideOverlay(context),
+ overlayDelegate: overlayDelegate,
+ typeOptionAction: selectOptionAction,
// key: ValueKey(state.typeOption.hashCode),
);
}