@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
76 lines (75 loc) • 2.81 kB
JavaScript
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);
});