Skip to content

Commit

Permalink
refactor(overlays): move common code to overlay.ts
Browse files Browse the repository at this point in the history
  • Loading branch information
@manucorporat
manucorporat committed Mar 10, 2018
1 parent 64f0866 commit 6383a54
Show file tree
Hide file tree
Showing 16 changed files with 286 additions and 625 deletions.
6 changes: 3 additions & 3 deletions packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, Listen, Method } from '@stencil/core';
import { ActionSheetEvent, ActionSheetOptions, OverlayController } from '../../index';
import { ActionSheetOptions, OverlayController } from '../../index';
import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';

@Component({
Expand All @@ -11,14 +11,14 @@ export class ActionSheetController implements OverlayController {


@Listen('body:ionActionSheetWillPresent')
protected actionSheetWillPresent(ev: ActionSheetEvent) {
protected actionSheetWillPresent(ev: any) {
this.actionSheets.set(ev.target.overlayId, ev.target);
}


@Listen('body:ionActionSheetWillDismiss')
@Listen('body:ionActionSheetDidUnload')
protected actionSheetWillDismiss(ev: ActionSheetEvent) {
protected actionSheetWillDismiss(ev: any) {
this.actionSheets.delete(ev.target.overlayId);
}

Expand Down
99 changes: 19 additions & 80 deletions packages/core/src/components/action-sheet/action-sheet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Config, CssClassMap, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
import { Animation, AnimationBuilder, Config, CssClassMap, OverlayDismissEvent } from '../../index';

import { domControllerAsync } from '../../utils/helpers';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import { BACKDROP, OverlayInterface, overlayAnimation } from '../../utils/overlays';
import { BACKDROP, OverlayInterface, dismiss, present } from '../../utils/overlays';

import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave';
Expand All @@ -23,17 +22,15 @@ import mdLeaveAnimation from './animations/md.leave';
})
export class ActionSheet implements OverlayInterface {

private presented = false;

presented = false;
mode: string;
color: string;
animation: Animation;
animation: Animation|undefined;

@Element() private el: HTMLElement;
@Element() el: HTMLElement;

@Prop({ connect: 'ion-animation-controller' }) animationCtrl: HTMLIonAnimationControllerElement;
@Prop({ context: 'config' }) config: Config;
@Prop({ context: 'dom' }) dom: DomController;
@Prop() overlayId: number;

/**
Expand Down Expand Up @@ -85,32 +82,32 @@ export class ActionSheet implements OverlayInterface {
/**
* Emitted after the alert has loaded.
*/
@Event() ionActionSheetDidLoad: EventEmitter<ActionSheetEventDetail>;
@Event() ionActionSheetDidLoad: EventEmitter;

/**
* Emitted after the alert has unloaded.
*/
@Event() ionActionSheetDidUnload: EventEmitter;

/**
* Emitted after the alert has presented.
*/
@Event() ionActionSheetDidPresent: EventEmitter<ActionSheetEventDetail>;
@Event({eventName: 'ionActionSheetDidPresent'}) didPresent: EventEmitter;

/**
* Emitted before the alert has presented.
*/
@Event() ionActionSheetWillPresent: EventEmitter<ActionSheetEventDetail>;
@Event({eventName: 'ionActionSheetWillPresent'}) willPresent: EventEmitter;

/**
* Emitted before the alert has dismissed.
*/
@Event() ionActionSheetWillDismiss: EventEmitter<ActionSheetDismissEventDetail>;
@Event({eventName: 'ionActionSheetWillDismiss'}) willDismiss: EventEmitter;

/**
* Emitted after the alert has dismissed.
*/
@Event() ionActionSheetDidDismiss: EventEmitter<ActionSheetDismissEventDetail>;

/**
* Emitted after the alert has unloaded.
*/
@Event() ionActionSheetDidUnload: EventEmitter<ActionSheetEventDetail>;
@Event({eventName: 'ionActionSheetDidDismiss'}) didDismiss: EventEmitter;


componentDidLoad() {
Expand All @@ -121,63 +118,25 @@ export class ActionSheet implements OverlayInterface {
this.ionActionSheetDidUnload.emit();
}

@Listen('ionDismiss')
protected onDismiss(ev: UIEvent) {
ev.stopPropagation();
ev.preventDefault();

this.dismiss();
}

@Listen('ionBackdropTap')
protected onBackdropTap() {
this.dismiss(null, BACKDROP).catch();
this.dismiss(null, BACKDROP);
}

/**
* Present the action sheet overlay after it has been created.
*/
@Method()
present(): Promise<void> {
if (this.presented) {
return Promise.reject('overlay already presented');
}
this.presented = true;

this.ionActionSheetWillPresent.emit();

// get the user's animation fn if one was provided
const animationBuilder = this.enterAnimation || this.config.get('actionSheetEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);

// build the animation and kick it off
return this.playAnimation(animationBuilder).then(() => {
this.ionActionSheetDidPresent.emit();
});
return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation, undefined);
}

/**
* Dismiss the action sheet overlay after it has been presented.
*/
@Method()
dismiss(data?: any, role?: string) {
if (!this.presented) {
return Promise.reject('overlay is not presented');
}
this.presented = false;

this.ionActionSheetWillDismiss.emit({data, role});

const animationBuilder = this.leaveAnimation || this.config.get('actionSheetLeave', this.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
return this.playAnimation(animationBuilder).then(() => {
this.ionActionSheetDidDismiss.emit({data, role});
return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
});
}

private playAnimation(animationBuilder: AnimationBuilder): Promise<void> {
return overlayAnimation(this, animationBuilder, this.willAnimate, this.el, undefined);
dismiss(data?: any, role?: string): Promise<void> {
return dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation, undefined);
}

protected buttonClick(button: ActionSheetButton) {
Expand Down Expand Up @@ -296,26 +255,6 @@ export interface ActionSheetButton {
handler?: () => boolean | void;
}

export interface ActionSheetEvent extends CustomEvent {
target: HTMLIonActionSheetElement;
detail: ActionSheetEventDetail;
}

export interface ActionSheetEventDetail {

}

export interface ActionSheetDismissEventDetail extends OverlayDismissEventDetail {
// keep this just for the sake of static types and potential future extensions
}

export interface ActionSheetDismissEvent extends OverlayDismissEvent {
// keep this just for the sake of static types and potential future extensions
}

export {
iosEnterAnimation as iosActionSheetEnterAnimation,
iosLeaveAnimation as iosActionSheetLeaveAnimation,
mdEnterAnimation as mdActionSheetEnterAnimation,
mdLeaveAnimation as mdActionSheetetLeaveAnimation,
};
78 changes: 20 additions & 58 deletions packages/core/src/components/alert/alert.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Config, CssClassMap, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
import { domControllerAsync } from '../../utils/helpers';
import { Animation, AnimationBuilder, Config, CssClassMap, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import { BACKDROP, OverlayInterface, autoFocus, overlayAnimation } from '../../utils/overlays';
import { BACKDROP, OverlayInterface, autoFocus, dismiss, present } from '../../utils/overlays';

import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave';
Expand All @@ -22,20 +21,19 @@ import mdLeaveAnimation from './animations/md.leave';
})
export class Alert implements OverlayInterface {

private presented = false;
private activeId: string;
private inputType: string | null = null;
private hdrId: string;

animation: Animation;
presented = false;
animation: Animation|undefined;
mode: string;
color: string;

@Element() private el: HTMLElement;
@Element() el: HTMLElement;

@Prop({ connect: 'ion-animation-controller' }) animationCtrl: HTMLIonAnimationControllerElement;
@Prop({ context: 'config' }) config: Config;
@Prop({ context: 'dom' }) dom: DomController;
@Prop() overlayId: number;

/**
Expand Down Expand Up @@ -95,34 +93,35 @@ export class Alert implements OverlayInterface {
@Prop() willAnimate = true;

/**
* Emitted after the alert has loaded.
* Emitted after the alert has presented.
*/
@Event() ionAlertDidLoad: EventEmitter<AlertEventDetail>;

/**
* Emitted before the alert has presented.
*/
@Event() ionAlertDidUnload: EventEmitter<AlertEventDetail>;

/**
* Emitted after the alert has presented.
*/
@Event() ionAlertDidPresent: EventEmitter<AlertEventDetail>;
@Event({eventName: 'ionAlertDidPresent'}) didPresent: EventEmitter<AlertEventDetail>;

/**
* Emitted before the alert has presented.
*/
@Event() ionAlertWillPresent: EventEmitter<AlertEventDetail>;
@Event({eventName: 'ionAlertWillPresent'}) willPresent: EventEmitter<AlertEventDetail>;

/**
* Emitted before the alert has dismissed.
*/
@Event() ionAlertWillDismiss: EventEmitter<AlertDismissEventDetail>;
@Event({eventName: 'ionAlertWillDismiss'}) willDismiss: EventEmitter<AlertDismissEventDetail>;

/**
* Emitted after the alert has dismissed.
*/
@Event() ionAlertDidDismiss: EventEmitter<AlertDismissEventDetail>;
@Event({eventName: 'ionAlertDidDismiss'}) didDismiss: EventEmitter<AlertDismissEventDetail>;

/**
* Emitted after the alert has unloaded.
*/
@Event() ionAlertDidUnload: EventEmitter<AlertEventDetail>;

componentDidLoad() {
this.ionAlertDidLoad.emit();
Expand All @@ -134,51 +133,25 @@ export class Alert implements OverlayInterface {

@Listen('ionBackdropTap')
protected onBackdropTap() {
this.dismiss(null, BACKDROP).catch();
this.dismiss(null, BACKDROP);
}

/**
* Present the alert overlay after it has been created.
*/
@Method()
present(): Promise<void> {
if (this.presented) {
return Promise.reject('overlay already presented');
}
this.presented = true;
this.ionAlertWillPresent.emit();

// get the user's animation fn if one was provided
const animationBuilder = this.enterAnimation || this.config.get('alertEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);

// build the animation and kick it off
return this.playAnimation(animationBuilder).then(() => {
return present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation, undefined).then(() => {
autoFocus(this.el);
this.ionAlertDidPresent.emit();
});
}

/**
* Dismiss the alert overlay after it has been presented.
*/
@Method()
dismiss(data?: any, role?: string) {
if (!this.presented) {
return Promise.reject('overlay is not presented');
}
this.presented = false;
this.ionAlertWillDismiss.emit({data, role});

// get the user's animation fn if one was provided
const animationBuilder = this.leaveAnimation || this.config.get('alertLeave', this.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);

return this.playAnimation(animationBuilder).then(() => {
this.ionAlertDidDismiss.emit({data, role});

return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
});
dismiss(data?: any, role?: string): Promise<void> {
return dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation, undefined);
}

private rbClick(inputIndex: number) {
Expand Down Expand Up @@ -230,7 +203,7 @@ export class Alert implements OverlayInterface {
if (this.inputType === 'radio') {
// this is an alert with radio buttons (single value select)
// return the one value which is checked, otherwise undefined
const checkedInput = this.inputs.find(i => i.checked);
const checkedInput = this.inputs.find(i => i.checked === true);
console.debug('returning', checkedInput ? checkedInput.value : undefined);
return checkedInput ? checkedInput.value : undefined;
}
Expand Down Expand Up @@ -259,10 +232,6 @@ export class Alert implements OverlayInterface {
return values;
}

private playAnimation(animationBuilder: AnimationBuilder): Promise<void> {
return overlayAnimation(this, animationBuilder, this.willAnimate, this.el, undefined);
}

private renderCheckbox(inputs: AlertInput[]) {
if (inputs.length === 0) return null;

Expand Down Expand Up @@ -488,10 +457,3 @@ export interface AlertDismissEventDetail extends OverlayDismissEventDetail {
export interface AlertDismissEvent extends OverlayDismissEvent {
// keep this just for the sake of static types and potential future extensions
}

export {
iosEnterAnimation as iosAlertEnterAnimation,
iosLeaveAnimation as iosAlertLeaveAnimation,
mdEnterAnimation as mdAlertEnterAnimation,
mdLeaveAnimation as mdAlertLeaveAnimation,
};
4 changes: 2 additions & 2 deletions packages/core/src/components/alert/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ Emitted after the alert has dismissed.

#### ionAlertDidLoad

Emitted after the alert has loaded.
Emitted after the alert has presented.


#### ionAlertDidPresent
Expand All @@ -227,7 +227,7 @@ Emitted after the alert has presented.

#### ionAlertDidUnload

Emitted after the alert has unloaded.
Emitted before the alert has presented.


#### ionAlertWillDismiss
Expand Down
Loading

0 comments on commit 6383a54

Please sign in to comment.