@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
53 lines • 3.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_core_1 = require("@patternfly/react-core");
const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
require("./TableToolbar.css");
const TableToolbar = (_a) => {
var { itemIDs, selectedIDs, setSelectedIDs, actions, showPagination, clearAllFilters, children } = _a, paginationProps = tslib_1.__rest(_a, ["itemIDs", "selectedIDs", "setSelectedIDs", "actions", "showPagination", "clearAllFilters", "children"]);
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const [actionsOpen, setActionsOpen] = React.useState(false);
const [selectOpen, setSelectOpen] = React.useState(false);
const onSelectToggle = React.useCallback(() => setSelectOpen(!selectOpen), [selectOpen]);
const onActionsToggle = React.useCallback(() => setActionsOpen(!actionsOpen), [actionsOpen]);
const onSelectAll = () => setSelectedIDs(itemIDs);
const onSelectNone = () => setSelectedIDs([]);
React.useEffect(() => {
if (!selectedIDs.every((id) => itemIDs.includes(id))) {
setSelectedIDs(selectedIDs.filter((id) => itemIDs.includes(id)));
}
}, [selectedIDs, itemIDs, setSelectedIDs]);
let isChecked = false;
if (selectedIDs.length) {
isChecked =
selectedIDs.length === itemIDs.length && itemIDs.every((id) => selectedIDs.includes(id))
? true
: null;
}
const isActionsDisabled = isChecked === false;
const actionsDropdown = (React.createElement(react_core_1.Dropdown, { onSelect: onActionsToggle, onOpenChange: onActionsToggle, toggle: (toggleRef) => (React.createElement(react_core_1.MenuToggle, { ref: toggleRef, isFullWidth: true, onClick: onActionsToggle, isExpanded: actionsOpen, isDisabled: isActionsDisabled }, t('ai:Actions'))), isOpen: actionsOpen }, actions));
const SelectDropdown = (React.createElement(react_core_1.Dropdown, { onSelect: onSelectToggle, onOpenChange: onSelectToggle, toggle: (toggleRef) => (React.createElement(react_core_1.MenuToggle, { ref: toggleRef, isFullWidth: true, onClick: onSelectToggle, isExpanded: selectOpen, splitButtonOptions: {
items: [
React.createElement(react_core_1.MenuToggleCheckbox, { id: "select-checkbox", key: "select-checkbox", "aria-label": "Select all", onChange: (checked, _event) => (checked ? onSelectAll() : onSelectNone()), isChecked: isChecked },
selectedIDs.length,
" ",
t('ai:selected')),
],
} })), isOpen: selectOpen },
React.createElement(react_core_1.DropdownList, null,
React.createElement(react_core_1.DropdownItem, { id: 'select-all', key: "select-all", onClick: onSelectAll }, t('ai:Select all')),
React.createElement(react_core_1.DropdownItem, { id: 'select-none', key: "select-none", onClick: onSelectNone }, t('ai:Select none')))));
return (React.createElement(react_core_1.Split, { hasGutter: true },
React.createElement(react_core_1.SplitItem, { isFilled: true },
React.createElement(react_core_1.Toolbar, { className: "table-toolbar", clearAllFilters: clearAllFilters },
React.createElement(react_core_1.ToolbarContent, { className: "table-toolbar__content" },
React.createElement(react_core_1.ToolbarItem, null, SelectDropdown),
children,
React.createElement(react_core_1.ToolbarItem, null, actionsDropdown)))),
showPagination && (React.createElement(react_core_1.SplitItem, null,
React.createElement(react_core_1.Pagination, Object.assign({ itemCount: itemIDs.length }, paginationProps, { isCompact: true }))))));
};
exports.default = TableToolbar;
//# sourceMappingURL=TableToolbar.js.map