card.dart 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. import 'package:app_flowy/plugins/board/application/card/card_bloc.dart';
  2. import 'package:app_flowy/plugins/board/application/card/card_data_controller.dart';
  3. import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_action_sheet.dart';
  4. import 'package:appflowy_popover/popover.dart';
  5. import 'package:flowy_infra/image.dart';
  6. import 'package:flowy_infra/theme.dart';
  7. import 'package:flowy_infra_ui/flowy_infra_ui.dart';
  8. import 'package:flutter/foundation.dart';
  9. import 'package:flutter/material.dart';
  10. import 'package:flutter_bloc/flutter_bloc.dart';
  11. import 'board_cell.dart';
  12. import 'card_cell_builder.dart';
  13. import 'container/accessory.dart';
  14. import 'container/card_container.dart';
  15. class BoardCard extends StatefulWidget {
  16. final String gridId;
  17. final String groupId;
  18. final String fieldId;
  19. final bool isEditing;
  20. final CardDataController dataController;
  21. final BoardCellBuilder cellBuilder;
  22. final void Function(BuildContext) openCard;
  23. const BoardCard({
  24. required this.gridId,
  25. required this.groupId,
  26. required this.fieldId,
  27. required this.isEditing,
  28. required this.dataController,
  29. required this.cellBuilder,
  30. required this.openCard,
  31. Key? key,
  32. }) : super(key: key);
  33. @override
  34. State<BoardCard> createState() => _BoardCardState();
  35. }
  36. class _BoardCardState extends State<BoardCard> {
  37. late BoardCardBloc _cardBloc;
  38. late EditableRowNotifier rowNotifier;
  39. late PopoverController popoverController;
  40. AccessoryType? accessoryType;
  41. @override
  42. void initState() {
  43. rowNotifier = EditableRowNotifier(isEditing: widget.isEditing);
  44. _cardBloc = BoardCardBloc(
  45. gridId: widget.gridId,
  46. groupFieldId: widget.fieldId,
  47. dataController: widget.dataController,
  48. isEditing: widget.isEditing,
  49. )..add(const BoardCardEvent.initial());
  50. rowNotifier.isEditing.addListener(() {
  51. if (!mounted) return;
  52. _cardBloc.add(BoardCardEvent.setIsEditing(rowNotifier.isEditing.value));
  53. });
  54. popoverController = PopoverController();
  55. super.initState();
  56. }
  57. @override
  58. Widget build(BuildContext context) {
  59. return BlocProvider.value(
  60. value: _cardBloc,
  61. child: BlocBuilder<BoardCardBloc, BoardCardState>(
  62. buildWhen: (previous, current) {
  63. // Rebuild when:
  64. // 1.If the length of the cells is not the same
  65. // 2.isEditing changed
  66. if (previous.cells.length != current.cells.length ||
  67. previous.isEditing != current.isEditing) {
  68. return true;
  69. }
  70. // 3.Compare the content of the cells. The cells consists of
  71. // list of [BoardCellEquatable] that extends the [Equatable].
  72. return !listEquals(previous.cells, current.cells);
  73. },
  74. builder: (context, state) {
  75. return AppFlowyPopover(
  76. controller: popoverController,
  77. constraints: BoxConstraints.loose(const Size(140, 200)),
  78. direction: PopoverDirection.rightWithCenterAligned,
  79. popupBuilder: (popoverContext) => _handlePopoverBuilder(
  80. context,
  81. popoverContext,
  82. ),
  83. child: BoardCardContainer(
  84. buildAccessoryWhen: () => state.isEditing == false,
  85. accessoryBuilder: (context) {
  86. return [
  87. _CardEditOption(rowNotifier: rowNotifier),
  88. _CardMoreOption(),
  89. ];
  90. },
  91. openAccessory: _handleOpenAccessory,
  92. openCard: (context) => widget.openCard(context),
  93. child: _CellColumn(
  94. groupId: widget.groupId,
  95. rowNotifier: rowNotifier,
  96. cellBuilder: widget.cellBuilder,
  97. cells: state.cells,
  98. ),
  99. ),
  100. );
  101. },
  102. ),
  103. );
  104. }
  105. void _handleOpenAccessory(AccessoryType newAccessoryType) {
  106. accessoryType = newAccessoryType;
  107. switch (newAccessoryType) {
  108. case AccessoryType.edit:
  109. break;
  110. case AccessoryType.more:
  111. popoverController.show();
  112. break;
  113. }
  114. }
  115. Widget _handlePopoverBuilder(
  116. BuildContext context,
  117. BuildContext popoverContext,
  118. ) {
  119. switch (accessoryType!) {
  120. case AccessoryType.edit:
  121. throw UnimplementedError();
  122. case AccessoryType.more:
  123. return GridRowActionSheet(
  124. rowData: context.read<BoardCardBloc>().rowInfo());
  125. }
  126. }
  127. @override
  128. Future<void> dispose() async {
  129. rowNotifier.dispose();
  130. _cardBloc.close();
  131. super.dispose();
  132. }
  133. }
  134. class _CellColumn extends StatelessWidget {
  135. final String groupId;
  136. final BoardCellBuilder cellBuilder;
  137. final EditableRowNotifier rowNotifier;
  138. final List<BoardCellEquatable> cells;
  139. const _CellColumn({
  140. required this.groupId,
  141. required this.rowNotifier,
  142. required this.cellBuilder,
  143. required this.cells,
  144. Key? key,
  145. }) : super(key: key);
  146. @override
  147. Widget build(BuildContext context) {
  148. return Column(
  149. mainAxisSize: MainAxisSize.min,
  150. children: _makeCells(context, cells),
  151. );
  152. }
  153. List<Widget> _makeCells(
  154. BuildContext context,
  155. List<BoardCellEquatable> cells,
  156. ) {
  157. final List<Widget> children = [];
  158. // Remove all the cell listeners.
  159. rowNotifier.unbind();
  160. cells.asMap().forEach(
  161. (int index, BoardCellEquatable cell) {
  162. final isEditing = index == 0 ? rowNotifier.isEditing.value : false;
  163. final cellNotifier = EditableCellNotifier(isEditing: isEditing);
  164. if (index == 0) {
  165. // Only use the first cell to receive user's input when click the edit
  166. // button
  167. rowNotifier.bindCell(cell.identifier, cellNotifier);
  168. }
  169. final child = Padding(
  170. key: cell.identifier.key(),
  171. padding: const EdgeInsets.only(left: 4, right: 4),
  172. child: cellBuilder.buildCell(
  173. groupId,
  174. cell.identifier,
  175. cellNotifier,
  176. ),
  177. );
  178. children.add(child);
  179. },
  180. );
  181. return children;
  182. }
  183. }
  184. class _CardMoreOption extends StatelessWidget with CardAccessory {
  185. _CardMoreOption({Key? key}) : super(key: key);
  186. @override
  187. Widget build(BuildContext context) {
  188. return Padding(
  189. padding: const EdgeInsets.all(3.0),
  190. child:
  191. svgWidget('grid/details', color: context.read<AppTheme>().iconColor),
  192. );
  193. }
  194. @override
  195. AccessoryType get type => AccessoryType.more;
  196. }
  197. class _CardEditOption extends StatelessWidget with CardAccessory {
  198. final EditableRowNotifier rowNotifier;
  199. const _CardEditOption({
  200. required this.rowNotifier,
  201. Key? key,
  202. }) : super(key: key);
  203. @override
  204. Widget build(BuildContext context) {
  205. return Padding(
  206. padding: const EdgeInsets.all(3.0),
  207. child: svgWidget(
  208. 'editor/edit',
  209. color: context.read<AppTheme>().iconColor,
  210. ),
  211. );
  212. }
  213. @override
  214. void onTap(BuildContext context) => rowNotifier.becomeFirstResponder();
  215. @override
  216. AccessoryType get type => AccessoryType.edit;
  217. }