104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import React from "react";
|
|
import styled from "styled-components";
|
|
import type { ItemRenderer } from "@blueprintjs/select";
|
|
import { Select } from "@blueprintjs/select";
|
|
import type { Intent as BlueprintIntent } from "@blueprintjs/core";
|
|
import {
|
|
Button,
|
|
MenuItem,
|
|
PopoverPosition,
|
|
PopoverInteractionKind,
|
|
} from "@blueprintjs/core";
|
|
import { noop } from "utils/AppsmithUtils";
|
|
import type { Intent } from "constants/DefaultTheme";
|
|
import type { DropdownOption } from "components/constants";
|
|
import { Icon } from "design-system";
|
|
|
|
export type ContextDropdownOption = DropdownOption & {
|
|
onSelect: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
intent?: Intent;
|
|
children?: ContextDropdownOption[];
|
|
};
|
|
const Dropdown = Select.ofType<ContextDropdownOption>();
|
|
|
|
const StyledMenuItem = styled(MenuItem)`
|
|
&&&&.bp3-menu-item:hover {
|
|
background: ${(props) => props.theme.colors.primaryOld};
|
|
color: ${(props) => props.theme.colors.textOnDarkBG};
|
|
}
|
|
&&&.bp3-menu-item.bp3-intent-danger:hover {
|
|
background: ${(props) => props.theme.colors.error};
|
|
}
|
|
`;
|
|
|
|
interface ContextDropdownProps {
|
|
options: ContextDropdownOption[];
|
|
className: string;
|
|
toggle: {
|
|
type: "icon" | "button";
|
|
icon: string;
|
|
iconSize?: number;
|
|
text?: string;
|
|
placeholder?: string;
|
|
color?: string;
|
|
};
|
|
}
|
|
|
|
function DropdownItem(option: ContextDropdownOption) {
|
|
return (
|
|
<StyledMenuItem
|
|
intent={option.intent as BlueprintIntent}
|
|
key={option.value}
|
|
onClick={option.onSelect}
|
|
popoverProps={{
|
|
minimal: true,
|
|
hoverCloseDelay: 0,
|
|
hoverOpenDelay: 300,
|
|
interactionKind: PopoverInteractionKind.CLICK,
|
|
position: PopoverPosition.RIGHT,
|
|
modifiers: {
|
|
arrow: {
|
|
enabled: false,
|
|
},
|
|
offset: {
|
|
enabled: true,
|
|
offset: "-16px, 0",
|
|
},
|
|
},
|
|
}}
|
|
shouldDismissPopover
|
|
text={option.label || option.value}
|
|
>
|
|
{option.children && option.children.map(DropdownItem)}
|
|
</StyledMenuItem>
|
|
);
|
|
}
|
|
|
|
export function ContextDropdown(props: ContextDropdownProps) {
|
|
let trigger: ReactNode;
|
|
if (props.toggle.type === "icon" && props.toggle.icon) {
|
|
trigger = <Icon name={props.toggle.icon} size="md" />;
|
|
}
|
|
if (props.toggle.type === "button" && props.toggle.text)
|
|
trigger = <Button text={props.toggle.text} />;
|
|
|
|
const renderer: ItemRenderer<ContextDropdownOption> = (
|
|
option: ContextDropdownOption,
|
|
) => <DropdownItem key={option.value} {...option} />;
|
|
|
|
return (
|
|
<Dropdown
|
|
className={props.className}
|
|
filterable={false}
|
|
itemRenderer={renderer}
|
|
items={props.options}
|
|
onItemSelect={noop}
|
|
>
|
|
{trigger}
|
|
</Dropdown>
|
|
);
|
|
}
|
|
|
|
export default ContextDropdown;
|