@adaptabletools/adaptable/src/View/QuickSearch/QuickSearchInput.js

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

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
import { AdaptableFormControlTextClear } from '../Components/Forms/AdaptableFormControlTextClear';
import { useQuickSearchDebounced } from './useQuickSearchDebounced';
import { useAdaptable } from '../AdaptableContext';
export const QuickSearchInput = (props) => {
    const adaptable = useAdaptable();
    const QuickSearchText = useSelector((state) => state.QuickSearch.QuickSearchText);
    const dispatch = useDispatch();
    const onRunQuickSearch = React.useCallback((newQuickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(newQuickSearchText)), []);
    const [searchText, search] = useQuickSearchDebounced({
        QuickSearchText,
        onRunQuickSearch,
    });
    return (React.createElement(AdaptableFormControlTextClear, { type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: props.className, value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: props.width ?? '10rem' } }));
};