All files / src/tagselect/_example TagSelectDynamicExample.jsx

24.14% Statements 7/29
11.11% Branches 1/9
14.29% Functions 1/7
25.93% Lines 7/27

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        1x     1x 1x   1x 1x   1x                                                               1x                                            
import React, { useState, useRef } from "react";
import { TagSelect } from "@tencent/tea-component/lib/tagselect";
import { StatusTip } from "@tencent/tea-component/lib/tips";
 
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
export default function TagSelectDynamicExample() {
  const [status, setStatus] = useState(null);
  const [options, setOptions] = useState([]);
 
  const timerRef = useRef(null);
  const keywordRef = useRef("");
 
  const fetch = (inputValue = "") => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
    keywordRef.current = inputValue;
 
    setStatus("loading");
    setOptions([]);
 
    const mock = async () => {
      setStatus("loading");
      setOptions([]);
      await sleep(1000);
      // 模拟失败
      if (Math.random() > 0.8) {
        setStatus("error");
        return;
      }
      if (keywordRef.current === inputValue) {
        setStatus(null);
        setOptions([
          { value: `${inputValue}1`, text: `${inputValue}[1]` },
          { value: `${inputValue}2`, text: `${inputValue}[2]` },
          { value: `${inputValue}3`, text: `${inputValue}[3]` },
        ]);
      }
    };
 
    timerRef.current = setTimeout(mock, 300);
  };
 
  return (
    <TagSelect
      optionsOnly
      onSearch={fetch}
      options={options}
      onChange={value => {
        console.log(value);
        setOptions([]);
      }}
      placeholder="输入关键词搜索"
      tips={
        status && (
          <StatusTip
            status={status}
            onRetry={() => fetch(keywordRef.current)}
            emptyText="输入关键词搜索"
          />
        )
      }
    />
  );
}