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

chore: unfocus the textField after switching to another popover

Browse Source
This commit is contained in:
nathan 2022-09-18 16:09:28 +08:00
parent 6c27b5455e
commit c493ba79e0
7 changed files with 151 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
View File

@ -7,12 +7,12 @@ import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flowy_sdk/log.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'field_name_input.dart';
import 'field_type_option_editor.dart';
class FieldEditor extends StatefulWidget {
@ -44,6 +44,12 @@ class _FieldEditorState extends State<FieldEditor> {
super.initState();
}
@override
void dispose() {
popoverMutex.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return BlocProvider(
@ -58,21 +64,13 @@ class _FieldEditorState extends State<FieldEditor> {
return ListView(
shrinkWrap: true,
children: [
FlowyText.medium(LocaleKeys.grid_field_editProperty.tr(),
fontSize: 12),
const VSpace(10),
const _FieldNameCell(),
const VSpace(10),
_DeleteFieldButton(
popoverMutex: popoverMutex,
onDeleted: () {
state.field.fold(
() => Log.error('Can not delete the field'),
(field) => widget.onDeleted?.call(field.id),
);
},
FlowyText.medium(
LocaleKeys.grid_field_editProperty.tr(),
fontSize: 12,
),
const VSpace(10),
_FieldNameTextField(popoverMutex: popoverMutex),
..._addDeleteFieldButton(state),
_FieldTypeOptionCell(popoverMutex: popoverMutex),
],
);
@ -80,6 +78,24 @@ class _FieldEditorState extends State<FieldEditor> {
),
);
}
List<Widget> _addDeleteFieldButton(FieldEditorState state) {
if (widget.onDeleted == null) {
return [];
}
return [
const VSpace(10),
_DeleteFieldButton(
popoverMutex: popoverMutex,
onDeleted: () {
state.field.fold(
() => Log.error('Can not delete the field'),
(field) => widget.onDeleted?.call(field.id),
);
},
),
];
}
}
class _FieldTypeOptionCell extends StatelessWidget {
@ -111,25 +127,89 @@ class _FieldTypeOptionCell extends StatelessWidget {
}
}
class _FieldNameCell extends StatelessWidget {
const _FieldNameCell({Key? key}) : super(key: key);
class _FieldNameTextField extends StatefulWidget {
final PopoverMutex popoverMutex;
const _FieldNameTextField({
required this.popoverMutex,
Key? key,
}) : super(key: key);
@override
State<_FieldNameTextField> createState() => _FieldNameTextFieldState();
}
class _FieldNameTextFieldState extends State<_FieldNameTextField> {
late String name;
FocusNode focusNode = FocusNode();
VoidCallback? _popoverCallback;
TextEditingController controller = TextEditingController();
@override
void initState() {
focusNode.addListener(() {
if (focusNode.hasFocus) {
widget.popoverMutex.close();
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
return BlocBuilder<FieldEditorBloc, FieldEditorState>(
builder: (context, state) {
return FieldNameTextField(
name: state.name,
errorText: context.read<FieldEditorBloc>().state.errorText,
onNameChanged: (newName) {
context
.read<FieldEditorBloc>()
.add(FieldEditorEvent.updateName(newName));
},
);
final theme = context.watch<AppTheme>();
controller.text = context.read<FieldEditorBloc>().state.name;
return BlocListener<FieldEditorBloc, FieldEditorState>(
listenWhen: (previous, current) => previous.name != current.name,
listener: (context, state) {
controller.text = state.name;
},
child: BlocBuilder<FieldEditorBloc, FieldEditorState>(
builder: (context, state) {
listenOnPopoverChhanged(context);
return RoundedInputField(
height: 36,
autoFocus: true,
focusNode: focusNode,
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
controller: controller,
normalBorderColor: theme.shader4,
errorBorderColor: theme.red,
focusBorderColor: theme.main1,
cursorColor: theme.main1,
errorText: context.read<FieldEditorBloc>().state.errorText,
onChanged: (newName) {
context
.read<FieldEditorBloc>()
.add(FieldEditorEvent.updateName(newName));
},
);
},
),
);
}
void listenOnPopoverChhanged(BuildContext context) {
if (_popoverCallback != null) {
widget.popoverMutex.removePopoverStateListener(_popoverCallback!);
}
_popoverCallback = widget.popoverMutex.listenOnPopoverStateChanged(() {
if (focusNode.hasFocus) {
final node = FocusScope.of(context);
node.unfocus();
}
});
}
@override
void didUpdateWidget(covariant _FieldNameTextField oldWidget) {
controller.selection = TextSelection.fromPosition(
TextPosition(offset: controller.text.length));
super.didUpdateWidget(oldWidget);
}
}
class _DeleteFieldButton extends StatelessWidget {
@ -171,12 +251,10 @@ class _DeleteFieldButton extends StatelessWidget {
popupBuilder: (popupContext) {
return PopoverAlertView(
title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
cancel: () => popoverMutex.state?.close(),
cancel: () {},
confirm: () {
onDeleted?.call();
popoverMutex.state?.close();
},
popoverMutex: popoverMutex,
);
},
child: widget,

56
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_name_input.dart
View File

@ -1,56 +0,0 @@
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class FieldNameTextField extends StatefulWidget {
final void Function(String) onNameChanged;
final String name;
final String errorText;
const FieldNameTextField({
required this.name,
required this.errorText,
required this.onNameChanged,
Key? key,
}) : super(key: key);
@override
State<FieldNameTextField> createState() => _FieldNameTextFieldState();
}
class _FieldNameTextFieldState extends State<FieldNameTextField> {
late String name;
TextEditingController controller = TextEditingController();
@override
void initState() {
controller.text = widget.name;
super.initState();
}
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return RoundedInputField(
height: 36,
autoFocus: true,
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
controller: controller,
normalBorderColor: theme.shader4,
errorBorderColor: theme.red,
focusBorderColor: theme.main1,
cursorColor: theme.main1,
errorText: widget.errorText,
onChanged: widget.onNameChanged,
);
}
@override
void didUpdateWidget(covariant FieldNameTextField oldWidget) {
controller.text = widget.name;
controller.selection = TextSelection.fromPosition(
TextPosition(offset: controller.text.length));
super.didUpdateWidget(oldWidget);
}
}

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

@ -66,7 +66,8 @@ class FieldTypeOptionEditor extends StatelessWidget {
height: GridSize.typeOptionItemHeight,
child: AppFlowyStylePopover(
constraints: BoxConstraints.loose(const Size(460, 440)),
triggerActions: PopoverTriggerActionFlags.click,
triggerActions:
PopoverTriggerActionFlags.click | PopoverTriggerActionFlags.hover,
mutex: popoverMutex,
offset: const Offset(20, 0),
popupBuilder: (context) {

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

@ -50,7 +50,9 @@ Widget? makeTypeOptionWidget({
required PopoverMutex popoverMutex,
}) {
final builder = makeTypeOptionWidgetBuilder(
dataController: dataController, popoverMutex: popoverMutex);
dataController: dataController,
popoverMutex: popoverMutex,
);
return builder.build(context);
}

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

@ -123,8 +123,6 @@ class NumberFormatList extends StatelessWidget {
format: format,
onSelected: (format) {
onSelected(format);
FlowyOverlay.of(context)
.remove(NumberFormatList.identifier());
});
}).toList();

3
frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
View File

@ -1,4 +1,3 @@
import 'package:appflowy_popover/popover.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/text_style.dart';
import 'package:flowy_infra/theme.dart';
@ -88,13 +87,11 @@ class _CreateTextFieldDialog extends State<NavigatorTextFieldDialog> {
}
class PopoverAlertView extends StatelessWidget {
final PopoverMutex popoverMutex;
final String title;
final void Function()? cancel;
final void Function()? confirm;
const PopoverAlertView({
required this.popoverMutex,
required this.title,
this.confirm,
this.cancel,

45
frontend/app_flowy/packages/appflowy_popover/lib/popover.dart
View File

@ -6,7 +6,42 @@ import 'package:flutter/services.dart';
/// If multiple popovers are exclusive,
/// pass the same mutex to them.
class PopoverMutex {
PopoverState? state;
final ValueNotifier<PopoverState?> _stateNofitier = ValueNotifier(null);
PopoverMutex();
void removePopoverStateListener(VoidCallback listener) {
_stateNofitier.removeListener(listener);
}
VoidCallback listenOnPopoverStateChanged(VoidCallback callback) {
listenerCallback() {
callback();
}
_stateNofitier.addListener(listenerCallback);
return listenerCallback;
}
void close() {
_stateNofitier.value?.close();
}
PopoverState? get state => _stateNofitier.value;
set state(PopoverState? newState) {
if (_stateNofitier.value != null && _stateNofitier.value != newState) {
_stateNofitier.value?.close();
}
_stateNofitier.value = newState;
}
void _removeState() {
_stateNofitier.value = null;
}
void dispose() {
_stateNofitier.dispose();
}
}
class PopoverController {
@ -109,11 +144,7 @@ class PopoverState extends State<Popover> {
close();
if (widget.mutex != null) {
if (widget.mutex!.state != null && widget.mutex!.state != this) {
widget.mutex!.state!.close();
}
widget.mutex!.state = this;
widget.mutex?.state = this;
}
if (_popoverWithMask == null) {
@ -163,7 +194,7 @@ class PopoverState extends State<Popover> {
}
if (widget.mutex?.state == this) {
widget.mutex!.state = null;
widget.mutex?._removeState();
}
}