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