javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): resolve merge conflicts for beta

Browse Source
This commit is contained in:
Liam DeBeasi
2021-09-15 12:02:43 -04:00
parent 18765e7e39 874e791377
commit ecb30af4d8
46 changed files with 440 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/loading/loading-interface.ts
View File

@ -1,3 +1,5 @@
import { JSXBase } from '@stencil/core/internal';
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
import { IonicSafeString } from '../../utils/sanitization';
@ -13,7 +15,10 @@ export interface LoadingOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
htmlAttributes?: LoadingAttributes;
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
export interface LoadingAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}

12
core/src/components/loading/loading.tsx
View File

@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { AnimationBuilder, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
import { AnimationBuilder, LoadingAttributes, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
import { IonicSafeString, sanitizeDOMString } from '../../utils/sanitization';
import { getClassMap } from '../../utils/theme';
@ -92,6 +92,11 @@ export class Loading implements ComponentInterface, OverlayInterface {
*/
@Prop() animated = true;
/**
* Additional attributes to pass to the loader.
*/
@Prop() htmlAttributes?: LoadingAttributes;
/**
* Emitted after the loading has presented.
*/
@ -179,15 +184,16 @@ export class Loading implements ComponentInterface, OverlayInterface {
}
render() {
const { message, spinner } = this;
const { message, spinner, htmlAttributes } = this;
const mode = getIonMode(this);
return (
<Host
onIonBackdropTap={this.onBackdropTap}
tabindex="-1"
{...htmlAttributes as any}
style={{
zIndex: `${40000 + this.overlayIndex}`
}}
onIonBackdropTap={this.onBackdropTap}
class={{
...getClassMap(this.cssClass),
[mode]: true,

8
core/src/components/loading/readme.md
View File

@ -54,12 +54,19 @@ interface LoadingOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
htmlAttributes?: LoadingAttributes;
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
```
### LoadingAttributes
```typescript
interface LoadingAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
```
<!-- Auto Generated Below -->
@ -375,6 +382,7 @@ export default defineComponent({
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `LoadingAttributes \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` |

16
core/src/components/loading/test/basic/e2e.ts
View File

@ -95,3 +95,19 @@ test('loading:rtl: backdrop standalone', async () => {
test('loading:rtl: html content basic', async () => {
await testLoading(DIRECTORY, '#html-content-loading', true);
});
test('loading: htmlAttributes', async () => {
const page = await newE2EPage({ url: '/src/components/loading/test/basic?ionic:_testing=true' });
await page.click('#basic-loading');
await page.waitForSelector('#basic-loading');
let alert = await page.find('ion-loading');
expect(alert).not.toBe(null);
await alert.waitForVisible();
const attribute = await page.evaluate((el) => document.querySelector('ion-loading').getAttribute('data-testid'));
expect(attribute).toEqual('basic-loading');
});

2
core/src/components/loading/test/basic/index.html
View File

@ -24,7 +24,7 @@
</ion-header>
<ion-content class="ion-padding">
<ion-button id="basic-loading" expand="block" onclick="openLoading({ message: 'Hellooo', duration: 2000 })">Show Loading</ion-button>
<ion-button id="basic-loading" expand="block" onclick="openLoading({ message: 'Hellooo', duration: 2000, htmlAttributes: { 'data-testid': 'basic-loading' } })">Show Loading</ion-button>
<ion-button id="default" expand="block" onclick="openLoading({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
<ion-button id="long-content-loading" expand="block" onclick="openLoading({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
<ion-button id="no-spinner-loading" expand="block" onclick="openLoading({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>