From 04e807f45938fed714802a042ceb5178c0c9ac82 Mon Sep 17 00:00:00 2001 From: mhartington Date: Thu, 14 Jun 2018 11:46:38 -0400 Subject: [PATCH] docs(): update examples --- .../modal-controller/modal-controller.tsx | 6 +- .../src/components/modal-controller/readme.md | 35 -- core/src/components/modal/usage/javascript.md | 20 +- core/src/components/nav-pop/readme.md | 1 + core/src/components/nav-push/nav-push.tsx | 11 +- core/src/components/nav-push/readme.md | 2 + .../components/nav-set-root/nav-set-root.tsx | 13 +- core/src/components/nav-set-root/readme.md | 2 + core/src/components/nav/nav.tsx | 472 +++++++++++++----- core/src/components/note/note.tsx | 5 - core/src/components/note/readme.md | 25 - core/src/components/note/usage/javascript.md | 24 + core/src/components/picker/picker.tsx | 152 ++++-- core/src/components/radio-group/readme.md | 38 -- .../radio-group/usage/javascript.md | 38 ++ core/src/components/radio/radio.tsx | 2 - core/src/components/radio/readme.md | 24 - core/src/components/radio/usage/javascript.md | 24 + core/src/components/range-knob/readme.md | 1 + core/src/components/range/range.tsx | 90 ++-- core/src/components/range/readme.md | 33 +- core/src/components/range/usage/angular.md | 31 ++ core/src/components/range/usage/javascript.md | 29 ++ .../components/refresher-content/readme.md | 12 - core/src/components/refresher/readme.md | 6 - .../src/components/refresher/usage/angular.md | 23 + .../components/refresher/usage/javascript.md | 21 + core/src/components/reorder-group/readme.md | 5 +- core/src/components/reorder/readme.md | 1 + 29 files changed, 746 insertions(+), 400 deletions(-) create mode 100644 core/src/components/note/usage/javascript.md create mode 100644 core/src/components/radio-group/usage/javascript.md create mode 100644 core/src/components/radio/usage/javascript.md create mode 100644 core/src/components/range/usage/angular.md create mode 100644 core/src/components/range/usage/javascript.md create mode 100644 core/src/components/refresher/usage/angular.md create mode 100644 core/src/components/refresher/usage/javascript.md diff --git a/core/src/components/modal-controller/modal-controller.tsx b/core/src/components/modal-controller/modal-controller.tsx index 40ddd950d6..e4561aa10b 100644 --- a/core/src/components/modal-controller/modal-controller.tsx +++ b/core/src/components/modal-controller/modal-controller.tsx @@ -28,7 +28,7 @@ export class ModalController implements OverlayController { removeLastOverlay(this.modals); } - /* + /** * Create a modal overlay with modal options. */ @Method() @@ -36,7 +36,7 @@ export class ModalController implements OverlayController { return createOverlay(this.doc.createElement('ion-modal'), opts); } - /* + /** * Dismiss the open modal overlay. */ @Method() @@ -44,7 +44,7 @@ export class ModalController implements OverlayController { return dismissOverlay(data, role, this.modals, modalId); } - /* + /** * Get the most recently opened modal overlay. */ @Method() diff --git a/core/src/components/modal-controller/readme.md b/core/src/components/modal-controller/readme.md index a5bcd80ca4..0e39605e56 100644 --- a/core/src/components/modal-controller/readme.md +++ b/core/src/components/modal-controller/readme.md @@ -3,41 +3,6 @@ Modal controllers programmatically control the modal component. Modals can be created and dismissed from the modal controller. View the [Modal](../../modal/Modal) documentation for a full list of options to pass upon creation. -```javascript -async function presentModal() { - // initialize controller - const modalController = document.querySelector('ion-modal-controller'); - await modalController.componentOnReady(); - - // create component to open - const element = document.createElement('div'); - element.innerHTML = ` - - - Super Modal - - - -

Content of doom

