refactor(all): avoid using export const enum (#16614)

* refactor(all): avoid using export const enum

fixes #16497

* add tslint
This commit is contained in:
Manu MA
2018-12-06 21:19:49 +01:00
committed by GitHub
parent 95c0b1bac7
commit 119e0c1fd2
24 changed files with 150 additions and 166 deletions

View 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;

View File

@ -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,

View File

@ -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;

View File

@ -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];
}

View File

@ -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);
}
}