TF-3704 Fix menu bounces when collapse/expand folder

Signed-off-by: dab246 <tdvu@linagora.com>
2025-05-07 02:53:37 +07:00
parent f2e854c2f0
commit aca0538b6b
16 changed files with 367 additions and 281 deletions
@@ -9,7 +9,6 @@ import 'package:jmap_dart_client/jmap/core/properties/properties.dart';
 import 'package:jmap_dart_client/jmap/core/state.dart' as jmap;
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
-import 'package:model/mailbox/expand_mode.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:tmail_ui_user/features/base/base_mailbox_controller.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/constants/mailbox_constants.dart';
@@ -25,7 +24,6 @@ import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_i
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/refresh_all_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/subscribe_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/subscribe_multiple_mailbox_interactor.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree_builder.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_name_interactor.dart';
@@ -135,26 +133,6 @@ class MailboxVisibilityController extends BaseMailboxController {
    }
  }

-  void toggleMailboxCategories(MailboxCategories categories) {
-    switch(categories) {
-      case MailboxCategories.exchange:
-        final newExpandMode = mailboxCategoriesExpandMode.value.defaultMailbox == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.defaultMailbox = newExpandMode;
-        mailboxCategoriesExpandMode.refresh();
-        break;
-      case MailboxCategories.personalFolders:
-        final newExpandMode = mailboxCategoriesExpandMode.value.personalFolders == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.personalFolders = newExpandMode;
-        mailboxCategoriesExpandMode.refresh();
-        break;
-      case MailboxCategories.teamMailboxes:
-        final newExpandMode = mailboxCategoriesExpandMode.value.teamMailboxes == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.teamMailboxes = newExpandMode;
-        mailboxCategoriesExpandMode.refresh();
-        break;
-    }
-  }
-
  void _subscribeMailboxSuccess(SubscribeMailboxSuccess subscribeMailboxSuccess) {
    if (subscribeMailboxSuccess.subscribeAction == MailboxSubscribeAction.unSubscribe
        && currentOverlayContext != null
@@ -8,6 +8,7 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/state/mailbox_visibility_state.dart';
@@ -88,15 +89,19 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
      return _buildBodyMailboxCategory(context, categories, mailboxNode);
    }
    return Column(children: [
-      buildHeaderMailboxCategory(
-        context,
-        controller.responsiveUtils,
-        controller.imagePaths,
-        categories,
-        controller,
-        toggleMailboxCategories: controller.toggleMailboxCategories,
-        padding: const EdgeInsetsDirectional.symmetric(vertical: 8)
-      ),
+      Obx(() => MailboxCategoryWidget(
+        categories: categories,
+        expandMode: categories.getExpandMode(
+          controller.mailboxCategoriesExpandMode.value,
+        ),
+        onToggleMailboxCategories: (categories, itemKey) =>
+          controller.toggleMailboxCategories(
+            categories,
+            controller.mailboxListScrollController,
+            itemKey,
+          ),
+        padding: const EdgeInsetsDirectional.symmetric(vertical: 8),
+      )),
      AnimatedContainer(
        duration: const Duration(milliseconds: 400),
        child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
@@ -129,19 +134,25 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
            isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
            paddingChild: const EdgeInsetsDirectional.only(start: 10),
            parent: MailBoxVisibilityFolderTileBuilder(
-              controller.imagePaths,
              mailboxNode,
-              onClickExpandMailboxNodeAction: (mailboxNode) {
-                controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController);
+              onClickExpandMailboxNodeAction: (mailboxNode, itemKey) {
+                controller.toggleMailboxFolder(
+                  mailboxNode,
+                  controller.mailboxListScrollController,
+                  itemKey,
+                );
              },
              onClickSubscribeMailboxAction: controller.subscribeMailbox
            ),
            children: _buildListChildTileWidget(context, mailboxNode)).build()
        : MailBoxVisibilityFolderTileBuilder(
-            controller.imagePaths,
            mailboxNode,
-            onClickExpandMailboxNodeAction: (mailboxNode) {
-              controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController);
+            onClickExpandMailboxNodeAction: (mailboxNode, itemKey) {
+              controller.toggleMailboxFolder(
+                mailboxNode,
+                controller.mailboxListScrollController,
+                itemKey,
+              );
            },
            onClickSubscribeMailboxAction: controller.subscribeMailbox
          ))
@@ -5,31 +5,41 @@ import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
-import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
+class MailBoxVisibilityFolderTileBuilder extends StatefulWidget {

  final MailboxNode _mailboxNode;
-  final ImagePaths _imagePaths;
  final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
  final OnClickSubscribeMailboxAction? onClickSubscribeMailboxAction;

  const MailBoxVisibilityFolderTileBuilder(
-    this._imagePaths,
    this._mailboxNode, {
    Key? key,
    this.onClickExpandMailboxNodeAction,
    this.onClickSubscribeMailboxAction
  }) : super(key: key);

+  @override
+  State<MailBoxVisibilityFolderTileBuilder> createState() => _MailBoxVisibilityFolderTileBuilderState();
+}
+
+class _MailBoxVisibilityFolderTileBuilderState extends State<MailBoxVisibilityFolderTileBuilder> {
+
+  final _imagePaths = Get.find<ImagePaths>();
+
+  final GlobalKey _key = GlobalKey();
+
  @override
  Widget build(BuildContext context) {
    return Material(
+      key: _key,
      color: Colors.transparent,
      child: InkWell(
        onTap: () {},
@@ -40,7 +50,7 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
            children: [
              _buildLeadingMailboxItem(context),
              Expanded(child: _buildTitleFolderItem(context)),
-              if (!_mailboxNode.item.isDefault)
+              if (!widget._mailboxNode.item.isDefault)
                _buildSubscribeButton(context),
              const SizedBox(width: 32),
            ]
@@ -55,58 +65,53 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
      mainAxisSize: MainAxisSize.min,
      children: [
        Visibility.maintain(
-          visible: _mailboxNode.hasChildren() && _mailboxNode.item.isPersonal,
+          visible: widget._mailboxNode.hasChildren() && widget._mailboxNode.item.isPersonal,
          child: TMailButtonWidget.fromIcon(
-            icon: _getExpandIcon(context, _imagePaths),
-            iconColor: _mailboxNode.item.allowedToDisplay
+            icon: widget._mailboxNode.expandMode.getIcon(
+              _imagePaths,
+              DirectionUtils.isDirectionRTLByLanguage(context),
+            ),
+            iconColor: widget._mailboxNode.item.allowedToDisplay
              ? Colors.black
              : AppColor.colorIconUnSubscribedMailbox,
            padding: const EdgeInsets.all(5),
            iconSize: 20,
            backgroundColor: Colors.transparent,
-            tooltipMessage: _mailboxNode.expandMode == ExpandMode.EXPAND
-              ? AppLocalizations.of(context).collapse
-              : AppLocalizations.of(context).expand,
-            onTapActionCallback: () => onClickExpandMailboxNodeAction?.call(_mailboxNode)
+            tooltipMessage: widget._mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
+            onTapActionCallback: () =>
+                widget.onClickExpandMailboxNodeAction?.call(
+                    widget._mailboxNode,
+                    _key,
+                )
          ),
        ),
-        if (!_mailboxNode.item.isTeamMailboxes)
+        if (!widget._mailboxNode.item.isTeamMailboxes)
          _buildMailboxIcon(context),
      ]
    );
  }

-  String _getExpandIcon(BuildContext context, ImagePaths imagePaths) {
-    if (_mailboxNode.expandMode == ExpandMode.EXPAND) {
-      return imagePaths.icArrowBottom;
-    } else {
-      return DirectionUtils.isDirectionRTLByLanguage(context)
-        ? imagePaths.icArrowLeft
-        : imagePaths.icArrowRight;
-    }
-  }
-
  Widget _buildTitleFolderItem(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
-          _mailboxNode.item.getDisplayName(context),
+          widget._mailboxNode.item.getDisplayName(context),
          maxLines: 1,
          softWrap: CommonTextStyle.defaultSoftWrap,
          overflow: CommonTextStyle.defaultTextOverFlow,
          style: TextStyle(
-            fontSize: _mailboxNode.item.isTeamMailboxes ? 16 : 14,
-            color: _mailboxNode.item.allowedToDisplay
+            fontSize: widget._mailboxNode.item.isTeamMailboxes ? 16 : 14,
+            color: widget._mailboxNode.item.allowedToDisplay
              ? Colors.black
              : AppColor.colorTitleAUnSubscribedMailbox,
-            fontWeight: _mailboxNode.item.isTeamMailboxes
+            fontWeight: widget._mailboxNode.item.isTeamMailboxes
              ? FontWeight.w500
              : FontWeight.normal),
        ),
-        if (_mailboxNode.item.isTeamMailboxes)
+        if (widget._mailboxNode.item.isTeamMailboxes)
          Text(
-            _mailboxNode.item.emailTeamMailBoxes,
+            widget._mailboxNode.item.emailTeamMailBoxes,
            maxLines: 1,
            softWrap: CommonTextStyle.defaultSoftWrap,
            overflow: CommonTextStyle.defaultTextOverFlow,
@@ -123,10 +128,10 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
    return Padding(
      padding: const EdgeInsetsDirectional.only(end: 8),
      child: SvgPicture.asset(
-        _mailboxNode.item.getMailboxIcon(_imagePaths),
+        widget._mailboxNode.item.getMailboxIcon(_imagePaths),
        width: 20,
        height: 20,
-        colorFilter: _mailboxNode.item.allowedToDisplay
+        colorFilter: widget._mailboxNode.item.allowedToDisplay
          ? AppColor.primaryColor.asFilter()
          : AppColor.colorIconUnSubscribedMailbox.asFilter(),
        fit: BoxFit.fill
@@ -138,12 +143,12 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
    return Material(
      color: Colors.transparent,
      child: InkWell(
-        onTap: () => onClickSubscribeMailboxAction?.call(_mailboxNode),
+        onTap: () => widget.onClickSubscribeMailboxAction?.call(widget._mailboxNode),
        borderRadius: const BorderRadius.all(Radius.circular(5)),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
          child: Text(
-            _mailboxNode.item.isSubscribedMailbox
+            widget._mailboxNode.item.isSubscribedMailbox
              ? AppLocalizations.of(context).hide
              : AppLocalizations.of(context).show,
            maxLines: 1,