From 65bc99577c44cce653dafd9937c4d8f9c45fff61 Mon Sep 17 00:00:00 2001
From: Takuma Kira <50410641+TakumaKira@users.noreply.github.com>
Date: Sat, 14 Nov 2020 02:38:23 +0900
Subject: [PATCH] feat(segment): add swipeGesture property to allow for
 disabling of the swipe gesture (#22087)

resolves #22048
---
 angular/src/directives/proxies.ts             |  4 +--
 core/api.txt                                  |  1 +
 core/src/components.d.ts                      |  8 ++++++
 core/src/components/segment/readme.md         | 15 ++++++-----
 core/src/components/segment/segment.tsx       | 26 ++++++++++++++++---
 .../components/segment/test/basic/index.html  | 10 +++++++
 packages/vue/src/proxies.ts                   |  1 +
 7 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 7b5b83aedd..5938d3fb74 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -661,8 +661,8 @@ export class IonSearchbar {
 }
 export declare interface IonSegment extends Components.IonSegment {
 }
-@ProxyCmp({ inputs: ["color", "disabled", "mode", "scrollable", "value"] })
-@Component({ selector: "ion-segment", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["color", "disabled", "mode", "scrollable", "value"] })
+@ProxyCmp({ inputs: ["color", "disabled", "mode", "scrollable", "swipeGesture", "value"] })
+@Component({ selector: "ion-segment", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["color", "disabled", "mode", "scrollable", "swipeGesture", "value"] })
 export class IonSegment {
   ionChange!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
diff --git a/core/api.txt b/core/api.txt
index 783f3143a3..19dfb8f108 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1015,6 +1015,7 @@ ion-segment,prop,color,string | undefined,undefined,false,false
 ion-segment,prop,disabled,boolean,false,false,false
 ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
+ion-segment,prop,swipeGesture,boolean,true,false,false
 ion-segment,prop,value,null | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,css-prop,--background
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 15fbb4f5a6..655125b8ef 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2064,6 +2064,10 @@ export namespace Components {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable": boolean;
+        /**
+          * If `true`, users will be able to swipe between segment buttons to activate them.
+         */
+        "swipeGesture": boolean;
         /**
           * the value of the segment.
          */
@@ -5374,6 +5378,10 @@ declare namespace LocalJSX {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable"?: boolean;
+        /**
+          * If `true`, users will be able to swipe between segment buttons to activate them.
+         */
+        "swipeGesture"?: boolean;
         /**
           * the value of the segment.
          */
diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md
index bac38f632c..c0db0f3051 100644
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -566,13 +566,14 @@ export default defineComponent({
 
 ## Properties
 
-| Property     | Attribute    | Description                                                                                                                                                                                                                                                            | Type                          | Default     |
-| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
-| `color`      | `color`      | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`         | `undefined` |
-| `disabled`   | `disabled`   | If `true`, the user cannot interact with the segment.                                                                                                                                                                                                                  | `boolean`                     | `false`     |
-| `mode`       | `mode`       | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`               | `undefined` |
-| `scrollable` | `scrollable` | If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.                                                         | `boolean`                     | `false`     |
-| `value`      | `value`      | the value of the segment.                                                                                                                                                                                                                                              | `null \| string \| undefined` | `undefined` |
+| Property       | Attribute       | Description                                                                                                                                                                                                                                                            | Type                          | Default     |
+| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
+| `color`        | `color`         | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`         | `undefined` |
+| `disabled`     | `disabled`      | If `true`, the user cannot interact with the segment.                                                                                                                                                                                                                  | `boolean`                     | `false`     |
+| `mode`         | `mode`          | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`               | `undefined` |
+| `scrollable`   | `scrollable`    | If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.                                                         | `boolean`                     | `false`     |
+| `swipeGesture` | `swipe-gesture` | If `true`, users will be able to swipe between segment buttons to activate them.                                                                                                                                                                                       | `boolean`                     | `true`      |
+| `value`        | `value`         | the value of the segment.                                                                                                                                                                                                                                              | `null \| string \| undefined` | `undefined` |
 
 
 ## Events
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 33e633c051..e482cb6ca6 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -65,6 +65,16 @@ export class Segment implements ComponentInterface {
    */
   @Prop() scrollable = false;
 
+  /**
+   * If `true`, users will be able to swipe between segment buttons to activate them.
+   */
+  @Prop() swipeGesture = true;
+
+  @Watch('swipeGesture')
+  swipeGestureChanged() {
+    this.gestureChanged();
+  }
+
   /**
    * the value of the segment.
    */
@@ -111,8 +121,8 @@ export class Segment implements ComponentInterface {
   }
 
   private gestureChanged() {
-    if (this.gesture && !this.scrollable) {
-      this.gesture.enable(!this.disabled);
+    if (this.gesture) {
+      this.gesture.enable(!this.scrollable && !this.disabled && this.swipeGesture);
     }
   }
 
@@ -137,7 +147,6 @@ export class Segment implements ComponentInterface {
       onMove: ev => this.onMove(ev),
       onEnd: ev => this.onEnd(ev),
     });
-    this.gesture.enable(!this.scrollable);
     this.gestureChanged();
 
     if (this.disabled) {
@@ -390,9 +399,18 @@ export class Segment implements ComponentInterface {
   private onClick = (ev: Event) => {
     const current = ev.target as HTMLIonSegmentButtonElement;
     const previous = this.checked;
+
+    // If the current element is a segment then that means
+    // the user tried to swipe to a segment button and
+    // click a segment button at the same time so we should
+    // not update the checked segment button
+    if (current.tagName === 'ION-SEGMENT') {
+      return;
+    }
+
     this.value = current.value;
 
-    if (this.scrollable) {
+    if (this.scrollable || !this.swipeGesture) {
       if (previous) {
         this.checkButton(previous, current);
       } else {
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index 2f69dbaebc..0c61f1a4a0 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -198,6 +198,9 @@
       <div class="ion-padding">
         <ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
       </div>
+      <div class="ion-padding-horizontal">
+        <ion-button expand="block" color="tertiary" onClick="toggleSwipeGesture()">Toggle Swipe Gesture</ion-button>
+      </div>
 
       <script>
         var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
@@ -229,6 +232,13 @@
           }
         }
 
+        function toggleSwipeGesture() {
+          const ionSegmentElement = document.querySelectorAll('ion-segment');
+          for (var i = 0; i < ionSegmentElement.length; i++) {
+            ionSegmentElement[i].swipeGesture = !ionSegmentElement[i].swipeGesture;
+          }
+        }
+
         async function listenForEvent() {
           const ionSegmentElement = document.querySelector('ion-segment.event-tester');
           ionSegmentElement.addEventListener('ionChange', (event) => {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 21204687e0..aea7e41a41 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -574,6 +574,7 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-seg
   'color',
   'disabled',
   'scrollable',
+  'swipeGesture',
   'value',
   'ionChange',
   'ionSelect',