basic measure

Author: zombieJ

.eslintrc.js

@@ -0,0 +1,5 @@
+const base = require('@umijs/fabric/dist/eslint');
+
+module.exports = {
+  ...base,
+};

examples/basic.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import List from '../src/List';
+
+interface Item {
+  id: number;
+}
+
+const MyItem: React.FC<Item> = ({ id }, ref) => {
+  return (
+    <span
+      ref={ref}
+      style={{
+        border: '1px solid gray',
+        padding: '0 16px',
+        height: 30,
+        lineHeight: '30px',
+        boxSizing: 'border-box',
+        display: 'inline-block',
+      }}
+    >
+      {id}
+    </span>
+  );
+};
+
+const ForwardMyItem = React.forwardRef(MyItem);
+
+const dataSource: Item[] = [];
+for (let i = 0; i < 100; i += 1) {
+  dataSource.push({
+    id: i,
+  });
+}
+
+const Demo = () => {
+  return (
+    <React.StrictMode>
+      <div>
+        <h2>Basic</h2>
+        <List
+          dataSource={dataSource}
+          height={200}
+          itemHeight={30}
+          style={{ border: '1px solid red', boxSizing: 'border-box' }}
+        >
+          {item => <ForwardMyItem {...item} />}
+        </List>
+      </div>
+    </React.StrictMode>
+  );
+};
+
+export default Demo;

package.json

@@ -26,7 +26,7 @@
   "main": "./lib/index",
   "module": "./es/index",
   "scripts": {
-    "start": "father doc dev --storybook",
+    "start": "cross-env NODE_ENV=development father doc dev --storybook",
     "build": "father doc build --storybook",
     "compile": "father build",
     "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
@@ -42,6 +42,7 @@
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/warning": "^3.0.0",
+    "cross-env": "^5.2.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "enzyme-to-json": "^3.1.4",

src/Filler.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+interface FillerProps {
+  height: number;
+}
+
+/**
+ * Fill component to provided the scroll content real height.
+ */
+const Filler: React.FC<FillerProps> = ({ height, children }) => (
+  <div style={{ height, position: 'relative', overflow: 'hidden' }}>
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      {children}
+    </div>
+  </div>
+);
+
+export default Filler;

src/List.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { findDOMNode } from 'react-dom';
+import Filler from './Filler';
+import { getLocationItem, getScrollPercentage } from './util';
+
+type RenderFunc<T> = (item: T) => React.ReactNode;
+
+export interface ListProps<T> extends React.HTMLAttributes<any> {
+  children: RenderFunc<T>;
+  dataSource: T[];
+  height?: number;
+  itemHeight?: number;
+  component?: string | React.FC<any> | React.ComponentClass<any>;
+}
+
+interface ListState {
+  status: 'NONE' | 'MEASURE_START' | 'MEASURE_DONE';
+
+  itemIndex: number;
+  itemOffsetPtg: number;
+  startIndex: number;
+  endIndex: number;
+}
+
+/**
+ * We use class component here since typescript can not support generic in function component
+ *
+ * Virtual list display logic:
+ * 1. scroll / initialize trigger measure
+ * 2. Get location item of current `scrollTop`
+ * 3. [Render] Render visible items
+ * 4. Get all the visible items height
+ * 5. [Render] Update top item `margin-top` to fit the position
+ */
+class List<T> extends React.Component<ListProps<T>, ListState> {
+  static defaultProps = {
+    itemHeight: 15,
+    dataSource: [],
+  };
+
+  state: ListState = {
+    status: 'NONE',
+    itemIndex: 0,
+    itemOffsetPtg: 0,
+    startIndex: 0,
+    endIndex: 0,
+  };
+
+  listRef = React.createRef<HTMLElement>();
+
+  itemElements: { [index: number]: HTMLElement } = {};
+
+  /**
+   * Initial should sync with default scroll top
+   */
+  public componentDidMount() {
+    this.listRef.current.scrollTop = 0;
+    this.onScroll();
+  }
+
+  public componentDidUpdate() {
+    const { status, startIndex, endIndex } = this.state;
+    if (status === 'MEASURE_START') {
+      const heightList: number[] = [];
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        const element: HTMLElement = this.itemElements[index];
+        heightList[index] =
+          'offsetHeight' in element
+            ? element.offsetHeight
+            : (findDOMNode(element) as HTMLElement).offsetHeight;
+      }
+      this.setState({ status: 'MEASURE_DONE' });
+    }
+  }
+
+  /**
+   * Phase 2: Trigger render since we should re-calculate current position.
+   */
+  public onScroll = () => {
+    const { dataSource, height, itemHeight } = this.props;
+
+    const scrollTopPtg = getScrollPercentage(this.listRef.current);
+    const { index, offsetPtg } = getLocationItem(scrollTopPtg, dataSource.length);
+    const visibleCount = Math.ceil(height / itemHeight);
+
+    const beforeCount = Math.ceil(scrollTopPtg * visibleCount);
+    const afterCount = Math.ceil((1 - scrollTopPtg) * visibleCount);
+
+    this.setState({
+      status: 'MEASURE_START',
+      itemIndex: index,
+      itemOffsetPtg: offsetPtg,
+      startIndex: Math.max(0, index - beforeCount),
+      endIndex: Math.min(dataSource.length - 1, index + afterCount),
+    });
+  };
+
+  public renderChildren = (list: T[], renderFunc: RenderFunc<T>) =>
+    // We should measure rendered item height
+     list.map((item, index) => {
+      const node = renderFunc(item) as React.ReactElement;
+
+      // Pass `key` and `ref` for internal measure
+      return React.cloneElement(node, {
+        key: index,
+        ref: (ele: HTMLElement) => {
+          this.itemElements[index] = ele;
+        },
+      });
+    })
+  ;
+
+  public render() {
+    const {
+      style,
+      component: Component = 'div',
+      height,
+      itemHeight,
+      dataSource,
+      children,
+      ...restProps
+    } = this.props;
+
+    // Render pure list if not set height
+    if (height === undefined) {
+      return (
+        <Component style={style} {...restProps}>
+          {this.renderChildren(dataSource, children)}
+        </Component>
+      );
+    }
+
+    const { itemIndex, startIndex, endIndex } = this.state;
+
+    const contentHeight = dataSource.length * itemHeight;
+
+    return (
+      <Component
+        style={{
+          ...style,
+          height,
+          overflowY: 'auto',
+        }}
+        {...restProps}
+        onScroll={this.onScroll}
+        ref={this.listRef}
+      >
+        <Filler height={contentHeight}>
+          {this.renderChildren(dataSource.slice(startIndex, endIndex + 1), children)}
+        </Filler>
+      </Component>
+    );
+  }
+}
+
+export default List;

