en-US

This example shows loading when scrolling to the bottom.

zh-CN

该示例展示了滚动到底部时加载。

import { useState } from 'react';

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

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

  const [loading, setLoading] = useState([false, false]);
  const [list, setList] = useImmer(
    Array.from({ length: 20 }).map((_, index) => ({
      label: `Item ${index}`,
      value: index,
      disabled: index === 3,
    }))
  );

  return (
    <DTransfer
      dList={list}
      dLoading={loading}
      onScrollBottom={(direction) => {
        if (direction === 'left') {
          setLoading([true, false]);
          async.setTimeout(() => {
            setLoading([false, false]);
            setList((draft) => {
              draft.push(
                ...Array.from({ length: 20 }).map((_, index) => ({
                  label: `Item ${index + draft.length}`,
                  value: index + draft.length,
                }))
              );
            });
          }, 1000);
        }
      }}
    />
  );
}