English | 简体中文

@ray-js/recycle-list

Ray recycle list

Installation

$ npm install @ray-js/recycle-list
# or
$ yarn add @ray-js/recycle-list

Usage

TSX

import React, { useState, useMemo } from 'react';
import { View } from '@ray-js/components';
import RecycleView, { transformRow1ToRowN } from '@ray-js/recycle-list';
import styles from './index.module.less';

let index = 0;
// mock init data
const mockData: { height: number; [key: string]: any }[] = [];
for (let i = 1; i < 21; i++) {
  mockData.push({
    timeC: Math.floor(i / 5),
    height: 100,
    text: `row ${index++}`,
  });
}

export default function Home() {
  const [data, setData] = useState(mockData);
  const rowNum = 3;
  const rowGroupOffsetTopHeight = 30;
  const realData = useMemo(() => {
    //Field values ​​used for grouping. Values ​​corresponding to the same field are grouped into one group.
    const groupKey = 'timeC';
    return transformRow1ToRowN(data, groupKey, rowNum, rowGroupOffsetTopHeight);
  }, [data.length, rowNum, rowGroupOffsetTopHeight]);

  const handleScrollToLower = e => {
    const len = Math.floor(data.length / 5);
    if (len > 10) {
      return;
    }
    ty.showLoading({
      title: '',
      mask: true,
    });
    // Simulate data loading
    setTimeout(() => {
      const len = Math.floor(data.length / 5);
      const random = Math.floor(Math.random() * 10) + 10;
      for (let i = 0; i < random; i++) {
        data.push({
          height: 100,
          timeC: Math.floor(i / 5) + len,
          text: `row ${index++}`,
        });
      }
      setData([...data]);
      ty.hideLoading();
    }, 1000);
  };
  return (
    <View className={styles.app}>
      <RecycleView
        overScanCount={20}
        className={styles.recycleView}
        data={realData}
        fixedHeader
        headerHeight={100}
        renderHeader={() => {
          return <View style={{ height: '100px', backgroundColor: 'yellow' }}>this is header</View>;
        }}
        bottomHeight={150}
        renderBottom={() => {
          return <View style={{ height: '150px', backgroundColor: 'yellow' }}>this is bottom</View>;
        }}
        renderItem={item => {
          const { groupKey, data } = item;
          return (
            <View
              key={groupKey}
              style={{
                backgroundColor: 'white',
                fontWeight: 'bold',
                color: 'red',
                height: '100%',
              }}
            >
              <View>Title: {groupKey}</View>
              <View
                style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}
              >
                {data.map(innerItem => {
                  return (
                    <View
                      key={innerItem.text}
                      style={{
                        width: '33%',
                        height: `${innerItem.height}px`,
                      }}
                    >{`${innerItem.text}`}</View>
                  );
                })}
              </View>
            </View>
          );
        }}
        onScrollToLower={handleScrollToLower}
      />
    </View>
  );
}

Css

.app {
  text-align: center;
}

.recycleView {
  height: 100vh;
}