55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import Button from "@components/button"
|
|
import React, { useCallback, useEffect } from "react"
|
|
import { useState } from "react"
|
|
import styles from "./dropdown.module.css"
|
|
import DownIcon from "@geist-ui/icons/arrowDown"
|
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
|
|
type Props = {
|
|
type?: "primary" | "secondary"
|
|
loading?: boolean
|
|
disabled?: boolean
|
|
className?: string
|
|
iconHeight?: number
|
|
}
|
|
|
|
type Attrs = Omit<React.HTMLAttributes<any>, keyof Props>
|
|
type ButtonDropdownProps = Props & Attrs
|
|
|
|
const ButtonDropdown: React.FC<
|
|
React.PropsWithChildren<ButtonDropdownProps>
|
|
> = ({ type, className, disabled, loading, iconHeight = 24, ...props }) => {
|
|
if (!Array.isArray(props.children)) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu.Root>
|
|
<div className={styles.dropdown}>
|
|
{props.children[0]}
|
|
<DropdownMenu.Trigger
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "flex-end"
|
|
}}
|
|
asChild
|
|
>
|
|
<Button
|
|
iconLeft={<DownIcon />}
|
|
type={type}
|
|
className={styles.icon}
|
|
/>
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Portal>
|
|
<DropdownMenu.Content align="end">
|
|
{props.children.slice(1).map((child, index) => (
|
|
<DropdownMenu.Item key={index}>{child}</DropdownMenu.Item>
|
|
))}
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Portal>
|
|
</div>
|
|
</DropdownMenu.Root>
|
|
)
|
|
}
|
|
|
|
export default ButtonDropdown
|