@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
57 lines (56 loc) • 3.78 kB
JavaScript
import * as React from 'react';
import { useState } from 'react';
import { connect } from 'react-redux';
import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import Panel from '../../components/Panel';
import FormLayout, { FormRow } from '../../components/FormLayout';
import { StyleComponent } from '../Components/StyleComponent';
import { Flex } from 'rebass';
import { CheckBox } from '../../components/CheckBox';
import StringExtensions from '../../Utilities/Extensions/StringExtensions';
import { useQuickSearchDebounced } from './useQuickSearchDebounced';
import { QuickSearchInput } from './QuickSearchInput';
import HelpBlock from '../../components/HelpBlock';
const QuickSearchPopupComponent = (props) => {
const [searchText, search] = useQuickSearchDebounced(props);
const [state, setState] = useState({
RunQueryAfterQuickSearch: props.api.optionsApi.getQuickSearchOptions().filterGridAfterQuickSearch,
EditedStyle: props.QuickSearchStyle,
});
const onUpdateStyle = (style) => {
setState({ ...state, EditedStyle: style });
props.onSetMatchingCellStyle(style);
};
const onQuickSearchBehaviourChange = (checked) => {
setState({ ...state, RunQueryAfterQuickSearch: checked });
props.api.optionsApi.getAdaptableOptions().quickSearchOptions.filterGridAfterQuickSearch =
checked;
};
return (React.createElement(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
React.createElement(Panel, { header: props.moduleInfo.FriendlyName + ' Text', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
React.createElement(FormLayout, null,
React.createElement(QuickSearchInput, null))),
React.createElement(Panel, { header: props.api.internalApi.getCorrectEnglishVariant('Behaviour'), style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
' ',
React.createElement(Flex, { flexDirection: "column" },
React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Filters the Grid to only show rows with matching cells; use with care as can cause performance issues"),
' ',
React.createElement(FormLayout, { columns: [1, 2] },
React.createElement(FormRow, null,
React.createElement(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", marginLeft: 1, marginRight: 3, checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))))),
React.createElement(StyleComponent, { style: { height: '100%' }, headerText: 'Cell Matching Style', api: props.api, Style: props.QuickSearchStyle, UpdateStyle: onUpdateStyle })));
};
function mapStateToProps(state, ownProps) {
return {
QuickSearchText: state.QuickSearch.QuickSearchText,
QuickSearchStyle: state.QuickSearch.CellMatchStyle ?? {},
};
}
function mapDispatchToProps(dispatch) {
return {
onRunQuickSearch: (quickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(quickSearchText)),
onSetMatchingCellStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetCellMatchingStyle(style)),
};
}
export const QuickSearchPopup = connect(mapStateToProps, mapDispatchToProps)(QuickSearchPopupComponent);