@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
49 lines (48 loc) • 6.62 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { connect } from 'react-redux';
import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import { StyleComponent } from '../Components/StyleComponent';
import { Box, Flex } from '../../components/Flex';
import { CheckBox } from '../../components/CheckBox';
import { Tabs } from '../../components/Tabs';
import StringExtensions from '../../Utilities/Extensions/StringExtensions';
import { useQuickSearchDebounced } from './useQuickSearchDebounced';
import { QuickSearchInput } from './QuickSearchInput';
import { Card } from '../../components/Card';
import { isQuickSearchStyleUnset, resolveQuickSearchCurrentTextMatchStyle, resolveQuickSearchTextMatchStyle, } from '../../Utilities/Helpers/QuickSearchHelper';
const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: headerText }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: helpText })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", api: api, Style: style, UpdateStyle: updateStyle }) })] }));
const QuickSearchPopupComponent = (props) => {
const [searchText, search] = useQuickSearchDebounced(props);
const [state, setState] = useState({
RunQueryAfterQuickSearch: props.api.optionsApi.getQuickSearchOptions().filterGridAfterQuickSearch,
});
const onQuickSearchBehaviourChange = (checked) => {
setState({ ...state, RunQueryAfterQuickSearch: checked });
props.api.optionsApi.getAdaptableOptions().quickSearchOptions.filterGridAfterQuickSearch =
checked;
};
const isServerSideRowModel = props.api.agGridApi.getGridOption('rowModelType') === 'serverSide';
return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Search Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter the text to find across visible grid cells" })] }), _jsx(Card.Body, { className: "twa:p-1 twa:w-fit", children: _jsx(QuickSearchInput, {}) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Behaviour" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Filter the grid to matching rows only when searching; use with care as this can affect performance" })] }), _jsx(Card.Body, { className: "twa:p-1", gap: 2, children: _jsx(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Matching Styles" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure colours and fonts for how search matches appear in the grid" })] }), _jsx(Card.Body, { className: "twa:p-1", children: isServerSideRowModel ? (_jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle })) : (_jsxs(Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [_jsx(Tabs.Tab, { value: "text", children: "Text Match" }), _jsx(Tabs.Tab, { value: "current", children: "Current Match" }), _jsx(Tabs.Tab, { value: "cell", children: "Cell Match" }), _jsx(Tabs.Content, { value: "text", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }) }), _jsx(Tabs.Content, { value: "current", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }) }), _jsx(Tabs.Content, { value: "cell", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) }) })] })) })] })] }) }));
};
function mapStateToProps(state, ownProps) {
const quickSearch = state.QuickSearch;
return {
QuickSearchText: quickSearch.QuickSearchText,
QuickSearchTextMatchStyle: resolveQuickSearchTextMatchStyle(quickSearch),
QuickSearchCurrentTextMatchStyle: resolveQuickSearchCurrentTextMatchStyle(quickSearch),
QuickSearchCellMatchStyle: isQuickSearchStyleUnset(quickSearch.CellMatchStyle)
? {}
: quickSearch.CellMatchStyle,
};
}
function mapDispatchToProps(dispatch) {
return {
onRunQuickSearch: (quickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(quickSearchText)),
onSetTextMatchingStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetTextMatchingStyle(style)),
onSetCurrentTextMatchingStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetCurrentTextMatchingStyle(style)),
onSetCellMatchingStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetCellMatchingStyle(style)),
};
}
export const QuickSearchPopup = connect(mapStateToProps, mapDispatchToProps)(QuickSearchPopupComponent);