@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
56 lines (55 loc) • 4.09 kB
JavaScript
import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
import * as React from 'react';
import { ActiveFiltersPanel } from './ActiveFiltersPanel';
import { Flex } from 'rebass';
import { ArrayExtensions } from '../../Utilities/Extensions/ArrayExtensions';
import { AdaptablePopover } from '../AdaptablePopover';
import { ButtonClear } from '../Components/Buttons/ButtonClear';
import { CheckBox } from '../../components/CheckBox';
import { connect } from 'react-redux';
import { getColumnFiltersSelector } from '../../Redux/ActionsReducers/LayoutRedux';
import SimpleButton from '../../components/SimpleButton';
import join from '../../components/utils/join';
class FilterViewPanelComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
const isAtLeastOneFilterActive = this.props.api.filterApi.columnFilterApi.getActiveColumnFilters().length > 0;
const isAtLeastOneFilter = this.props.api.filterApi.columnFilterApi.getColumnFilters().length > 0;
const handleSuspendUnsuspendAll = () => {
if (isAtLeastOneFilterActive) {
this.props.api.filterApi.columnFilterApi.suspendAllColumnFilters();
}
else {
this.props.api.filterApi.columnFilterApi.unSuspendAllColumnFilters();
}
};
return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
React.createElement(Flex, null,
ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
React.createElement(ButtonClear, { className: `ab-${elementType}__Filter__clear`, marginLeft: 1, marginBottom: 0, marginRight: 1, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear'),
React.createElement(SimpleButton, { className: join(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })),
React.createElement(Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox, { className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
this.props.api.layoutApi.isCurrentLayoutPivot(), marginTop: 0, marginBottom: 0, fontSize: 2, padding: 1, checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
} }, "Filter Bar")))));
}
onClearFilters() {
this.props.api.filterApi.columnFilterApi.clearColumnFilters();
}
}
function mapStateToProps(state) {
return {
ColumnFilters: getColumnFiltersSelector(state),
IsQuickFilterVisible: state.Internal.IsQuickFilterVisible,
};
}
function mapDispatchToProps(dispatch) {
return {
onHideQuickFilterBar: () => dispatch(InternalRedux.QuickFilterBarHide()),
onShowQuickFilterBar: () => dispatch(InternalRedux.QuickFilterBarShow()),
};
}
export const FilterViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(FilterViewPanelComponent);