refactor(enabled): update components to use disabled prop

references #13295

packages/core/src/components.d.ts

@@ -1086,7 +1086,7 @@ declare global {
   }
   namespace JSXElements {
     export interface IonInfiniteScrollAttributes extends HTMLAttributes {
-      enabled?: boolean;
+      disabled?: boolean;
       position?: string;
       threshold?: string;
     }
@@ -1331,6 +1331,7 @@ declare global {
       color?: string;
       href?: string;
       mode?: 'ios' | 'md';
+      onclick?: (this: HTMLElement, ev: MouseEvent) => any;
     }
   }
 }
@@ -1585,7 +1586,7 @@ declare global {
   namespace JSXElements {
     export interface IonMenuAttributes extends HTMLAttributes {
       content?: string;
-      enabled?: boolean;
+      disabled?: boolean;
       maxEdgeStart?: number;
       menuId?: string;
       persistent?: boolean;
@@ -2139,8 +2140,8 @@ declare global {
   namespace JSXElements {
     export interface IonRefresherAttributes extends HTMLAttributes {
       closeDuration?: string;
-      enabled?: boolean;
+      disabled?: boolean;
-      pullDelta?: number;
+      pullMax?: any;
       pullMin?: number;
       snapbackDuration?: string;
     }
@@ -2172,7 +2173,7 @@ declare global {
   }
   namespace JSXElements {
     export interface IonReorderGroupAttributes extends HTMLAttributes {
-      enabled?: boolean;
+      disabled?: boolean;
     }
   }
 }
@@ -2385,7 +2386,7 @@ declare global {
   }
   namespace JSXElements {
     export interface IonScrollAttributes extends HTMLAttributes {
-      enabled?: boolean;
+      disabled?: boolean;
       onionScroll?: ScrollCallback;
       onionScrollEnd?: ScrollCallback;
       onionScrollStart?: ScrollCallback;
@@ -2756,7 +2757,7 @@ declare global {
   }
   namespace JSXElements {
     export interface IonSplitPaneAttributes extends HTMLAttributes {
-      enabled?: boolean;
+      disabled?: boolean;
       when?: string | boolean;
     }
   }
@@ -2822,7 +2823,7 @@ declare global {
       badge?: string;
       badgeStyle?: string;
       btnId?: string;
-      enabled?: boolean;
+      disabled?: boolean;
       icon?: string;
       path?: string;
       selected?: boolean;

packages/core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -34,7 +34,7 @@ export class InfiniteScroll {
    * output event to get called when the user has scrolled 10%
    * from the bottom of the page. Use the value `100px` when the
    * scroll is within 100 pixels from the bottom of the page.
-   * Default is `15%`.
+   * Defaults to `15%`.
    */
   @Prop() threshold = '15%';
 
@@ -52,29 +52,26 @@ export class InfiniteScroll {
 
 
   /**
-   * @input {boolean} If true, Whether or not the infinite scroll should be
+   * @input {boolean} If true, whether or not the infinite scroll should be
-   * enabled or not. Setting to `false` will remove scroll event listeners
+   * disabled or not. Setting to `true` will remove scroll event listeners
    * and hide the display.
    *
    * Call `enable(false)` to disable the infinite scroll from actively
    * trying to receive new data while scrolling. This method is useful
    * when it is known that there is no more data that can be added, and
    * the infinite scroll is no longer needed.
-   * @param {boolean} shouldEnable  If the infinite scroll should be
-   * enabled or not. Setting to `false` will remove scroll event listeners
-   * and hide the display.
    */
-  @Prop() enabled = true;
+  @Prop() disabled = false;
 
-  @Watch('enabled')
+  @Watch('disabled')
-  protected enabledChanged(val: boolean) {
+  protected disabledChanged(val: boolean) {
     this.enableScrollEvents(val);
   }
 
   /**
    * @input {string} The position of the infinite scroll element.
    * The value can be either `top` or `bottom`.
-   * Default is `bottom`.
+   * Defaults to `bottom`.
    */
   @Prop() position: string = Position.Bottom;
 
@@ -100,7 +97,7 @@ export class InfiniteScroll {
     }
     this.init = true;
     this.thresholdChanged(this.threshold);
-    this.enableScrollEvents(this.enabled);
+    this.enableScrollEvents(this.disabled);
     if (this.position === Position.Top) {
       this.dom.write(() => this.scrollEl.scrollToBottom(0));
     }
@@ -148,7 +145,7 @@ export class InfiniteScroll {
 
   private canStart(): boolean {
     return (
-      this.enabled &&
+      this.disabled &&
       !this.isBusy &&
       this.scrollEl &&
       !this.isLoading);
@@ -229,7 +226,7 @@ export class InfiniteScroll {
     return {
       class: {
         'infinite-scroll-loading': this.isLoading,
-        'infinite-scroll-enabled': this.enabled
+        'infinite-scroll-enabled': !this.disabled
       }
     };
   }

packages/core/src/components/infinite-scroll/readme.md

@@ -135,7 +135,7 @@ You could replace our default content with custom SVG or CSS animations.
 
 ## Properties
 
-#### enabled
+#### disabled
 
 boolean
 
@@ -152,7 +152,7 @@ string
 
 ## Attributes
 
-#### enabled
+#### disabled
 
 boolean
 

packages/core/src/components/infinite-scroll/test/basic/index.html

@@ -21,7 +21,7 @@
       <ion-content padding>
 
         <ion-button onclick="toggleInfiniteScroll()" block>
-          Toggle InfiniteScroll Enabled
+          Toggle InfiniteScroll
         </ion-button>
 
         <ion-list id="list">
@@ -49,7 +49,7 @@
     const infiniteScroll = document.getElementById('infinite-scroll');
 
     function toggleInfiniteScroll() {
-      infiniteScroll.enabled = !infiniteScroll.enabled;
+      infiniteScroll.disabled = !infiniteScroll.disabled;
     }
 
     infiniteScroll.addEventListener('ionInfinite', async function() {

packages/core/src/components/infinite-scroll/test/standalone/index.html

@@ -29,7 +29,7 @@
     const infiniteScroll = document.getElementById('infinite-scroll');
 
     function toggleInfiniteScroll() {
-      infiniteScroll.enabled = !infiniteScroll.enabled;
+      infiniteScroll.disabled = !infiniteScroll.disabled;
     }
 
     infiniteScroll.addEventListener('ionInfinite', async function() {

packages/core/src/components/menu-controller/menu-controller.ts

@@ -90,7 +90,7 @@ export class MenuController {
   enable(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement {
     const menu = this.get(menuId);
     if (menu) {
-      menu.enabled = shouldEnable;
+      menu.disabled = !shouldEnable;
     }
     return menu;
   }
@@ -132,7 +132,7 @@ export class MenuController {
   isEnabled(menuId?: string): boolean {
     const menu = this.get(menuId);
     if (menu) {
-      return menu.enabled;
+      return !menu.disabled;
     }
     return false;
   }
@@ -153,7 +153,7 @@ export class MenuController {
     if (menuId === 'left' || menuId === 'right') {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
-      menu = this.menus.find(m => m.side === menuId && m.enabled);
+      menu = this.menus.find(m => m.side === menuId && !m.disabled);
       if (menu) {
         return menu.getElement();
       }
@@ -169,7 +169,7 @@ export class MenuController {
     }
 
     // return the first enabled menu
-    menu = this.menus.find(m => m.enabled);
+    menu = this.menus.find(m => !m.disabled);
     if (menu) {
       return menu.getElement();
     }
@@ -235,7 +235,7 @@ export class MenuController {
     const side = menu.side;
     this.menus
       .filter(m => m.side === side && m !== menu)
-      .map(m => m.enabled = false);
+      .map(m => m.disabled = true);
   }
 
   /**

packages/core/src/components/menu/menu.tsx

@@ -69,11 +69,11 @@ export class Menu {
   }
 
   /**
-   * @input {boolean} If true, the menu is enabled. Default `true`.
+   * @input {boolean} If true, the menu is disabled. Default `false`.
    */
-  @Prop({ mutable: true }) enabled: boolean;
+  @Prop({ mutable: true }) disabled = false;
 
-  @Watch('enabled')
+  @Watch('disabled')
   protected enabledChanged() {
     this.updateState();
   }
@@ -135,13 +135,13 @@ export class Menu {
       ? '#' + this.content
       : '[main]';
     const parent = el.parentElement;
-    const content = this.contentEl = parent.querySelector(contentQuery);
+    const content = this.contentEl = parent.querySelector(contentQuery) as HTMLElement;
     if (!content || !content.tagName) {
       // requires content element
       return console.error('Menu: must have a "content" element to listen for drag events on.');
     }
-    this.menuInnerEl = el.querySelector('.menu-inner');
+    this.menuInnerEl = el.querySelector('.menu-inner') as HTMLElement;
-    this.backdropEl = el.querySelector('.menu-backdrop');
+    this.backdropEl = el.querySelector('.menu-backdrop') as HTMLElement;
 
     // add menu's content classes
     content.classList.add('menu-content');
@@ -149,18 +149,18 @@ export class Menu {
     this.typeChanged(this.type);
     this.sideChanged();
 
-    let isEnabled = this.enabled;
+    let isEnabled = !this.disabled;
     if (isEnabled === true || typeof isEnabled === 'undefined') {
       const menus = this.menuCtrl.getMenus();
       isEnabled = !menus.some(m => {
-        return m.side === this.side && m.enabled;
+        return m.side === this.side && !m.disabled;
       });
     }
     // register this menu with the app's menu controller
     this.menuCtrl._register(this);
 
     // mask it as enabled / disabled
-    this.enabled = isEnabled;
+    this.disabled = !isEnabled;
   }
 
   componentDidUnload() {
@@ -259,7 +259,7 @@ export class Menu {
   }
 
   private isActive(): boolean {
-    return this.enabled && !this.isPane;
+    return !this.disabled && !this.isPane;
   }
 
   private canSwipe(): boolean {
@@ -411,7 +411,7 @@ export class Menu {
       this.forceClosing();
     }
 
-    if (this.enabled && this.menuCtrl) {
+    if (!this.disabled && this.menuCtrl) {
       this.menuCtrl._setActiveMenu(this);
     }
     assert(!this.isAnimating, 'can not be animating');
@@ -430,7 +430,7 @@ export class Menu {
     return {
       role: 'complementary',
       class: {
-        'menu-enabled': this.enabled,
+        'menu-enabled': !this.disabled,
         'menu-side-right': this.isRightSide,
         'menu-side-left': !this.isRightSide,
         [typeClass]: true,

packages/core/src/components/menu/readme.md

@@ -12,7 +12,7 @@
 string
 
 
-#### enabled
+#### disabled
 
 boolean
 
@@ -54,7 +54,7 @@ string
 string
 
 
-#### enabled
+#### disabled
 
 boolean
 

packages/core/src/components/picker-column/picker-column.tsx

@@ -243,7 +243,7 @@ export class PickerColumnCmp {
     this.lastTempIndex = currentIndex;
   }
 
-  // TODO should this check enabled?
+  // TODO should this check disabled?
   private canStart() {
     return true;
   }

packages/core/src/components/picker/picker.tsx

@@ -188,7 +188,7 @@ export class Picker {
   }
 
   buttonClick(button: PickerButton) {
-    // if (!this.enabled) {
+    // if (this.disabled) {
     //   return;
     // }
 
@@ -249,7 +249,7 @@ export class Picker {
   }
 
   protected backdropClick() {
-    // TODO this.enabled
+    // TODO !this.disabled
     if (this.enableBackdropDismiss) {
       const cancelBtn = this.buttons.find(b => b.role === 'cancel');
       if (cancelBtn) {

packages/core/src/components/range/range.tsx

@@ -411,18 +411,20 @@ export class Range implements BaseInputComponent {
   render() {
     return [
       <slot name='start'></slot>,
-      <ion-gesture {...{
+      <ion-gesture
-        disableScroll: true,
+        {...{
-        onStart: this.onDragStart.bind(this),
+          disableScroll: true,
-        onMove: this.onDragMove.bind(this),
+          onStart: this.onDragStart.bind(this),
-        onEnd: this.onDragEnd.bind(this),
+          onMove: this.onDragMove.bind(this),
-        disabled: this.disabled,
+          onEnd: this.onDragEnd.bind(this),
-        gestureName: 'range',
+          disabled: this.disabled,
-        gesturePriority: 30,
+          gestureName: 'range',
-        type: 'pan',
+          gesturePriority: 30,
-        direction: 'x',
+          type: 'pan',
-        threshold: 0
+          direction: 'x',
-      }}>
+          threshold: 0
+        }}
+      >
         <div class='range-slider'>
           {this.ticks.map(t =>
             <div

packages/core/src/components/refresher/refresher.tsx

@@ -43,39 +43,39 @@ export class Refresher {
   @Element() el: HTMLElement;
 
   /**
-   * The min distance the user must pull down until the
+   * The minimum distance the user must pull down until the
-   * refresher can go into the `refreshing` state. Default is `60`.
+   * refresher will go into the `refreshing` state. Defaults to `60`.
    */
   @Prop() pullMin = 60;
 
   /**
    * The maximum distance of the pull until the refresher
-   * will automatically go into the `refreshing` state. By default, the pull
+   * will automatically go into the `refreshing` state.
-   * maximum will be the result of `pullMin + 60`.
+   * Defaults to the result of `pullMin + 60`.
    */
-  @Prop() pullDelta = 60;
+  @Prop() pullMax = this.pullMin + 60;
 
   // TODO: NEVER USED
   /**
-   * Time it takes to close the refresher. Default is `280ms`.
+   * Time it takes to close the refresher. Defaults to `280ms`.
    */
   @Prop() closeDuration = '280ms';
 
   /**
-   * Time it takes the refresher to to snap back to the `refreshing` state. Default is `280ms`.
+   * Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`.
    */
   @Prop() snapbackDuration = '280ms';
 
   /**
-   * If the refresher is enabled or not. This should be used in place of an `ngIf`. Default is `true`.
+   * If the refresher is disabled or not. Defaults to `true`.
    */
-  @Prop() enabled = false;
+  @Prop() disabled = true;
 
   /**
-   * Emitted when the user lets go and has pulled down
+   * Emitted when the user lets go of the content and has pulled down
-   * far enough, which would be farther than the `pullMin`, then your refresh hander if
+   * further than the `pullMin` or pulls the content down and exceeds the pullMax.
-   * fired and the state is updated to `refreshing`. From within your refresh handler,
+   * Updates the refresher state to `refreshing`. The `complete()` method should be
-   * you must call the `complete()` method when your async operation has completed.
+   * called when the async operation has completed.
    */
   @Event() ionRefresh: EventEmitter;
 
@@ -260,7 +260,7 @@ export class Refresher {
       return 2;
     }
 
-    if (deltaY > pullMin + this.pullDelta) {
+    if (deltaY > this.pullMax) {
       // they pulled farther than the max, so kick off the refresh
       this.beginRefresh();
       return 3;
@@ -361,7 +361,7 @@ export class Refresher {
 
   render() {
     return <ion-gesture {...this.gestureConfig}
-      disabled={!this.enabled}>
+      disabled={this.disabled}>
       <slot></slot>
     </ion-gesture>;
   }

packages/core/src/components/reorder-group/readme.md

@@ -121,14 +121,14 @@ Alternatevely you can execute helper function inside template:
 
 ## Properties
 
-#### enabled
+#### disabled
 
 boolean
 
 
 ## Attributes
 
-#### enabled
+#### disabled
 
 boolean
 

packages/core/src/components/reorder-group/reorder-group.tsx

@@ -47,14 +47,14 @@ export class ReorderGroup {
 
   @Prop({ context: 'dom' }) dom: DomController;
 
-  @Prop() enabled = false;
+  @Prop() disabled = true;
 
   /**
    * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`.
    */
-  @Watch('enabled')
+  @Watch('disabled')
-  protected enabledChanged(enabled: boolean) {
+  protected disabledChanged(disabled: boolean) {
-    if (enabled) {
+    if (!disabled) {
       this._enabled = true;
       this.dom.raf(() => {
         this._iconVisible = true;
@@ -68,8 +68,8 @@ export class ReorderGroup {
   componentDidLoad() {
     this.containerEl = this.el.querySelector('ion-gesture') as HTMLElement;
     this.scrollEl = this.el.closest('ion-scroll') as HTMLElement;
-    if (this.enabled) {
+    if (!this.disabled) {
-      this.enabledChanged(true);
+      this.disabledChanged(true);
     }
   }
 
@@ -268,7 +268,7 @@ export class ReorderGroup {
         onStart: this.onDragStart.bind(this),
         onMove: this.onDragMove.bind(this),
         onEnd: this.onDragEnd.bind(this),
-        disabled: !this.enabled,
+        enabled: !this.disabled,
         disableScroll: true,
         gestureName: 'reorder',
         gesturePriority: 30,

packages/core/src/components/reorder/test/basic/index.html

@@ -85,8 +85,8 @@
 
   <script>
     function toggleEdit() {
-      const list = document.getElementById('reorder');
+      const reorderGroup = document.getElementById('reorder');
-      list.enabled = !list.enabled;
+      reorderGroup.disabled = !reorderGroup.disabled;
     }
   </script>
 </body>

packages/core/src/components/reorder/test/standalone/index.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <ion-reorder-group enabled>
+  <ion-reorder-group disabled="false">
     <div>
       Item 1 (default ion-reorder)
       <ion-reorder></ion-reorder>

packages/core/src/components/scroll/readme.md

@@ -7,7 +7,7 @@
 
 ## Properties
 
-#### enabled
+#### disabled
 
 boolean
 
@@ -29,7 +29,7 @@ any
 
 ## Attributes
 
-#### enabled
+#### disabled
 
 boolean
 

packages/core/src/components/scroll/scroll.tsx

@@ -25,7 +25,7 @@ export class Scroll {
   @Prop({ context: 'dom' }) dom: DomController;
   @Prop({ context: 'isServer' }) isServer: boolean;
 
-  @Prop() enabled = true;
+  @Prop() disabled = false;
 
   @Prop() onionScrollStart: ScrollCallback;
   @Prop() onionScroll: ScrollCallback;

packages/core/src/components/split-pane/readme.md

@@ -115,7 +115,7 @@ SplitPane also provides some predefined media queries that can be used.
 
 ## Properties
 
-#### enabled
+#### disabled
 
 boolean
 
@@ -127,7 +127,7 @@ any
 
 ## Attributes
 
-#### enabled
+#### disabled
 
 boolean
 

packages/core/src/components/split-pane/split-pane.tsx

@@ -33,7 +33,7 @@ export class SplitPane {
    * @input {boolean} If `false`, the split-pane is disabled, ie. the side pane will
    * never be displayed. Default `true`.
    */
-  @Prop() enabled = true;
+  @Prop() disabled = false;
 
   /**
    * @input {string | boolean} When the split-pane should be shown.
@@ -89,7 +89,7 @@ export class SplitPane {
     this.rmL = null;
 
     // Check if the split-pane is disabled
-    if (!this.enabled) {
+    if (this.disabled) {
       this._setVisible(false);
       return;
     }

packages/core/src/components/tab-button/tab-button.tsx

@@ -55,7 +55,7 @@ export class TabButton {
         'has-title-only': hasTitleOnly,
         'has-icon-only': hasIconOnly,
         'has-badge': hasBadge,
-        'tab-disabled': !tab.enabled,
+        'tab-disabled': tab.disabled,
         'tab-hidden': tab.hidden,
       }
     };

packages/core/src/components/tab/readme.md

@@ -65,7 +65,7 @@ string
 string
 
 
-#### enabled
+#### disabled
 
 boolean
 
@@ -117,7 +117,7 @@ string
 string
 
 
-#### enabled
+#### disabled
 
 boolean
 

packages/core/src/components/tab/tab.tsx

@@ -46,7 +46,7 @@ export class Tab {
    * the user cannot interact with this element.
    * Default: `true`.
    */
-  @Prop() enabled = true;
+  @Prop() disabled = false;
 
   /**
    * @input {boolean} If true, the tab button is visible within the

packages/core/src/components/tabs/tabs.tsx

@@ -183,7 +183,7 @@ export class Tabs {
 
   private initSelect() {
     // find pre-selected tabs
-    const selectedTab = this.tabs.find(t => t.selected) || this.tabs.find(t => t.show && t.enabled);
+    const selectedTab = this.tabs.find(t => t.selected) || this.tabs.find(t => t.show && !t.disabled);
 
     // reset all tabs none is selected
     for (const tab of this.tabs) {