@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
90 lines (89 loc) • 3.51 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useActionBarModel = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const collection_1 = require("@workday/canvas-kit-react/collection");
const menu_1 = require("@workday/canvas-kit-react/menu");
exports.useActionBarModel = (0, common_1.createModelHook)({
defaultConfig: {
...collection_1.useOverflowListModel.defaultConfig,
/**
* Optional id for the whole `ActionBar` group. If not provided, a unique id will be created.
* @default useUniqueId()
*/
id: '',
/**
* The default ActionBar sub-components only handle rendering of button group in a horizontal orientation,
* but the sub-components could be replaced to handle vertical orientations.
* @default 'horizontal'
*/
orientation: 'horizontal',
menuConfig: {},
/**
* The maximum number of actions that can be visible.
* Must be greater than 1 and less than items.length.
* @default 3
*/
maximumVisible: 3,
},
requiredConfig: collection_1.useOverflowListModel.requiredConfig,
})(config => {
const getId = config.getId || collection_1.defaultGetId;
const items = config.items;
const model = (0, collection_1.useOverflowListModel)(collection_1.useOverflowListModel.mergeConfig(config, {
orientation: config.orientation || 'horizontal',
items,
shouldVirtualize: false,
}));
let hiddenIds = model.state.hiddenIds;
let nonInteractiveIds = model.state.nonInteractiveIds;
const totalSize = model.state.items.length;
// Only show maximumVisible buttons
const maximumVisible = !config.maximumVisible || config.maximumVisible < 1
? 3 // should fallback to default value
: config.maximumVisible > totalSize
? totalSize
: config.maximumVisible;
if (totalSize - hiddenIds.length >= maximumVisible) {
hiddenIds = items.slice(maximumVisible, totalSize).map(getId);
}
// Always show the first button and make sure it is interactive
if (totalSize - hiddenIds.length === 0) {
hiddenIds = items.slice(1, totalSize).map(getId);
}
nonInteractiveIds = hiddenIds;
const state = {
...model.state,
hiddenIds,
nonInteractiveIds,
orientation: config.orientation || 'horizontal',
};
const overflowItems = react_1.default.useMemo(() => (items ? items.filter(item => state.hiddenIds.includes(getId(item))) : undefined),
// eslint-disable-next-line react-hooks/exhaustive-deps
[state.hiddenIds, items]);
const events = {
...model.events,
};
const menu = (0, menu_1.useMenuModel)(menu_1.useMenuModel.mergeConfig(config.menuConfig, {
id: `act-bar-menu-${model.state.id}`,
items: overflowItems,
nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
onSelect() {
menu.events.hide();
},
onShow() {
// Always select the first item when the menu is opened
menu.events.goToFirst();
},
}));
return {
...model,
state,
events,
menu,
};
});