mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
feat: use stateless widget
This commit is contained in:
parent
27557c52a3
commit
1718d03884
@ -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);
|
||||
}
|
||||
|
@ -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),
|
||||
|
@ -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),
|
||||
);
|
||||
}
|
||||
|
@ -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(
|
||||
|
@ -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),
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user