mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
260
core/src/components/action-sheet/action-sheet.tsx
Normal file
260
core/src/components/action-sheet/action-sheet.tsx
Normal file
@ -0,0 +1,260 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
|
||||
import { Animation, AnimationBuilder, Config, CssClassMap, OverlayDismissEvent } from '../../index';
|
||||
|
||||
import { createThemedClasses, getClassMap } from '../../utils/theme';
|
||||
import { BACKDROP, OverlayInterface, dismiss, present } from '../../utils/overlays';
|
||||
|
||||
import iosEnterAnimation from './animations/ios.enter';
|
||||
import iosLeaveAnimation from './animations/ios.leave';
|
||||
|
||||
import mdEnterAnimation from './animations/md.enter';
|
||||
import mdLeaveAnimation from './animations/md.leave';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-action-sheet',
|
||||
styleUrls: {
|
||||
ios: 'action-sheet.ios.scss',
|
||||
md: 'action-sheet.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'action-sheet'
|
||||
}
|
||||
})
|
||||
export class ActionSheet implements OverlayInterface {
|
||||
|
||||
presented = false;
|
||||
mode: string;
|
||||
color: string;
|
||||
animation: Animation|undefined;
|
||||
|
||||
@Element() el: HTMLElement;
|
||||
|
||||
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: HTMLIonAnimationControllerElement;
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop() overlayId: number;
|
||||
|
||||
/**
|
||||
* Animation to use when the action sheet is presented.
|
||||
*/
|
||||
@Prop() enterAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* Animation to use when the action sheet is dismissed.
|
||||
*/
|
||||
@Prop() leaveAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* An array of buttons for the action sheet.
|
||||
*/
|
||||
@Prop() buttons: ActionSheetButton[];
|
||||
|
||||
/**
|
||||
* Additional classes to apply for custom CSS. If multiple classes are
|
||||
* provided they should be separated by spaces.
|
||||
*/
|
||||
@Prop() cssClass: string;
|
||||
|
||||
/**
|
||||
* If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
*/
|
||||
@Prop() enableBackdropDismiss = true;
|
||||
|
||||
/**
|
||||
* Subtitle for the action sheet.
|
||||
*/
|
||||
@Prop() subTitle: string;
|
||||
|
||||
/**
|
||||
* Title for the action sheet.
|
||||
*/
|
||||
@Prop() title: string;
|
||||
|
||||
/**
|
||||
* If true, the action sheet will be translucent. Defaults to `false`.
|
||||
*/
|
||||
@Prop() translucent = false;
|
||||
|
||||
/**
|
||||
* If true, the action sheet will animate. Defaults to `true`.
|
||||
*/
|
||||
@Prop() willAnimate = true;
|
||||
|
||||
/**
|
||||
* Emitted after the alert has loaded.
|
||||
*/
|
||||
@Event() ionActionSheetDidLoad: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted after the alert has unloaded.
|
||||
*/
|
||||
@Event() ionActionSheetDidUnload: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted after the alert has presented.
|
||||
*/
|
||||
@Event({eventName: 'ionActionSheetDidPresent'}) didPresent: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted before the alert has presented.
|
||||
*/
|
||||
@Event({eventName: 'ionActionSheetWillPresent'}) willPresent: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted before the alert has dismissed.
|
||||
*/
|
||||
@Event({eventName: 'ionActionSheetWillDismiss'}) willDismiss: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted after the alert has dismissed.
|
||||
*/
|
||||
@Event({eventName: 'ionActionSheetDidDismiss'}) didDismiss: EventEmitter;
|
||||
|
||||
|
||||
componentDidLoad() {
|
||||
this.ionActionSheetDidLoad.emit();
|
||||
}
|
||||
|
||||
componentDidUnload() {
|
||||
this.ionActionSheetDidUnload.emit();
|
||||
}
|
||||
|
||||
@Listen('ionBackdropTap')
|
||||
protected onBackdropTap() {
|
||||
this.dismiss(null, BACKDROP);
|
||||
}
|
||||
|
||||
/**
|
||||
* Present the action sheet overlay after it has been created.
|
||||
*/
|
||||
@Method()
|
||||
present(): Promise<void> {
|
||||
return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation, undefined);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss the action sheet overlay after it has been presented.
|
||||
*/
|
||||
@Method()
|
||||
dismiss(data?: any, role?: string): Promise<void> {
|
||||
return dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation, undefined);
|
||||
}
|
||||
|
||||
protected buttonClick(button: ActionSheetButton) {
|
||||
let shouldDismiss = true;
|
||||
if (button.handler) {
|
||||
if (button.handler() === false) {
|
||||
shouldDismiss = false;
|
||||
}
|
||||
}
|
||||
if (shouldDismiss) {
|
||||
this.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'action-sheet-translucent') : {};
|
||||
|
||||
return {
|
||||
style: {
|
||||
zIndex: 20000 + this.overlayId,
|
||||
},
|
||||
class: {
|
||||
...themedClasses,
|
||||
...getClassMap(this.cssClass)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const allButtons = this.buttons.map(b => {
|
||||
if (typeof b === 'string') {
|
||||
b = { text: b };
|
||||
}
|
||||
if (!b.cssClass) {
|
||||
b.cssClass = '';
|
||||
}
|
||||
return b;
|
||||
});
|
||||
const cancelButton = allButtons.find(b => b.role === 'cancel');
|
||||
const buttons = allButtons.filter(b => b.role !== 'cancel');
|
||||
|
||||
return [
|
||||
<ion-backdrop tappable={this.enableBackdropDismiss}/>,
|
||||
<div class='action-sheet-wrapper' role='dialog'>
|
||||
<div class='action-sheet-container'>
|
||||
<div class='action-sheet-group'>
|
||||
{this.title
|
||||
? <div class='action-sheet-title'>
|
||||
{this.title}
|
||||
{this.subTitle
|
||||
? <div class='action-sheet-sub-title'>{this.subTitle}</div>
|
||||
: null}
|
||||
</div>
|
||||
: null}
|
||||
{buttons.map(b =>
|
||||
<button class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
|
||||
<span class='action-sheet-button-inner'>
|
||||
{b.icon
|
||||
? <ion-icon name={b.icon} class='action-sheet-icon' />
|
||||
: null}
|
||||
{b.text}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{cancelButton
|
||||
? <div class='action-sheet-group action-sheet-group-cancel'>
|
||||
<button
|
||||
class={buttonClass(cancelButton)}
|
||||
onClick={() => this.buttonClick(cancelButton)}
|
||||
>
|
||||
<span class='action-sheet-button-inner'>
|
||||
{cancelButton.icon
|
||||
? <ion-icon
|
||||
name={cancelButton.icon}
|
||||
class='action-sheet-icon'
|
||||
/>
|
||||
: null}
|
||||
{cancelButton.text}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
function buttonClass(button: ActionSheetButton): CssClassMap {
|
||||
const buttonClasses: any = {
|
||||
'action-sheet-button': true,
|
||||
...getClassMap(button.cssClass),
|
||||
};
|
||||
if (button.role) {
|
||||
buttonClasses[`action-sheet-${button.role}`] = true;
|
||||
}
|
||||
return buttonClasses;
|
||||
}
|
||||
|
||||
export interface ActionSheetOptions {
|
||||
title?: string;
|
||||
subTitle?: string;
|
||||
cssClass?: string;
|
||||
buttons?: (ActionSheetButton | string)[];
|
||||
enableBackdropDismiss?: boolean;
|
||||
translucent?: boolean;
|
||||
}
|
||||
|
||||
export interface ActionSheetButton {
|
||||
text?: string;
|
||||
role?: 'cancel' | 'destructive' | 'selected' | string;
|
||||
icon?: string;
|
||||
cssClass?: string;
|
||||
handler?: () => boolean | void;
|
||||
}
|
||||
|
||||
export interface ActionSheetDismissEvent extends OverlayDismissEvent {
|
||||
// keep this just for the sake of static types and potential future extensions
|
||||
}
|
||||
Reference in New Issue
Block a user