All files / src/select/_example SelectLoadMoreExample.jsx

25.71% Statements 9/35
11.76% Branches 2/17
8.33% Functions 1/12
28.13% Lines 9/32

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76        1x 1x   1x 1x   1x 1x 1x   1x                                                                               1x                                          
import React, { useState, useRef } from "react";
import { Select } from "@tencent/tea-component/lib/select";
import { LoadingTip } from "@tencent/tea-component/lib/tips";
 
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const MAX_PAGE = 3;
export default function SelectLoadMoreExample() {
  const [hasMore, setHasMore] = useState(true);
  const [options, setOptions] = useState([]);
 
  const pageRef = useRef(0);
  const timerRef = useRef(null);
  const keywordRef = useRef("");
 
  const fetch = (inputValue = "", page) => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
    if (keywordRef.current !== inputValue || page <= pageRef.current) {
      setOptions([]);
      setHasMore(true);
    }
    if (page > MAX_PAGE) {
      return;
    }
 
    pageRef.current = page;
    keywordRef.current = inputValue;
 
    const mock = async () => {
      await sleep(1000);
 
      if (keywordRef.current === inputValue && pageRef.current === page) {
        setOptions(options => [
          ...options,
          ...Array(10)
            .fill(null)
            .map((_, i) => ({
              value: `${inputValue}${page * 10 + i}`,
              text: `选项${page * 10 + i} ${inputValue}`,
            })),
        ]);
 
        // 假设只有这么多页 😶
        if (page >= MAX_PAGE) {
          setHasMore(false);
        }
      }
    };
 
    timerRef.current = setTimeout(mock, 300);
  };
 
  return (
    <Select
      searchable
      boxSizeSync
      size="m"
      type="simulate"
      appearance="button"
      filter={() => true}
      autoClearSearchValue={false}
      onOpen={() => fetch(keywordRef.current, 0)}
      onSearch={value => {
        fetch(value, 0);
      }}
      onScrollBottom={() => fetch(keywordRef.current, pageRef.current + 1)}
      options={options}
      onChange={value => console.log(value)}
      tips={null}
      bottomTips={hasMore && <LoadingTip />}
    />
  );
}