Skip to content

Commit 3a1148d

Browse files
appflowyappflowy
committed
refactor: add documentation to card.dart
1 parent f1d818b commit 3a1148d

File tree

4 files changed

+91
-79
lines changed

4 files changed

+91
-79
lines changed

‎frontend/app_flowy/lib/plugins/board/presentation/card/board_cell.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class EditableRowNotifier {
2323
EditableRowNotifier({required bool isEditing})
2424
: isEditing = ValueNotifier(isEditing);
2525

26-
void insertCell(
26+
void bindCell(
2727
GridCellIdentifier cellIdentifier,
2828
EditableCellNotifier notifier,
2929
) {
@@ -59,7 +59,7 @@ class EditableRowNotifier {
5959
_cells.values.first.isCellEditing.value = false;
6060
}
6161

62-
void clear() {
62+
void unbind() {
6363
for (final notifier in _cells.values) {
6464
notifier.dispose();
6565
}

‎frontend/app_flowy/lib/plugins/board/presentation/card/board_number_cell.dart‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_servic
33
import 'package:flowy_infra_ui/style_widget/text.dart';
44
import 'package:flutter/material.dart';
55
import 'package:flutter_bloc/flutter_bloc.dart';
6-
76
import 'define.dart';
87

98
class BoardNumberCell extends StatefulWidget {

‎frontend/app_flowy/lib/plugins/board/presentation/card/card.dart‎

Lines changed: 61 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import 'package:app_flowy/plugins/board/application/card/card_bloc.dart';
22
import 'package:app_flowy/plugins/board/application/card/card_data_controller.dart';
3-
import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
43
import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_action_sheet.dart';
54
import 'package:flowy_infra/image.dart';
65
import 'package:flowy_infra/theme.dart';
@@ -64,83 +63,103 @@ class _BoardCardState extends State<BoardCard> {
6463
value: _cardBloc,
6564
child: BlocBuilder<BoardCardBloc, BoardCardState>(
6665
buildWhen: (previous, current) {
66+
// Rebuild when:
67+
// 1.If the lenght of the cells is not the same
68+
// 2.isEditing changed
6769
if (previous.cells.length != current.cells.length ||
6870
previous.isEditing != current.isEditing) {
6971
return true;
7072
}
73+
74+
// 3.Compare the content of the cells. The cells consisits of
75+
// list of [BoardCellEquatable] that extends the [Equatable].
7176
return !listEquals(previous.cells, current.cells);
7277
},
7378
builder: (context, state) {
7479
return BoardCardContainer(
7580
buildAccessoryWhen: () => state.isEditing == false,
7681
accessoryBuilder: (context) {
7782
return [
78-
_CardEditOption(
79-
startEditing: () => rowNotifier.becomeFirstResponder(),
80-
),
83+
_CardEditOption(rowNotifier: rowNotifier),
8184
const _CardMoreOption(),
8285
];
8386
},
84-
onTap: (context) {
85-
widget.openCard(context);
86-
},
87-
child: Column(
88-
mainAxisSize: MainAxisSize.min,
89-
children: _makeCells(
90-
context,
91-
state.cells.map((cell) => cell.identifier).toList(),
92-
),
87+
onTap: (context) => widget.openCard(context),
88+
child: _CellColumn(
89+
groupId: widget.groupId,
90+
rowNotifier: rowNotifier,
91+
cellBuilder: widget.cellBuilder,
92+
cells: state.cells,
9393
),
9494
);
9595
},
9696
),
9797
);
9898
}
9999

100+
@override
101+
Future<void> dispose() async {
102+
rowNotifier.dispose();
103+
_cardBloc.close();
104+
super.dispose();
105+
}
106+
}
107+
108+
class _CellColumn extends StatelessWidget {
109+
final String groupId;
110+
final BoardCellBuilder cellBuilder;
111+
final EditableRowNotifier rowNotifier;
112+
final List<BoardCellEquatable> cells;
113+
const _CellColumn({
114+
required this.groupId,
115+
required this.rowNotifier,
116+
required this.cellBuilder,
117+
required this.cells,
118+
Key? key,
119+
}) : super(key: key);
120+
121+
@override
122+
Widget build(BuildContext context) {
123+
return Column(
124+
mainAxisSize: MainAxisSize.min,
125+
children: _makeCells(context, cells),
126+
);
127+
}
128+
100129
List<Widget> _makeCells(
101130
BuildContext context,
102-
List<GridCellIdentifier> cells,
131+
List<BoardCellEquatable> cells,
103132
) {
104133
final List<Widget> children = [];
105-
rowNotifier.clear();
134+
// Remove all the cell listeners.
135+
rowNotifier.unbind();
136+
106137
cells.asMap().forEach(
107-
(int index, GridCellIdentifier cellId) {
108-
EditableCellNotifier cellNotifier;
138+
(int index, BoardCellEquatable cell) {
139+
final isEditing = index == 0 ? rowNotifier.isEditing.value : false;
140+
final cellNotifier = EditableCellNotifier(isEditing: isEditing);
141+
109142
if (index == 0) {
110143
// Only use the first cell to receive user's input when click the edit
111144
// button
112-
cellNotifier = EditableCellNotifier(
113-
isEditing: rowNotifier.isEditing.value,
114-
);
115-
rowNotifier.insertCell(cellId, cellNotifier);
116-
} else {
117-
cellNotifier = EditableCellNotifier();
145+
rowNotifier.bindCell(cell.identifier, cellNotifier);
118146
}
119147

120-
Widget child = widget.cellBuilder.buildCell(
121-
widget.groupId,
122-
cellId,
123-
cellNotifier,
124-
);
125-
126-
child = Padding(
127-
key: cellId.key(),
148+
final child = Padding(
149+
key: cell.identifier.key(),
128150
padding: const EdgeInsets.only(left: 4, right: 4),
129-
child: child,
151+
child: cellBuilder.buildCell(
152+
groupId,
153+
cell.identifier,
154+
cellNotifier,
155+
),
130156
);
131157

132158
children.add(child);
133159
},
134160
);
135161
return children;
136162
}
137-
138-
@override
139-
Future<void> dispose() async {
140-
rowNotifier.dispose();
141-
_cardBloc.close();
142-
super.dispose();
143-
}
144163
}
145164

146165
class _CardMoreOption extends StatelessWidget with CardAccessory {
@@ -164,9 +183,9 @@ class _CardMoreOption extends StatelessWidget with CardAccessory {
164183
}
165184

166185
class _CardEditOption extends StatelessWidget with CardAccessory {
167-
final VoidCallback startEditing;
186+
final EditableRowNotifier rowNotifier;
168187
const _CardEditOption({
169-
required this.startEditing,
188+
required this.rowNotifier,
170189
Key? key,
171190
}) : super(key: key);
172191

@@ -183,6 +202,6 @@ class _CardEditOption extends StatelessWidget with CardAccessory {
183202

184203
@override
185204
void onTap(BuildContext context) {
186-
startEditing();
205+
rowNotifier.becomeFirstResponder();
187206
}
188207
}

‎frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart‎

Lines changed: 28 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -72,52 +72,46 @@ class CardAccessoryContainer extends StatelessWidget {
7272
Widget build(BuildContext context) {
7373
final theme = context.read<AppTheme>();
7474
final children = accessories.map((accessory) {
75-
final hover = FlowyHover(
76-
style: HoverStyle(
77-
hoverColor: theme.hover,
78-
backgroundColor: theme.surface,
79-
borderRadius: BorderRadius.zero,
80-
),
81-
builder: (_, onHover) => SizedBox(
82-
width: 24,
83-
height: 24,
84-
child: accessory,
85-
),
86-
);
8775
return GestureDetector(
8876
behavior: HitTestBehavior.opaque,
8977
onTap: () => accessory.onTap(context),
90-
child: hover,
78+
child: _wrapHover(theme, accessory),
9179
);
9280
}).toList();
81+
return _wrapDecoration(context, Row(children: children));
82+
}
9383

84+
FlowyHover _wrapHover(AppTheme theme, CardAccessory accessory) {
85+
return FlowyHover(
86+
style: HoverStyle(
87+
hoverColor: theme.hover,
88+
backgroundColor: theme.surface,
89+
borderRadius: BorderRadius.zero,
90+
),
91+
builder: (_, onHover) => SizedBox(
92+
width: 24,
93+
height: 24,
94+
child: accessory,
95+
),
96+
);
97+
}
98+
99+
Widget _wrapDecoration(BuildContext context, Widget child) {
100+
final theme = context.read<AppTheme>();
101+
final borderSide = BorderSide(color: theme.shader6, width: 1.0);
102+
final decoration = BoxDecoration(
103+
color: Colors.transparent,
104+
border: Border.fromBorderSide(borderSide),
105+
borderRadius: const BorderRadius.all(Radius.circular(4)),
106+
);
94107
return Container(
95108
clipBehavior: Clip.hardEdge,
96-
decoration: _makeBoxDecoration(context),
97-
child: Row(children: children),
109+
decoration: decoration,
110+
child: child,
98111
);
99112
}
100113
}
101114

102-
BoxDecoration _makeBoxDecoration(BuildContext context) {
103-
final theme = context.read<AppTheme>();
104-
final borderSide = BorderSide(color: theme.shader6, width: 1.0);
105-
return BoxDecoration(
106-
color: Colors.transparent,
107-
border: Border.fromBorderSide(borderSide),
108-
// boxShadow: const [
109-
// BoxShadow(
110-
// color: Colors.transparent,
111-
// spreadRadius: 0,
112-
// blurRadius: 5,
113-
// offset: Offset.zero,
114-
// )
115-
// ],
116-
117-
borderRadius: const BorderRadius.all(Radius.circular(4)),
118-
);
119-
}
120-
121115
class _CardEnterRegion extends StatelessWidget {
122116
final Widget child;
123117
final List<CardAccessory> accessories;

0 commit comments

Comments
 (0)