src/index.ts

@@ -1 +1,3 @@
-export default {};
+import List from './List';
+
+export default List;

src/util.ts

@@ -0,0 +1,35 @@
+interface LocationItemResult {
+  /** Located item index */
+  index: number;
+  /** Current item display baseline related with current container baseline */
+  offsetPtg: number;
+}
+
+/**
+ * Get location item and its align percentage with the scroll percentage.
+ * We should measure current scroll position to decide which item is the location item.
+ * And then fill the top count and bottom count with the base of location item.
+ */
+export function getLocationItem(scrollPtg: number, total: number): LocationItemResult {
+  const measureTotal = total - 1;
+
+  const itemIndex = Math.floor(scrollPtg * measureTotal);
+  const itemTopPtg = itemIndex / measureTotal;
+  const itemBottomPtg = (itemIndex + 1) / measureTotal;
+  const itemOffsetPtg = (scrollPtg - itemTopPtg) / (itemBottomPtg - itemTopPtg);
+
+  return {
+    index: itemIndex,
+    offsetPtg: itemOffsetPtg,
+  };
+}
+
+export function getScrollPercentage(element: HTMLElement | null) {
+  if (!element) {
+    return 0;
+  }
+
+  const { scrollTop, scrollHeight, clientHeight } = element;
+  const scrollTopPtg = scrollTop / (scrollHeight - clientHeight);
+  return scrollTopPtg;
+}