-
Here's some more content
- Dismiss Modal - - `; - - // listen for close event - const button = element.querySelector('ion-button'); - button.addEventListener('click', () => { - modalController.dismiss(); - }); - - // present the modal - const modalElement = await modalController.create({ - component: element - }); - modalElement.present(); -} -``` - diff --git a/core/src/components/modal/usage/javascript.md b/core/src/components/modal/usage/javascript.md index d80128abab..d17264158a 100644 --- a/core/src/components/modal/usage/javascript.md +++ b/core/src/components/modal/usage/javascript.md @@ -7,16 +7,16 @@ async function presentModal() { // create component to open const element = document.createElement('div'); element.innerHTML = ` - - - Super Modal - - - -

Content of doom

-
Here's some more content
- Dismiss Modal - + <ion-header> + <ion-toolbar> + <ion-title>Super Modal</ion-title> + </ion-toolbar> + </ion-header> + <ion-content> + <h1>Content of doom</h1> + <div>Here's some more content</div> + <ion-button class="dismiss">Dismiss Modal</ion-button> + </ion-content> `; // listen for close event diff --git a/core/src/components/nav-pop/readme.md b/core/src/components/nav-pop/readme.md index 34be366878..e039fde009 100644 --- a/core/src/components/nav-pop/readme.md +++ b/core/src/components/nav-pop/readme.md @@ -1,5 +1,6 @@ # ion-nav-pop +`NavPop` is a component used the automatically go back in navigation. It is the element from of `NavController.pop()` diff --git a/core/src/components/nav-push/nav-push.tsx b/core/src/components/nav-push/nav-push.tsx index d107297bbe..34d49075a5 100644 --- a/core/src/components/nav-push/nav-push.tsx +++ b/core/src/components/nav-push/nav-push.tsx @@ -2,13 +2,19 @@ import { Component, Element, Listen, Prop } from '@stencil/core'; import { ComponentProps, NavComponent } from '../../interface'; @Component({ - tag: 'ion-nav-push', + tag: 'ion-nav-push' }) export class NavPush { - @Element() el!: HTMLElement; + /** + * Component to navigate to + */ @Prop() component?: NavComponent; + + /** + * Data you want to pass to the component as props + */ @Prop() componentProps?: ComponentProps; @Listen('child:click') @@ -20,5 +26,4 @@ export class NavPush { } return Promise.resolve(null); } - } diff --git a/core/src/components/nav-push/readme.md b/core/src/components/nav-push/readme.md index c78b9fd1e7..9dac67d499 100644 --- a/core/src/components/nav-push/readme.md +++ b/core/src/components/nav-push/readme.md @@ -1,5 +1,7 @@ # ion-nav-push +`NavPush` is a component used to navigate to the specified component. +It is the element from of `NavController.push()` diff --git a/core/src/components/nav-set-root/nav-set-root.tsx b/core/src/components/nav-set-root/nav-set-root.tsx index 46be2e9fa8..367162e82d 100644 --- a/core/src/components/nav-set-root/nav-set-root.tsx +++ b/core/src/components/nav-set-root/nav-set-root.tsx @@ -2,12 +2,20 @@ import { Component, Element, Listen, Prop } from '@stencil/core'; import { ComponentProps, NavComponent } from '../../interface'; @Component({ - tag: 'ion-nav-set-root', + tag: 'ion-nav-set-root' }) export class NavSetRoot { - @Element() el!: HTMLElement; + + /** + * Component you want to make root for the navigation stack + * + */ @Prop() component?: NavComponent; + + /** + * Data you want to pass to the component as props + */ @Prop() componentProps?: ComponentProps; @Listen('child:click') @@ -19,5 +27,4 @@ export class NavSetRoot { } return Promise.resolve(null); } - } diff --git a/core/src/components/nav-set-root/readme.md b/core/src/components/nav-set-root/readme.md index 4f487b568d..b62cefca83 100644 --- a/core/src/components/nav-set-root/readme.md +++ b/core/src/components/nav-set-root/readme.md @@ -1,5 +1,7 @@ # ion-nav-set-root +`NavSetRoot` is an element that allows you to set the root of the current navigation stack. +It is the element form a calling `NavController.setRoot()` diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 192c745367..fd8053f0c9 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -1,19 +1,49 @@ -import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core'; +import { + Build, + Component, + Element, + Event, + EventEmitter, + Method, + Prop, + Watch +} from '@stencil/core'; import { ViewLifecycle } from '../..'; import { - Animation, ComponentProps, Config, FrameworkDelegate, GestureDetail, Mode, - NavComponent, NavOptions, NavOutlet, NavResult, QueueController, RouteID, - RouteWrite, TransitionDoneFn, TransitionInstruction } from '../../interface'; + Animation, + ComponentProps, + Config, + FrameworkDelegate, + GestureDetail, + Mode, + NavComponent, + NavOptions, + NavOutlet, + NavResult, + QueueController, + RouteID, + RouteWrite, + TransitionDoneFn, + TransitionInstruction +} from '../../interface'; import { assert } from '../../utils/helpers'; -import { TransitionOptions, lifecycle, transition } from '../../utils/transition'; +import { + TransitionOptions, + lifecycle, + transition +} from '../../utils/transition'; import { RouterIntent } from '../router/utils/constants'; -import { ViewController, ViewState, convertToViews, matches } from './view-controller'; +import { + ViewController, + ViewState, + convertToViews, + matches +} from './view-controller'; @Component({ - tag: 'ion-nav', + tag: 'ion-nav' }) export class Nav implements NavOutlet { - private transInstr: TransitionInstruction[] = []; private sbTrns?: Animation; private useRouter = false; @@ -25,16 +55,41 @@ export class Nav implements NavOutlet { @Element() el!: HTMLElement; - @Prop({ context: 'queue' }) queue!: QueueController; - @Prop({ context: 'config' }) config!: Config; - @Prop({ context: 'window' }) win!: Window; + @Prop({ context: 'queue' }) + queue!: QueueController; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; - @Prop({ mutable: true }) swipeBackEnabled?: boolean; - @Prop({ mutable: true }) animated?: boolean; + @Prop({ context: 'config' }) + config!: Config; + + @Prop({ context: 'window' }) + win!: Window; + + @Prop({ connect: 'ion-animation-controller' }) + animationCtrl!: HTMLIonAnimationControllerElement; + /** + * If the nav component should allow for swipe-to-go-back + */ + @Prop({ mutable: true }) + swipeBackEnabled?: boolean; + /** + * If the nav should animate the components or not + */ + @Prop({ mutable: true }) + animated?: boolean; + + /** @hidden */ @Prop() delegate?: FrameworkDelegate; + + /** + * Any parameters for the root component + */ @Prop() rootParams?: ComponentProps; + + /** + * Root NavComponent to load + */ @Prop() root?: NavComponent; + @Watch('root') rootChanged() { const isDev = Build.isDev; @@ -42,19 +97,35 @@ export class Nav implements NavOutlet { if (!this.useRouter) { this.setRoot(this.root, this.rootParams); } else if (isDev) { - console.warn(' does not support a root attribute when using ion-router.'); + console.warn( + ' does not support a root attribute when using ion-router.' + ); } } } + /** + * Event fired when Nav will load a component + */ @Event() ionNavWillLoad!: EventEmitter; + /** + * Event fired when the nav will components + */ @Event() ionNavWillChange!: EventEmitter; + /** + * Event fired when the nav has changed components + */ @Event() ionNavDidChange!: EventEmitter; componentWillLoad() { - this.useRouter = !!this.win.document.querySelector('ion-router') && !this.el.closest('[no-router]'); + this.useRouter = + !!this.win.document.querySelector('ion-router') && + !this.el.closest('[no-router]'); if (this.swipeBackEnabled === undefined) { - this.swipeBackEnabled = this.config.getBoolean('swipeBackEnabled', this.mode === 'ios'); + this.swipeBackEnabled = this.config.getBoolean( + 'swipeBackEnabled', + this.mode === 'ios' + ); } if (this.animated === undefined) { this.animated = this.config.getBoolean('animate', true); @@ -79,44 +150,91 @@ export class Nav implements NavOutlet { this.destroyed = true; } + /** + * Push a new component onto the current navigation stack. Pass any aditional information along as an object. This additional information is accessible through NavParams + */ @Method() - push(component: NavComponent, componentProps?: ComponentProps|null, opts?: NavOptions|null, done?: TransitionDoneFn): Promise { - return this.queueTrns({ - insertStart: -1, - insertViews: [{ page: component, params: componentProps }], - opts: opts, - }, done); + push( + component: NavComponent, + componentProps?: ComponentProps | null, + opts?: NavOptions | null, + done?: TransitionDoneFn + ): Promise { + return this.queueTrns( + { + insertStart: -1, + insertViews: [{ page: component, params: componentProps }], + opts: opts + }, + done + ); } + /** + * Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. + */ @Method() - insert(insertIndex: number, component: NavComponent, componentProps?: ComponentProps|null, opts?: NavOptions|null, done?: TransitionDoneFn): Promise { - return this.queueTrns({ - insertStart: insertIndex, - insertViews: [{ page: component, params: componentProps }], - opts: opts, - }, done); + insert( + insertIndex: number, + component: NavComponent, + componentProps?: ComponentProps | null, + opts?: NavOptions | null, + done?: TransitionDoneFn + ): Promise { + return this.queueTrns( + { + insertStart: insertIndex, + insertViews: [{ page: component, params: componentProps }], + opts: opts + }, + done + ); } + /** + * Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. + */ @Method() - insertPages(insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions|null, done?: TransitionDoneFn): Promise { - return this.queueTrns({ - insertStart: insertIndex, - insertViews: insertComponents, - opts: opts, - }, done); + insertPages( + insertIndex: number, + insertComponents: NavComponent[], + opts?: NavOptions | null, + done?: TransitionDoneFn + ): Promise { + return this.queueTrns( + { + insertStart: insertIndex, + insertViews: insertComponents, + opts: opts + }, + done + ); } + /** + * Call to navigate back from a current component. Similar to push(), you can also pass navigation options. + */ @Method() - pop(opts?: NavOptions|null, done?: TransitionDoneFn): Promise { - return this.queueTrns({ - removeStart: -1, - removeCount: 1, - opts: opts, - }, done); + pop(opts?: NavOptions | null, done?: TransitionDoneFn): Promise { + return this.queueTrns( + { + removeStart: -1, + removeCount: 1, + opts: opts + }, + done + ); } + /** + * Pop to a specific index in the navigation stack + */ @Method() - popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions|null, done?: TransitionDoneFn): Promise { + popTo( + indexOrViewCtrl: number | ViewController, + opts?: NavOptions | null, + done?: TransitionDoneFn + ): Promise { const config: TransitionInstruction = { removeStart: -1, removeCount: -1, @@ -131,31 +249,70 @@ export class Nav implements NavOutlet { return this.queueTrns(config, done); } + /** + * Navigate back to the root of the stack, no matter how far back that is. + */ @Method() - popToRoot(opts?: NavOptions|null, done?: TransitionDoneFn): Promise { - return this.queueTrns({ - removeStart: 1, - removeCount: -1, - opts: opts, - }, done); + popToRoot( + opts?: NavOptions | null, + done?: TransitionDoneFn + ): Promise { + return this.queueTrns( + { + removeStart: 1, + removeCount: -1, + opts: opts + }, + done + ); } + /** + * Removes a page from the nav stack at the specified index. + */ @Method() - removeIndex(startIndex: number, removeCount = 1, opts?: NavOptions|null, done?: TransitionDoneFn): Promise { - return this.queueTrns({ - removeStart: startIndex, - removeCount: removeCount, - opts: opts, - }, done); + removeIndex( + startIndex: number, + removeCount = 1, + opts?: NavOptions | null, + done?: TransitionDoneFn + ): Promise { + return this.queueTrns( + { + removeStart: startIndex, + removeCount: removeCount, + opts: opts + }, + done + ); } + /** + * Set the root for the current navigation stack. + */ @Method() - setRoot(component: NavComponent, componentProps?: ComponentProps|null, opts?: NavOptions|null, done?: TransitionDoneFn): Promise { - return this.setPages([{ page: component, params: componentProps }], opts, done); + setRoot( + component: NavComponent, + componentProps?: ComponentProps | null, + opts?: NavOptions | null, + done?: TransitionDoneFn + ): Promise { + return this.setPages( + [{ page: component, params: componentProps }], + opts, + done + ); } + /** + * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array. + */ @Method() - setPages(views: any[], opts?: NavOptions|null, done?: TransitionDoneFn): Promise { + setPages( + views: any[], + opts?: NavOptions | null, + done?: TransitionDoneFn + ): Promise { if (!opts) { opts = {}; } @@ -163,17 +320,25 @@ export class Nav implements NavOutlet { if (opts.animated !== true) { opts.animated = false; } - return this.queueTrns({ - insertStart: 0, - insertViews: views, - removeStart: 0, - removeCount: -1, - opts: opts - }, done); + return this.queueTrns( + { + insertStart: 0, + insertViews: views, + removeStart: 0, + removeCount: -1, + opts: opts + }, + done + ); } + /** @hidden */ @Method() - setRouteId(id: string, params: any, direction: RouterIntent): Promise { + setRouteId( + id: string, + params: any, + direction: RouterIntent + ): Promise { const active = this.getActive(); if (matches(active, id, params)) { return Promise.resolve({ @@ -183,13 +348,13 @@ export class Nav implements NavOutlet { } let resolve: (result: RouteWrite) => void; - const promise = new Promise((r) => resolve = r); + const promise = new Promise(r => (resolve = r)); let finish: Promise; const commonOpts: NavOptions = { updateURL: false, - viewIsReady: (enteringEl) => { + viewIsReady: enteringEl => { let mark: Function; - const p = new Promise(r => mark = r); + const p = new Promise(r => (mark = r)); resolve({ changed: true, element: enteringEl, @@ -208,51 +373,76 @@ export class Nav implements NavOutlet { const viewController = this.views.find(v => matches(v, id, params)); if (viewController) { - finish = this.popTo(viewController, {...commonOpts, direction: 'back'}); + finish = this.popTo(viewController, { + ...commonOpts, + direction: 'back' + }); } else if (direction === 1) { finish = this.push(id, params, commonOpts); } else if (direction === -1) { - finish = this.setRoot(id, params, {...commonOpts, direction: 'back', animated: true}); + finish = this.setRoot(id, params, { + ...commonOpts, + direction: 'back', + animated: true + }); } } return promise; } + /** @hidden */ @Method() - getRouteId(): RouteID|undefined { + getRouteId(): RouteID | undefined { const active = this.getActive(); - return active ? { - id: active.element!.tagName, - params: active.params, - element: active.element - } : undefined; + return active + ? { + id: active.element!.tagName, + params: active.params, + element: active.element + } + : undefined; } + /** + * Returns true or false if the current view can go back + */ @Method() canGoBack(view = this.getActive()): boolean { return !!(view && this.getPrevious(view)); } + /** + * Gets the active view + */ @Method() - getActive(): ViewController|undefined { + getActive(): ViewController | undefined { return this.views[this.views.length - 1]; } + /** + * Returns the view at the index + */ @Method() - getByIndex(index: number): ViewController|undefined { + getByIndex(index: number): ViewController | undefined { return this.views[index]; } + /** + * Gets the previous view + */ @Method() - getPrevious(view = this.getActive()): ViewController|undefined { + getPrevious(view = this.getActive()): ViewController | undefined { if (!view) { return undefined; } const views = this.views; const index = views.indexOf(view); - return (index > 0) ? views[index - 1] : undefined; + return index > 0 ? views[index - 1] : undefined; } + /** + * Returns the length of navigation stack + */ @Method() length() { return this.views.length; @@ -268,7 +458,10 @@ export class Nav implements NavOutlet { // 7. _transitionStart(): called once the transition actually starts, it initializes the Animation underneath. // 8. _transitionFinish(): called once the transition finishes // 9. _cleanup(): syncs the navigation internal state with the DOM. For example it removes the pages from the DOM or hides/show them. - private queueTrns(ti: TransitionInstruction, done: TransitionDoneFn|undefined): Promise { + private queueTrns( + ti: TransitionInstruction, + done: TransitionDoneFn | undefined + ): Promise { const promise = new Promise((resolve, reject) => { ti.resolve = resolve; ti.reject = reject; @@ -310,9 +503,7 @@ export class Nav implements NavOutlet { if (ti.opts!.updateURL !== false && this.useRouter) { const router = this.win.document.querySelector('ion-router'); if (router) { - const direction = (result.direction === 'back') - ? -1 - : 1; + const direction = result.direction === 'back' ? -1 : 1; router.navChanged(direction); } @@ -377,17 +568,19 @@ export class Nav implements NavOutlet { this.postViewInit(enteringView, leavingView, ti); // Needs transition? - const requiresTransition = (ti.enteringRequiresTransition || ti.leavingRequiresTransition) && enteringView !== leavingView; + const requiresTransition = + (ti.enteringRequiresTransition || ti.leavingRequiresTransition) && + enteringView !== leavingView; const result = requiresTransition ? await this.transition(enteringView!, leavingView, ti) : { - // transition is not required, so we are already done! - // they're inserting/removing the views somewhere in the middle or - // beginning, so visually nothing needs to animate/transition - // resolve immediately because there's no animation that's happening - hasCompleted: true, - requiresTransition: false - }; + // transition is not required, so we are already done! + // they're inserting/removing the views somewhere in the middle or + // beginning, so visually nothing needs to animate/transition + // resolve immediately because there's no animation that's happening + hasCompleted: true, + requiresTransition: false + }; this.success(result, ti); this.ionNavDidChange.emit(); @@ -418,12 +611,13 @@ export class Nav implements NavOutlet { } if (ti.removeStart != null) { if (ti.removeStart < 0) { - ti.removeStart = (viewsLength - 1); + ti.removeStart = viewsLength - 1; } if (ti.removeCount! < 0) { - ti.removeCount = (viewsLength - ti.removeStart); + ti.removeCount = viewsLength - ti.removeStart; } - ti.leavingRequiresTransition = (ti.removeCount! > 0) && ((ti.removeStart + ti.removeCount!) === viewsLength); + ti.leavingRequiresTransition = + ti.removeCount! > 0 && ti.removeStart + ti.removeCount! === viewsLength; } if (ti.insertViews) { @@ -432,7 +626,7 @@ export class Nav implements NavOutlet { if (ti.insertStart! < 0 || ti.insertStart! > viewsLength) { ti.insertStart = viewsLength; } - ti.enteringRequiresTransition = (ti.insertStart === viewsLength); + ti.enteringRequiresTransition = ti.insertStart === viewsLength; } const insertViews = ti.insertViews; @@ -460,7 +654,10 @@ export class Nav implements NavOutlet { ti.insertViews = viewControllers; } - private getEnteringView(ti: TransitionInstruction, leavingView: ViewController|undefined): ViewController|undefined { + private getEnteringView( + ti: TransitionInstruction, + leavingView: ViewController | undefined + ): ViewController | undefined { const insertViews = ti.insertViews; if (insertViews) { // grab the very last view of the views to be inserted @@ -482,8 +679,15 @@ export class Nav implements NavOutlet { return undefined; } - private postViewInit(enteringView: ViewController|undefined, leavingView: ViewController|undefined, ti: TransitionInstruction) { - assert(leavingView || enteringView, 'Both leavingView and enteringView are null'); + private postViewInit( + enteringView: ViewController | undefined, + leavingView: ViewController | undefined, + ti: TransitionInstruction + ) { + assert( + leavingView || enteringView, + 'Both leavingView and enteringView are null' + ); assert(ti.resolve, 'resolve must be valid'); assert(ti.reject, 'reject must be valid'); @@ -491,7 +695,7 @@ export class Nav implements NavOutlet { const insertViews = ti.insertViews; const removeStart = ti.removeStart; const removeCount = ti.removeCount; - let destroyQueue: ViewController[]|undefined = undefined; + let destroyQueue: ViewController[] | undefined = undefined; // there are views to remove if (removeStart != null && removeCount != null) { @@ -509,11 +713,17 @@ export class Nav implements NavOutlet { opts.direction = opts.direction || 'back'; } - const finalBalance = this.views.length + (insertViews ? insertViews.length : 0) - (removeCount ? removeCount : 0); + const finalBalance = + this.views.length + + (insertViews ? insertViews.length : 0) - + (removeCount ? removeCount : 0); assert(finalBalance >= 0, 'final balance can not be negative'); if (finalBalance === 0) { - console.warn(`You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`, - this, this.el); + console.warn( + `You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`, + this, + this.el + ); throw new Error('navigation stack needs at least one root page'); } @@ -553,7 +763,11 @@ export class Nav implements NavOutlet { } } - private async transition(enteringView: ViewController, leavingView: ViewController|undefined, ti: TransitionInstruction): Promise { + private async transition( + enteringView: ViewController, + leavingView: ViewController | undefined, + ti: TransitionInstruction + ): Promise { if (this.sbTrns) { this.sbTrns.destroy(); this.sbTrns = undefined; @@ -564,7 +778,9 @@ export class Nav implements NavOutlet { const opts = ti.opts!; const progressCallback = opts.progressAnimation - ? (animation: Animation) => { this.sbTrns = animation; } + ? (animation: Animation) => { + this.sbTrns = animation; + } : undefined; const enteringEl = enteringView.element!; @@ -586,7 +802,12 @@ export class Nav implements NavOutlet { return this.transitionFinish(trns, enteringView, leavingView, opts); } - private transitionFinish(transition: Animation|null, enteringView: ViewController, leavingView: ViewController | undefined, opts: NavOptions): NavResult { + private transitionFinish( + transition: Animation | null, + enteringView: ViewController, + leavingView: ViewController | undefined, + opts: NavOptions + ): NavResult { const hasCompleted = transition ? transition.hasCompleted : true; const cleanupView = hasCompleted ? enteringView : leavingView; @@ -627,7 +848,10 @@ export class Nav implements NavOutlet { } private removeView(view: ViewController) { - assert(view.state === ViewState.Attached || view.state === ViewState.Destroyed, 'view state should be loaded or destroyed'); + assert( + view.state === ViewState.Attached || view.state === ViewState.Destroyed, + 'view state should be loaded or destroyed' + ); const views = this.views; const index = views.indexOf(view); @@ -662,7 +886,6 @@ export class Nav implements NavOutlet { // let's unload it lifecycle(this.win, view.element, ViewLifecycle.WillUnload); this.destroyView(view); - } else if (i < activeViewIndex) { // this view comes before the active view // and it is not a portal then ensure it is hidden @@ -682,11 +905,14 @@ export class Nav implements NavOutlet { progressAnimation: true }; - this.queueTrns({ - removeStart: -1, - removeCount: 1, - opts: opts, - }, undefined); + this.queueTrns( + { + removeStart: -1, + removeCount: 1, + opts: opts + }, + undefined + ); } private swipeBackProgress(detail: GestureDetail) { @@ -710,8 +936,8 @@ export class Nav implements NavOutlet { const stepValue = delta / width; const velocity = detail.velocityX; const z = width / 2.0; - const shouldComplete = (velocity >= 0) - && (velocity > 0.2 || detail.deltaX > z); + const shouldComplete = + velocity >= 0 && (velocity > 0.2 || detail.deltaX > z); const missing = shouldComplete ? 1 - stepValue : stepValue; const missingDistance = missing * width; @@ -726,16 +952,12 @@ export class Nav implements NavOutlet { } private canSwipeBack(): boolean { - return ( - !!this.swipeBackEnabled && - !this.isTransitioning && - this.canGoBack() - ); + return !!this.swipeBackEnabled && !this.isTransitioning && this.canGoBack(); } render() { return [ - this.swipeBackEnabled && + this.swipeBackEnabled && ( , - this.mode === 'ios' &&
, - + attachTo="body" + /> + ), + this.mode === 'ios' &&
, + ]; } } diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx index d465ab973e..0c990a1bc4 100644 --- a/core/src/components/note/note.tsx +++ b/core/src/components/note/note.tsx @@ -1,7 +1,6 @@ import { Component, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; - @Component({ tag: 'ion-note', styleUrls: { @@ -13,19 +12,15 @@ import { Color, Mode } from '../../interface'; } }) export class Note { - /** * The color to use from your Sass `$colors` map. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. - * For more information, see [Theming your App](/docs/theming/theming-your-app). */ @Prop() color?: Color; /** * 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!: Mode; - } diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md index 3ea78e8978..def32ddeae 100644 --- a/core/src/components/note/readme.md +++ b/core/src/components/note/readme.md @@ -2,31 +2,6 @@ Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. -```html - -Default Note - - -Primary Note -Secondary Note -Danger Note -Light Note -Dark Note - - - - - Note (End) - On - - - - Off - Note (Start) - - -``` - diff --git a/core/src/components/note/usage/javascript.md b/core/src/components/note/usage/javascript.md new file mode 100644 index 0000000000..fba5e5c859 --- /dev/null +++ b/core/src/components/note/usage/javascript.md @@ -0,0 +1,24 @@ +```html + +Default Note + + +Primary Note +Secondary Note +Danger Note +Light Note +Dark Note + + + + + Note (End) + On + + + + Off + Note (Start) + + +``` diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index ddd3101223..5fd937f66a 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -1,7 +1,30 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core'; -import { Animation, AnimationBuilder, Config, CssClassMap, Mode, PickerButton, PickerColumn } from '../../interface'; +import { + Component, + Element, + Event, + EventEmitter, + Listen, + Method, + Prop, + State +} from '@stencil/core'; +import { + Animation, + AnimationBuilder, + Config, + CssClassMap, + Mode, + PickerButton, + PickerColumn +} from '../../interface'; -import { OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays'; +import { + OverlayEventDetail, + OverlayInterface, + dismiss, + eventMethod, + present +} from '../../utils/overlays'; import { getClassMap } from '../../utils/theme'; import { iosEnterAnimation } from './animations/ios.enter'; @@ -18,7 +41,6 @@ import { iosLeaveAnimation } from './animations/ios.leave'; } }) export class Picker implements OverlayInterface { - private durationTimeout: any; mode!: Mode; @@ -30,9 +52,18 @@ export class Picker implements OverlayInterface { @State() private showSpinner!: boolean; @State() private spinner!: string; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; - @Prop({ context: 'config' }) config!: Config; + @Prop({ connect: 'ion-animation-controller' }) + animationCtrl!: HTMLIonAnimationControllerElement; + + @Prop({ context: 'config' }) + config!: Config; + + /** @hidden */ @Prop() overlayId!: number; + + /** + * If the keyboard should be able to close the picker. Defaults to true. + */ @Prop() keyboardClose = true; /** @@ -89,32 +120,35 @@ export class Picker implements OverlayInterface { /** * Emitted after the picker has presented. */ - @Event({eventName: 'ionPickerDidPresent'}) didPresent!: EventEmitter; + @Event({ eventName: 'ionPickerDidPresent' }) + didPresent!: EventEmitter; /** * Emitted before the picker has presented. */ - @Event({eventName: 'ionPickerWillPresent'}) willPresent!: EventEmitter; + @Event({ eventName: 'ionPickerWillPresent' }) + willPresent!: EventEmitter; /** * Emitted before the picker has dismissed. */ - @Event({eventName: 'ionPickerWillDismiss'}) willDismiss!: EventEmitter; + @Event({ eventName: 'ionPickerWillDismiss' }) + willDismiss!: EventEmitter; /** * Emitted after the picker has dismissed. */ - @Event({eventName: 'ionPickerDidDismiss'}) didDismiss!: EventEmitter; + @Event({ eventName: 'ionPickerDidDismiss' }) + didDismiss!: EventEmitter; /** * Emitted after the picker has unloaded. */ @Event() ionPickerDidUnload!: EventEmitter; - componentWillLoad() { if (!this.spinner) { - const defaultSpinner = (this.mode === 'ios') ? 'lines' : 'crescent'; + const defaultSpinner = this.mode === 'ios' ? 'lines' : 'crescent'; this.spinner = this.config.get('pickerSpinner', defaultSpinner); } if (this.showSpinner === undefined) { @@ -145,7 +179,13 @@ export class Picker implements OverlayInterface { */ @Method() async present(): Promise { - await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined); + await present( + this, + 'pickerEnter', + iosEnterAnimation, + iosEnterAnimation, + undefined + ); if (this.duration) { this.durationTimeout = setTimeout(() => this.dismiss(), this.duration); @@ -160,7 +200,14 @@ export class Picker implements OverlayInterface { if (this.durationTimeout) { clearTimeout(this.durationTimeout); } - return dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation); + return dismiss( + this, + data, + role, + 'pickerLeave', + iosLeaveAnimation, + iosLeaveAnimation + ); } /** @@ -169,7 +216,9 @@ export class Picker implements OverlayInterface { * */ @Method() - onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { + onDidDismiss( + callback?: (detail: OverlayEventDetail) => void + ): Promise { return eventMethod(this.el, 'ionPickerDidDismiss', callback); } @@ -179,25 +228,39 @@ export class Picker implements OverlayInterface { * */ @Method() - onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { + onWillDismiss( + callback?: (detail: OverlayEventDetail) => void + ): Promise { return eventMethod(this.el, 'ionPickerWillDismiss', callback); } + /** + * Add a new PickerButton to the picker + */ @Method() addButton(button: PickerButton) { this.buttons.push(button); } + /** + * Add a new PickerColumn to the picker + */ @Method() addColumn(column: PickerColumn) { this.columns.push(column); } + /** + * Returns the column the matches the specified name + */ @Method() - getColumn(name: string): PickerColumn|undefined { + getColumn(name: string): PickerColumn | undefined { return this.columns.find(column => column.name === name); } + /** + * Returns all the PickerColumns + */ @Method() getColumns(): PickerColumn[] { return this.columns; @@ -226,13 +289,15 @@ export class Picker implements OverlayInterface { } private getSelected() { - const selected: {[k: string]: any} = {}; + const selected: { [k: string]: any } = {}; this.columns.forEach((col, index) => { - const selectedColumn = col.selectedIndex ? col.options[col.selectedIndex] : null; + const selectedColumn = col.selectedIndex + ? col.options[col.selectedIndex] + : null; selected[col.name] = { text: selectedColumn ? selectedColumn.text : null, value: selectedColumn ? selectedColumn.value : null, - columnIndex: index, + columnIndex: index }; }); return selected; @@ -241,7 +306,7 @@ export class Picker implements OverlayInterface { hostData() { return { style: { - zIndex: 20000 + this.overlayId, + zIndex: 20000 + this.overlayId } }; } @@ -249,16 +314,17 @@ export class Picker implements OverlayInterface { render() { // TODO: cssClass - const buttons = this.buttons.map(b => { - if (typeof b === 'string') { - b = { text: b }; - } - if (!b.cssClass) { - b.cssClass = ''; - } - return b; - }) - .filter(b => b !== null); + const buttons = this.buttons + .map(b => { + if (typeof b === 'string') { + b = { text: b }; + } + if (!b.cssClass) { + b.cssClass = ''; + } + return b; + }) + .filter(b => b !== null); const columns = this.columns; @@ -292,23 +358,27 @@ export class Picker implements OverlayInterface { // }); return [ - , + ,