import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar'; import { css } from '@patternfly/react-styles'; import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils'; import { formatBreakpointMods } from '../../helpers/util'; import { PageContext } from '../Page/PageContext'; export interface ToolbarContentProps extends React.HTMLProps { /** Classes applied to root element of the data toolbar content row */ className?: string; /** Visibility at various breakpoints. */ visibility?: { default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }; /** Vertical alignment of children */ alignItems?: 'start' | 'center' | 'baseline' | 'default'; /** Content to be rendered as children of the content row */ children?: React.ReactNode; /** Flag indicating if a data toolbar toggle group's expandable content is expanded */ isExpanded?: boolean; /** Optional callback for clearing all filters in the toolbar */ clearAllFilters?: () => void; /** Flag indicating that the clear all filters button should be visible */ showClearFiltersButton?: boolean; /** Text to display in the clear all filters button */ clearFiltersButtonText?: string; /** Id of the parent Toolbar component */ toolbarId?: string; } class ToolbarContent extends React.Component { static displayName = 'ToolbarContent'; private expandableContentRef = React.createRef(); private labelContainerRef = React.createRef(); private static currentId = 0; static defaultProps: ToolbarContentProps = { isExpanded: false, showClearFiltersButton: false }; render() { const { className, children, isExpanded, toolbarId, visibility, alignItems, clearAllFilters, showClearFiltersButton, clearFiltersButtonText, ...props } = this.props; return ( {({ width, getBreakpoint }) => (
{({ clearAllFilters: clearAllFiltersContext, clearFiltersButtonText: clearFiltersButtonContext, showClearFiltersButton: showClearFiltersButtonContext, isExpanded: isExpandedContext, toolbarId: toolbarIdContext }) => { const expandableContentId = `${ toolbarId || toolbarIdContext }-expandable-content-${ToolbarContent.currentId++}`; return (
{children}
); }}
)} ); } } export { ToolbarContent };