en-US

This example shows loading when opening, loading when scrolling to the bottom, and loading when searching.

zh-CN

该示例展示了打开时加载、滚动到底部时加载以及搜索时加载。

import { useState, useRef } from 'react';

import { useImmer, useAsync } from '@react-devui/hooks';
import { DSelect } from '@react-devui/ui';

export default function Demo() {
  const dataRef = useRef({});
  const async = useAsync();

  const [visible1, setVisible1] = useState(false);
  const [loading1, setLoading1] = useState(false);
  const [list1, setList1] = useImmer([]);

  const [loading2, setLoading2] = useState(false);
  const [list2, setList2] = useImmer(
    Array.from({ length: 20 }).map((_, index) => ({
      label: `Item ${index}`,
      value: index,
      disabled: index === 3,
    }))
  );

  const [loading3, setLoading3] = useState(false);
  const [list3, setList3] = useImmer([]);
  const [select3, setSelect3] = useImmer(null);

  return (
    <>
      <DSelect
        style={{ width: 200 }}
        dVisible={visible1}
        dList={list1}
        dPlaceholder="Open"
        dClearable
        dLoading={loading1}
        onVisibleChange={(visible) => {
          setVisible1(visible);
          if (visible && list1.length === 0) {
            setLoading1(true);
            async.setTimeout(() => {
              setLoading1(false);
              setList1(
                Array.from({ length: 100 }).map((_, index) => ({
                  label: `Item ${index}`,
                  value: index,
                  disabled: index === 3,
                }))
              );
            }, 1000);
          }
        }}
      />
      <DSelect
        style={{ width: 200 }}
        dList={list2}
        dPlaceholder="Scroll"
        dClearable
        dLoading={loading2}
        onScrollBottom={() => {
          setLoading2(true);
          async.setTimeout(() => {
            setLoading2(false);
            setList2((draft) => {
              draft.push(
                ...Array.from({ length: 20 }).map((_, index) => ({
                  label: `Item ${index + draft.length}`,
                  value: index + draft.length,
                }))
              );
            });
          }, 1000);
        }}
      />
      <DSelect
        style={{ width: 200 }}
        dList={list3}
        dPlaceholder="Search"
        dClearable
        dModel={select3}
        dSearchable
        dLoading={loading3}
        onSearchValueChange={(value) => {
          setSelect3(null);
          if (value.length === 0) {
            setLoading3(false);
            setList3([]);
          } else {
            setLoading3(true);
            setList3([]);
            dataRef.current.clearTid?.();
            dataRef.current.clearTid = async.setTimeout(() => {
              setLoading3(false);
              setList3(
                Array.from({ length: 100 }).map((_, index) => ({
                  label: `${value} ${index}`,
                  value: index,
                  disabled: index === 3,
                }))
              );
            }, 1000);
          }
        }}
        onModelChange={setSelect3}
      />
    </>
  );
}