UNPKG

@elastic/react-search-ui

Version:

A React library for building search experiences

80 lines (63 loc) 4.63 kB
import React$1 from 'react'; import { SearchState, SearchDriverActions, SearchDriver, SearchDriverOptions, SearchContextState as SearchContextState$1 } from '@elastic/search-ui'; import { ErrorBoundaryViewProps, FacetContainerProps, PagingContainerProps, PagingInfoContainerProps, ResultContainerProps, ResultsContainerProps, ResultsPerPageContainerProps, SearchBoxContainerProps, SortingContainerProps } from '@elastic/react-search-ui-views'; type SearchContextState = SearchState & SearchDriverActions; /** * This is a Higher Order Component that wraps a component and injects state and actions from Search UI, effectively * "connecting" it to Search UI. * * Components using `withSearch` will be "Pure" components. * It is important to understand the implications of using a PureComponent, as described here: * https://reactjs.org/docs/optimizing-performance.html#examples * * @param Function mapContextToProps A function that accepts the context and allows you to pick the values to be passed as props * into the component. This allows you to "select" which values from the context to use. * @param Function Component */ type withSearchProps<T> = { mapContextToProps?: (context: SearchContextState) => T; }; declare function withSearch<TProps, TContext>(mapContextToProps: (context: SearchContextState) => TContext): (Component: React$1.ComponentType<any>) => React$1.ComponentType<Omit<TProps, keyof TContext> & withSearchProps<TContext>>; interface SearchProviderContextInterface { driver: SearchDriver; } type SearchProviderProps = { children: React$1.ReactNode; config: SearchDriverOptions; driver?: SearchDriver; }; /** * The SearchProvider primarily holds a reference to the SearchDriver and * exposes it to the rest of the application in a Context. */ declare const SearchProvider: ({ children, config, driver }: SearchProviderProps) => React$1.JSX.Element; declare const SearchContext: React$1.Context<SearchProviderContextInterface>; interface WithSearchProps { mapContextToProps?: (context: SearchContextState) => Partial<SearchContextState>; children: (props: Partial<SearchContextState>) => React$1.ReactNode; } declare function WithSearch({ mapContextToProps, children }: WithSearchProps): React$1.JSX.Element; type BaseContainerProps = { children?: React.ReactNode; className?: string; }; type ErrorBoundaryContainerProps = BaseContainerProps & { view?: React$1.ComponentType<ErrorBoundaryViewProps>; }; declare const ErrorBoundaryContainer: ({ children, className, view, ...rest }: ErrorBoundaryContainerProps) => React$1.JSX.Element; declare const FacetContainer: ({ className, field, filterType, label, view, isFilterable, show, persistent, ...rest }: FacetContainerProps) => React$1.JSX.Element; declare const PagingContainer: ({ className, view, ...rest }: PagingContainerProps) => React$1.JSX.Element; declare const PagingInfoContainer: ({ className, view, ...rest }: PagingInfoContainerProps) => React$1.JSX.Element; declare const ResultContainer: ({ result, shouldTrackClickThrough, clickThroughTags, view, ...rest }: ResultContainerProps) => React$1.JSX.Element; declare const ResultsContainer: ({ clickThroughTags, resultView, shouldTrackClickThrough, titleField, urlField, thumbnailField, view, ...rest }: ResultsContainerProps) => React$1.JSX.Element; declare const ResultsPerPageContainer: ({ className, options, view, ...rest }: ResultsPerPageContainerProps) => React$1.JSX.Element; declare const SearchBoxContainer: ({ autocompleteMinimumCharacters, autocompleteResults, autocompleteSuggestions, className, autocompleteView, inputProps, inputView, onSelectAutocomplete, shouldClearFilters, onSubmit, searchAsYouType, debounceLength, view, ...rest }: SearchBoxContainerProps) => React$1.JSX.Element; declare const SortingContainer: ({ className, label, sortOptions, view, ...rest }: SortingContainerProps) => React$1.JSX.Element; /** * React hook that provides access to Search UI state and actions * * @param mapContextToProps Optional function to select specific parts of the context * @returns Selected search context state and actions */ declare function useSearch<T = SearchContextState$1>(mapContextToProps?: (context: SearchContextState$1) => T): T; export { ErrorBoundaryContainer as ErrorBoundary, FacetContainer as Facet, PagingContainer as Paging, PagingInfoContainer as PagingInfo, ResultContainer as Result, ResultsContainer as Results, ResultsPerPageContainer as ResultsPerPage, SearchBoxContainer as SearchBox, SearchContext, SearchProvider, SortingContainer as Sorting, WithSearch, useSearch, withSearch };