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 @@
-
+
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) {