import Button, { ButtonProps } from "@material-ui/core/Button" import ButtonGroup from "@material-ui/core/ButtonGroup" import ClickAwayListener from "@material-ui/core/ClickAwayListener" import Grow from "@material-ui/core/Grow" import MenuItem from "@material-ui/core/MenuItem" import MenuList from "@material-ui/core/MenuList" import Paper from "@material-ui/core/Paper" import Popper from "@material-ui/core/Popper" import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown" import React, { useRef, useState } from "react" interface SplitButtonOptions { /** * label is shown in the SplitButton UI */ label: string /** * value is any value for this option */ value: T } export interface SplitButtonProps extends Pick { /** * onClick is called with the selectedOption */ onClick: (selectedOption: T) => void /** * options is a list of options */ options: SplitButtonOptions[] /** * textTransform is applied to the primary button text. Defaults to * uppercase */ textTransform?: React.CSSProperties["textTransform"] } /** * SplitButton is a button with a primary option and a dropdown with secondary * options. * @remark The primary option is the 0th index (first option) in the array. * @see https://mui.com/components/button-group/#split-button */ export const SplitButton = ({ color, disabled, onClick, options, startIcon, textTransform, }: SplitButtonProps): ReturnType => { const [isPopperOpen, setIsPopperOpen] = useState(false) const anchorRef = useRef(null) const displayedLabel = options[0].label const handleClick = () => { onClick(options[0].value) } const handleClose = (e: React.MouseEvent) => { if (anchorRef.current && anchorRef.current.contains(e.target as HTMLElement)) { return } setIsPopperOpen(false) } const handleSelectOpt = (e: React.MouseEvent, opt: number) => { onClick(options[opt].value) setIsPopperOpen(false) } const handleTogglePopper = () => { setIsPopperOpen((prevOpen) => !prevOpen) } return ( <> {({ TransitionProps, placement }) => ( {options.map((opt, idx) => ( handleSelectOpt(e, idx)}> {opt.label} ))} )} ) }