|
| 1 | +import * as React from 'react'; |
| 2 | +import Filler from './Filler'; |
| 3 | +import { getLocationItem, getScrollPercentage, getNodeHeight } from './util'; |
| 4 | + |
| 5 | +type RenderFunc<T> = (item: T) => React.ReactNode; |
| 6 | + |
| 7 | +export interface ListProps<T> extends React.HTMLAttributes<any> { |
| 8 | + children: RenderFunc<T>; |
| 9 | + dataSource: T[]; |
| 10 | + height?: number; |
| 11 | + itemHeight?: number; |
| 12 | + component?: string | React.FC<any> | React.ComponentClass<any>; |
| 13 | +} |
| 14 | + |
| 15 | +interface ListState { |
| 16 | + status: 'NONE' | 'MEASURE_START' | 'MEASURE_DONE'; |
| 17 | + |
| 18 | + scrollTop: number | null; |
| 19 | + scrollPtg: number; |
| 20 | + itemIndex: number; |
| 21 | + itemOffsetPtg: number; |
| 22 | + startIndex: number; |
| 23 | + endIndex: number; |
| 24 | +} |
| 25 | + |
| 26 | +/** |
| 27 | + * We use class component here since typescript can not support generic in function component |
| 28 | + * |
| 29 | + * Virtual list display logic: |
| 30 | + * 1. scroll / initialize trigger measure |
| 31 | + * 2. Get location item of current `scrollTop` |
| 32 | + * 3. [Render] Render visible items |
| 33 | + * 4. Get all the visible items height |
| 34 | + * 5. [Render] Update top item `margin-top` to fit the position |
| 35 | + */ |
| 36 | +class List<T> extends React.Component<ListProps<T>, ListState> { |
| 37 | + static defaultProps = { |
| 38 | + itemHeight: 15, |
| 39 | + dataSource: [], |
| 40 | + }; |
| 41 | + |
| 42 | + state: ListState = { |
| 43 | + status: 'NONE', |
| 44 | + scrollTop: null, |
| 45 | + scrollPtg: 0, |
| 46 | + itemIndex: 0, |
| 47 | + itemOffsetPtg: 0, |
| 48 | + startIndex: 0, |
| 49 | + endIndex: 0, |
| 50 | + }; |
| 51 | + |
| 52 | + listRef = React.createRef<HTMLElement>(); |
| 53 | + |
| 54 | + itemElements: { [index: number]: HTMLElement } = {}; |
| 55 | + |
| 56 | + itemElementHeights: { [index: number]: number } = {}; |
| 57 | + |
| 58 | + /** |
| 59 | + * Phase 1: Initial should sync with default scroll top |
| 60 | + */ |
| 61 | + public componentDidMount() { |
| 62 | + this.listRef.current.scrollTop = 0; |
| 63 | + this.onScroll(); |
| 64 | + } |
| 65 | + |
| 66 | + /** |
| 67 | + * Phase 4: Record used item height |
| 68 | + * Phase 5: Trigger re-render to use correct position |
| 69 | + */ |
| 70 | + public componentDidUpdate() { |
| 71 | + const { status, startIndex, endIndex } = this.state; |
| 72 | + if (status === 'MEASURE_START') { |
| 73 | + // Record here since measure item height will get warning in `render` |
| 74 | + for (let index = startIndex; index <= endIndex; index += 1) { |
| 75 | + this.itemElementHeights[index] = getNodeHeight(this.itemElements[index]); |
| 76 | + } |
| 77 | + |
| 78 | + this.setState({ status: 'MEASURE_DONE' }); |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + public getItemHeight = (index: number) => this.itemElementHeights[index] || 0; |
| 83 | + |
| 84 | + /** |
| 85 | + * Phase 2: Trigger render since we should re-calculate current position. |
| 86 | + */ |
| 87 | + public onScroll = () => { |
| 88 | + const { dataSource, height, itemHeight } = this.props; |
| 89 | + |
| 90 | + const { scrollTop } = this.listRef.current; |
| 91 | + |
| 92 | + // Skip if `scrollTop` not change to avoid shake |
| 93 | + if (scrollTop === this.state.scrollTop) { |
| 94 | + return; |
| 95 | + } |
| 96 | + |
| 97 | + const scrollPtg = getScrollPercentage(this.listRef.current); |
| 98 | + |
| 99 | + const { index, offsetPtg } = getLocationItem(scrollPtg, dataSource.length); |
| 100 | + const visibleCount = Math.ceil(height / itemHeight); |
| 101 | + |
| 102 | + const beforeCount = Math.ceil(scrollPtg * visibleCount); |
| 103 | + const afterCount = Math.ceil((1 - scrollPtg) * visibleCount); |
| 104 | + |
| 105 | + this.setState({ |
| 106 | + status: 'MEASURE_START', |
| 107 | + scrollTop, |
| 108 | + scrollPtg, |
| 109 | + itemIndex: index, |
| 110 | + itemOffsetPtg: offsetPtg, |
| 111 | + startIndex: Math.max(0, index - beforeCount), |
| 112 | + endIndex: Math.min(dataSource.length - 1, index + afterCount), |
| 113 | + }); |
| 114 | + }; |
| 115 | + |
| 116 | + /** |
| 117 | + * Phase 4: Render item and get all the visible items height |
| 118 | + */ |
| 119 | + public renderChildren = (list: T[], startIndex: number, renderFunc: RenderFunc<T>) => |
| 120 | + // We should measure rendered item height |
| 121 | + list.map((item, index) => { |
| 122 | + const node = renderFunc(item) as React.ReactElement; |
| 123 | + const eleIndex = startIndex + index; |
| 124 | + |
| 125 | + // Pass `key` and `ref` for internal measure |
| 126 | + return React.cloneElement(node, { |
| 127 | + key: eleIndex, |
| 128 | + ref: (ele: HTMLElement) => { |
| 129 | + this.itemElements[eleIndex] = ele; |
| 130 | + }, |
| 131 | + }); |
| 132 | + }); |
| 133 | + |
| 134 | + public render() { |
| 135 | + const { |
| 136 | + style, |
| 137 | + component: Component = 'div', |
| 138 | + height, |
| 139 | + itemHeight, |
| 140 | + dataSource, |
| 141 | + children, |
| 142 | + ...restProps |
| 143 | + } = this.props; |
| 144 | + |
| 145 | + // Render pure list if not set height |
| 146 | + if (height === undefined) { |
| 147 | + return ( |
| 148 | + <Component style={style} {...restProps}> |
| 149 | + {this.renderChildren(dataSource, 0, children)} |
| 150 | + </Component> |
| 151 | + ); |
| 152 | + } |
| 153 | + |
| 154 | + const { status, startIndex, endIndex, itemIndex, itemOffsetPtg, scrollPtg } = this.state; |
| 155 | + |
| 156 | + const contentHeight = dataSource.length * itemHeight; |
| 157 | + |
| 158 | + // TODO: refactor |
| 159 | + let startItemTop = 0; |
| 160 | + if (status === 'MEASURE_DONE') { |
| 161 | + const locatedItemHeight = this.getItemHeight(itemIndex); |
| 162 | + const locatedItemTop = scrollPtg * this.listRef.current.clientHeight; |
| 163 | + const locatedItemOffset = itemOffsetPtg * locatedItemHeight; |
| 164 | + const locatedItemMergedTop = |
| 165 | + this.listRef.current.scrollTop + locatedItemTop - locatedItemOffset; |
| 166 | + |
| 167 | + startItemTop = locatedItemMergedTop; |
| 168 | + for (let index = itemIndex - 1; index >= startIndex; index -= 1) { |
| 169 | + startItemTop -= this.getItemHeight(index); |
| 170 | + } |
| 171 | + } |
| 172 | + |
| 173 | + return ( |
| 174 | + <Component |
| 175 | + style={{ |
| 176 | + ...style, |
| 177 | + height, |
| 178 | + overflowY: 'auto', |
| 179 | + overflowAnchor: 'none', |
| 180 | + }} |
| 181 | + {...restProps} |
| 182 | + onScroll={this.onScroll} |
| 183 | + ref={this.listRef} |
| 184 | + > |
| 185 | + <Filler height={contentHeight} offset={status === 'MEASURE_DONE' ? startItemTop : 0}> |
| 186 | + {this.renderChildren(dataSource.slice(startIndex, endIndex + 1), startIndex, children)} |
| 187 | + </Filler> |
| 188 | + </Component> |
| 189 | + ); |
| 190 | + } |
| 191 | +} |
| 192 | + |
| 193 | +export default List; |
0 commit comments