diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 45aba8b4ac..525c682490 100644 --- a/packages/core/src/components.d.ts +++ b/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; - pullDelta?: number; + disabled?: boolean; + 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; diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx index 089f1125e8..6890d5d6b2 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/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 - * enabled or not. Setting to `false` will remove scroll event listeners + * @input {boolean} If true, whether or not the infinite scroll should be + * 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') - protected enabledChanged(val: boolean) { + @Watch('disabled') + 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 } }; } diff --git a/packages/core/src/components/infinite-scroll/readme.md b/packages/core/src/components/infinite-scroll/readme.md index 4ae384fd99..62b6d59986 100644 --- a/packages/core/src/components/infinite-scroll/readme.md +++ b/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 diff --git a/packages/core/src/components/infinite-scroll/test/basic/index.html b/packages/core/src/components/infinite-scroll/test/basic/index.html index e14cd04942..f867cd3782 100644 --- a/packages/core/src/components/infinite-scroll/test/basic/index.html +++ b/packages/core/src/components/infinite-scroll/test/basic/index.html @@ -21,7 +21,7 @@ - Toggle InfiniteScroll Enabled + Toggle InfiniteScroll @@ -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() { diff --git a/packages/core/src/components/infinite-scroll/test/standalone/index.html b/packages/core/src/components/infinite-scroll/test/standalone/index.html index 6a64f000a2..58cebcf997 100644 --- a/packages/core/src/components/infinite-scroll/test/standalone/index.html +++ b/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() { diff --git a/packages/core/src/components/menu-controller/menu-controller.ts b/packages/core/src/components/menu-controller/menu-controller.ts index 5278ad524f..1fa89923ca 100644 --- a/packages/core/src/components/menu-controller/menu-controller.ts +++ b/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); } /** diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index da40c32039..997c1566ed 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/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.backdropEl = el.querySelector('.menu-backdrop'); + this.menuInnerEl = el.querySelector('.menu-inner') as HTMLElement; + 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, diff --git a/packages/core/src/components/menu/readme.md b/packages/core/src/components/menu/readme.md index 376d796be1..351ebfd317 100644 --- a/packages/core/src/components/menu/readme.md +++ b/packages/core/src/components/menu/readme.md @@ -12,7 +12,7 @@ string -#### enabled +#### disabled boolean @@ -54,7 +54,7 @@ string string -#### enabled +#### disabled boolean diff --git a/packages/core/src/components/picker-column/picker-column.tsx b/packages/core/src/components/picker-column/picker-column.tsx index f51acc54cf..6add85d825 100644 --- a/packages/core/src/components/picker-column/picker-column.tsx +++ b/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; } diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx index 562b96b26b..9793564c58 100644 --- a/packages/core/src/components/picker/picker.tsx +++ b/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) { diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx index 4b09ac0bcb..0f2bceddcf 100644 --- a/packages/core/src/components/range/range.tsx +++ b/packages/core/src/components/range/range.tsx @@ -411,18 +411,20 @@ export class Range implements BaseInputComponent { render() { return [ , - +
{this.ticks.map(t =>
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 + disabled={this.disabled}> ; } diff --git a/packages/core/src/components/reorder-group/readme.md b/packages/core/src/components/reorder-group/readme.md index 0abb7ddfbf..dbc38ef2cf 100644 --- a/packages/core/src/components/reorder-group/readme.md +++ b/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 diff --git a/packages/core/src/components/reorder-group/reorder-group.tsx b/packages/core/src/components/reorder-group/reorder-group.tsx index 7f74ae37c3..56500f9bfb 100644 --- a/packages/core/src/components/reorder-group/reorder-group.tsx +++ b/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') - protected enabledChanged(enabled: boolean) { - if (enabled) { + @Watch('disabled') + protected disabledChanged(disabled: boolean) { + 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) { - this.enabledChanged(true); + if (!this.disabled) { + 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, diff --git a/packages/core/src/components/reorder/test/basic/index.html b/packages/core/src/components/reorder/test/basic/index.html index 71f4ec6207..3514d577d5 100644 --- a/packages/core/src/components/reorder/test/basic/index.html +++ b/packages/core/src/components/reorder/test/basic/index.html @@ -85,8 +85,8 @@ diff --git a/packages/core/src/components/reorder/test/standalone/index.html b/packages/core/src/components/reorder/test/standalone/index.html index ab10abeb72..b1bade1b07 100644 --- a/packages/core/src/components/reorder/test/standalone/index.html +++ b/packages/core/src/components/reorder/test/standalone/index.html @@ -9,7 +9,7 @@ - +
Item 1 (default ion-reorder) diff --git a/packages/core/src/components/scroll/readme.md b/packages/core/src/components/scroll/readme.md index 9e8377a9db..cb6862e225 100644 --- a/packages/core/src/components/scroll/readme.md +++ b/packages/core/src/components/scroll/readme.md @@ -7,7 +7,7 @@ ## Properties -#### enabled +#### disabled boolean @@ -29,7 +29,7 @@ any ## Attributes -#### enabled +#### disabled boolean diff --git a/packages/core/src/components/scroll/scroll.tsx b/packages/core/src/components/scroll/scroll.tsx index b54e63e917..08b12921b0 100644 --- a/packages/core/src/components/scroll/scroll.tsx +++ b/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; diff --git a/packages/core/src/components/split-pane/readme.md b/packages/core/src/components/split-pane/readme.md index aad4ca8008..ec0598aa02 100644 --- a/packages/core/src/components/split-pane/readme.md +++ b/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 diff --git a/packages/core/src/components/split-pane/split-pane.tsx b/packages/core/src/components/split-pane/split-pane.tsx index 1633246813..582f5953a0 100644 --- a/packages/core/src/components/split-pane/split-pane.tsx +++ b/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; } diff --git a/packages/core/src/components/tab-button/tab-button.tsx b/packages/core/src/components/tab-button/tab-button.tsx index 078bde052a..9b84c3dcbb 100644 --- a/packages/core/src/components/tab-button/tab-button.tsx +++ b/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, } }; diff --git a/packages/core/src/components/tab/readme.md b/packages/core/src/components/tab/readme.md index 164cad5a3d..9bc9d88ca9 100644 --- a/packages/core/src/components/tab/readme.md +++ b/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 diff --git a/packages/core/src/components/tab/tab.tsx b/packages/core/src/components/tab/tab.tsx index b171395be7..397f9078ff 100644 --- a/packages/core/src/components/tab/tab.tsx +++ b/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 diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx index 1740f472f0..023ad9b1c0 100644 --- a/packages/core/src/components/tabs/tabs.tsx +++ b/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) {