fix(toggle): finish it

packages/core/src/components.d.ts

@@ -3102,6 +3102,7 @@ declare global {
           mode?: string,
           color?: string,
         
+          toggle?: any,
           checked?: boolean,
           disabled?: boolean,
           value?: string

packages/core/src/components/gesture/gesture.tsx

@@ -63,7 +63,7 @@ export class Gesture {
     }
     this.hasPress = (types.indexOf('press') > -1);
 
-    this.enabledChange(true);
+    this.enabledChange(this.enabled);
     if (this.pan || this.hasPress) {
       Context.dom.write(() => {
         applyStyles(getElementReference(this.el, this.attachTo), GESTURE_INLINE_STYLES);
@@ -78,9 +78,6 @@ export class Gesture {
 
   @PropDidChange('enabled')
   enabledChange(isEnabled: boolean) {
-    if (!this.gesture) {
-      return;
-    }
     if (this.pan || this.hasPress) {
       Context.enableListener(this, 'touchstart', isEnabled, this.attachTo);
       Context.enableListener(this, 'mousedown', isEnabled, this.attachTo);

packages/core/src/components/toggle/toggle.tsx

@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core';
+import { Component, Event, EventEmitter, Listen, Method, Prop, PropDidChange, State } from '@stencil/core';
 import { BooleanInputComponent, GestureDetail } from '../../index';
 
 
@@ -14,42 +14,113 @@ import { BooleanInputComponent, GestureDetail } from '../../index';
   }
 })
 export class Toggle implements BooleanInputComponent {
+
   private toggleId: string;
   private labelId: string;
   private styleTmr: any;
+  private gestureConfig: any;
+  private startX: number;
 
-  activated: boolean = false;
   hasFocus: boolean = false;
-  startX: number;
 
-  @Event() ionChange: EventEmitter;
+  @State() activated: boolean = false;
-  @Event() ionStyle: EventEmitter;
-  @Event() ionFocus: EventEmitter;
-  @Event() ionBlur: EventEmitter;
 
   @Prop() color: string;
   @Prop() mode: string;
 
   @Prop({ mutable: true }) checked: boolean = false;
-  @Prop({ mutable: true }) disabled: boolean = false;
-  @Prop({ mutable: true }) value: string;
-
-
-  protected ionViewWillLoad() {
-    this.emitStyle();
-  }
-
   @PropDidChange('checked')
   checkedChanged(val: boolean) {
     this.ionChange.emit({ checked: val });
     this.emitStyle();
   }
 
+  @Prop({ mutable: true }) disabled: boolean = false;
   @PropDidChange('disabled')
   disabledChanged() {
     this.emitStyle();
   }
 
+  // TODO: value is broken
+  @Prop({ mutable: true }) value: string;
+
+  @Event() ionChange: EventEmitter;
+  @Event() ionStyle: EventEmitter;
+  @Event() ionFocus: EventEmitter;
+  @Event() ionBlur: EventEmitter;
+
+  constructor() {
+    this.gestureConfig = {
+      'onStart': this.onDragStart.bind(this),
+      'onMove': this.onDragMove.bind(this),
+      'onEnd': this.onDragEnd.bind(this),
+      'onPress': this.toggle.bind(this),
+      'gestureName': 'toggle',
+      'gesturePriority': 30,
+      'type': 'pan,press',
+      'direction': 'x',
+      'threshold': 0,
+      'attachTo': 'parent'
+    };
+  }
+
+  protected ionViewWillLoad() {
+    this.emitStyle();
+  }
+
+  @Listen('keydown.space')
+  onSpace(ev: KeyboardEvent) {
+    this.toggle();
+    ev.stopPropagation();
+    ev.preventDefault();
+  }
+
+  @Method()
+  toggle() {
+    if (!this.disabled) {
+      this.checked = !this.checked;
+      this.fireFocus();
+    }
+    return this.checked;
+  }
+
+  private onDragStart(detail: GestureDetail) {
+    this.startX = detail.startX;
+    this.fireFocus();
+  }
+
+  private onDragMove(detail: GestureDetail) {
+    const currentX = detail.currentX;
+    if (this.checked) {
+      if (currentX + 15 < this.startX) {
+        this.checked = false;
+        this.activated = true;
+        this.startX = currentX;
+      }
+
+    } else if (currentX - 15 > this.startX) {
+      this.checked = true;
+      this.activated = (currentX < this.startX + 5);
+      this.startX = currentX;
+    }
+  }
+
+  private onDragEnd(detail: GestureDetail) {
+    const delta = detail.deltaX;
+    if (this.checked) {
+      if (delta < -4) {
+        this.checked = false;
+      }
+
+    } else if (delta > 4) {
+      this.checked = true;
+    }
+
+    this.activated = false;
+    this.startX = null;
+    this.fireBlur();
+  }
+
   private emitStyle() {
     clearTimeout(this.styleTmr);
 
@@ -63,65 +134,6 @@ export class Toggle implements BooleanInputComponent {
     });
   }
 
-  private canStart() {
-    return !this.disabled;
-  }
-
-
-  private onDragStart(detail: GestureDetail) {
-    this.startX = detail.startX;
-    this.fireFocus();
-  }
-
-
-  private onDragMove(detail: GestureDetail) {
-    if (this.checked) {
-      if (detail.currentX + 15 < this.startX) {
-        this.checked = false;
-        this.activated = true;
-        this.startX = detail.currentX;
-      }
-
-    } else if (detail.currentX - 15 > this.startX) {
-      this.checked = true;
-      this.activated = (detail.currentX < this.startX + 5);
-      this.startX = detail.currentX;
-    }
-  }
-
-
-  private onDragEnd(detail: GestureDetail) {
-    if (this.checked) {
-      if (detail.startX + 4 > detail.currentX) {
-        this.checked = false;
-      }
-
-    } else if (detail.startX - 4 < detail.currentX) {
-      this.checked = true;
-    }
-
-    this.activated = false;
-    this.fireBlur();
-    this.startX = null;
-  }
-
-
-  @Listen('keydown.space')
-  onSpace(ev: KeyboardEvent) {
-    this.toggle();
-    ev.stopPropagation();
-    ev.preventDefault();
-  }
-
-  toggle() {
-    if (!this.disabled) {
-      this.checked = !this.checked;
-      this.fireFocus();
-    }
-    return this.checked;
-  }
-
-
   fireFocus() {
     if (!this.hasFocus) {
       this.hasFocus = true;
@@ -130,7 +142,6 @@ export class Toggle implements BooleanInputComponent {
     }
   }
 
-
   fireBlur() {
     if (this.hasFocus) {
       this.hasFocus = false;
@@ -139,7 +150,7 @@ export class Toggle implements BooleanInputComponent {
     }
   }
 
-  hostData() {
+  protected hostData() {
     return {
       class: {
         'toggle-activated': this.activated,
@@ -151,19 +162,9 @@ export class Toggle implements BooleanInputComponent {
 
   protected render() {
     return (
-      <ion-gesture {...{
+      <ion-gesture {...this.gestureConfig}
-        'canStart': this.canStart.bind(this),
+        enabled={!this.disabled}
-        'onStart': this.onDragStart.bind(this),
+      >
-        'onMove': this.onDragMove.bind(this),
-        'onEnd': this.onDragEnd.bind(this),
-        'onPress': this.toggle.bind(this),
-        'gestureName': 'toggle',
-        'gesturePriority': 30,
-        'type': 'pan,press',
-        'direction': 'x',
-        'threshold': 0,
-        'attachTo': 'parent'
-      }}>
         <div class='toggle-icon'>
           <div class='toggle-inner'></div>
         </div>

packages/core/stencil.config.js

@@ -4,7 +4,7 @@ exports.config = {
   generateWWW: false,
   bundles: [
     { components: ['ion-animation-controller'] },
-    { components: ['ion-app', 'ion-content', 'ion-footer', 'ion-header', 'ion-navbar', 'ion-page', 'ion-title', 'ion-toolbar'] },
+    { components: ['ion-app', 'ion-content', 'ion-scroll', 'ion-footer', 'ion-header', 'ion-navbar', 'ion-page', 'ion-title', 'ion-toolbar'] },
     { components: ['ion-action-sheet', 'ion-action-sheet-controller'] },
     { components: ['ion-alert', 'ion-alert-controller'] },
     { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
@@ -15,7 +15,7 @@ exports.config = {
     { components: ['ion-chip', 'ion-chip-button'] },
     { components: ['ion-datetime', 'ion-picker', 'ion-picker-column', 'ion-picker-controller'] },
     { components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] },
-    { components: ['ion-gesture', 'ion-scroll'], priority: 'low' },
+    { components: ['ion-gesture'], priority: 'low' },
     { components: ['ion-grid', 'ion-row', 'ion-col'] },
     { components: ['ion-item', 'ion-item-divider', 'ion-label', 'ion-list', 'ion-list-header', 'ion-skeleton-text'] },
     { components: ['ion-item-sliding', 'ion-item-options', 'ion-item-option'] },