62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import { Button } from "./Button";
|
|
import { ToolTip } from "components/ToolTip";
|
|
import { cJoin } from "helpers/className";
|
|
import { ConditionalWrapper, Wrapper } from "helpers/component";
|
|
import { isDefinedAndNotEmpty } from "helpers/others";
|
|
|
|
/*
|
|
* ╭─────────────╮
|
|
* ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
|
|
*/
|
|
|
|
interface Props {
|
|
className?: string;
|
|
buttonsProps: (Parameters<typeof Button>[0] & {
|
|
tooltip?: string | null | undefined;
|
|
})[];
|
|
}
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const ButtonGroup = ({
|
|
buttonsProps,
|
|
className,
|
|
}: Props): JSX.Element => (
|
|
<div className={cJoin("grid grid-flow-col", className)}>
|
|
{buttonsProps.map((buttonProps, index) => (
|
|
<ConditionalWrapper
|
|
key={index}
|
|
isWrapping={isDefinedAndNotEmpty(buttonProps.tooltip)}
|
|
wrapper={ToolTipWrapper}
|
|
wrapperProps={{ text: buttonProps.tooltip ?? "" }}
|
|
>
|
|
<Button
|
|
{...buttonProps}
|
|
className={
|
|
index === 0
|
|
? "rounded-r-none border-r-0"
|
|
: index === buttonsProps.length - 1
|
|
? "rounded-l-none"
|
|
: "rounded-none border-r-0"
|
|
}
|
|
/>
|
|
</ConditionalWrapper>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
/*
|
|
* ╭──────────────────────╮
|
|
* ───────────────────────────────────╯ PRIVATE COMPONENTS ╰──────────────────────────────────────
|
|
*/
|
|
|
|
interface ToolTipWrapperProps {
|
|
text: string;
|
|
}
|
|
|
|
const ToolTipWrapper = ({ text, children }: ToolTipWrapperProps & Wrapper) => (
|
|
<ToolTip content={text}>
|
|
<>{children}</>
|
|
</ToolTip>
|
|
);
|