fix: select option cell pannel refresh

This commit is contained in:
appflowy 2022-04-08 21:51:06 +08:00
parent 59fbe02ded
commit fc77e0857a
9 changed files with 53 additions and 53 deletions

View File

@ -4,11 +4,11 @@ import 'package:freezed_annotation/freezed_annotation.dart';
import 'dart:async';
import 'package:protobuf/protobuf.dart';
import 'package:dartz/dartz.dart';
part 'cell_option_pannel_bloc.freezed.dart';
part 'edit_select_option_bloc.freezed.dart';
class CellOptionPannelBloc extends Bloc<CellOptionPannelEvent, CellOptionPannelState> {
CellOptionPannelBloc({required SelectOption option}) : super(CellOptionPannelState.initial(option)) {
on<CellOptionPannelEvent>(
class EditSelectOptionBloc extends Bloc<EditSelectOptionEvent, EditSelectOptionState> {
EditSelectOptionBloc({required SelectOption option}) : super(EditSelectOptionState.initial(option)) {
on<EditSelectOptionEvent>(
(event, emit) async {
event.map(
updateName: (_UpdateName value) {
@ -46,20 +46,20 @@ class CellOptionPannelBloc extends Bloc<CellOptionPannelEvent, CellOptionPannelS
}
@freezed
class CellOptionPannelEvent with _$CellOptionPannelEvent {
const factory CellOptionPannelEvent.updateName(String name) = _UpdateName;
const factory CellOptionPannelEvent.updateColor(SelectOptionColor color) = _UpdateColor;
const factory CellOptionPannelEvent.delete() = _Delete;
class EditSelectOptionEvent with _$EditSelectOptionEvent {
const factory EditSelectOptionEvent.updateName(String name) = _UpdateName;
const factory EditSelectOptionEvent.updateColor(SelectOptionColor color) = _UpdateColor;
const factory EditSelectOptionEvent.delete() = _Delete;
}
@freezed
class CellOptionPannelState with _$CellOptionPannelState {
const factory CellOptionPannelState({
class EditSelectOptionState with _$EditSelectOptionState {
const factory EditSelectOptionState({
required SelectOption option,
required Option<bool> deleted,
}) = _EditOptionState;
}) = _EditSelectOptionState;
factory CellOptionPannelState.initial(SelectOption option) => CellOptionPannelState(
factory EditSelectOptionState.initial(SelectOption option) => EditSelectOptionState(
option: option,
deleted: none(),
);

View File

@ -37,7 +37,7 @@ class _SingleSelectCellState extends State<SingleSelectCell> {
return SizedBox.expand(
child: InkWell(
onTap: () {
SelectOptionEditor.show(context, state.cellData, state.options, state.selectedOptions);
SelectOptionCellEditor.show(context, state.cellData, state.options, state.selectedOptions);
},
child: Row(children: children),
),
@ -86,7 +86,7 @@ class _MultiSelectCellState extends State<MultiSelectCell> {
return SizedBox.expand(
child: InkWell(
onTap: () {
SelectOptionEditor.show(context, state.cellData, state.options, state.selectedOptions);
SelectOptionCellEditor.show(context, state.cellData, state.options, state.selectedOptions);
},
child: Row(children: children),
),

View File

@ -3,7 +3,7 @@ import 'dart:collection';
import 'package:app_flowy/workspace/application/grid/cell_bloc/selection_editor_bloc.dart';
import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/cell_option_pannel.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/edit_option_pannel.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/widget.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
@ -18,19 +18,18 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:textfield_tags/textfield_tags.dart';
import 'extension.dart';
const double _editorPannelWidth = 300;
class SelectOptionEditor extends StatelessWidget with FlowyOverlayDelegate {
class SelectOptionCellEditor extends StatelessWidget with FlowyOverlayDelegate {
final CellData cellData;
final List<SelectOption> options;
final List<SelectOption> selectedOptions;
const SelectOptionEditor({
const SelectOptionCellEditor({
required this.cellData,
required this.options,
required this.selectedOptions,
@ -38,7 +37,7 @@ class SelectOptionEditor extends StatelessWidget with FlowyOverlayDelegate {
}) : super(key: key);
static String identifier() {
return (SelectOptionEditor).toString();
return (SelectOptionCellEditor).toString();
}
@override
@ -73,8 +72,8 @@ class SelectOptionEditor extends StatelessWidget with FlowyOverlayDelegate {
List<SelectOption> options,
List<SelectOption> selectedOptions,
) {
SelectOptionEditor.hide(context);
final editor = SelectOptionEditor(
SelectOptionCellEditor.remove(context);
final editor = SelectOptionCellEditor(
cellData: cellData,
options: options,
selectedOptions: selectedOptions,
@ -86,14 +85,14 @@ class SelectOptionEditor extends StatelessWidget with FlowyOverlayDelegate {
child: SizedBox(width: _editorPannelWidth, child: editor),
constraints: BoxConstraints.loose(const Size(_editorPannelWidth, 300)),
),
identifier: SelectOptionEditor.identifier(),
identifier: SelectOptionCellEditor.identifier(),
anchorContext: context,
anchorDirection: AnchorDirection.bottomWithCenterAligned,
delegate: editor,
);
}
static void hide(BuildContext context) {
static void remove(BuildContext context) {
FlowyOverlay.of(context).remove(identifier());
}
@ -208,7 +207,7 @@ class _SelectOptionCell extends StatelessWidget {
if (onHover) {
children.add(FlowyIconButton(
width: 30,
onPressed: () => _showEditOptionPannel(context),
onPressed: () => _showEditPannel(context),
iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
icon: svgWidget("editor/details", color: theme.iconColor),
));
@ -224,8 +223,8 @@ class _SelectOptionCell extends StatelessWidget {
);
}
void _showEditOptionPannel(BuildContext context) {
final pannel = CellSelectOptionPannel(
void _showEditPannel(BuildContext context) {
final pannel = EditSelectOptionPannel(
option: option,
onDeleted: () {
context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.deleteOption(option));
@ -233,9 +232,9 @@ class _SelectOptionCell extends StatelessWidget {
onUpdated: (updatedOption) {
context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.updateOption(updatedOption));
},
// key: ValueKey(option.id),
key: ValueKey(option.id), // Use ValueKey to refresh the UI, otherwise, it will remain the old value.
);
final overlayIdentifier = pannel.toString();
final overlayIdentifier = (EditSelectOptionPannel).toString();
FlowyOverlay.of(context).remove(overlayIdentifier);
FlowyOverlay.of(context).insertWithAnchor(

View File

@ -51,8 +51,8 @@ class GridFieldCellActionSheet extends StatelessWidget with FlowyOverlayDelegate
);
}
String identifier() {
return toString();
static String identifier() {
return (GridFieldCellActionSheet).toString();
}
@override

View File

@ -41,8 +41,8 @@ class FieldEditor extends FlowyOverlayDelegate {
);
}
String identifier() {
return toString();
static String identifier() {
return (FieldEditor).toString();
}
@override

View File

@ -114,7 +114,7 @@ class DateFormatList extends StatelessWidget {
dateFormat: format,
onSelected: (format) {
onSelected(format);
FlowyOverlay.of(context).remove(identifier());
FlowyOverlay.of(context).remove(DateFormatList.identifier());
},
isSelected: selectedFormat == format);
}).toList();
@ -135,8 +135,8 @@ class DateFormatList extends StatelessWidget {
);
}
String identifier() {
return toString();
static String identifier() {
return (DateFormatList).toString();
}
}
@ -205,7 +205,7 @@ class TimeFormatList extends StatelessWidget {
timeFormat: format,
onSelected: (format) {
onSelected(format);
FlowyOverlay.of(context).remove(identifier());
FlowyOverlay.of(context).remove(TimeFormatList.identifier());
});
}).toList();
@ -225,8 +225,8 @@ class TimeFormatList extends StatelessWidget {
);
}
String identifier() {
return toString();
static String identifier() {
return (TimeFormatList).toString();
}
}

View File

@ -1,4 +1,4 @@
import 'package:app_flowy/workspace/application/grid/field/type_option/cell_option_pannel_bloc.dart';
import 'package:app_flowy/workspace/application/grid/field/type_option/edit_select_option_bloc.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/extension.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/widget.dart';
@ -14,11 +14,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
class CellSelectOptionPannel extends StatelessWidget {
class EditSelectOptionPannel extends StatelessWidget {
final SelectOption option;
final VoidCallback onDeleted;
final Function(SelectOption) onUpdated;
const CellSelectOptionPannel({
const EditSelectOptionPannel({
required this.option,
required this.onDeleted,
required this.onUpdated,
@ -28,23 +28,23 @@ class CellSelectOptionPannel extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => CellOptionPannelBloc(option: option),
create: (context) => EditSelectOptionBloc(option: option),
child: MultiBlocListener(
listeners: [
BlocListener<CellOptionPannelBloc, CellOptionPannelState>(
BlocListener<EditSelectOptionBloc, EditSelectOptionState>(
listenWhen: (p, c) => p.deleted != c.deleted,
listener: (context, state) {
state.deleted.fold(() => null, (_) => onDeleted());
},
),
BlocListener<CellOptionPannelBloc, CellOptionPannelState>(
BlocListener<EditSelectOptionBloc, EditSelectOptionState>(
listenWhen: (p, c) => p.option != c.option,
listener: (context, state) {
onUpdated(state.option);
},
),
],
child: BlocBuilder<CellOptionPannelBloc, CellOptionPannelState>(
child: BlocBuilder<EditSelectOptionBloc, EditSelectOptionState>(
builder: (context, state) {
List<Widget> slivers = [
SliverToBoxAdapter(child: _OptionNameTextField(state.option.name)),
@ -82,7 +82,7 @@ class _DeleteTag extends StatelessWidget {
hoverColor: theme.hover,
leftIcon: svgWidget("grid/delete", color: theme.iconColor),
onTap: () {
context.read<CellOptionPannelBloc>().add(const CellOptionPannelEvent.delete());
context.read<EditSelectOptionBloc>().add(const EditSelectOptionEvent.delete());
},
),
);
@ -100,7 +100,7 @@ class _OptionNameTextField extends StatelessWidget {
onCanceled: () {},
onDone: (optionName) {
if (name != optionName) {
context.read<CellOptionPannelBloc>().add(CellOptionPannelEvent.updateName(optionName));
context.read<EditSelectOptionBloc>().add(EditSelectOptionEvent.updateName(optionName));
}
},
);
@ -180,7 +180,7 @@ class _SelectOptionColorCell extends StatelessWidget {
leftIcon: colorIcon,
rightIcon: checkmark,
onTap: () {
context.read<CellOptionPannelBloc>().add(CellOptionPannelEvent.updateColor(color));
context.read<EditSelectOptionBloc>().add(EditSelectOptionEvent.updateColor(color));
},
),
);

View File

@ -12,7 +12,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'cell_option_pannel.dart';
import 'edit_option_pannel.dart';
import 'widget.dart';
class FieldSelectOptionPannel extends StatelessWidget {
@ -155,7 +155,7 @@ class _OptionList extends StatelessWidget {
return _OptionCell(
option: option,
onEdited: (option) {
final pannel = CellSelectOptionPannel(
final pannel = EditSelectOptionPannel(
option: option,
onDeleted: () {
delegate.hideOverlay(context);
@ -165,6 +165,7 @@ class _OptionList extends StatelessWidget {
delegate.hideOverlay(context);
context.read<FieldOptionPannelBloc>().add(FieldOptionPannelEvent.updateOption(updatedOption));
},
key: ValueKey(option.id),
);
delegate.showOverlay(context, pannel);
},

View File

@ -81,7 +81,7 @@ class NumberFormatList extends StatelessWidget {
format: format,
onSelected: (format) {
onSelected(format);
FlowyOverlay.of(context).remove(identifier());
FlowyOverlay.of(context).remove(NumberFormatList.identifier());
});
}).toList();
@ -101,8 +101,8 @@ class NumberFormatList extends StatelessWidget {
);
}
String identifier() {
return toString();
static String identifier() {
return (NumberFormatList).toString();
}
}