All files / src/autocomplete/_example AutoCompleteAsyncExample.jsx

40.54% Statements 15/37
27.27% Branches 3/11
46.15% Functions 6/13
42.42% Lines 14/33

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 77 78 79 80 81 82 83 84 85 86 87 88 89          1x                         1x   1x 1x   1x 1x   1x 1x 1x       1x 1x 1x                             1x                                         3x                                    
import React, { useState, useEffect, useRef } from "react";
import { AutoComplete } from "@tencent/tea-component/lib/autocomplete";
import { StatusTip } from "@tencent/tea-component/lib/tips";
import { Input } from "@tencent/tea-component/lib/input";
 
const remoteOptions = [
  { value: "strawberry", text: "草莓", tooltip: "甜甜甜" },
  { value: "apple", text: "红莓", disabled: true },
  { value: "orange", text: "树莓" },
  { value: "coca-cola", text: "可口可乐" },
  {
    value: "pepsi-cola",
    text: "百事可乐",
    tooltip: "百事可乐为什么比可口可乐好喝?",
  },
];
 
export default function AutoCompleteAsyncExample() {
  const [options, setOptions] = useState([]);
 
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
 
  const [inputValue, setInputValue] = useState("");
  const timerRef = useRef(null);
 
  useEffect(() => {
    fetchOptions();
    return () => timerRef.current && clearTimeout(timerRef.current);
  }, []);
 
  async function fetchOptions(keyword = "") {
    try {
      const options = await new Promise((resolve, reject) => {
        setTimeout(() => {
          if (Math.random() > 0.7) {
            reject(new Error());
            return;
          }
          resolve(remoteOptions.filter(({ text }) => text.includes(keyword)));
        }, 1200);
      });
      setOptions(options);
    } catch (err) {
      setError(true);
    }
    setLoading(false);
  }
 
  return (
    <AutoComplete
      options={options}
      keyword={inputValue}
      tips={
        <StatusTip
          status={loading ? "loading" : error ? "error" : "empty"} // eslint-disable-line no-nested-ternary
          onRetry={() => {
            setError(false);
            setLoading(true);
            fetchOptions(inputValue);
          }}
        />
      }
      onChange={value => {
        const option = options.find(opt => opt.value === value);
        setInputValue(option.text);
        console.log(value);
      }}
    >
      {ref => (
        <Input
          size="full"
          ref={ref}
          value={inputValue}
          onChange={value => {
            if (timerRef.current) {
              clearTimeout(timerRef.current);
            }
            timerRef.current = setTimeout(() => fetchOptions(value), 500);
            setLoading(true);
            setOptions([]);
            setInputValue(value);
          }}
        />
      )}
    </AutoComplete>
  );
}