@adaptabletools/adaptable/src/View/Filter/FilterViewPanel.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
import * as React from 'react';
import { ActiveFiltersPanel } from './ActiveFiltersPanel';
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 { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
import SimpleButton from '../../components/SimpleButton';
import join from '../../components/utils/join';
import { Flex } from '../../components/Flex';
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 (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsxs(Flex, { children: [ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (_jsx(AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [_jsx(ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), _jsx(ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), _jsx(SimpleButton, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', 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: "neutral", variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'resume', accessLevel: this.props.accessLevel })] }), _jsx(Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (_jsx(CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === ACCESS_LEVEL_READ_ONLY ||
                            this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                            checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                        }, children: "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);