[SHEL-2203]: Added flag to control zoomHelper show/hide in mobile (#297)

ticketevolution · Nov 27, 2024 · 1962bf5 · 1962bf5
1 parent ee6c973
commit 1962bf5
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/two-icons-try.md b/.changeset/two-icons-try.md
@@ -0,0 +1,5 @@
+---
+"@ticketevolution/seatmaps-client": minor
+---
+
+Added the `showZoomHelper` flag to control the visibility of the ZoomHelper overlay. The overlay is displayed on mobile devices only when `mouseControlEnabled` is `true`. The default value of `showZoomHelper` is `true`.
diff --git a/README.md b/README.md
@@ -161,6 +161,7 @@ Options:
 | `showControls`        |          | `boolean`                      | `true`                                                                                                                                                                                                                                             | When set to true, the map controls (the zoom in, zoom out, reset zoom, and clear selection buttons) will be visible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `showLegend`          |          | `boolean`                      | `true`                                                                                                                                                                                                                                             | When set to true, the map legend will be visible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `mouseControlEnabled` |          | `boolean`                      | `true`                                                                                                                                                                                                                                             | When set to true, the map will respond to mouse events (such as click, move, and hover).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `showZoomHelper` |          | `boolean`                      | `true`                                                                                                                                                                                                                                             | When set to `true`, the ZoomHelper overlay will appear when the page loads on mobile devices.<br>**Note:** This flag applies only when `mouseControlEnabled` is set to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
 #### `updateTicketGroups(groups: TicketGroup[])`
 

diff --git a/packages/seatmaps-client/src/TicketMap/index.tsx b/packages/seatmaps-client/src/TicketMap/index.tsx
@@ -69,6 +69,7 @@ export class TicketMap extends Component<Props & DefaultProps, State> {
     showLegend: true,
     showControls: true,
     mouseControlEnabled: true,
+    showZoomHelper: true,
     mapFontFamily: "inherit",
   };
 
@@ -650,9 +651,9 @@ export class TicketMap extends Component<Props & DefaultProps, State> {
             onResetZoom={this.handleResetZoom}
           />
         )}
-        {this.state.isTouchDevice && this.props.mouseControlEnabled && (
-          <ZoomHelper />
-        )}
+        {this.state.isTouchDevice &&
+          this.props.mouseControlEnabled &&
+          this.props.showZoomHelper && <ZoomHelper />}
       </div>
     );
   }

diff --git a/packages/seatmaps-client/src/index.tsx b/packages/seatmaps-client/src/index.tsx
@@ -25,6 +25,7 @@ const optionalConfigKeys: (keyof DefaultProps)[] = [
   "showControls",
   "showLegend",
   "mouseControlEnabled",
+  "showZoomHelper",
 ];
 
 export function extractConfigurationFromOptions(options: Props): Props {

diff --git a/packages/seatmaps-client/src/types/TicketMap.ts b/packages/seatmaps-client/src/types/TicketMap.ts
@@ -38,6 +38,7 @@ export interface DefaultProps {
   onSelection(sections: string[]): void;
   showControls: boolean;
   mouseControlEnabled: boolean;
+  showZoomHelper: boolean;
   missingSeatMapLogo?: React.ReactNode;
 }