javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(content): change main child element to div when parent is menu (#23160)

Browse Source 
* fix(content): change main child element to div when parent is menu

* fix(content): change main child element to div when parent is menu, popover, or modal

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

* fix(content): make closest element detector unreactive

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
William Martin
2021-04-12 09:22:24 -04:00
committed by GitHub
parent 91ac340ae7
commit 2d07d8216a
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,7 @@ export class Content implements ComponentInterface {
private cTop = -1; private cTop = -1;
private cBottom = -1; private cBottom = -1;
private scrollEl!: HTMLElement; private scrollEl!: HTMLElement;
private isMainContent = true;
// Detail is used in a hot loop in the scroll event, by allocating it here // Detail is used in a hot loop in the scroll event, by allocating it here
// V8 will be able to inline any read/write to it since it's a monomorphic class. // V8 will be able to inline any read/write to it since it's a monomorphic class.
@ -105,6 +106,10 @@ export class Content implements ComponentInterface {
*/ */
@Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>; @Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>;
connectedCallback() {
this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
}
disconnectedCallback() { disconnectedCallback() {
this.onScrollEnd(); this.onScrollEnd();
} }
@ -304,9 +309,10 @@ export class Content implements ComponentInterface {
} }
render() { render() {
const { scrollX, scrollY } = this; const { isMainContent, scrollX, scrollY } = this;
const mode = getIonMode(this); const mode = getIonMode(this);
const forceOverscroll = this.shouldForceOverscroll(); const forceOverscroll = this.shouldForceOverscroll();
const TagType = isMainContent ? 'main' : 'div' as any;
const transitionShadow = (mode === 'ios' && config.getBoolean('experimentalTransitionShadow', true)); const transitionShadow = (mode === 'ios' && config.getBoolean('experimentalTransitionShadow', true));
this.resize(); this.resize();
@ -324,19 +330,19 @@ export class Content implements ComponentInterface {
}} }}
> >
<div id="background-content" part="background"></div> <div id="background-content" part="background"></div>
<main <TagType
class={{ class={{
'inner-scroll': true, 'inner-scroll': true,
'scroll-x': scrollX, 'scroll-x': scrollX,
'scroll-y': scrollY, 'scroll-y': scrollY,
'overscroll': (scrollX || scrollY) && forceOverscroll 'overscroll': (scrollX || scrollY) && forceOverscroll
}} }}
ref={el => this.scrollEl = el!} ref={(el: HTMLElement) => this.scrollEl = el!}
onScroll={(this.scrollEvents) ? ev => this.onScroll(ev) : undefined} onScroll={(this.scrollEvents) ? (ev: UIEvent) => this.onScroll(ev) : undefined}
part="scroll" part="scroll"
> >
<slot></slot> <slot></slot>
</main> </TagType>
{transitionShadow ? ( {transitionShadow ? (
<div class="transition-effect"> <div class="transition-effect">