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

fix(overlays): make them hidden until presented (#16903)

Browse Source 
fixes #16685
This commit is contained in:
Manu MA
2018-12-29 01:31:33 +01:00
committed by GitHub
parent 3d656ac312
commit 302be5392c
25 changed files with 35 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/picker/picker.scss
View File

@ -45,6 +45,10 @@
z-index: $z-index-overlay;
}
:host(.overlay-hidden) {
display: none;
}
.picker-wrapper {
@include border-radius(var(--border-radius));
@include position(null, 0, 0, 0);

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

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
import { dismiss, eventMethod, present } from '../../utils/overlays';
@ -18,13 +18,14 @@ import { iosLeaveAnimation } from './animations/ios.leave';
export class Picker implements ComponentInterface, OverlayInterface {
private durationTimeout: any;
presented = false;
animation?: Animation;
@Element() el!: HTMLElement;
@Prop({ context: 'config' }) config!: Config;
@State() presented = false;
/** @internal */
@Prop() overlayIndex!: number;
@ -84,11 +85,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
*/
@Prop() animated = true;
/**
* Emitted after the picker has loaded.
*/
@Event() ionPickerDidLoad!: EventEmitter<void>;
/**
* Emitted after the picker has presented.
*/
@ -109,19 +105,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
*/
@Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
/**
* Emitted after the picker has unloaded.
*/
@Event() ionPickerDidUnload!: EventEmitter<void>;
componentDidLoad() {
this.ionPickerDidLoad.emit();
}
componentDidUnload() {
this.ionPickerDidUnload.emit();
}
@Listen('ionBackdropTap')
protected onBackdropTap() {
const cancelBtn = this.buttons.find(b => b.role === 'cancel');
@ -253,7 +236,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
<div class="picker-columns">
<div class="picker-above-highlight"></div>
{this.columns.map(c =>
{this.presented && this.columns.map(c =>
<ion-picker-column col={c}></ion-picker-column>
)}
<div class="picker-below-highlight"></div>

2
core/src/components/picker/readme.md
View File

@ -29,9 +29,7 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
| Event | Description | Type |
| ---------------------- | ---------------------------------------- | --------------------------------- |
| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | `CustomEvent<OverlayEventDetail>` |
| `ionPickerDidLoad` | Emitted after the picker has loaded. | `CustomEvent<void>` |
| `ionPickerDidPresent` | Emitted after the picker has presented. | `CustomEvent<void>` |
| `ionPickerDidUnload` | Emitted after the picker has unloaded. | `CustomEvent<void>` |
| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | `CustomEvent<OverlayEventDetail>` |
| `ionPickerWillPresent` | Emitted before the picker has presented. | `CustomEvent<void>` |