1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.Toolbar = void 0;
|
4 | const tslib_1 = require("tslib");
|
5 | const React = tslib_1.__importStar(require("react"));
|
6 | const toolbar_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Toolbar/toolbar"));
|
7 | const GenerateId_1 = require("../../helpers/GenerateId/GenerateId");
|
8 | const react_styles_1 = require("@patternfly/react-styles");
|
9 | const ToolbarUtils_1 = require("./ToolbarUtils");
|
10 | const ToolbarChipGroupContent_1 = require("./ToolbarChipGroupContent");
|
11 | const util_1 = require("../../helpers/util");
|
12 | const helpers_1 = require("../../helpers");
|
13 | const Page_1 = require("../Page/Page");
|
14 | class Toolbar extends React.Component {
|
15 | constructor() {
|
16 | super(...arguments);
|
17 | this.chipGroupContentRef = React.createRef();
|
18 | this.staticFilterInfo = {};
|
19 | this.state = {
|
20 | isManagedToggleExpanded: false,
|
21 | filterInfo: {},
|
22 | windowWidth: util_1.canUseDOM ? window.innerWidth : 1200,
|
23 | ouiaStateId: helpers_1.getDefaultOUIAId(Toolbar.displayName)
|
24 | };
|
25 | this.isToggleManaged = () => !(this.props.isExpanded || !!this.props.toggleIsExpanded);
|
26 | this.toggleIsExpanded = () => {
|
27 | this.setState(prevState => ({
|
28 | isManagedToggleExpanded: !prevState.isManagedToggleExpanded
|
29 | }));
|
30 | };
|
31 | this.closeExpandableContent = (e) => {
|
32 | if (e.target.innerWidth !== this.state.windowWidth) {
|
33 | this.setState(() => ({
|
34 | isManagedToggleExpanded: false,
|
35 | windowWidth: e.target.innerWidth
|
36 | }));
|
37 | }
|
38 | };
|
39 | this.updateNumberFilters = (categoryName, numberOfFilters) => {
|
40 | const filterInfoToUpdate = Object.assign({}, this.staticFilterInfo);
|
41 | if (!filterInfoToUpdate.hasOwnProperty(categoryName) || filterInfoToUpdate[categoryName] !== numberOfFilters) {
|
42 | filterInfoToUpdate[categoryName] = numberOfFilters;
|
43 | this.staticFilterInfo = filterInfoToUpdate;
|
44 | this.setState({ filterInfo: filterInfoToUpdate });
|
45 | }
|
46 | };
|
47 | this.getNumberOfFilters = () => Object.values(this.state.filterInfo).reduce((acc, cur) => acc + cur, 0);
|
48 | this.renderToolbar = (randomId) => {
|
49 | const _a = this.props, { clearAllFilters, clearFiltersButtonText, collapseListedFiltersBreakpoint, isExpanded: isExpandedProp, toggleIsExpanded, className, children, isFullHeight, isStatic, inset, usePageInsets, isSticky, ouiaId, numberOfFiltersText, customChipGroupContent } = _a, props = tslib_1.__rest(_a, ["clearAllFilters", "clearFiltersButtonText", "collapseListedFiltersBreakpoint", "isExpanded", "toggleIsExpanded", "className", "children", "isFullHeight", "isStatic", "inset", "usePageInsets", "isSticky", "ouiaId", "numberOfFiltersText", "customChipGroupContent"]);
|
50 | const { isManagedToggleExpanded } = this.state;
|
51 | const isToggleManaged = this.isToggleManaged();
|
52 | const isExpanded = isToggleManaged ? isManagedToggleExpanded : isExpandedProp;
|
53 | const numberOfFilters = this.getNumberOfFilters();
|
54 | const showClearFiltersButton = numberOfFilters > 0;
|
55 | return (React.createElement(Page_1.PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: react_styles_1.css(toolbar_1.default.toolbar, isFullHeight && toolbar_1.default.modifiers.fullHeight, isStatic && toolbar_1.default.modifiers.static, usePageInsets && toolbar_1.default.modifiers.pageInsets, isSticky && toolbar_1.default.modifiers.sticky, util_1.formatBreakpointMods(inset, toolbar_1.default, '', getBreakpoint(width)), className), id: randomId }, helpers_1.getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId), props),
|
56 | React.createElement(ToolbarUtils_1.ToolbarContext.Provider, { value: {
|
57 | isExpanded,
|
58 | toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
|
59 | chipGroupContentRef: this.chipGroupContentRef,
|
60 | updateNumberFilters: this.updateNumberFilters,
|
61 | numberOfFilters,
|
62 | clearAllFilters,
|
63 | clearFiltersButtonText,
|
64 | showClearFiltersButton,
|
65 | toolbarId: randomId,
|
66 | customChipGroupContent
|
67 | } },
|
68 | children,
|
69 | React.createElement(ToolbarChipGroupContent_1.ToolbarChipGroupContent, { isExpanded: isExpanded, chipGroupContentRef: this.chipGroupContentRef, clearAllFilters: clearAllFilters, showClearFiltersButton: showClearFiltersButton, clearFiltersButtonText: clearFiltersButtonText, numberOfFilters: numberOfFilters, numberOfFiltersText: numberOfFiltersText, collapseListedFiltersBreakpoint: collapseListedFiltersBreakpoint, customChipGroupContent: customChipGroupContent }))))));
|
70 | };
|
71 | }
|
72 | componentDidMount() {
|
73 | if (this.isToggleManaged() && util_1.canUseDOM) {
|
74 | window.addEventListener('resize', this.closeExpandableContent);
|
75 | }
|
76 | }
|
77 | componentWillUnmount() {
|
78 | if (this.isToggleManaged() && util_1.canUseDOM) {
|
79 | window.removeEventListener('resize', this.closeExpandableContent);
|
80 | }
|
81 | }
|
82 | render() {
|
83 | return this.props.id ? (this.renderToolbar(this.props.id)) : (React.createElement(GenerateId_1.GenerateId, null, randomId => this.renderToolbar(randomId)));
|
84 | }
|
85 | }
|
86 | exports.Toolbar = Toolbar;
|
87 | Toolbar.displayName = 'Toolbar';
|
88 |
|
\ | No newline at end of file |