javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(all): update to one (part 3) (#18874)

Browse Source
This commit is contained in:
Manu MA
2019-07-25 20:22:44 +02:00
committed by GitHub
parent 9b85e13493
commit e82648bda2
105 changed files with 1238 additions and 1377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
core/src/components/picker/picker.tsx
View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
@ -104,16 +104,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
*/
@Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
@Listen('ionBackdropTap')
protected onBackdropTap() {
const cancelBtn = this.buttons.find(b => b.role === 'cancel');
if (cancelBtn) {
this.buttonClick(cancelBtn);
} else {
this.dismiss();
}
}
/**
* Present the picker overlay after it has been created.
*/
@ -199,55 +189,63 @@ export class Picker implements ComponentInterface, OverlayInterface {
return selected;
}
hostData() {
const mode = getIonMode(this);
return {
'aria-modal': 'true',
class: {
[mode]: true,
// Used internally for styling
[`picker-${mode}`]: true,
...getClassMap(this.cssClass)
},
style: {
zIndex: 20000 + this.overlayIndex
}
};
private onBackdropTap = () => {
const cancelBtn = this.buttons.find(b => b.role === 'cancel');
if (cancelBtn) {
this.buttonClick(cancelBtn);
} else {
this.dismiss();
}
}
render() {
return [
<ion-backdrop
visible={this.showBackdrop}
tappable={this.backdropDismiss}
>
</ion-backdrop>,
<div class="picker-wrapper" role="dialog">
<div class="picker-toolbar">
{this.buttons.map(b => (
<div class={buttonWrapperClass(b)}>
<button
type="button"
onClick={() => this.buttonClick(b)}
class={buttonClass(b)}
>
{b.text}
</button>
</div>
))}
</div>
const mode = getIonMode(this);
return (
<Host
aria-modal="true"
class={{
[mode]: true,
<div class="picker-columns">
<div class="picker-above-highlight"></div>
{this.presented && this.columns.map(c =>
<ion-picker-column col={c}></ion-picker-column>
)}
<div class="picker-below-highlight"></div>
// Used internally for styling
[`picker-${mode}`]: true,
...getClassMap(this.cssClass)
}}
style={{
zIndex: `${20000 + this.overlayIndex}`
}}
onIonBackdropTap={this.onBackdropTap}
>
<ion-backdrop
visible={this.showBackdrop}
tappable={this.backdropDismiss}
>
</ion-backdrop>
<div class="picker-wrapper" role="dialog">
<div class="picker-toolbar">
{this.buttons.map(b => (
<div class={buttonWrapperClass(b)}>
<button
type="button"
onClick={() => this.buttonClick(b)}
class={buttonClass(b)}
>
{b.text}
</button>
</div>
))}
</div>
<div class="picker-columns">
<div class="picker-above-highlight"></div>
{this.presented && this.columns.map(c =>
<ion-picker-column col={c}></ion-picker-column>
)}
<div class="picker-below-highlight"></div>
</div>
</div>
</div>
];
</Host>
);
}
}

1
core/src/components/picker/test/basic/index.html
View File

@ -46,7 +46,6 @@
<script>
async function presentPicker(customClass) {
const pickerController = document.querySelector('ion-picker-controller');
await pickerController.componentOnReady();
const pickerElement = await pickerController.create({
buttons: [{
text: 'Save',