TW-1492: Improvement for inview notifier list

linagora · Feb 23, 2024 · 02d5538 · 02d5538
1 parent 817b042
commit 02d5538
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 132 deletions.
diff --git a/lib/pages/chat/chat_event_list.dart b/lib/pages/chat/chat_event_list.dart
@@ -83,78 +83,76 @@ class ChatEventList extends StatelessWidget {
         child: SelectionTextContainer(
           chatController: controller,
           focusNode: controller.selectionFocusNode,
-          child: InViewNotifierList(
-            padding: EdgeInsets.only(
-              top: 16,
-              bottom: 8.0,
-              left: horizontalPadding,
-              right: horizontalPadding,
-            ),
-            reverse: true,
-            controller: controller.scrollController,
-            itemCount: events.length + 2,
-            builder: (context, index) {
-              // Footer to display typing indicator and read receipts:
-              if (index == 0) {
-                if (controller.timeline!.isRequestingFuture) {
-                  return const Center(
-                    child: CircularProgressIndicator.adaptive(strokeWidth: 2),
-                  );
-                }
-                if (controller.timeline!.canRequestFuture) {
-                  Center(
-                    child: OutlinedButton(
-                      style: OutlinedButton.styleFrom(
-                        backgroundColor:
-                            Theme.of(context).scaffoldBackgroundColor,
-                      ),
-                      onPressed: controller.requestFuture,
-                      child: Text(L10n.of(context)!.loadMore),
-                    ),
-                  );
-                }
-                return const SizedBox.shrink();
-              }
-              // Request history button or progress indicator:
-              if (index == events.length + 1) {
-                if (controller.timeline!.isRequestingHistory) {
-                  return const Center(
-                    child: CircularProgressIndicator.adaptive(strokeWidth: 2),
-                  );
-                }
-                if (controller.timeline!.canRequestHistory) {
-                  return Center(
-                    child: IconButton(
-                      onPressed: controller.requestHistory,
-                      icon: const Icon(Icons.refresh_outlined),
-                    ),
-                  );
-                }
-                return const SizedBox.shrink();
-              }
-              final currentEventIndex = index - 1;
-              final event = controller.timeline!.events[currentEventIndex];
-              final previousEvent = currentEventIndex > 0
-                  ? controller.timeline!.events[currentEventIndex - 1]
-                  : null;
-              final nextEvent = index < controller.timeline!.events.length
-                  ? controller.timeline!.events[currentEventIndex + 1]
-                  : null;
-              return InViewNotifierWidget(
-                id: event.eventId,
-                builder: (context, bool isInView, _) {
-                  if (isInView) {
-                    controller.handleDisplayStickyTimestamp(
-                      event.originServerTs,
-                    );
+          child: InViewNotifierListCustom(
+            isInViewPortCondition: controller.isInViewPortCondition,
+            listViewCustom: ListView.custom(
+              padding: EdgeInsets.only(
+                top: 16,
+                bottom: 8.0,
+                left: horizontalPadding,
+                right: horizontalPadding,
+              ),
+              reverse: true,
+              controller: controller.scrollController,
+              keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
+              childrenDelegate: SliverChildBuilderDelegate(
+                (BuildContext context, int index) {
+                  // Footer to display typing indicator and read receipts:
+                  if (index == 0) {
+                    if (controller.timeline!.isRequestingFuture) {
+                      return const Center(
+                        child:
+                            CircularProgressIndicator.adaptive(strokeWidth: 2),
+                      );
+                    }
+                    if (controller.timeline!.canRequestFuture) {
+                      Center(
+                        child: OutlinedButton(
+                          style: OutlinedButton.styleFrom(
+                            backgroundColor:
+                                Theme.of(context).scaffoldBackgroundColor,
+                          ),
+                          onPressed: controller.requestFuture,
+                          child: Text(L10n.of(context)!.loadMore),
+                        ),
+                      );
+                    }
+                    return const SizedBox.shrink();
+                  }
+                  // Request history button or progress indicator:
+                  if (index == events.length + 1) {
+                    if (controller.timeline!.isRequestingHistory) {
+                      return const Center(
+                        child:
+                            CircularProgressIndicator.adaptive(strokeWidth: 2),
+                      );
+                    }
+                    if (controller.timeline!.canRequestHistory) {
+                      return Center(
+                        child: IconButton(
+                          onPressed: controller.requestHistory,
+                          icon: const Icon(Icons.refresh_outlined),
+                        ),
+                      );
+                    }
+                    return const SizedBox.shrink();
                   }
+                  final currentEventIndex = index - 1;
+                  final event = controller.timeline!.events[currentEventIndex];
+                  final previousEvent = currentEventIndex > 0
+                      ? controller.timeline!.events[currentEventIndex - 1]
+                      : null;
+                  final nextEvent = index < controller.timeline!.events.length
+                      ? controller.timeline!.events[currentEventIndex + 1]
+                      : null;
                   return AutoScrollTag(
                     key: ValueKey(event.eventId),
                     index: index,
                     controller: controller.scrollController,
                     highlightColor: LinagoraRefColors.material().primary[99],
                     child: event.isVisibleInGui
                         ? Message(
+                            key: ValueKey(event.eventId),
                             event,
                             onSwipe: (direction) =>
                                 controller.replyAction(replyTo: event),
@@ -185,14 +183,20 @@ class ChatEventList extends StatelessWidget {
                                 controller.onHideKeyboardAndEmoji,
                             markedUnreadLocation:
                                 controller.unreadReceivedMessageLocation,
-                            hideTimeStamp: isInView,
+                            timestampCallback: (event) {
+                              controller.handleDisplayStickyTimestamp(
+                                event.originServerTs,
+                              );
+                            },
                           )
                         : const SizedBox(),
                   );
                 },
-              );
-            },
-            isInViewPortCondition: controller.isInViewPortCondition,
+                childCount: events.length + 2,
+                findChildIndexCallback: (key) =>
+                    controller.findChildIndexCallback(key, thisEventsKeyMap),
+              ),
+            ),
           ),
         ),
       ),