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(): update to Stencil One 🎉🎊

Browse Source
This commit is contained in:
Manu MA
2019-06-19 21:33:50 +02:00
committed by GitHub
parent 7f1829eb21
commit b40f7d36d5
572 changed files with 14426 additions and 9916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,16 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State, h } from '@stencil/core';
import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
import { Animation, AnimationBuilder, Config, CssClassMap, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
import { dismiss, eventMethod, present } from '../../utils/overlays';
import { getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-picker',
styleUrls: {
@ -18,6 +22,8 @@ import { iosLeaveAnimation } from './animations/ios.leave';
export class Picker implements ComponentInterface, OverlayInterface {
private durationTimeout: any;
mode = getIonMode(this);
animation?: Animation;
@Element() el!: HTMLElement;
@ -29,11 +35,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
/** @internal */
@Prop() overlayIndex!: number;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
*/
@ -209,13 +210,14 @@ export class Picker implements ComponentInterface, OverlayInterface {
}
hostData() {
const mode = getIonMode(this);
return {
'aria-modal': 'true',
class: {
[`${this.mode}`]: true,
[`${mode}`]: true,
// Used internally for styling
[`picker-${this.mode}`]: true,
[`picker-${mode}`]: true,
...getClassMap(this.cssClass)
},

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

@ -26,12 +26,12 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
## Events
| Event | Description | Type |
| ---------------------- | ---------------------------------------- | --------------------------------- |
| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | `CustomEvent<OverlayEventDetail>` |
| `ionPickerDidPresent` | Emitted after the picker has presented. | `CustomEvent<void>` |
| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | `CustomEvent<OverlayEventDetail>` |
| `ionPickerWillPresent` | Emitted before the picker has presented. | `CustomEvent<void>` |
| Event | Description | Type |
| ---------------------- | ---------------------------------------- | -------------------------------------- |
| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | `CustomEvent<OverlayEventDetail<any>>` |
| `ionPickerDidPresent` | Emitted after the picker has presented. | `CustomEvent<void>` |
| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | `CustomEvent<OverlayEventDetail<any>>` |
| `ionPickerWillPresent` | Emitted before the picker has presented. | `CustomEvent<void>` |
## Methods
@ -40,13 +40,6 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
Dismiss the picker overlay after it has been presented.
#### Parameters
| Name | Type | Description |
| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data` | `any` | Any data to emit in the dismiss events. |
| `role` | `string \| undefined` | The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |
#### Returns
Type: `Promise<boolean>`
@ -57,12 +50,6 @@ Type: `Promise<boolean>`
Get the column that matches the specified name.
#### Parameters
| Name | Type | Description |
| ------ | -------- | ----------------------- |
| `name` | `string` | The name of the column. |
#### Returns
Type: `Promise<PickerColumn | undefined>`
@ -118,6 +105,21 @@ Type: `Promise<void>`
| `--width` | Width of the picker |
## Dependencies
### Depends on
- [ion-backdrop](../backdrop)
- ion-picker-column
### Graph
```mermaid
graph TD;
ion-picker --> ion-backdrop
ion-picker --> ion-picker-column
style ion-picker fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

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

@ -8,8 +8,8 @@
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>