javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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 14833 additions and 10323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/action-sheet/action-sheet.tsx
View File

@ -1,6 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, h } from '@stencil/core';
import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
import { getClassMap } from '../../utils/theme';
@ -9,6 +10,9 @@ import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-action-sheet',
styleUrls: {
@ -21,6 +25,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
presented = false;
animation?: Animation;
mode = getIonMode(this);
@Element() el!: HTMLElement;
@ -28,11 +33,6 @@ export class ActionSheet 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.
*/
@ -195,6 +195,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
}
hostData() {
const mode = getIonMode(this);
return {
'role': 'dialog',
'aria-modal': 'true',
@ -202,7 +204,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
zIndex: 20000 + this.overlayIndex,
},
class: {
[`${this.mode}`]: true,
[`${mode}`]: true,
...getClassMap(this.cssClass),
'action-sheet-translucent': this.translucent
@ -211,6 +213,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
}
render() {
const mode = getIonMode(this);
const allButtons = this.getButtons();
const cancelButton = allButtons.find(b => b.role === 'cancel');
const buttons = allButtons.filter(b => b.role !== 'cancel');
@ -232,7 +235,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
{b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
{b.text}
</span>
{this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
)}
</div>

70
core/src/components/action-sheet/readme.md
View File

@ -126,28 +126,19 @@ async function presentActionSheet() {
### React
```typescript
import React, { Component } from 'react'
import { IonActionSheet } from '@ionic/react';
import React, { useState } from 'react'
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
type Props = {}
type State = {
showActionSheet: boolean
}
export default class ActionSheetExample extends Component<Props, State> {
export const ActionSheetExample: React.FunctionComponent = () => {
constructor(props: Props) {
super(props);
this.state = {
showActionSheet: false
};
}
const [showActionSheet, setShowActionSheet] = useState(false);
render() {
return (
return (
<IonContent>
<IonButton onClick={() => setShowActionSheet(true)} expand="block">Show Action Sheet</IonButton>
<IonActionSheet
isOpen={this.state.showActionSheet}
onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
isOpen={showActionSheet}
onDidDismiss={() => setShowActionSheet(false)}
buttons={[{
text: 'Delete',
role: 'destructive',
@ -183,9 +174,12 @@ export default class ActionSheetExample extends Component<Props, State> {
}]}
>
</IonActionSheet>
);
}
</IonContent>
);
}
```
@ -273,12 +267,12 @@ export default {
## Events
| Event | Description | Type |
| --------------------------- | --------------------------------------- | --------------------------------- |
| `ionActionSheetDidDismiss` | Emitted after the alert has dismissed. | `CustomEvent<OverlayEventDetail>` |
| `ionActionSheetDidPresent` | Emitted after the alert has presented. | `CustomEvent<void>` |
| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail>` |
| `ionActionSheetWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>` |
| Event | Description | Type |
| --------------------------- | --------------------------------------- | -------------------------------------- |
| `ionActionSheetDidDismiss` | Emitted after the alert has dismissed. | `CustomEvent<OverlayEventDetail<any>>` |
| `ionActionSheetDidPresent` | Emitted after the alert has presented. | `CustomEvent<void>` |
| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail<any>>` |
| `ionActionSheetWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>` |
## Methods
@ -287,13 +281,6 @@ export default {
Dismiss the action sheet 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 action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |
#### Returns
Type: `Promise<boolean>`
@ -347,6 +334,23 @@ Type: `Promise<void>`
| `--width` | Width of the action sheet |
## Dependencies
### Depends on
- [ion-backdrop](../backdrop)
- ion-icon
- [ion-ripple-effect](../ripple-effect)
### Graph
```mermaid
graph TD;
ion-action-sheet --> ion-backdrop
ion-action-sheet --> ion-icon
ion-action-sheet --> ion-ripple-effect
style ion-action-sheet fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

4
core/src/components/action-sheet/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>

4
core/src/components/action-sheet/test/preview/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>

4
core/src/components/action-sheet/test/spec/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>

4
core/src/components/action-sheet/test/standalone/index.html
View File

@ -8,8 +8,8 @@
<link href="../../../../../css/core.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>
<button id="basic" onclick="presentBasic()">Basic</button>

4
core/src/components/action-sheet/test/translucent/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>

34
core/src/components/action-sheet/usage/react.md
View File

@ -1,26 +1,17 @@
```typescript
import React, { Component } from 'react'
import { IonActionSheet } from '@ionic/react';
import React, { useState } from 'react'
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
type Props = {}
type State = {
showActionSheet: boolean
}
export default class ActionSheetExample extends Component<Props, State> {
export const ActionSheetExample: React.FunctionComponent = () => {
constructor(props: Props) {
super(props);
this.state = {
showActionSheet: false
};
}
const [showActionSheet, setShowActionSheet] = useState(false);
render() {
return (
return (
<IonContent>
<IonButton onClick={() => setShowActionSheet(true)} expand="block">Show Action Sheet</IonButton>
<IonActionSheet
isOpen={this.state.showActionSheet}
onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
isOpen={showActionSheet}
onDidDismiss={() => setShowActionSheet(false)}
buttons={[{
text: 'Delete',
role: 'destructive',
@ -56,7 +47,10 @@ export default class ActionSheetExample extends Component<Props, State> {
}]}
>
</IonActionSheet>
);
}
</IonContent>
);
}
```