mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(all): avoid using export const enum (#16614)
* refactor(all): avoid using export const enum fixes #16497 * add tslint
This commit is contained in:
7
core/src/components/virtual-scroll/constants.ts
Normal file
7
core/src/components/virtual-scroll/constants.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export const CELL_TYPE_ITEM = 'item';
|
||||
export const CELL_TYPE_HEADER = 'header';
|
||||
export const CELL_TYPE_FOOTER = 'footer';
|
||||
|
||||
export const NODE_CHANGE_NONE = 0;
|
||||
export const NODE_CHANGE_POSITION = 1;
|
||||
export const NODE_CHANGE_CELL = 2;
|
@ -1,6 +1,6 @@
|
||||
import { HeaderFn, ItemHeightFn, VirtualNode } from '../../../interface';
|
||||
import { CellType } from '../virtual-scroll-interface';
|
||||
import { Range, calcCells, calcHeightIndex, getRange, getShouldUpdate, getViewport, positionForIndex, resizeBuffer, updateVDom } from '../virtual-scroll-utils';
|
||||
import { CELL_TYPE_ITEM, CELL_TYPE_HEADER, CELL_TYPE_FOOTER } from '../constants';
|
||||
|
||||
describe('getViewport', () => {
|
||||
it('should return viewport without margin', () => {
|
||||
@ -149,7 +149,7 @@ describe('calcCells', () => {
|
||||
const cells = calcCells(items, undefined, undefined, undefined, 10, 20, 30, 0, 0, items.length);
|
||||
expect(cells).toEqual([
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: '0',
|
||||
i: 0,
|
||||
index: 0,
|
||||
@ -158,7 +158,7 @@ describe('calcCells', () => {
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: 2,
|
||||
i: 1,
|
||||
index: 1,
|
||||
@ -167,7 +167,7 @@ describe('calcCells', () => {
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: 'hola',
|
||||
i: 2,
|
||||
index: 2,
|
||||
@ -176,7 +176,7 @@ describe('calcCells', () => {
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: { data: 'hello' },
|
||||
i: 3,
|
||||
index: 3,
|
||||
@ -200,7 +200,7 @@ describe('calcCells', () => {
|
||||
expect(called).toEqual(3);
|
||||
expect(cells).toEqual([
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: 10,
|
||||
i: 0,
|
||||
index: 0,
|
||||
@ -209,7 +209,7 @@ describe('calcCells', () => {
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: 9,
|
||||
i: 1,
|
||||
index: 1,
|
||||
@ -218,7 +218,7 @@ describe('calcCells', () => {
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: 8,
|
||||
i: 2,
|
||||
index: 2,
|
||||
@ -258,7 +258,7 @@ describe('calcCells', () => {
|
||||
expect(footerCalled).toEqual(3);
|
||||
expect(cells).toEqual([
|
||||
{
|
||||
type: CellType.Header,
|
||||
type: CELL_TYPE_HEADER,
|
||||
value: 'my header',
|
||||
i: 0,
|
||||
index: 0,
|
||||
@ -267,7 +267,7 @@ describe('calcCells', () => {
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: '10',
|
||||
i: 1,
|
||||
index: 0,
|
||||
@ -276,7 +276,7 @@ describe('calcCells', () => {
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: '9',
|
||||
i: 2,
|
||||
index: 1,
|
||||
@ -285,7 +285,7 @@ describe('calcCells', () => {
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: '8',
|
||||
i: 3,
|
||||
index: 2,
|
||||
@ -294,7 +294,7 @@ describe('calcCells', () => {
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
type: CellType.Footer,
|
||||
type: CELL_TYPE_FOOTER,
|
||||
value: 'my footer',
|
||||
i: 4,
|
||||
index: 2,
|
||||
|
@ -1,16 +1,4 @@
|
||||
|
||||
export const enum CellType {
|
||||
Item,
|
||||
Header,
|
||||
Footer
|
||||
}
|
||||
|
||||
export const enum NodeChange {
|
||||
NoChange,
|
||||
Position,
|
||||
Cell,
|
||||
}
|
||||
|
||||
export interface Cell {
|
||||
i: number;
|
||||
index: number;
|
||||
@ -29,6 +17,8 @@ export interface VirtualNode {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
export type CellType = 'item' | 'header' | 'footer';
|
||||
export type NodeChange = number;
|
||||
export type HeaderFn = (item: any, index: number, items: any[]) => string | null | undefined;
|
||||
export type ItemHeightFn = (item: any, index: number) => number;
|
||||
export type ItemRenderFn = (el: HTMLElement | null, cell: Cell, domIndex: number) => HTMLElement;
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { Cell, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
|
||||
|
||||
import { CellType, NodeChange } from './virtual-scroll-interface';
|
||||
import { CELL_TYPE_FOOTER, CELL_TYPE_HEADER, CELL_TYPE_ITEM, NODE_CHANGE_CELL, NODE_CHANGE_NONE, NODE_CHANGE_POSITION } from './constants';
|
||||
import { CellType } from './virtual-scroll-interface';
|
||||
|
||||
export interface Viewport {
|
||||
top: number;
|
||||
@ -17,7 +18,7 @@ const MIN_READS = 2;
|
||||
export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells: Cell[], range: Range) {
|
||||
// reset dom
|
||||
for (const node of dom) {
|
||||
node.change = NodeChange.NoChange;
|
||||
node.change = NODE_CHANGE_NONE;
|
||||
node.d = true;
|
||||
}
|
||||
|
||||
@ -32,7 +33,7 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
|
||||
const top = heightIndex[i];
|
||||
if (top !== node.top) {
|
||||
node.top = top;
|
||||
node.change = NodeChange.Position;
|
||||
node.change = NODE_CHANGE_POSITION;
|
||||
}
|
||||
node.d = false;
|
||||
} else {
|
||||
@ -48,7 +49,7 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
|
||||
const index = cell.index;
|
||||
if (node) {
|
||||
node.d = false;
|
||||
node.change = NodeChange.Cell;
|
||||
node.change = NODE_CHANGE_CELL;
|
||||
node.cell = cell;
|
||||
node.top = heightIndex[index];
|
||||
} else {
|
||||
@ -56,7 +57,7 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
|
||||
d: false,
|
||||
cell,
|
||||
visible: true,
|
||||
change: NodeChange.Cell,
|
||||
change: NODE_CHANGE_CELL,
|
||||
top: heightIndex[index],
|
||||
});
|
||||
}
|
||||
@ -64,7 +65,7 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
|
||||
dom
|
||||
.filter(n => n.d && n.top !== -9999)
|
||||
.forEach(n => {
|
||||
n.change = NodeChange.Position;
|
||||
n.change = NODE_CHANGE_POSITION;
|
||||
n.top = -9999;
|
||||
});
|
||||
}
|
||||
@ -83,7 +84,7 @@ export function doRender(
|
||||
const cell = node.cell;
|
||||
|
||||
// the cell change, the content must be updated
|
||||
if (node.change === NodeChange.Cell) {
|
||||
if (node.change === NODE_CHANGE_CELL) {
|
||||
if (i < childrenNu) {
|
||||
child = children[i] as HTMLElement;
|
||||
nodeRender(child, cell, i);
|
||||
@ -99,7 +100,7 @@ export function doRender(
|
||||
}
|
||||
|
||||
// only update position when it changes
|
||||
if (node.change !== NodeChange.NoChange) {
|
||||
if (node.change !== NODE_CHANGE_NONE) {
|
||||
child.style.transform = `translate3d(0,${node.top}px,0)`;
|
||||
}
|
||||
|
||||
@ -132,9 +133,9 @@ function createNode(el: HTMLElement, type: CellType): HTMLElement | null {
|
||||
|
||||
function getTemplate(el: HTMLElement, type: CellType): HTMLTemplateElement | null {
|
||||
switch (type) {
|
||||
case CellType.Item: return el.querySelector('template:not([name])');
|
||||
case CellType.Header: return el.querySelector('template[name=header]');
|
||||
case CellType.Footer: return el.querySelector('template[name=footer]');
|
||||
case CELL_TYPE_ITEM: return el.querySelector('template:not([name])');
|
||||
case CELL_TYPE_HEADER: return el.querySelector('template[name=header]');
|
||||
case CELL_TYPE_FOOTER: return el.querySelector('template[name=footer]');
|
||||
}
|
||||
}
|
||||
|
||||
@ -220,7 +221,7 @@ export function calcCells(
|
||||
if (value != null) {
|
||||
cells.push({
|
||||
i: j++,
|
||||
type: CellType.Header,
|
||||
type: CELL_TYPE_HEADER,
|
||||
value,
|
||||
index: i,
|
||||
height: approxHeaderHeight,
|
||||
@ -232,7 +233,7 @@ export function calcCells(
|
||||
|
||||
cells.push({
|
||||
i: j++,
|
||||
type: CellType.Item,
|
||||
type: CELL_TYPE_ITEM,
|
||||
value: item,
|
||||
index: i,
|
||||
height: itemHeight ? itemHeight(item, i) : approxItemHeight,
|
||||
@ -245,7 +246,7 @@ export function calcCells(
|
||||
if (value != null) {
|
||||
cells.push({
|
||||
i: j++,
|
||||
type: CellType.Footer,
|
||||
type: CELL_TYPE_FOOTER,
|
||||
value,
|
||||
index: i,
|
||||
height: approxFooterHeight,
|
||||
@ -283,7 +284,7 @@ export function resizeBuffer(buf: Uint32Array | undefined, len: number) {
|
||||
}
|
||||
|
||||
export function positionForIndex(index: number, cells: Cell[], heightIndex: Uint32Array): number {
|
||||
const cell = cells.find(c => c.type === CellType.Item && c.index === index);
|
||||
const cell = cells.find(c => c.type === CELL_TYPE_ITEM && c.index === index);
|
||||
if (cell) {
|
||||
return heightIndex[cell.i];
|
||||
}
|
||||
|
@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, EventListenerEnable, Functional
|
||||
|
||||
import { Cell, DomRenderFn, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
|
||||
|
||||
import { CellType } from './virtual-scroll-interface';
|
||||
import { CELL_TYPE_FOOTER, CELL_TYPE_HEADER, CELL_TYPE_ITEM } from './constants';
|
||||
import { Range, calcCells, calcHeightIndex, doRender, findCellIndex, getRange, getShouldUpdate, getViewport, inplaceUpdate, positionForIndex, resizeBuffer, updateVDom } from './virtual-scroll-utils';
|
||||
|
||||
@Component({
|
||||
@ -411,9 +411,9 @@ export class VirtualScroll implements ComponentInterface {
|
||||
private renderVirtualNode(node: VirtualNode) {
|
||||
const { type, value, index } = node.cell;
|
||||
switch (type) {
|
||||
case CellType.Item: return this.renderItem!(value, index);
|
||||
case CellType.Header: return this.renderHeader!(value, index);
|
||||
case CellType.Footer: return this.renderFooter!(value, index);
|
||||
case CELL_TYPE_ITEM: return this.renderItem!(value, index);
|
||||
case CELL_TYPE_HEADER: return this.renderHeader!(value, index);
|
||||
case CELL_TYPE_FOOTER: return this.renderFooter!(value, index);
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user