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

export default function DropdownExample() {
  const menu = 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>
  );

  return (
    <>
      <Dropdown
        trigger="hover"
        clickClose={false}
        style={{ marginRight: 10 }}
        button="Hover me"
        onOpen={() => console.log("open")}
        onClose={() => console.log("close")}
      >
        {menu}
      </Dropdown>
      <Dropdown
        clickClose={false}
        style={{ marginRight: 10 }}
        button="按钮样式"
        appearance="button"
        onOpen={() => console.log("open")}
        onClose={() => console.log("close")}
        matchButtonWidth
      >
        {menu}
      </Dropdown>
      <Dropdown
        clickClose={false}
        style={{ marginRight: 10 }}
        button="链接样式"
        appearance="link"
        placement="top"
      >
        {menu}
      </Dropdown>
      <Dropdown
        clickClose={false}
        style={{ marginRight: 10 }}
        button="筛选"
        appearance="filter"
      >
        {menu}
      </Dropdown>
      <Dropdown
        clickClose={false}
        style={{ marginRight: 10 }}
        button={<Button type="icon" icon="more" />}
        appearance="pure"
      >
        {menu}
      </Dropdown>
    </>
  );
}