@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
102 lines (101 loc) • 4.08 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionBar = void 0;
const React = __importStar(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const menu_1 = require("@workday/canvas-kit-react/menu");
const useActionBarModel_1 = require("./useActionBarModel");
const ActionBarList_1 = require("./ActionBarList");
const ActionBarOverflowButton_1 = require("./ActionBarOverflowButton");
const ActionBarItem_1 = require("./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>;
* ```
*/
exports.ActionBar = (0, common_1.createContainer)()({
displayName: 'ActionBar',
modelHook: useActionBarModel_1.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_1.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_1.ActionBarItem,
OverflowButton: ActionBarOverflowButton_1.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: menu_1.Menu,
},
})(({ children }, _, model) => {
return React.createElement(menu_1.Menu, { model: model.menu }, children);
});