@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
69 lines (68 loc) • 2.73 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBreadcrumbsModel = 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");
const utils_1 = require("./utils");
exports.useBreadcrumbsModel = (0, common_1.createModelHook)({
defaultConfig: {
...collection_1.useOverflowListModel.defaultConfig,
/**
* Optional id for the whole `Breadcrumbs` group. If not provided, a unique id will be created.
* @default useUniqueId()
*/
id: '',
/**
* The default Breadcrumbs component only handles rendering of the link group in a horizontal
* orientation, but the subcomponents could be replaced to handle vertical orientations.
* @default 'horizontal'
*/
orientation: 'horizontal',
menuConfig: {},
},
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;
hiddenIds = (0, utils_1.reorganizeHiddenItems)(items, hiddenIds, 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: `breadcrumbs-menu-${model.state.id}`,
items: overflowItems,
nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
onShow() {
// Always select the first item when the menu is opened
menu.events.goToFirst();
},
}));
return {
...model,
state,
events,
menu,
};
});