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

refactor(all): updating to newest stencil apis (#18578)

Browse Source 
* chore(): update ionicons

* refactor(all): updating to newest stencil apis

* fix lint issues

* more changes

* moreee

* fix treeshaking

* fix config

* fix checkbox

* fix stuff

* chore(): update ionicons

* fix linting errors
This commit is contained in:
Manu MA
2019-06-23 11:26:42 +02:00
committed by GitHub
parent 78e477b2a7
commit 34dfc3ce98
112 changed files with 1231 additions and 1235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
core/src/components/content/content.tsx
View File

@ -1,7 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Method, Prop, h, readTask } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color, Config, ScrollBaseDetail, ScrollDetail } from '../../interface';
import { Color, ScrollBaseDetail, ScrollDetail } from '../../interface';
import { isPlatform } from '../../utils/platform';
import { createColorClasses, hostContext } from '../../utils/theme';
@ -48,10 +48,6 @@ export class Content implements ComponentInterface {
@Element() el!: HTMLIonContentElement;
@Prop({ context: 'config' }) config!: Config;
@Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ context: 'window' }) win!: Window;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -108,7 +104,7 @@ export class Content implements ComponentInterface {
componentWillLoad() {
if (this.forceOverscroll === undefined) {
const mode = getIonMode(this);
this.forceOverscroll = mode === 'ios' && isPlatform(this.win, 'mobile');
this.forceOverscroll = mode === 'ios' && isPlatform(window, 'mobile');
}
}
@ -130,7 +126,7 @@ export class Content implements ComponentInterface {
private resize() {
if (this.fullscreen) {
this.queue.read(this.readDimensions.bind(this));
readTask(this.readDimensions.bind(this));
} else if (this.cTop !== 0 || this.cBottom !== 0) {
this.cTop = this.cBottom = 0;
this.el.forceUpdate();
@ -159,7 +155,7 @@ export class Content implements ComponentInterface {
}
if (!this.queued && this.scrollEvents) {
this.queued = true;
this.queue.read(ts => {
readTask(ts => {
this.queued = false;
this.detail.event = ev;
updateScrollDetail(this.detail, this.scrollEl, ts, shouldStart);
@ -301,42 +297,40 @@ export class Content implements ComponentInterface {
}
}
hostData() {
const mode = getIonMode(this);
return {
class: {
...createColorClasses(this.color),
[`${mode}`]: true,
'content-sizing': hostContext('ion-popover', this.el),
'overscroll': !!this.forceOverscroll,
},
style: {
'--offset-top': `${this.cTop}px`,
'--offset-bottom': `${this.cBottom}px`,
}
};
}
render() {
const mode = getIonMode(this);
const { scrollX, scrollY, forceOverscroll } = this;
this.resize();
return [
<div
return (
<Host
class={{
'inner-scroll': true,
'scroll-x': scrollX,
'scroll-y': scrollY,
'overscroll': (scrollX || scrollY) && !!forceOverscroll
...createColorClasses(this.color),
[mode]: true,
'content-sizing': hostContext('ion-popover', this.el),
'overscroll': !!this.forceOverscroll,
}}
style={{
'--offset-top': `${this.cTop}px`,
'--offset-bottom': `${this.cBottom}px`,
}}
ref={el => this.scrollEl = el!}
onScroll={ev => this.onScroll(ev)}
>
<slot></slot>
</div>,
<slot name="fixed"></slot>
];
<div
class={{
'inner-scroll': true,
'scroll-x': scrollX,
'scroll-y': scrollY,
'overscroll': (scrollX || scrollY) && !!forceOverscroll
}}
ref={el => this.scrollEl = el!}
onScroll={ev => this.onScroll(ev)}
>
<slot></slot>
</div>
<slot name="fixed"></slot>
</Host>
);
}
}