fix: [MDS-526] Replace custom outside Popover tapping logic with inbu…

…ilt TapRegion (#167)
coingaming · May 17, 2023 · 8717282 · 8717282
1 parent 11754ca
commit 8717282
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 32 deletions.
diff --git a/example/lib/src/storybook/storybook.dart b/example/lib/src/storybook/storybook.dart
@@ -44,7 +44,7 @@ class StorybookPage extends StatelessWidget {
     return Stack(
       children: [
         Storybook(
-          initialStory: "TextInput",
+          initialStory: "Accordion",
           plugins: _plugins,
           brandingWidget: const MoonVersionWidget(),
           wrapperBuilder: (context, child) => MaterialApp(

diff --git a/lib/src/widgets/popover/popover.dart b/lib/src/widgets/popover/popover.dart
@@ -198,7 +198,7 @@ class MoonPopoverState extends State<MoonPopover> with RouteAware, SingleTickerP
           offset: Offset(0, -distanceToTarget),
           targetAnchor: Alignment.topCenter,
           followerAnchor: Alignment.bottomCenter,
-          toolTipMaxWidth:
+          popoverMaxWidth:
               overlayWidth - ((overlayWidth / 2 - popoverTargetGlobalCenter) * 2).abs() - widget.popoverMargin * 2,
         );
 
@@ -207,7 +207,7 @@ class MoonPopoverState extends State<MoonPopover> with RouteAware, SingleTickerP
           offset: Offset(0, distanceToTarget),
           targetAnchor: Alignment.bottomCenter,
           followerAnchor: Alignment.topCenter,
-          toolTipMaxWidth:
+          popoverMaxWidth:
               overlayWidth - ((overlayWidth / 2 - popoverTargetGlobalCenter) * 2).abs() - widget.popoverMargin * 2,
         );
 
@@ -216,64 +216,54 @@ class MoonPopoverState extends State<MoonPopover> with RouteAware, SingleTickerP
           offset: Offset(-distanceToTarget, 0),
           targetAnchor: Alignment.centerLeft,
           followerAnchor: Alignment.centerRight,
-          toolTipMaxWidth: popoverTargetGlobalLeft - distanceToTarget - widget.popoverMargin,
+          popoverMaxWidth: popoverTargetGlobalLeft - distanceToTarget - widget.popoverMargin,
         );
 
       case MoonPopoverPosition.right:
         return _PopoverPositionProperties(
           offset: Offset(distanceToTarget, 0),
           targetAnchor: Alignment.centerRight,
           followerAnchor: Alignment.centerLeft,
-          toolTipMaxWidth: overlayWidth - popoverTargetGlobalRight - distanceToTarget - widget.popoverMargin,
+          popoverMaxWidth: overlayWidth - popoverTargetGlobalRight - distanceToTarget - widget.popoverMargin,
         );
 
       case MoonPopoverPosition.topLeft:
         return _PopoverPositionProperties(
           offset: Offset(0, -distanceToTarget),
           targetAnchor: Alignment.topRight,
           followerAnchor: Alignment.bottomRight,
-          toolTipMaxWidth: popoverTargetGlobalRight - widget.popoverMargin,
+          popoverMaxWidth: popoverTargetGlobalRight - widget.popoverMargin,
         );
 
       case MoonPopoverPosition.topRight:
         return _PopoverPositionProperties(
           offset: Offset(0, -distanceToTarget),
           targetAnchor: Alignment.topLeft,
           followerAnchor: Alignment.bottomLeft,
-          toolTipMaxWidth: overlayWidth - popoverTargetGlobalLeft - widget.popoverMargin,
+          popoverMaxWidth: overlayWidth - popoverTargetGlobalLeft - widget.popoverMargin,
         );
 
       case MoonPopoverPosition.bottomLeft:
         return _PopoverPositionProperties(
           offset: Offset(0, distanceToTarget),
           targetAnchor: Alignment.bottomRight,
           followerAnchor: Alignment.topRight,
-          toolTipMaxWidth: popoverTargetGlobalRight - widget.popoverMargin,
+          popoverMaxWidth: popoverTargetGlobalRight - widget.popoverMargin,
         );
 
       case MoonPopoverPosition.bottomRight:
         return _PopoverPositionProperties(
           offset: Offset(0, distanceToTarget),
           targetAnchor: Alignment.bottomLeft,
           followerAnchor: Alignment.topLeft,
-          toolTipMaxWidth: overlayWidth - popoverTargetGlobalLeft - widget.popoverMargin,
+          popoverMaxWidth: overlayWidth - popoverTargetGlobalLeft - widget.popoverMargin,
         );
 
       default:
         throw AssertionError(popoverPosition);
     }
   }
 
-  void _handleTap(TapDownDetails details) {
-    final RenderBox? popoverRenderBox = _popoverKey.currentContext?.findRenderObject() as RenderBox?;
-    final RenderBox? overlayRenderBox = Overlay.of(context).context.findRenderObject() as RenderBox?;
-    final popoverPosition = popoverRenderBox?.localToGlobal(Offset.zero, ancestor: overlayRenderBox);
-
-    if (popoverPosition != null && !popoverRenderBox!.size.contains(details.localPosition - popoverPosition)) {
-      _removePopover();
-    }
-  }
-
   @override
   void didPush() {
     _routeIsShowing = true;
@@ -440,24 +430,24 @@ class MoonPopoverState extends State<MoonPopover> with RouteAware, SingleTickerP
 
     return Semantics(
       label: widget.semanticLabel,
-      child: GestureDetector(
-        behavior: HitTestBehavior.translucent,
-        onTapDown: _handleTap,
-        child: UnconstrainedBox(
-          child: CompositedTransformFollower(
-            link: _layerLink,
-            showWhenUnlinked: false,
-            offset: popoverPositionParameters.offset,
-            followerAnchor: popoverPositionParameters.followerAnchor,
-            targetAnchor: popoverPositionParameters.targetAnchor,
+      child: UnconstrainedBox(
+        child: CompositedTransformFollower(
+          link: _layerLink,
+          showWhenUnlinked: false,
+          offset: popoverPositionParameters.offset,
+          followerAnchor: popoverPositionParameters.followerAnchor,
+          targetAnchor: popoverPositionParameters.targetAnchor,
+          child: TapRegion(
+            behavior: HitTestBehavior.translucent,
+            onTapOutside: (_) => _removePopover(),
             child: RepaintBoundary(
               child: FadeTransition(
                 opacity: _curvedAnimation!,
                 child: DefaultTextStyle(
                   style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor),
                   child: Container(
                     key: _popoverKey,
-                    constraints: BoxConstraints(maxWidth: popoverPositionParameters.toolTipMaxWidth),
+                    constraints: BoxConstraints(maxWidth: popoverPositionParameters.popoverMaxWidth),
                     padding: effectiveContentPadding,
                     decoration: ShapeDecoration(
                       color: effectiveBackgroundColor,
@@ -507,13 +497,13 @@ class MoonPopoverState extends State<MoonPopover> with RouteAware, SingleTickerP
 class _PopoverPositionProperties {
   final Alignment followerAnchor;
   final Alignment targetAnchor;
-  final double toolTipMaxWidth;
+  final double popoverMaxWidth;
   final Offset offset;
 
   _PopoverPositionProperties({
     required this.followerAnchor,
     required this.targetAnchor,
-    required this.toolTipMaxWidth,
+    required this.popoverMaxWidth,
     required this.offset,
   });
 }