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), ); }