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

fix(virtual-scroll): use FunctionalComponent for JSX integration

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-11 12:02:39 +02:00
parent e3010e1f0d
commit b53ce4b0e8
2 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/virtual-scroll/virtual-scroll.scss
View File

@ -7,6 +7,8 @@ ion-virtual-scroll {
width: 100%; width: 100%;
contain: strict; contain: strict;
user-select: none;
} }
.virtual-loading { .virtual-loading {

51
core/src/components/virtual-scroll/virtual-scroll.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Component, Element, EventListenerEnable, FunctionalComponent, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
import { Cell, DomRenderFn, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface'; import { Cell, DomRenderFn, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
@ -141,8 +141,6 @@ export class VirtualScroll {
@Listen('window:resize') @Listen('window:resize')
onResize() { onResize() {
this.indexDirty = 0;
this.calcCells();
this.updateVirtualScroll(); this.updateVirtualScroll();
} }
@ -378,25 +376,36 @@ export class VirtualScroll {
} }
render() { render() {
const renderItem = this.renderItem; if (this.renderItem) {
if (renderItem) { return (
return this.virtualDom.map(node => { <VirtualProxy dom={this.virtualDom}>
const item = this.renderVirtualNode(node) as any; { this.virtualDom.map(node => this.renderVirtualNode(node)) }
const classes = ['virtual-item']; </VirtualProxy>
if (!item.vattrs) { );
item.vattrs = {};
}
if (!node.visible) {
classes.push('virtual-loading');
}
item.vattrs.class += classes.join(' ');
if (!item.vattrs.style) {
item.vattrs.style = {};
}
item.vattrs.style['transform'] = `translate3d(0,${node.top}px,0)`;
return item;
});
} }
return undefined; return undefined;
} }
} }
const VirtualProxy: FunctionalComponent<{dom: VirtualNode[]}> = ({ dom }, children, utils) => {
return utils.map(children, (child, i) => {
const node = dom[i];
const vattrs = child.vattrs || {};
let classes = vattrs.class || '';
classes += 'virtual-item ';
if (!node.visible) {
classes += 'virtual-loading';
}
return {
...child,
vattrs: {
...vattrs,
class: classes,
style: {
...vattrs.style,
transform: `translate3d(0,${node.top}px,0)`
}
}
};
});
};