UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

76 lines (75 loc) 2.81 kB
import * as React from 'react'; import { createContainer } from '@workday/canvas-kit-react/common'; import { Menu } from '@workday/canvas-kit-react/menu'; import { useActionBarModel } from './useActionBarModel'; import { ActionBarList } from './ActionBarList'; import { ActionBarOverflowButton } from './ActionBarOverflowButton'; import { ActionBarItem } from './ActionBarItem'; /** * `ActionBar` is a container component that is responsible for creating an {@link ActionBarModel} * and sharing it with its subcomponents using React context. It does not represent a real element. * * ```tsx * <ActionBar items={[]}>{Child components}</ActionBar> * ``` * * Alternatively, you may pass in a model using the hoisted model pattern. * * ```tsx * const model = useActionBarModel({ * items: [], * }); * * <ActionBar model={model}>{Child components}</ActionBar>; * ``` */ export const ActionBar = createContainer()({ displayName: 'ActionBar', modelHook: useActionBarModel, subComponents: { /** * `ActionBar.List` is a {@link Flex} element. It is a container for * {@link ActionBarItem ActionBar.Item} subcomponents. To render an overflow button for * ActionBar with overflow behavior `overflowButton` prop with overflow button component as a * value should be passed. * * ```tsx * // without overflow * <ActionBar.List>{ActionBar.Items}</ActionBar.List> * * // with overflow * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions"/>}> * {ActionBar.Items} * </ActionBar.List> * ``` */ List: ActionBarList, /** * `ActionBar.Item` is a `button` element, by default it's a `SecondaryButton` unless an `as` * prop is passed. * * ```tsx * <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}> * First Action * </ActionBar.Item> * ``` */ Item: ActionBarItem, OverflowButton: ActionBarOverflowButton, /** * The overflow menu of the ActionBar component. If there isn't enough room to render all the action * items, the extra actions that don't fit will be overflowed into this menu. * @example * <ActionBar.Menu.Popper> * <ActionBar.Menu.Card> * <ActionBar.Menu.List> * {(item: MyActionItem) => <ActionBar.Menu.Item>{item.text}</ActionBar.Menu.Item>} * </ActionBar.Menu.List> * </ActionBar.Menu.Card> * </ActionBar.Menu.Popper> */ Menu, }, })(({ children }, _, model) => { return React.createElement(Menu, { model: model.menu }, children); });