feat: use stateless widget

This commit is contained in:
Vincent Chan 2022-08-30 19:19:52 +08:00
parent 27557c52a3
commit 1718d03884
5 changed files with 34 additions and 109 deletions

View File

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

View File

@ -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),

View File

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

View File

@ -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(

View File

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