@payfit/unity-components
Version:
117 lines (116 loc) • 4.15 kB
TypeScript
import { FocusEventHandler, ReactNode } from 'react';
import { ActionBarButtonProps } from './parts/ActionBarButton.js';
import { ActionBarIconButtonProps } from './parts/ActionBarIconButton.js';
/**
* Base interface for action items shared between button and icon-button types
*/
export interface ActionBarActionItemBase {
/** The unique identifier for the action */
id: string;
/** The label for the action */
label: string;
/** The visual variant of the action */
variant?: 'primary' | 'secondary';
}
/**
* Meta props for button action type
*/
export type ActionBarButtonMeta = Omit<ActionBarButtonProps, 'variant'>;
/**
* Meta props for icon-button action type
*/
export type ActionBarIconButtonMeta = Omit<ActionBarIconButtonProps, 'variant' | 'label'>;
/**
* Action item for button type (default)
*/
export interface ActionBarButtonActionItem extends ActionBarActionItemBase {
/** Type discriminator - defaults to 'button' if omitted */
type?: 'button';
/** Meta properties for the button */
meta?: ActionBarButtonMeta;
}
/**
* Action item for icon-button type
*/
export interface ActionBarIconButtonActionItem extends ActionBarActionItemBase {
/** Type discriminator - required for icon-button */
type: 'icon-button';
/** Meta properties for the icon button (icon is required) */
meta: ActionBarIconButtonMeta;
}
/**
* Union type for action items supporting both button and icon-button types
* @example
* ```typescript
* // Button action (type can be omitted)
* const buttonAction: ActionBarActionItem = {
* id: 'archive',
* label: 'Archive',
* variant: 'secondary',
* meta: {
* onPress: () => console.log('Archive'),
* prefixIcon: 'FileArchiveOutlined',
* }
* }
*
* // Icon-button action
* const iconButtonAction: ActionBarActionItem = {
* id: 'delete',
* label: 'Delete',
* type: 'icon-button',
* variant: 'primary',
* meta: {
* icon: 'TrashOutlined',
* onPress: () => console.log('Delete'),
* }
* }
* ```
*/
export type ActionBarActionItem = ActionBarButtonActionItem | ActionBarIconButtonActionItem;
interface ActionBarBaseProps {
/** Unique identifier for the action bar (required for skip links integration) */
id?: string;
/**
* Optional content to render on the left side of the toolbar (e.g., selection info)
*/
prefixContent?: ReactNode;
/** ARIA label for the toolbar */
'aria-label'?: string;
/** ARIA keyshortcuts for the action bar */
'aria-keyshortcuts'?: string;
/** Callback when the action bar is focused */
onFocus?: FocusEventHandler<HTMLDivElement>;
/** Callback when the action bar is blurred */
onBlur?: FocusEventHandler<HTMLDivElement>;
/**
* Force all actions to render in mobile view instead of collapsing them into dropdown menu
* @default false
*/
forceExpandMobile?: boolean;
}
interface ActionBarStaticProps extends ActionBarBaseProps {
/** Static ActionBarButton components */
children?: ReactNode;
/** Actions prop is not allowed with static API */
actions?: never;
}
interface ActionBarDynamicProps extends ActionBarBaseProps {
/** Array of action items */
actions: ActionBarActionItem[];
/** Render function that receives action and index */
children: (action: ActionBarActionItem, index: number) => ReactNode;
}
/**
* Represents the props for an ActionBar component, which can be either static or dynamic.
*
* This type is a union of `ActionBarStaticProps` and `ActionBarDynamicProps`, allowing
* flexibility in specifying the props for the ActionBar depending on its behavior.
*
* Use `ActionBarStaticProps` when the ActionBar requires fixed, unchanging properties,
* and utilize `ActionBarDynamicProps` for scenarios where the properties need to be
* dynamic or state-dependent.
* @see {@link ActionBarStaticProps} for static API props
* @see {@link ActionBarDynamicProps} for dynamic API props
*/
export type ActionBarProps = ActionBarStaticProps | ActionBarDynamicProps;
export type { ActionBarStaticProps, ActionBarDynamicProps, ActionBarBaseProps };