From 7b9a00e43320a7ecad8645dec8ba9d2fedb202a6 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Thu, 29 Mar 2018 18:41:46 +0200 Subject: [PATCH] fix(angular): goback navigation --- angular/src/directives/proxies.ts | 16 +-- angular/src/navigation/ion-nav-controller.ts | 34 +++--- angular/src/navigation/ion-router-outlet.ts | 6 +- angular/src/navigation/router-controller.ts | 4 +- core/src/components.d.ts | 113 +++++++++---------- core/src/components/action-sheet/readme.md | 4 +- core/src/components/alert/readme.md | 4 +- core/src/components/loading/readme.md | 4 +- core/src/components/modal/readme.md | 32 +++--- core/src/components/nav-push/readme.md | 12 +- core/src/components/nav-set-root/readme.md | 12 +- core/src/components/nav/readme.md | 13 +-- core/src/components/picker/readme.md | 4 +- core/src/components/popover/readme.md | 32 +++--- core/src/components/toast/readme.md | 4 +- core/src/utils/theme.ts | 22 ++-- 16 files changed, 157 insertions(+), 159 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 78d3653be95..20e9c13f6ac 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -15,7 +15,7 @@ export function inputs(instance: any, el: ElementRef, props: string[]) { }); } -const accept = 'accept', activated = 'activated', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoBlockAll = 'autoBlockAll', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', base = 'base', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', contentId = 'contentId', data = 'data', debounce = 'debounce', defaultHref = 'defaultHref', detail = 'detail', direction = 'direction', disableScroll = 'disableScroll', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', from = 'from', fullscreen = 'fullscreen', gestureName = 'gestureName', gesturePriority = 'gesturePriority', goBack = 'goBack', highlight = 'highlight', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBackdropTap = 'ionBackdropTap', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDecrease = 'ionDecrease', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionGestureCaptured = 'ionGestureCaptured', ionGestureEnd = 'ionGestureEnd', ionGestureMove = 'ionGestureMove', ionGestureNotCaptured = 'ionGestureNotCaptured', ionGestureStart = 'ionGestureStart', ionIncrease = 'ionIncrease', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionOpen = 'ionOpen', ionPress = 'ionPress', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionRouteChanged = 'ionRouteChanged', ionRouteDataChanged = 'ionRouteDataChanged', ionRouteRedirectChanged = 'ionRouteRedirectChanged', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', ionTabButtonDidLoad = 'ionTabButtonDidLoad', ionTabButtonDidUnload = 'ionTabButtonDidUnload', ionTabbarClick = 'ionTabbarClick', knob = 'knob', labelId = 'labelId', layout = 'layout', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxAngle = 'maxAngle', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', mode = 'mode', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', passive = 'passive', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pin = 'pin', placeholder = 'placeholder', placement = 'placement', platform = 'platform', position = 'position', pressed = 'pressed', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', ratio = 'ratio', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', stopPropagation = 'stopPropagation', strong = 'strong', subTitle = 'subTitle', swipeEnabled = 'swipeEnabled', tappable = 'tappable', threshold = 'threshold', title = 'title', translucent = 'translucent', type = 'type', url = 'url', useHash = 'useHash', useTapClick = 'useTapClick', val = 'val', value = 'value', visible = 'visible', width = 'width', wrap = 'wrap'; +const accept = 'accept', activated = 'activated', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoBlockAll = 'autoBlockAll', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', base = 'base', button = 'button', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', contentId = 'contentId', debounce = 'debounce', defaultHref = 'defaultHref', detail = 'detail', direction = 'direction', disableScroll = 'disableScroll', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', from = 'from', fullscreen = 'fullscreen', gestureName = 'gestureName', gesturePriority = 'gesturePriority', goBack = 'goBack', highlight = 'highlight', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBackdropTap = 'ionBackdropTap', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDecrease = 'ionDecrease', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionGestureCaptured = 'ionGestureCaptured', ionGestureEnd = 'ionGestureEnd', ionGestureMove = 'ionGestureMove', ionGestureNotCaptured = 'ionGestureNotCaptured', ionGestureStart = 'ionGestureStart', ionIncrease = 'ionIncrease', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionOpen = 'ionOpen', ionPress = 'ionPress', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionRouteChanged = 'ionRouteChanged', ionRouteDataChanged = 'ionRouteDataChanged', ionRouteRedirectChanged = 'ionRouteRedirectChanged', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', ionTabButtonDidLoad = 'ionTabButtonDidLoad', ionTabButtonDidUnload = 'ionTabButtonDidUnload', ionTabbarClick = 'ionTabbarClick', knob = 'knob', labelId = 'labelId', layout = 'layout', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxAngle = 'maxAngle', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', mode = 'mode', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', passive = 'passive', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pin = 'pin', placeholder = 'placeholder', placement = 'placement', platform = 'platform', position = 'position', pressed = 'pressed', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', ratio = 'ratio', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', stopPropagation = 'stopPropagation', strong = 'strong', subTitle = 'subTitle', swipeEnabled = 'swipeEnabled', tappable = 'tappable', threshold = 'threshold', title = 'title', translucent = 'translucent', type = 'type', url = 'url', useHash = 'useHash', useTapClick = 'useTapClick', val = 'val', value = 'value', visible = 'visible', width = 'width', wrap = 'wrap'; @NgDirective({ selector: 'ion-anchor' }) export class Anchor { @@ -590,7 +590,7 @@ export class Item { */ @NgInput() color: string; /** - * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `tappable` property is present. + * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. */ @NgInput() detail: boolean; /** @@ -604,10 +604,10 @@ export class Item { /** * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`. */ - @NgInput() tappable: boolean; + @NgInput() button: boolean; @NgInput() goBack: boolean; constructor(el: ElementRef) { - inputs(this, el, [color, detail, disabled, href, tappable, goBack]); + inputs(this, el, [color, detail, disabled, href, button, goBack]); } } @@ -777,21 +777,17 @@ export class NavPop { @NgDirective({ selector: 'ion-nav-push' }) export class NavPush { - @NgInput() component: any; @NgInput() url: string; - @NgInput() data: any; constructor(el: ElementRef) { - inputs(this, el, [component, url, data]); + inputs(this, el, [url]); } } @NgDirective({ selector: 'ion-nav-set-root' }) export class NavSetRoot { - @NgInput() component: any; @NgInput() url: string; - @NgInput() data: any; constructor(el: ElementRef) { - inputs(this, el, [component, url, data]); + inputs(this, el, [url]); } } diff --git a/angular/src/navigation/ion-nav-controller.ts b/angular/src/navigation/ion-nav-controller.ts index 52a125ebf2a..9eec9fea194 100644 --- a/angular/src/navigation/ion-nav-controller.ts +++ b/angular/src/navigation/ion-nav-controller.ts @@ -4,25 +4,31 @@ import { Injectable } from '@angular/core'; export class NavController { private direction = 1; - // private stack: string[] = []; + private goBack = false; + private stack: string[] = []; setGoback() { - this.direction = -1; + this.goBack = true; } consumeDirection() { - // if (this.direction === 0) { - // const index = this.stack.indexOf(document.location.href); - // if (index === -1) { - // this.stack.push(document.location.href); - // this.direction = 1; - // } else { - // this.stack = this.stack.slice(0, index + 1); - // this.direction = -1; - // } - // } - const direction = this.direction; - this.direction = 1; + if (this.direction === 0) { + const index = this.stack.indexOf(document.location.href); + if (index === -1) { + this.stack.push(document.location.href); + this.direction = 1; + } else if (index < this.stack.length - 1) { + this.stack = this.stack.slice(0, index + 1); + this.direction = -1; + } + } + + const direction = this.goBack + ? -1 + : this.direction; + + this.goBack = false; + this.direction = 0; return direction; } } diff --git a/angular/src/navigation/ion-router-outlet.ts b/angular/src/navigation/ion-router-outlet.ts index 254f0fd10e5..0f96d569a15 100644 --- a/angular/src/navigation/ion-router-outlet.ts +++ b/angular/src/navigation/ion-router-outlet.ts @@ -1,6 +1,7 @@ import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Optional, Output, ViewContainerRef } from '@angular/core'; import { ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Router } from '@angular/router'; import { StackController } from './router-controller'; +import { NavController } from '..'; @Directive({ selector: 'ion-router-outlet', @@ -25,7 +26,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit { @Attribute('name') name: string, @Optional() @Attribute('stack') stack: any, private changeDetector: ChangeDetectorRef, - // private navCtrl: NavController, + private navCtrl: NavController, router: Router ) { this.name = name || PRIMARY_OUTLET; @@ -136,7 +137,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit { enteringView = this.stackCtrl.createView(this.activated, activatedRoute); } - await this.stackCtrl.setActive(enteringView, undefined); + const direction = this.navCtrl.consumeDirection(); + await this.stackCtrl.setActive(enteringView, direction); this.activateEvents.emit(this.activated.instance); } diff --git a/angular/src/navigation/router-controller.ts b/angular/src/navigation/router-controller.ts index 45a4481fe1c..ec638d07c40 100644 --- a/angular/src/navigation/router-controller.ts +++ b/angular/src/navigation/router-controller.ts @@ -32,10 +32,10 @@ export class StackController { return this.views.length > deep; } - async setActive(enteringView: RouteView, defaultDir: number|undefined) { + async setActive(enteringView: RouteView, direction: number | undefined) { const leavingView = this.getActive(); const reused = this.insertView(enteringView); - const direction = defaultDir != null ? defaultDir : (reused ? -1 : 1); + direction = direction != null ? direction : (reused ? -1 : 1); await this.transition(enteringView, leavingView, direction); this.cleanup(); diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a0b88cf2dd4..9fe77d255c2 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -30,6 +30,8 @@ import { AlertOptions, Animation as Animation2, AnimationBuilder, + ComponentProps, + ComponentRef, FrameworkDelegate, LoadingOptions, Menu, @@ -85,11 +87,16 @@ import { MenuChangeEventDetail, } from './components/menu/menu'; import { + NavComponent, NavOptions, - NavParams, TransitionDoneFn, TransitionInstruction, } from './components/nav/nav-util'; +import { + AnimationBuilder as AnimationBuilder3, + ComponentProps as ComponentProps2, + FrameworkDelegate as FrameworkDelegate2, +} from '.'; import { ViewController, } from './components/nav/view-controller'; @@ -99,10 +106,6 @@ import { RouterEventDetail, RouteWrite, } from './components/router/utils/interfaces'; -import { - AnimationBuilder as AnimationBuilder3, - FrameworkDelegate as FrameworkDelegate2, -} from '.'; import { PickerButton, PickerColumn as PickerColumn2, @@ -166,7 +169,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass': string; + 'cssClass': string | string[]; /** * Dismiss the action sheet overlay after it has been presented. */ @@ -238,7 +241,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass'?: string; + 'cssClass'?: string | string[]; /** * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. */ @@ -336,7 +339,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass': string; + 'cssClass': string | string[]; /** * Dismiss the alert overlay after it has been presented. */ @@ -417,7 +420,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass'?: string; + 'cssClass'?: string | string[]; /** * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. */ @@ -2851,7 +2854,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass': string; + 'cssClass': string | string[]; /** * Dismiss the loading overlay after it has been presented. */ @@ -2931,7 +2934,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass'?: string; + 'cssClass'?: string | string[]; /** * If true, the loading indicator will dismiss when the page changes. Defaults to `false`. */ @@ -3278,15 +3281,15 @@ declare global { /** * The component to display inside of the modal. */ - 'component': any; + 'component': ComponentRef; /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + * The data to pass to the modal component. */ - 'cssClass': string; + 'componentProps': ComponentProps; /** - * The data to pass to the modal component. + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'data': any; + 'cssClass': string | string[]; 'delegate': FrameworkDelegate; /** * Dismiss the modal overlay after it has been presented. @@ -3355,15 +3358,15 @@ declare global { /** * The component to display inside of the modal. */ - 'component'?: any; + 'component'?: ComponentRef; /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + * The data to pass to the modal component. */ - 'cssClass'?: string; + 'componentProps'?: ComponentProps; /** - * The data to pass to the modal component. + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'data'?: any; + 'cssClass'?: string | string[]; 'delegate'?: FrameworkDelegate; /** * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. @@ -3449,8 +3452,8 @@ declare global { declare global { interface HTMLIonNavPushElement extends HTMLStencilElement { - 'component': any; - 'data': any; + 'component': NavComponent; + 'componentProps': ComponentProps; 'url': string; } var HTMLIonNavPushElement: { @@ -3470,8 +3473,8 @@ declare global { } namespace JSXElements { export interface IonNavPushAttributes extends HTMLAttributes { - 'component'?: any; - 'data'?: any; + 'component'?: NavComponent; + 'componentProps'?: ComponentProps; 'url'?: string; } } @@ -3480,8 +3483,8 @@ declare global { declare global { interface HTMLIonNavSetRootElement extends HTMLStencilElement { - 'component': any; - 'data': any; + 'component': NavComponent; + 'componentProps': ComponentProps; 'url': string; } var HTMLIonNavSetRootElement: { @@ -3501,8 +3504,8 @@ declare global { } namespace JSXElements { export interface IonNavSetRootAttributes extends HTMLAttributes { - 'component'?: any; - 'data'?: any; + 'component'?: NavComponent; + 'componentProps'?: ComponentProps; 'url'?: string; } } @@ -3518,24 +3521,20 @@ declare global { 'getByIndex': (index: number) => ViewController; 'getPrevious': (view?: ViewController) => ViewController; 'getRouteId': () => RouteID; - /** - * Return a view controller - */ - 'getViewById': (id: string) => ViewController; 'getViews': () => ViewController[]; - 'insert': (insertIndex: number, page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn) => Promise; - 'insertPages': (insertIndex: number, insertPages: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise; + 'insert': (insertIndex: number, component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise; + 'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions, done?: TransitionDoneFn) => Promise; 'pop': (opts?: NavOptions, done?: TransitionDoneFn) => Promise; 'popAll': () => Promise; - 'popTo': (indexOrViewCtrl: any, opts?: NavOptions, done?: TransitionDoneFn) => Promise; + 'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions, done?: TransitionDoneFn) => Promise; 'popToRoot': (opts?: NavOptions, done?: TransitionDoneFn) => Promise; - 'push': (page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn) => Promise; + 'push': (component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise; 'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions, done?: TransitionDoneFn) => Promise; 'removeView': (viewController: ViewController, opts?: NavOptions, done?: TransitionDoneFn) => Promise; - 'root': any; - 'rootParams': any; - 'setPages': (pages: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise; - 'setRoot': (pageOrViewCtrl: any, params?: any, opts?: NavOptions, done?: TransitionDoneFn) => Promise; + 'root': NavComponent; + 'rootParams': ComponentProps; + 'setPages': (views: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise; + 'setRoot': (component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise; 'setRouteId': (id: string, params: any, direction: number) => Promise; 'swipeBackEnabled': boolean; } @@ -3559,8 +3558,8 @@ declare global { 'animated'?: boolean; 'delegate'?: FrameworkDelegate; 'onIonNavChanged'?: (event: CustomEvent) => void; - 'root'?: any; - 'rootParams'?: any; + 'root'?: NavComponent; + 'rootParams'?: ComponentProps; 'swipeBackEnabled'?: boolean; } } @@ -3679,7 +3678,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass': string; + 'cssClass': string | string[]; /** * Dismiss the picker overlay after it has been presented. */ @@ -3753,7 +3752,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass'?: string; + 'cssClass'?: string | string[]; /** * Number of milliseconds to wait before dismissing the picker. */ @@ -3889,15 +3888,15 @@ declare global { /** * The component to display inside of the popover. */ - 'component': string; + 'component': ComponentRef; /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + * The data to pass to the popover component. */ - 'cssClass': string; + 'componentProps': ComponentProps; /** - * The data to pass to the popover component. + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'data': any; + 'cssClass': string | string[]; 'delegate': FrameworkDelegate; /** * Dismiss the popover overlay after it has been presented. @@ -3974,15 +3973,15 @@ declare global { /** * The component to display inside of the popover. */ - 'component'?: string; + 'component'?: ComponentRef; /** - * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. + * The data to pass to the popover component. */ - 'cssClass'?: string; + 'componentProps'?: ComponentProps; /** - * The data to pass to the popover component. + * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'data'?: any; + 'cssClass'?: string | string[]; 'delegate'?: FrameworkDelegate; /** * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. @@ -6353,7 +6352,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass': string; + 'cssClass': string | string[]; /** * Dismiss the toast overlay after it has been presented. */ @@ -6433,7 +6432,7 @@ declare global { /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ - 'cssClass'?: string; + 'cssClass'?: string | string[]; /** * If true, the toast will dismiss when the page changes. Defaults to `false`. */ diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index a239cf60f37..92bdc36e616 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -25,7 +25,7 @@ An array of buttons for the action sheet. #### cssClass -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. @@ -101,7 +101,7 @@ An array of buttons for the action sheet. #### css-class -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index 69e472ce8aa..ddcf6427d25 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -34,7 +34,7 @@ Array of buttons to be added to the alert. #### cssClass -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. @@ -129,7 +129,7 @@ Array of buttons to be added to the alert. #### css-class -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 1333df6a4e3..d1c8f4e9bfe 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -42,7 +42,7 @@ Optional text content to display in the loading indicator. #### cssClass -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. @@ -133,7 +133,7 @@ Optional text content to display in the loading indicator. #### css-class -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 1a65b5575e2..c571cb7546c 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -59,24 +59,24 @@ For more information, see [Theming your App](/docs/theming/theming-your-app). #### component -any + The component to display inside of the modal. -#### cssClass +#### componentProps -string -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. + +The data to pass to the modal component. -#### data +#### cssClass -any -The data to pass to the modal component. + +Additional classes to apply for custom CSS. If multiple classes are +provided they should be separated by spaces. #### delegate @@ -151,24 +151,24 @@ For more information, see [Theming your App](/docs/theming/theming-your-app). #### component -any + The component to display inside of the modal. -#### css-class +#### component-props -string -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. + +The data to pass to the modal component. -#### data +#### css-class -any -The data to pass to the modal component. + +Additional classes to apply for custom CSS. If multiple classes are +provided they should be separated by spaces. #### delegate diff --git a/core/src/components/nav-push/readme.md b/core/src/components/nav-push/readme.md index 5d2c5f2380f..e465b12a082 100644 --- a/core/src/components/nav-push/readme.md +++ b/core/src/components/nav-push/readme.md @@ -9,12 +9,12 @@ #### component -any -#### data -any +#### componentProps + + #### url @@ -26,12 +26,12 @@ string #### component -any -#### data -any +#### component-props + + #### url diff --git a/core/src/components/nav-set-root/readme.md b/core/src/components/nav-set-root/readme.md index cbc121097b1..01ae07d8c24 100644 --- a/core/src/components/nav-set-root/readme.md +++ b/core/src/components/nav-set-root/readme.md @@ -9,12 +9,12 @@ #### component -any -#### data -any +#### componentProps + + #### url @@ -26,12 +26,12 @@ string #### component -any -#### data -any +#### component-props + + #### url diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index 5f1e16d6e10..1c9cdad26be 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -19,12 +19,12 @@ boolean #### root -any + #### rootParams -any + #### swipeBackEnabled @@ -46,12 +46,12 @@ boolean #### root -any + #### root-params -any + #### swipe-back-enabled @@ -81,11 +81,6 @@ boolean #### getRouteId() -#### getViewById() - -Return a view controller - - #### getViews() diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index d134d383056..f991ed36960 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -25,7 +25,7 @@ Array of columns to be displayed in the picker. #### cssClass -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. @@ -101,7 +101,7 @@ Array of columns to be displayed in the picker. #### css-class -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 27a934ab64c..4386fe406ef 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -39,24 +39,24 @@ For more information, see [Theming your App](/docs/theming/theming-your-app). #### component -string + The component to display inside of the popover. -#### cssClass +#### componentProps -string -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. + +The data to pass to the popover component. -#### data +#### cssClass -any -The data to pass to the popover component. + +Additional classes to apply for custom CSS. If multiple classes are +provided they should be separated by spaces. #### delegate @@ -145,24 +145,24 @@ For more information, see [Theming your App](/docs/theming/theming-your-app). #### component -string + The component to display inside of the popover. -#### css-class +#### component-props -string -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. + +The data to pass to the popover component. -#### data +#### css-class -any -The data to pass to the popover component. + +Additional classes to apply for custom CSS. If multiple classes are +provided they should be separated by spaces. #### delegate diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 9c5efc60825..d791f8f1bb4 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -52,7 +52,7 @@ Text to display in the close button. #### cssClass -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. @@ -143,7 +143,7 @@ Text to display in the close button. #### css-class -string + Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index 8f0d006a5dd..dff0f362d09 100644 --- a/core/src/utils/theme.ts +++ b/core/src/utils/theme.ts @@ -6,21 +6,21 @@ import { CssClassMap } from '../index'; export function createThemedClasses(mode: string, color: string, classes: string): CssClassMap { const classObj: CssClassMap = {}; - return classes.split(' ') - .reduce((classObj: CssClassMap, classString: string): CssClassMap => { - classObj[classString] = true; + classes.split(' ').forEach(classString => { + classObj[classString] = true; - if (mode) { - classObj[`${classString}-${mode}`] = true; + if (mode) { + classObj[`${classString}-${mode}`] = true; - if (color) { - classObj[`${classString}-${color}`] = true; - classObj[`${classString}-${mode}-${color}`] = true; - } + if (color) { + classObj[`${classString}-${color}`] = true; + classObj[`${classString}-${mode}-${color}`] = true; } + } - return classObj; - }, classObj); + return classObj; + }); + return classObj; } /**