cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/infinity/src/DomManager.ts

@@ -0,0 +1,225 @@
+import { pListItem } from './DataManager'
+import Tombstone from './Tombstone'
+import { style, cssVendor } from '@better-scroll/shared-utils'
+
+const ANIMATION_DURATION_MS = 200
+
+export default class DomManager {
+  private content: HTMLElement
+  private unusedDom: HTMLElement[] = []
+  private timers: Array<number> = []
+
+  constructor(
+    content: HTMLElement,
+    private renderFn: (data: any, div?: HTMLElement) => HTMLElement,
+    private tombstone: Tombstone
+  ) {
+    this.setContent(content)
+  }
+
+  update(
+    list: Array<pListItem>,
+    start: number,
+    end: number
+  ): {
+    start: number
+    end: number
+    startPos: number
+    startDelta: number
+    endPos: number
+  } {
+    if (start >= list.length) {
+      start = list.length - 1
+    }
+
+    if (end > list.length) {
+      end = list.length
+    }
+
+    this.collectUnusedDom(list, start, end)
+    this.createDom(list, start, end)
+    this.cacheHeight(list, start, end)
+
+    const { startPos, startDelta, endPos } = this.positionDom(list, start, end)
+
+    return {
+      start,
+      startPos,
+      startDelta,
+      end,
+      endPos,
+    }
+  }
+
+  private collectUnusedDom(
+    list: Array<pListItem>,
+    start: number,
+    end: number
+  ): Array<any> {
+    // TODO optimise
+    for (let i = 0; i < list.length; i++) {
+      if (i === start) {
+        i = end - 1
+        continue
+      }
+
+      if (list[i].dom) {
+        const dom = list[i].dom as HTMLElement
+        if (Tombstone.isTombstone(dom)) {
+          this.tombstone.recycleOne(dom)
+          dom.style.display = 'none'
+        } else {
+          this.unusedDom.push(dom)
+        }
+        list[i].dom = null
+      }
+    }
+
+    return list
+  }
+
+  private createDom(list: Array<pListItem>, start: number, end: number): void {
+    for (let i = start; i < end; i++) {
+      let dom = list[i].dom
+      const data = list[i].data
+      if (dom) {
+        if (Tombstone.isTombstone(dom) && data) {
+          list[i].tombstone = dom
+          list[i].dom = null
+        } else {
+          continue
+        }
+      }
+      dom = data
+        ? this.renderFn(data, this.unusedDom.pop())
+        : this.tombstone.getOne()
+      dom.style.position = 'absolute'
+      list[i].dom = dom
+      list[i].pos = -1
+      this.content.appendChild(dom)
+    }
+  }
+
+  private cacheHeight(
+    list: Array<pListItem>,
+    start: number,
+    end: number
+  ): void {
+    for (let i = start; i < end; i++) {
+      if (list[i].data && !list[i].height) {
+        list[i].height = list[i].dom!.offsetHeight
+      }
+    }
+  }
+
+  private positionDom(
+    list: Array<pListItem>,
+    start: number,
+    end: number
+  ): { startPos: number; startDelta: number; endPos: number } {
+    const tombstoneEles: Array<HTMLElement> = []
+    const { start: startPos, delta: startDelta } = this.getStartPos(
+      list,
+      start,
+      end
+    )
+    let pos = startPos
+
+    for (let i = start; i < end; i++) {
+      const tombstone = list[i].tombstone
+      if (tombstone) {
+        const tombstoneStyle = tombstone.style as any
+        tombstoneStyle[
+          style.transition
+        ] = `${cssVendor}transform ${ANIMATION_DURATION_MS}ms, opacity ${ANIMATION_DURATION_MS}ms`
+        tombstoneStyle[style.transform] = `translateY(${pos}px)`
+        tombstoneStyle.opacity = '0'
+
+        list[i].tombstone = null
+        tombstoneEles.push(tombstone)
+      }
+
+      if (list[i].dom && list[i].pos !== pos) {
+        list[i].dom!.style[style.transform as any] = `translateY(${pos}px)`
+        list[i].pos = pos
+      }
+      pos += list[i].height || this.tombstone.height
+    }
+
+    const timerId = window.setTimeout(() => {
+      this.tombstone.recycle(tombstoneEles)
+    }, ANIMATION_DURATION_MS)
+    this.timers.push(timerId)
+
+    return {
+      startPos,
+      startDelta,
+      endPos: pos,
+    }
+  }
+
+  private getStartPos(
+    list: Array<any>,
+    start: number,
+    end: number
+  ): { start: number; delta: number } {
+    if (list[start] && list[start].pos !== -1) {
+      return {
+        start: list[start].pos,
+        delta: 0,
+      }
+    }
+    // TODO optimise
+    let pos = list[0].pos === -1 ? 0 : list[0].pos
+    for (let i = 0; i < start; i++) {
+      pos += list[i].height || this.tombstone.height
+    }
+    let originPos = pos
+
+    let i
+    for (i = start; i < end; i++) {
+      if (!Tombstone.isTombstone(list[i].dom) && list[i].pos !== -1) {
+        pos = list[i].pos
+        break
+      }
+    }
+    let x = i
+    if (x < end) {
+      while (x > start) {
+        pos -= list[x - 1].height
+        x--
+      }
+    }
+    const delta = originPos - pos
+
+    return {
+      start: pos,
+      delta: delta,
+    }
+  }
+
+  removeTombstone(): void {
+    const tombstones = this.content.querySelectorAll('.tombstone')
+    for (let i = tombstones.length - 1; i >= 0; i--) {
+      this.content.removeChild(tombstones[i])
+    }
+  }
+
+  setContent(content: HTMLElement) {
+    if (content !== this.content) {
+      this.content = content
+    }
+  }
+
+  destroy(): void {
+    this.removeTombstone()
+    this.timers.forEach((id) => {
+      clearTimeout(id)
+    })
+  }
+  resetState() {
+    this.destroy()
+    this.timers = []
+    this.unusedDom = []
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/infinity/src/IndexCalculator.ts

@@ -0,0 +1,88 @@
+export const PRE_NUM = 10
+export const POST_NUM = 30
+
+const enum DIRECTION {
+  UP,
+  DOWN,
+}
+
+export default class IndexCalculator {
+  private lastDirection = DIRECTION.DOWN
+  private lastPos = 0
+
+  constructor(public wrapperHeight: number, private tombstoneHeight: number) {}
+
+  calculate(pos: number, list: Array<any>): { start: number; end: number } {
+    let offset = pos - this.lastPos
+    this.lastPos = pos
+
+    const direction = this.getDirection(offset)
+
+    // important! start index is much more important than end index.
+    let start = this.calculateIndex(0, pos, list)
+
+    let end = this.calculateIndex(start, pos + this.wrapperHeight, list)
+
+    if (direction === DIRECTION.DOWN) {
+      start -= PRE_NUM
+      end += POST_NUM
+    } else {
+      start -= POST_NUM
+      end += PRE_NUM
+    }
+
+    if (start < 0) {
+      start = 0
+    }
+
+    return {
+      start,
+      end,
+    }
+  }
+
+  private getDirection(offset: number): DIRECTION {
+    let direction
+    if (offset > 0) {
+      direction = DIRECTION.DOWN
+    } else if (offset < 0) {
+      direction = DIRECTION.UP
+    } else {
+      return this.lastDirection
+    }
+    this.lastDirection = direction
+    return direction
+  }
+
+  private calculateIndex(
+    start: number,
+    offset: number,
+    list: Array<any>
+  ): number {
+    if (offset <= 0) {
+      return start
+    }
+
+    let i = start
+    let startPos = list[i] && list[i].pos !== -1 ? list[i].pos : 0
+    let lastPos = startPos
+    let tombstone = 0
+    while (i < list.length && list[i].pos < offset) {
+      lastPos = list[i].pos
+      i++
+    }
+
+    if (i === list.length) {
+      tombstone = Math.floor((offset - lastPos) / this.tombstoneHeight)
+    }
+
+    i += tombstone
+
+    return i
+  }
+
+  resetState() {
+    this.lastDirection = DIRECTION.DOWN
+    this.lastPos = 0
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/infinity/src/Tombstone.ts

@@ -0,0 +1,64 @@
+import { style } from '@better-scroll/shared-utils'
+
+export default class Tombstone {
+  private cached: Array<HTMLElement> = []
+  public width = 0
+  public height = 0
+
+  private initialed = false
+
+  constructor(private create: () => HTMLElement) {
+    this.getSize()
+  }
+
+  static isTombstone(el: HTMLElement): boolean {
+    if (el && el.classList) {
+      return el.classList.contains('tombstone')
+    }
+    return false
+  }
+
+  private getSize(): void {
+    if (!this.initialed) {
+      let tombstone = this.create()
+      tombstone.style.position = 'absolute'
+      document.body.appendChild(tombstone)
+
+      tombstone.style.display = ''
+      this.height = tombstone.offsetHeight
+      this.width = tombstone.offsetWidth
+
+      document.body.removeChild(tombstone)
+
+      this.cached.push(tombstone)
+    }
+  }
+
+  getOne(): HTMLElement {
+    let tombstone = this.cached.pop()
+    if (tombstone) {
+      const tombstoneStyle = tombstone.style as any
+
+      tombstoneStyle.display = ''
+      tombstoneStyle.opacity = '1'
+      tombstoneStyle[style.transform] = ''
+      tombstoneStyle[style.transition] = ''
+      return tombstone
+    }
+    return this.create()
+  }
+
+  recycle(tombstones: Array<HTMLElement>): Array<HTMLElement> {
+    for (let tombstone of tombstones) {
+      tombstone.style.display = 'none'
+      this.cached.push(tombstone)
+    }
+    return this.cached
+  }
+
+  recycleOne(tombstone: HTMLElement) {
+    this.cached.push(tombstone)
+
+    return this.cached
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/infinity/src/__tests__/DataManager.spec.ts

@@ -0,0 +1,59 @@
+import DataManager from '../DataManager'
+
+describe('DataManager unit test', () => {
+  const NEW_LEN = 10
+  let list: Array<any>
+  let dataManager: DataManager
+
+  let fetchFn = jest.fn()
+  let onFetchFinish = jest.fn().mockReturnValue(0)
+
+  beforeEach(() => {
+    list = []
+
+    dataManager = new DataManager(list, fetchFn, onFetchFinish)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should fetch new data when loadedNum < list.length', () => {
+    // given
+    let end = NEW_LEN
+    const DATA = 1
+    const newData = new Array(NEW_LEN).fill(DATA)
+    fetchFn.mockReturnValue(Promise.resolve(newData))
+    // when
+    // tslint:disable-next-line: no-floating-promises
+    dataManager.update(end)
+    // then
+    // create empty data firstly, and then, go to fetch data
+    expect(dataManager.getList().length).not.toBeLessThan(NEW_LEN)
+    expect(fetchFn).toBeCalledWith(NEW_LEN)
+  })
+
+  it('should call onFetchFinish with hasMore equal true when loaded new data', async () => {
+    // given
+    const start = 0
+    const end = NEW_LEN
+    const DATA = 1
+    const newData = new Array(NEW_LEN).fill(DATA)
+    fetchFn.mockReturnValue(Promise.resolve(newData))
+    // when
+    await dataManager.update(end)
+    // then
+    expect(onFetchFinish).toBeCalledWith(dataManager.getList(), true)
+  })
+
+  it('should call onFetchFinish with hasMore equal false when no more data', async () => {
+    // given
+    const start = 0
+    const end = NEW_LEN
+    fetchFn.mockReturnValue(Promise.resolve(false))
+    // when
+    await dataManager.update(end)
+    // then
+    expect(onFetchFinish).toBeCalledWith(dataManager.getList(), false)
+  })
+})

package/better-scroll-dev/better-scroll-dev/packages/infinity/src/__tests__/IndexCalculator.spec.ts

@@ -0,0 +1,69 @@
+import IndexCalculator, { PRE_NUM, POST_NUM } from '../IndexCalculator'
+
+import FakeList from './__utils__/FakeList'
+
+import { WRAPPER_HEIGHT, TOMBSTONE_HEIGHT } from './__utils__/constans'
+
+describe('IndexCalculator unit test', () => {
+  let indexCalculator: IndexCalculator
+  const VISIBLE_CNT = WRAPPER_HEIGHT / TOMBSTONE_HEIGHT
+
+  beforeEach(() => {
+    indexCalculator = new IndexCalculator(WRAPPER_HEIGHT, TOMBSTONE_HEIGHT)
+  })
+
+  it('should get start equal to 0 when pos is 0', () => {
+    // given
+    const list = new FakeList(0).getList()
+    // when
+    const { start, end } = indexCalculator.calculate(0, list)
+    // then
+    expect(start).toBe(0)
+    expect(end).toBe(VISIBLE_CNT + POST_NUM)
+  })
+
+  it('should get start equal to 0 when first rendered index < PRE_NUM', () => {
+    // given
+    const list = new FakeList(100)
+      .fillDom(0)
+      .fillPos()
+      .getList()
+    const INDEX = 5
+    const POSITION = INDEX * TOMBSTONE_HEIGHT
+    // when
+    const { start, end } = indexCalculator.calculate(POSITION, list)
+    // then
+    expect(start).toBe(0)
+  })
+
+  it('should get start equal to index-PRE_NUM when first visilbe index > PRE_NUM', () => {
+    // given
+    const list = new FakeList(100)
+      .fillDom(0)
+      .fillPos()
+      .getList()
+    const INDEX = 15
+    const POSITION = INDEX * TOMBSTONE_HEIGHT
+    // when
+    const { start } = indexCalculator.calculate(POSITION, list)
+    // then
+    expect(start).toBe(INDEX - PRE_NUM)
+  })
+
+  it('should get correct val when scroll up and down', () => {
+    // given
+    const list = new FakeList(100)
+      .fillDom(0)
+      .fillPos()
+      .getList()
+    const FIRST_INDEX = 50
+    const FIRST_POSITION = FIRST_INDEX * TOMBSTONE_HEIGHT
+    const SECOND_INDEX = 40
+    const SECOND_POSITION = SECOND_INDEX * TOMBSTONE_HEIGHT
+    // when
+    indexCalculator.calculate(FIRST_POSITION, list)
+    const { start } = indexCalculator.calculate(SECOND_POSITION, list)
+    // then
+    expect(start).toBe(SECOND_INDEX - POST_NUM)
+  })
+})

package/better-scroll-dev/better-scroll-dev/packages/infinity/src/__tests__/__utils__/FakeList.ts

@@ -0,0 +1,66 @@
+import { mockDomOffset } from '@better-scroll/core/src/__tests__/__utils__/layout'
+import { TOMBSTONE_HEIGHT } from './constans'
+
+export default class FakeList {
+  private list: any[]
+  constructor(size: number) {
+    this.list = Array.from({ length: size }).map(i => {
+      return {}
+    })
+  }
+
+  fill(val: any, start: number = 0, end?: number): this {
+    if (!end) {
+      end = this.list.length
+    }
+
+    for (let i = start; i < end; i++) {
+      Object.assign(this.list[i], val)
+    }
+
+    return this
+  }
+
+  fillPos(end?: number): this {
+    if (!end) {
+      end = this.list.length
+    }
+
+    let startPos = 0
+
+    for (let i = 0; i < end; i++) {
+      Object.assign(this.list[i], { pos: startPos })
+      const height = this.list[i].height
+      startPos += height
+    }
+
+    return this
+  }
+
+  fillDom(start: number, end?: number, height = TOMBSTONE_HEIGHT): this {
+    if (!end) {
+      end = this.list.length
+    }
+
+    for (let i = start; i < end; i++) {
+      const dom = document.createElement('div')
+      mockDomOffset(dom, { height })
+      Object.assign(this.list[i], { dom, height, pos: -1 })
+    }
+
+    return this
+  }
+
+  syncDomTo(content: HTMLElement): this {
+    for (let i = 0; i < this.list.length; i++) {
+      if (this.list[i].dom) {
+        content.appendChild(this.list[i].dom)
+      }
+    }
+    return this
+  }
+
+  getList(): any[] {
+    return this.list
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/infinity/src/__tests__/__utils__/constans.ts

@@ -0,0 +1,7 @@
+const TOMBSTONE_HEIGHT = 37 // 元素默认的高度
+
+const WRAPPER_HEIGHT = 370 // 滚动窗口的高度
+
+const VISIBLE_CNT = 10 // 滚动窗口内能显示的元素
+
+export { TOMBSTONE_HEIGHT, WRAPPER_HEIGHT, VISIBLE_CNT }