import { h, VNode } from "preact"; import arrowDown from "../svg/chevron-down.svg"; import { ButtonBoxPrimary, ButtonPrimary, ParagraphClickable, } from "./styled/index.js"; import { useState } from "preact/hooks"; export interface Props { label: (s: string) => VNode; actions: string[]; onClick: (s: string) => void; } /** * functionality: it will receive a list of actions, take the first actions as * the first chosen action * the user may change the chosen action * when the user click the button it will call onClick with the chosen action * as argument * * visually: it is a primary button with a select handler on the right * * @returns */ export function MultiActionButton({ label, actions, onClick: doClick, }: Props): VNode { const defaultAction = actions.length > 0 ? actions[0] : ""; const [opened, setOpened] = useState(false); const [selected, setSelected] = useState(defaultAction); const canChange = actions.length > 1; const options = canChange ? actions.filter((a) => a !== selected) : []; function select(m: string): void { setSelected(m); setOpened(false); } if (!canChange) { return ( doClick(selected)}> {label(selected)} ); } return (
{opened && (
{options.map((m) => ( select(m)}> {label(m)} ))}
)} doClick(selected)} style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0, marginRight: 0, maxWidth: 170, overflowX: "hidden", textOverflow: "ellipsis", }} > {label(selected)} setOpened((s) => !s)} style={{ marginLeft: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, width: 36, padding: 4, height: 36, fill: "white", }} >
); }