94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
/**
|
|
* Secondary Menu Item Types
|
|
*
|
|
* Supports 8 item types:
|
|
* 1. Tab - selectable, stays highlighted (existing behavior)
|
|
* 2. Action - executes without selection (primary = blue)
|
|
* 3. Danger Action - red styling with optional confirmation
|
|
* 4. Filter - checkbox toggle, emits immediately
|
|
* 5. Multi-Filter - collapsible box with multiple checkboxes
|
|
* 6. Divider - visual separator
|
|
* 7. Header - non-interactive label
|
|
* 8. Link - opens URL
|
|
*/
|
|
|
|
// Base properties shared by interactive items
|
|
export interface ISecondaryMenuItemBase {
|
|
key: string;
|
|
iconName?: string;
|
|
disabled?: boolean;
|
|
hidden?: boolean;
|
|
}
|
|
|
|
// 1. Tab - existing behavior (selectable, stays highlighted)
|
|
export interface ISecondaryMenuItemTab extends ISecondaryMenuItemBase {
|
|
type?: 'tab'; // default if omitted for backward compatibility
|
|
action: () => void;
|
|
badge?: string | number;
|
|
badgeVariant?: 'default' | 'success' | 'warning' | 'error';
|
|
}
|
|
|
|
// 2 & 3. Action - executes without selection
|
|
export interface ISecondaryMenuItemAction extends ISecondaryMenuItemBase {
|
|
type: 'action';
|
|
action: () => void | Promise<void>;
|
|
variant?: 'primary' | 'danger'; // primary = blue (default), danger = red
|
|
confirmMessage?: string; // Shows confirmation dialog before executing
|
|
}
|
|
|
|
// 4. Single filter toggle
|
|
export interface ISecondaryMenuItemFilter extends ISecondaryMenuItemBase {
|
|
type: 'filter';
|
|
active: boolean;
|
|
onToggle: (active: boolean) => void;
|
|
}
|
|
|
|
// 5. Multi-select filter group (collapsible)
|
|
export interface ISecondaryMenuItemMultiFilter extends ISecondaryMenuItemBase {
|
|
type: 'multiFilter';
|
|
collapsed?: boolean; // Accordion state
|
|
options: Array<{
|
|
key: string;
|
|
label: string;
|
|
checked: boolean;
|
|
iconName?: string;
|
|
}>;
|
|
onChange: (selectedKeys: string[]) => void;
|
|
}
|
|
|
|
// 6. Divider
|
|
export interface ISecondaryMenuItemDivider {
|
|
type: 'divider';
|
|
}
|
|
|
|
// 7. Header/Label
|
|
export interface ISecondaryMenuItemHeader {
|
|
type: 'header';
|
|
label: string;
|
|
}
|
|
|
|
// 8. External link
|
|
export interface ISecondaryMenuItemLink extends ISecondaryMenuItemBase {
|
|
type: 'link';
|
|
href: string;
|
|
external?: boolean; // Opens in new tab (default: true if href starts with http)
|
|
}
|
|
|
|
// Union type for all secondary menu items
|
|
export type ISecondaryMenuItem =
|
|
| ISecondaryMenuItemTab
|
|
| ISecondaryMenuItemAction
|
|
| ISecondaryMenuItemFilter
|
|
| ISecondaryMenuItemMultiFilter
|
|
| ISecondaryMenuItemDivider
|
|
| ISecondaryMenuItemHeader
|
|
| ISecondaryMenuItemLink;
|
|
|
|
// Group interface for secondary menu
|
|
export interface ISecondaryMenuGroup {
|
|
name: string;
|
|
iconName?: string;
|
|
collapsed?: boolean;
|
|
items: ISecondaryMenuItem[];
|
|
}
|