diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 4ba1aafc566..1cad8ccb66b 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -315,7 +315,7 @@ declare global { namespace JSXElements { export interface IonBackButtonAttributes extends HTMLAttributes { mode?: 'ios' | 'md'; - text?: string; + text?: string|undefined; } } } @@ -1033,7 +1033,6 @@ declare global { export interface IonGestureAttributes extends HTMLAttributes { attachTo?: ElementRef; autoBlockAll?: boolean; - block?: string; canStart?: GestureCallback; direction?: string; disabled?: boolean; @@ -1712,7 +1711,6 @@ declare global { export interface IonMenuButtonAttributes extends HTMLAttributes { autoHide?: boolean; menu?: string; - mode?: 'ios' | 'md'; } } } @@ -2845,7 +2843,7 @@ declare global { export interface IonSelectOptionAttributes extends HTMLAttributes { disabled?: boolean; selected?: boolean; - value?: string; + value?: string|null; } } } @@ -2917,7 +2915,7 @@ declare global { okText?: string; placeholder?: string; selectedText?: string; - value?: string | string[]; + value?: string | string[] | null; } } } diff --git a/packages/core/src/components/back-button/back-button.tsx b/packages/core/src/components/back-button/back-button.tsx index d03eab13f3d..51dc9606c8b 100644 --- a/packages/core/src/components/back-button/back-button.tsx +++ b/packages/core/src/components/back-button/back-button.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop, State } from '@stencil/core'; +import { Component, Element, Prop } from '@stencil/core'; import { Config } from '../../index'; @Component({ @@ -13,7 +13,7 @@ import { Config } from '../../index'; }) export class BackButton { - @State() custom: boolean; + private custom = true; /** * The mode determines which platform styles to use. @@ -26,7 +26,7 @@ export class BackButton { * The text property is used to provide custom text for the back button while using the * default look-and-feel */ - @Prop() text: string = null; + @Prop() text: string|undefined; @Prop({ context: 'config' }) config: Config; diff --git a/packages/core/src/components/back-button/readme.md b/packages/core/src/components/back-button/readme.md index 9c17c6d2479..73ec78b5165 100644 --- a/packages/core/src/components/back-button/readme.md +++ b/packages/core/src/components/back-button/readme.md @@ -66,7 +66,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl #### text -string + The text property is used to provide custom text for the back button while using the default look-and-feel @@ -85,7 +85,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl #### text -string + The text property is used to provide custom text for the back button while using the default look-and-feel diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx index eb57ef18524..04976acc5b4 100644 --- a/packages/core/src/components/content/content.tsx +++ b/packages/core/src/components/content/content.tsx @@ -8,10 +8,10 @@ import { getPageElement } from '../../utils/helpers'; }) export class Content { - private cTop = 0; - private cBottom = 0; + private cTop = -1; + private cBottom = -1; private dirty = false; - private scrollEl: HTMLIonScrollElement|null; + private scrollEl: HTMLIonScrollElement; mode: string; color: string; @@ -44,12 +44,11 @@ export class Content { } componentDidLoad() { - this.scrollEl = this.el.querySelector('ion-scroll'); this.resize(); } componentDidUnload() { - this.scrollEl = null; + this.scrollEl = undefined as any; } /** @@ -94,7 +93,7 @@ export class Content { this.dom.write(this.writeDimensions.bind(this)); }); } else { - this.cTop = this.cBottom = null; + this.cTop = this.cBottom = -1; this.dom.write(() => this.scrollEl && this.scrollEl.removeAttribute('style')); } } @@ -132,6 +131,7 @@ export class Content { return [ this.scrollEl = el as any} mode={this.mode} scrollEvents={this.scrollEvents} forceOverscroll={this.forceOverscroll}> diff --git a/packages/core/src/components/fab/fab.tsx b/packages/core/src/components/fab/fab.tsx index bd48717fbd6..9d91638c005 100644 --- a/packages/core/src/components/fab/fab.tsx +++ b/packages/core/src/components/fab/fab.tsx @@ -24,8 +24,10 @@ export class Fab { render() { const fab = this.el.querySelector('ion-fab-button'); - fab.toggleActive = this.toggleActive; - fab.activated = this.activated; + if (fab) { + fab.toggleActive = this.toggleActive; + fab.activated = this.activated; + } const lists = this.el.querySelectorAll('ion-fab-list'); for (let i = 0, length = lists.length; i < length; i += 1) { diff --git a/packages/core/src/components/gesture-controller/gesture-controller-utils.ts b/packages/core/src/components/gesture-controller/gesture-controller-utils.ts index 1b5d037d5d4..90d41b125e1 100644 --- a/packages/core/src/components/gesture-controller/gesture-controller-utils.ts +++ b/packages/core/src/components/gesture-controller/gesture-controller-utils.ts @@ -1,7 +1,7 @@ -import { GestureController } from './gesture-controller'; +import { GestureController } from '../..'; export class GestureDelegate { - private ctrl: GestureController|null; + private ctrl: GestureController|undefined; constructor( ctrl: any, @@ -54,14 +54,14 @@ export class GestureDelegate { destroy() { this.release(); - this.ctrl = null; + this.ctrl = undefined; } } export class BlockerDelegate { - private ctrl: any|null; + private ctrl: GestureController|undefined; constructor( private id: number, @@ -103,7 +103,7 @@ export class BlockerDelegate { destroy() { this.unblock(); - this.ctrl = null; + this.ctrl = undefined; } } diff --git a/packages/core/src/components/gesture/gesture.tsx b/packages/core/src/components/gesture/gesture.tsx index f6dff99f9c1..15c125540ed 100644 --- a/packages/core/src/components/gesture/gesture.tsx +++ b/packages/core/src/components/gesture/gesture.tsx @@ -1,6 +1,6 @@ import { Component, Event, EventEmitter, EventListenerEnable, Listen, Prop, Watch } from '@stencil/core'; import { ElementRef, assert, now, updateDetail } from '../../utils/helpers'; -import { BlockerConfig, BlockerDelegate, DomController, GestureDelegate } from '../../index'; +import { BlockerDelegate, DomController, GestureDelegate } from '../../index'; import { BLOCK_ALL } from '../gesture-controller/gesture-controller-utils'; import { PanRecognizer } from './recognizers'; @@ -10,7 +10,7 @@ import { PanRecognizer } from './recognizers'; }) export class Gesture { - private detail: GestureDetail = {}; + private detail: GestureDetail; private positions: number[] = []; private gesture: GestureDelegate; private lastTouch = 0; @@ -20,7 +20,7 @@ export class Gesture { private hasStartedPan = false; private hasFiredStart = true; private isMoveQueued = false; - private blocker: BlockerDelegate; + private blocker: BlockerDelegate|undefined; @Prop({ connect: 'ion-gesture-controller' }) gestureCtrl: HTMLIonGestureControllerElement; @Prop({ context: 'dom' }) dom: DomController; @@ -29,7 +29,6 @@ export class Gesture { @Prop() disabled = false; @Prop() attachTo: ElementRef = 'child'; @Prop() autoBlockAll = false; - @Prop() block: string = null; @Prop() disableScroll = false; @Prop() direction = 'x'; @Prop() gestureName = ''; @@ -72,6 +71,24 @@ export class Gesture { */ @Event() ionPress: EventEmitter; + constructor() { + this.detail = { + type: 'pan', + startX: 0, + startY: 0, + startTimeStamp: 0, + currentX: 0, + currentY: 0, + velocityX: 0, + velocityY: 0, + deltaX: 0, + deltaY: 0, + timeStamp: 0, + event: undefined as any, + data: undefined, + }; + } + componentWillLoad() { return this.gestureCtrl.create({ name: this.gestureName, @@ -94,7 +111,9 @@ export class Gesture { this.disabledChanged(this.disabled); if (this.autoBlockAll) { - this.setBlocker(BLOCK_ALL).then(b => b.block()); + this.gestureCtrl.componentOnReady() + .then(ctrl => ctrl.createBlocker(BLOCK_ALL)) + .then(blocker => this.blocker = blocker); } } @@ -109,23 +128,6 @@ export class Gesture { } } - @Watch('block') - protected blockChanged(block: string) { - this.setBlocker({ disable: block.split(',')}); - } - - private setBlocker(config: BlockerConfig) { - if (this.blocker) { - this.blocker.destroy(); - } - if (config) { - return this.gestureCtrl.componentOnReady() - .then(ctrl => ctrl.createBlocker(config)) - .then(blocker => this.blocker = blocker); - } - return Promise.resolve(null); - } - // DOWN ************************* @Listen('touchstart', { passive: true, enabled: false }) @@ -296,7 +298,7 @@ export class Gesture { } private tryToCapturePan(): boolean { - if (this.gesture && !this.gesture.capture()) { + if (!this.gesture.capture()) { return false; } this.hasCapturedPan = true; @@ -449,10 +451,9 @@ export class Gesture { componentDidUnload() { if (this.blocker) { this.blocker.destroy(); - this.blocker = null; + this.blocker = undefined; } - this.gesture && this.gesture.destroy(); - this.gesture = this.pan = this.detail = this.detail.event = null; + this.gesture.destroy(); } } @@ -462,18 +463,18 @@ const MOUSE_WAIT = 2500; export interface GestureDetail { - type?: string; - event?: UIEvent; - startX?: number; - startY?: number; - startTimeStamp?: number; - currentX?: number; - currentY?: number; - velocityX?: number; - velocityY?: number; - deltaX?: number; - deltaY?: number; - timeStamp?: number; + type: string; + startX: number; + startY: number; + startTimeStamp: number; + currentX: number; + currentY: number; + velocityX: number; + velocityY: number; + deltaX: number; + deltaY: number; + timeStamp: number; + event: UIEvent; data?: any; } diff --git a/packages/core/src/components/gesture/readme.md b/packages/core/src/components/gesture/readme.md index f3eddd8e34f..6aa25aa27b5 100644 --- a/packages/core/src/components/gesture/readme.md +++ b/packages/core/src/components/gesture/readme.md @@ -17,11 +17,6 @@ boolean -#### block - -string - - #### canStart @@ -114,11 +109,6 @@ string boolean -#### block - -string - - #### can-start diff --git a/packages/core/src/components/item-sliding/item-sliding.tsx b/packages/core/src/components/item-sliding/item-sliding.tsx index b5f4f4e50d3..de0a190900d 100644 --- a/packages/core/src/components/item-sliding/item-sliding.tsx +++ b/packages/core/src/components/item-sliding/item-sliding.tsx @@ -34,16 +34,16 @@ export const enum SlidingState { } }) export class ItemSliding { - private item: HTMLIonItemElement; - private list: HTMLIonListElement; + private item: HTMLIonItemElement|null; + private list: HTMLIonListElement|null; private openAmount = 0; private initialOpenAmount = 0; private optsWidthRightSide = 0; private optsWidthLeftSide = 0; private sides: ItemSide; private tmr: number; - private leftOptions: ItemOptions; - private rightOptions: ItemOptions; + private leftOptions: ItemOptions|null; + private rightOptions: ItemOptions|null; private optsDirty = true; @Element() private el: HTMLElement; @@ -106,7 +106,7 @@ export class ItemSliding { */ @Method() closeOpened(): boolean { - return this.list && this.list.closeSlidingItems(); + return !!(this.list && this.list.closeSlidingItems()); } private updateOptions() { diff --git a/packages/core/src/components/list/list.tsx b/packages/core/src/components/list/list.tsx index 871fdaec9e1..2d5d1a017be 100644 --- a/packages/core/src/components/list/list.tsx +++ b/packages/core/src/components/list/list.tsx @@ -14,7 +14,7 @@ import { ItemSliding } from '../item-sliding/item-sliding'; } }) export class List { - private openedItem: ItemSliding; + private openedItem: ItemSliding|null; @Method() getOpenedItem() { @@ -22,7 +22,7 @@ export class List { } @Method() - setOpenedItem(itemSliding: ItemSliding) { + setOpenedItem(itemSliding: ItemSliding|null) { this.openedItem = itemSliding; } diff --git a/packages/core/src/components/menu-button/menu-button.tsx b/packages/core/src/components/menu-button/menu-button.tsx index 85ac6978a78..fb86932c30a 100644 --- a/packages/core/src/components/menu-button/menu-button.tsx +++ b/packages/core/src/components/menu-button/menu-button.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop, State } from '@stencil/core'; +import { Component, Element, Prop } from '@stencil/core'; import { Config } from '../../index'; @Component({ @@ -13,14 +13,7 @@ import { Config } from '../../index'; }) export class MenuButton { - @State() custom: boolean; - - /** - * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. - * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - */ - @Prop() mode: 'ios' | 'md'; + private custom = true; /** * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle @@ -33,34 +26,24 @@ export class MenuButton { */ @Prop() autoHide = true; - @Prop({ context: 'config' }) config: Config; @Element() el: HTMLElement; componentWillLoad() { this.custom = this.el.childElementCount > 0; - const closestNav = this.el.closest('ion-nav'); - closestNav.canGoBack() ? this.el.hidden = true : this.el.hidden = false; } render() { const menuIcon = this.config.get('menuIcon', 'menu'); - - if (this.custom) { - return ( - - - - ); - } else { - return ( - - - - - - ); - } + return ( + + + {this.custom + ? + : } + + + ); } } diff --git a/packages/core/src/components/menu-button/readme.md b/packages/core/src/components/menu-button/readme.md index 650285a7205..24b1b3c2391 100644 --- a/packages/core/src/components/menu-button/readme.md +++ b/packages/core/src/components/menu-button/readme.md @@ -22,15 +22,6 @@ string Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle -#### mode - - - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. -For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - - ## Attributes #### auto-hide @@ -48,15 +39,6 @@ string Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle -#### mode - - - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. -For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - - ---------------------------------------------- diff --git a/packages/core/src/components/reorder/reorder.tsx b/packages/core/src/components/reorder/reorder.tsx index bbdd7a79492..95b8406210a 100644 --- a/packages/core/src/components/reorder/reorder.tsx +++ b/packages/core/src/components/reorder/reorder.tsx @@ -1,4 +1,4 @@ -import { Component, Element, State } from '@stencil/core'; +import { Component, Element } from '@stencil/core'; @Component({ @@ -13,9 +13,9 @@ import { Component, Element, State } from '@stencil/core'; }) export class Reorder { - @Element() private el: HTMLElement; + private custom = true; - @State() custom: boolean; + @Element() private el: HTMLElement; componentWillLoad() { this.custom = this.el.childElementCount > 0; @@ -32,14 +32,9 @@ export class Reorder { } render() { - // TODO: https://github.com/ionic-team/stencil/issues/171 - if (this.custom === true) { - return ; - } else if (this.custom === false) { - return ; - } else { - return undefined; - } + return (this.custom) + ? + : ; } } diff --git a/packages/core/src/components/scroll/scroll.tsx b/packages/core/src/components/scroll/scroll.tsx index 53aec612c71..d7b93432fb5 100644 --- a/packages/core/src/components/scroll/scroll.tsx +++ b/packages/core/src/components/scroll/scroll.tsx @@ -72,7 +72,8 @@ export class Scroll { deltaX: 0, deltaY: 0, timeStamp: 0, - data: undefined + data: undefined, + isScrolling: true, }; } @@ -317,13 +318,13 @@ function updateScrollDetail( } export interface ScrollDetail extends GestureDetail, ScrollBaseDetail { - positions?: number[]; - scrollTop?: number; - scrollLeft?: number; + positions: number[]; + scrollTop: number; + scrollLeft: number; } export interface ScrollBaseDetail { - isScrolling?: boolean; + isScrolling: boolean; } export interface ScrollCallback { diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx index 730b8d0183a..d6531eae48a 100644 --- a/packages/core/src/components/searchbar/searchbar.tsx +++ b/packages/core/src/components/searchbar/searchbar.tsx @@ -322,7 +322,7 @@ export class Searchbar { this.showCancelButton ?