chore: update appflowy_baord documentation

Author: appflowy

frontend/app_flowy/lib/plugins/board/presentation/board_page.dart

@@ -62,17 +62,15 @@ class BoardContent extends StatefulWidget {
 }
 
 class _BoardContentState extends State<BoardContent> {
-  late ScrollController scrollController;
-  late AppFlowyBoardScrollManager scrollManager;
+  late AppFlowyBoardScrollController scrollManager;
 
   final config = AppFlowyBoardConfig(
     groupBackgroundColor: HexColor.fromHex('#F7F8FC'),
   );
 
   @override
   void initState() {
-    scrollController = ScrollController();
-    scrollManager = AppFlowyBoardScrollManager();
+    scrollManager = AppFlowyBoardScrollController();
     super.initState();
   }
 
@@ -102,8 +100,8 @@ class _BoardContentState extends State<BoardContent> {
   Expanded _buildBoard(BuildContext context) {
     return Expanded(
       child: AppFlowyBoard(
-        scrollManager: scrollManager,
-        scrollController: scrollController,
+        boardScrollController: scrollManager,
+        scrollController: ScrollController(),
         controller: context.read<BoardBloc>().boardController,
         headerBuilder: _buildHeader,
         footerBuilder: _buildFooter,
@@ -143,7 +141,6 @@ class _BoardContentState extends State<BoardContent> {
 
   @override
   void dispose() {
-    scrollController.dispose();
     super.dispose();
   }
 

frontend/app_flowy/packages/appflowy_board/CHANGELOG.md

@@ -1,3 +1,6 @@
+# 0.0.7
+* Rename some classes
+* Add documentation
 # 0.0.6
 * Support scroll to bottom
 * Fix some bugs

frontend/app_flowy/packages/appflowy_board/README.md

@@ -120,7 +120,7 @@ First, run main.dart to play with the demo.
 
 Second, let's delve into multi_board_list_example.dart to understand a few key components:
 * A Board widget is created via instantiating an `AppFlowyBoard` object. 
-* In the `AppFlowyBoard` object, you can find the `AppFlowyBoardController`, which is defined in board_data.dart, is feeded with prepopulated mock data. It also contains callback functions to materialize future user data.
+* In the `AppFlowyBoard` object, you can find the `AppFlowyBoardController`, which is defined in board_data.dart, is fed with pre-populated mock data. It also contains callback functions to materialize future user data.
 * Three builders: AppFlowyBoardHeaderBuilder, AppFlowyBoardFooterBuilder, AppFlowyBoardCardBuilder. See below image for what they are used for.
 
 

frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart

@@ -10,7 +10,7 @@ import 'reorder_flex/reorder_flex.dart';
 import 'reorder_phantom/phantom_controller.dart';
 import '../rendering/board_overlay.dart';
 
-class AppFlowyBoardScrollManager {
+class AppFlowyBoardScrollController {
   AppFlowyBoardState? _groupState;
 
   void scrollToBottom(String groupId, VoidCallback? completed) {
@@ -79,32 +79,40 @@ class AppFlowyBoard extends StatelessWidget {
   ///
   final AppFlowyBoardController controller;
 
+  /// A constraints applied to [AppFlowyBoardGroup] widget.
   final BoxConstraints groupConstraints;
 
+  /// A controller is used by the [ReorderFlex].
   ///
-  late final BoardPhantomController phantomController;
-
+  /// The [ReorderFlex] will used the primary scrollController of the current
+  /// [BuildContext] by using PrimaryScrollController.of(context).
+  /// If the primary scrollController is null, we will assign a new [ScrollController].
   final ScrollController? scrollController;
 
+  ///
   final AppFlowyBoardConfig config;
 
-  final AppFlowyBoardScrollManager? scrollManager;
+  /// A controller is used to control each group scroll actions.
+  ///
+  final AppFlowyBoardScrollController? boardScrollController;
 
   final AppFlowyBoardState _groupState = AppFlowyBoardState();
 
+  late final BoardPhantomController _phantomController;
+
   AppFlowyBoard({
     required this.controller,
     required this.cardBuilder,
     this.background,
     this.footerBuilder,
     this.headerBuilder,
     this.scrollController,
-    this.scrollManager,
+    this.boardScrollController,
     this.groupConstraints = const BoxConstraints(maxWidth: 200),
     this.config = const AppFlowyBoardConfig(),
     Key? key,
   }) : super(key: key) {
-    phantomController = BoardPhantomController(
+    _phantomController = BoardPhantomController(
       delegate: controller,
       groupsState: _groupState,
     );
@@ -116,23 +124,23 @@ class AppFlowyBoard extends StatelessWidget {
       value: controller,
       child: Consumer<AppFlowyBoardController>(
         builder: (context, notifier, child) {
-          if (scrollManager != null) {
-            scrollManager!._groupState = _groupState;
+          if (boardScrollController != null) {
+            boardScrollController!._groupState = _groupState;
           }
 
           return _AppFlowyBoardContent(
             config: config,
             dataController: controller,
             scrollController: scrollController,
-            scrollManager: scrollManager,
+            scrollManager: boardScrollController,
             columnsState: _groupState,
             background: background,
-            delegate: phantomController,
-            columnConstraints: groupConstraints,
+            delegate: _phantomController,
+            groupConstraints: groupConstraints,
             cardBuilder: cardBuilder,
             footerBuilder: footerBuilder,
             headerBuilder: headerBuilder,
-            phantomController: phantomController,
+            phantomController: _phantomController,
             onReorder: controller.moveGroup,
           );
         },
@@ -143,15 +151,13 @@ class AppFlowyBoard extends StatelessWidget {
 
 class _AppFlowyBoardContent extends StatefulWidget {
   final ScrollController? scrollController;
-  final OnDragStarted? onDragStarted;
   final OnReorder onReorder;
-  final OnDragEnded? onDragEnded;
   final AppFlowyBoardController dataController;
   final Widget? background;
   final AppFlowyBoardConfig config;
   final ReorderFlexConfig reorderFlexConfig;
-  final BoxConstraints columnConstraints;
-  final AppFlowyBoardScrollManager? scrollManager;
+  final BoxConstraints groupConstraints;
+  final AppFlowyBoardScrollController? scrollManager;
   final AppFlowyBoardState columnsState;
   final AppFlowyBoardCardBuilder cardBuilder;
   final AppFlowyBoardHeaderBuilder? headerBuilder;
@@ -166,11 +172,9 @@ class _AppFlowyBoardContent extends StatefulWidget {
     required this.dataController,
     required this.scrollManager,
     required this.columnsState,
-    this.onDragStarted,
-    this.onDragEnded,
     this.scrollController,
     this.background,
-    required this.columnConstraints,
+    required this.groupConstraints,
     required this.cardBuilder,
     this.footerBuilder,
     this.headerBuilder,
@@ -204,9 +208,7 @@ class _AppFlowyBoardContentState extends State<_AppFlowyBoardContent> {
         final reorderFlex = ReorderFlex(
           config: widget.reorderFlexConfig,
           scrollController: widget.scrollController,
-          onDragStarted: widget.onDragStarted,
           onReorder: widget.onReorder,
-          onDragEnded: widget.onDragEnded,
           dataSource: widget.dataController,
           direction: Axis.horizontal,
           interceptor: interceptor,
@@ -285,7 +287,7 @@ class _AppFlowyBoardContentState extends State<_AppFlowyBoardContent> {
 
               widget.columnsState.addGroup(columnData.id, boardColumn);
               return ConstrainedBox(
-                constraints: widget.columnConstraints,
+                constraints: widget.groupConstraints,
                 child: boardColumn,
               );
             },

frontend/app_flowy/packages/appflowy_board/pubspec.yaml

@@ -1,6 +1,6 @@
 name: appflowy_board
 description: AppFlowyBoard is a board-style widget that consists of multi-groups. It supports drag and drop between different groups. 
-version: 0.0.6
+version: 0.0.7
 homepage: https://github.com/AppFlowy-IO/AppFlowy
 repository: https://github.com/AppFlowy-IO/AppFlowy/tree/main/frontend/app_flowy/packages/appflowy_board
 

frontend/app_flowy/pubspec.lock

@@ -28,7 +28,7 @@ packages:
       path: "packages/appflowy_board"
       relative: true
     source: path
-    version: "0.0.6"
+    version: "0.0.7"
   appflowy_editor:
     dependency: "direct main"
     description: