69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
import type { Placement } from "tippy.js";
|
|
import { Button } from "./Button";
|
|
import { ToolTip } from "components/ToolTip";
|
|
import { cJoin } from "helpers/className";
|
|
import { ConditionalWrapper, Wrapper } from "helpers/component";
|
|
import { isDefined } from "helpers/asserts";
|
|
|
|
/*
|
|
* ╭─────────────╮
|
|
* ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
|
|
*/
|
|
|
|
export interface ButtonGroupProps {
|
|
className?: string;
|
|
buttonsProps: (Parameters<typeof Button>[0] & {
|
|
visible?: boolean;
|
|
tooltip?: React.ReactNode | null | undefined;
|
|
tooltipPlacement?: Placement;
|
|
})[];
|
|
}
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const ButtonGroup = ({ buttonsProps, className }: ButtonGroupProps): JSX.Element => (
|
|
<FilteredButtonGroup
|
|
buttonsProps={buttonsProps.filter((button) => button.visible !== false)}
|
|
className={className}
|
|
/>
|
|
);
|
|
|
|
const FilteredButtonGroup = ({ buttonsProps, className }: ButtonGroupProps) => (
|
|
<div className={cJoin("grid grid-flow-col", className)}>
|
|
{buttonsProps.map((buttonProps, index) => (
|
|
<ConditionalWrapper
|
|
key={index}
|
|
isWrapping={isDefined(buttonProps.tooltip)}
|
|
wrapper={ToolTipWrapper}
|
|
wrapperProps={{ text: buttonProps.tooltip ?? "", placement: buttonProps.tooltipPlacement }}>
|
|
<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: React.ReactNode;
|
|
placement?: Placement;
|
|
}
|
|
|
|
const ToolTipWrapper = ({ text, children, placement }: ToolTipWrapperProps & Wrapper) => (
|
|
<ToolTip content={text} placement={placement}>
|
|
<>{children}</>
|
|
</ToolTip>
|
|
);
|