UNPKG

@payfit/unity-components

Version:

95 lines (94 loc) 4.18 kB
import { ActionBarProps } from './ActionBar.types.js'; export type { ActionBarActionItem, ActionBarActionItemBase, ActionBarBaseProps, ActionBarButtonActionItem, ActionBarButtonMeta, ActionBarDynamicProps, ActionBarIconButtonActionItem, ActionBarIconButtonMeta, ActionBarProps, ActionBarStaticProps, } from './ActionBar.types.js'; /** * The ActionBar component provides a generic floating toolbar with action buttons. * It supports both static (declarative) and dynamic (render prop) APIs for maximum flexibility. * * The component can render both regular buttons (`ActionBarButton`) and icon-only buttons * (`ActionBarIconButton`) based on the `type` discriminator in action items. * @param {ActionBarProps} props - Props for ActionBar * @example Static API * ```tsx * import { ActionBar, ActionBarButton, ActionBarRoot } from '@payfit/unity-components' * * // Static API with ActionBarButton components * function StaticExample() { * return ( * <ActionBarRoot> * <ActionBar id="toolbar"> * <ActionBarButton onPress={handleArchive}>Archive</ActionBarButton> * <ActionBarButton variant="primary" onPress={handleDelete}>Delete</ActionBarButton> * </ActionBar> * </ActionBarRoot> * ) * } * ``` * @example Static API with prefix content * ```tsx * // Static API with prefixContent * function WithPrefixContent() { * return ( * <ActionBarRoot> * <ActionBar * id="table-actions" * prefixContent={<SelectionInfo count={2} onClear={handleClear} />} * > * <ActionBarButton onPress={handleArchive}>Archive</ActionBarButton> * <ActionBarButton variant="primary" onPress={handleDelete}>Delete</ActionBarButton> * </ActionBar> * </ActionBarRoot> * ) * } * ``` * @example Dynamic API * ```tsx * // Dynamic API with actions array and render function * function DynamicExample() { * const actions = [ * { id: 'archive', label: 'Archive', meta: { onPress: handleArchive } }, * { id: 'delete', label: 'Delete', variant: 'primary', meta: { onPress: handleDelete } }, * { id: 'settings', label: 'Settings', type: 'icon-button', meta: { icon: 'GearOutlined', onPress: handleSettings } }, * ] * * return ( * <ActionBarRoot> * <ActionBar id="table-actions" actions={actions}> * {(action) => { * if (action.type === 'icon-button') { * return ( * <ActionBarIconButton * key={action.id} * icon={action.meta.icon} * label={action.label} * variant={action.variant} * onPress={action.meta.onPress} * /> * ) * } * return ( * <ActionBarButton key={action.id} variant={action.variant} {...action.meta}> * {action.label} * </ActionBarButton> * ) * }} * </ActionBar> * </ActionBarRoot> * ) * } * ``` * @remarks * - Must be wrapped in ActionBarRoot for proper positioning * - Use `prefixContent` to render custom content on the left side (e.g., selection info) * - Static API: pass ActionBarButton/ActionBarIconButton components as children * - Dynamic API: provide actions array and render function as children * - Actions support `type: 'button'` (default) or `type: 'icon-button'` for icon-only buttons * - All action-specific props (onPress, prefixIcon, icon, isDisabled, isLoading) go in the `meta` object * - Includes proper ARIA labels and live regions for accessibility * @see {@link ActionBarProps} for all available props * @see {@link ActionBarActionItem} for action item structure * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar) * @see Design specs [Figma](https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library) * @see Design docs in [Payfit.design](https://www.payfit.design/) */ declare const ActionBar: import('react').ForwardRefExoticComponent<ActionBarProps & import('react').RefAttributes<HTMLDivElement>>; export { ActionBar };