import React from "react";
import { List, Dropdown } from "@tencent/tea-component";

export default function ListExample() {
  return (
    <>
      <section>
        <Dropdown button="下拉列表" appearance="button" clickClose={false}>
          {close => (
            <List type="option">
              {Array(20)
                .fill(null)
                .map((_, i) => (
                  <List.Item key={i} onClick={close}>
                    列表项 - {i}
                  </List.Item>
                ))}
            </List>
          )}
        </Dropdown>
      </section>
      <section>
        <Dropdown button="多级菜单" appearance="button" clickClose={false}>
          {close => (
            <List type="option">
              <List.Item onClick={close}>预付费</List.Item>
              <List.Item onClick={close}>后付费</List.Item>
              <List.SubMenu label="更多">
                <List type="option">
                  <List.Item disabled>订阅</List.Item>
                  <List.Item onClick={close}>朋友代付</List.Item>
                </List>
              </List.SubMenu>
            </List>
          )}
        </Dropdown>
      </section>
      <section>
        <Dropdown button="包含分组" appearance="button" clickClose={false}>
          {close => (
            <List type="option-group">
              <List.GroupLabel>分组标题 - 1</List.GroupLabel>
              <List.Item onClick={close}>列表项 - 1 - 1</List.Item>
              <List.Item onClick={close}>列表项 - 1 - 2</List.Item>
              <List.GroupLabel>分组标题 - 2</List.GroupLabel>
              <List.Item onClick={close}>列表项 - 2 - 1</List.Item>
              <List.Item onClick={close}>列表项 - 2 - 2</List.Item>
            </List>
          )}
        </Dropdown>
      </section>
    </>
  );
}