CoastalCommitsPastes/client/components/button-dropdown/index.tsx

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"
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 }) => {
	const [visible, setVisible] = useState(false)
	const [dropdown, setDropdown] = useState<HTMLDivElement | null>(null)

	const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
		e.stopPropagation()
		e.nativeEvent.stopImmediatePropagation()
		setVisible(!visible)
	}

	const onBlur = () => {
		setVisible(false)
	}

	const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
		e.stopPropagation()
		e.nativeEvent.stopImmediatePropagation()
	}

	const onMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
		e.stopPropagation()
		e.nativeEvent.stopImmediatePropagation()
	}

	const onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
		e.stopPropagation()
		e.nativeEvent.stopImmediatePropagation()
		setVisible(false)
	}

	const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
		if (e.key === "Escape") {
			setVisible(false)
		}
	}

	const onClickOutside = useCallback(
		() => (e: React.MouseEvent<HTMLDivElement>) => {
			if (dropdown && !dropdown.contains(e.target as Node)) {
				setVisible(false)
			}
		},
		[dropdown]
	)

	useEffect(() => {
		if (visible) {
			document.addEventListener("mousedown", onClickOutside)
		} else {
			document.removeEventListener("mousedown", onClickOutside)
		}

		return () => {
			document.removeEventListener("mousedown", onClickOutside)
		}
	}, [visible, onClickOutside])

	if (!Array.isArray(props.children)) {
		return null
	}

	return (
		<div
			className={`${styles.main} ${className}`}
			onMouseDown={onMouseDown}
			onMouseUp={onMouseUp}
			onMouseLeave={onMouseLeave}
			onKeyDown={onKeyDown}
			onBlur={onBlur}
		>
			<div
				style={{
					display: "flex",
					flexDirection: "row",
					justifyContent: "flex-end"
				}}
			>
				{props.children[0]}
				<Button
					style={{ height: iconHeight, width: iconHeight }}
					className={styles.icon}
					onClick={() => setVisible(!visible)}
				>
					<DownIcon />
				</Button>
			</div>
			{visible && (
				<div className={`${styles.dropdown}`}>
					<div className={`${styles.dropdownContent}`}>
						{props.children.slice(1)}
					</div>
				</div>
			)}
		</div>
	)
}

export default ButtonDropdown