mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
1b05cbea62
* update react-instantsearch-dom & core * fixup! update react-instantsearch-dom & core * fixup! update react-instantsearch-dom & core * fixup! update react-instantsearch-dom & core
386 lines
10 KiB
TypeScript
386 lines
10 KiB
TypeScript
import * as React from "react";
|
|
|
|
import { connectMenu, connectRefinementList, connectStateResults, SearchState } from "react-instantsearch/connectors";
|
|
import { InstantSearch, SearchBox, Index, Hits, Highlight, Menu } from "react-instantsearch/dom";
|
|
import { orderBy, omit, values } from 'lodash';
|
|
import { createInstantSearch } from "react-instantsearch-core";
|
|
|
|
// https://community.algolia.com/react-instantsearch/guide/Search_state.html
|
|
() => {
|
|
const searchState: SearchState = {
|
|
range: {
|
|
price: {
|
|
min: 20,
|
|
max: 3000
|
|
}
|
|
},
|
|
configure: {
|
|
aroundLatLng: true,
|
|
},
|
|
refinementList: {
|
|
fruits: ['lemon', 'orange']
|
|
},
|
|
hierarchicalMenu: {
|
|
products: 'Laptops > Surface'
|
|
},
|
|
menu: {
|
|
brands: 'Sony'
|
|
},
|
|
multiRange: {
|
|
rank: '2:5'
|
|
},
|
|
toggle: {
|
|
freeShipping: true
|
|
},
|
|
hitsPerPage: 10,
|
|
sortBy: 'mostPopular',
|
|
query: 'ora',
|
|
page: 2
|
|
};
|
|
};
|
|
|
|
() => {
|
|
const searchState: SearchState = {
|
|
query: 'ora', // shared state between all indices
|
|
page: 2, // shared state between all indices
|
|
indices: {
|
|
index1: {
|
|
configure: {
|
|
hitsPerPage: 3,
|
|
},
|
|
},
|
|
index2: {
|
|
configure: {
|
|
hitsPerPage: 10,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
// https://community.algolia.com/react-instantsearch/guide/Custom_connectors.html
|
|
// TODO
|
|
// () => {
|
|
// const CoolWidget = createConnector({
|
|
// displayName: 'CoolWidget',
|
|
|
|
// getProvidedProps(props, searchState) {
|
|
// // Since the `queryAndPage` searchState entry isn't necessarily defined, we need
|
|
// // to default its value.
|
|
// const [query, page] = searchState.queryAndPage || ['', 0];
|
|
|
|
// // Connect the underlying component to the `queryAndPage` searchState entry.
|
|
// return {
|
|
// query,
|
|
// page,
|
|
// };
|
|
// },
|
|
|
|
// refine(props, searchState, newQuery, newPage) {
|
|
// // When the underlying component calls its `refine` prop, update the searchState
|
|
// // with the new query and page.
|
|
// return {
|
|
// // `searchState` represents the search state of *all* widgets. We need to extend it
|
|
// // instead of replacing it, otherwise other widgets will lose their
|
|
// // respective state.
|
|
// ...searchState,
|
|
// queryAndPage: [newQuery, newPage],
|
|
// };
|
|
// },
|
|
// })(props =>
|
|
// <div>
|
|
// The query is {props.query}, the page is {props.page}.
|
|
// {/*
|
|
// Clicking on this button will update the searchState to:
|
|
// {
|
|
// ...otherSearchState,
|
|
// query: 'algolia',
|
|
// page: 20,
|
|
// }
|
|
// */}
|
|
// <button onClick={() => props.refine('algolia', 20)} />
|
|
// {/*
|
|
// Clicking on this button will update the searchState to:
|
|
// {
|
|
// ...otherSearchState,
|
|
// query: 'instantsearch',
|
|
// page: 15,
|
|
// }
|
|
// */}
|
|
// <button onClick={() => props.refine('instantsearch', 15)} />
|
|
// </div>
|
|
// );
|
|
// };
|
|
|
|
// TODO
|
|
// () => {
|
|
// const Widget = () => null;
|
|
|
|
// const CoolWidget = createConnector({
|
|
// // displayName, getProvidedProps, refine
|
|
|
|
// getSearchParameters(searchParameters, props, searchState) {
|
|
// // Since the `queryAndPage` state entry isn't necessarily defined, we need
|
|
// // to default its value.
|
|
// const [query, page] = searchState.queryAndPage || ['', 0];
|
|
|
|
// // When the `queryAndPage` state entry changes, update the query and page of
|
|
// // search.
|
|
// return searchParameters
|
|
// .setQuery(query)
|
|
// .setPage(page);
|
|
// },
|
|
// })(Widget);
|
|
// };
|
|
|
|
// TODO
|
|
// () => {
|
|
// const Widget = () => null;
|
|
|
|
// const CoolWidget = createConnector({
|
|
// // displayName, getProvidedProps, refine, getSearchParameters
|
|
|
|
// getMetadata(props, searchState) {
|
|
// // Since the `queryAndPage` searchState entry isn't necessarily defined, we need
|
|
// // to default its value.
|
|
// const [query, page] = searchState.queryAndPage || ['', 0];
|
|
|
|
// const filters = [];
|
|
// if (query !== '') {
|
|
// filters.push({
|
|
// // Unique identifier for this filter.
|
|
// key: `queryAndPage.query`,
|
|
// // String label (or node) that should appear in the CurrentRefinements
|
|
// // component.
|
|
// label: `Query: ${query}`,
|
|
// // Describes how clearing this filter affects the InstantSearch searchState.
|
|
// // In our case, clearing the query just resets it to an empty string
|
|
// // without affecting the page.
|
|
// clear: nextSearchState => {
|
|
// return {
|
|
// ...nextSearchState,
|
|
// // Do not depend on the current `searchState` here. Since filters can be
|
|
// // cleared in batches, the `searchState` parameter is not up-to-date when
|
|
// // this method is called.
|
|
// queryAndPage: ['', nextSearchState.queryAndPage[1]],
|
|
// };
|
|
// },
|
|
// });
|
|
// }
|
|
|
|
// if (page !== 0) {
|
|
// filters.push({
|
|
// key: `queryAndPage.page`,
|
|
// label: `Page: ${page}`,
|
|
// clear: nextSearchState => {
|
|
// return {
|
|
// ...nextSearchState,
|
|
// queryAndPage: [nextSearchState.queryAndPage[0], 0],
|
|
// };
|
|
// },
|
|
// });
|
|
// }
|
|
|
|
// return {
|
|
// // This widget manipulates the `queryAndPage` state entry.
|
|
// id: 'queryAndPage',
|
|
// filters,
|
|
// };
|
|
// },
|
|
// })(Widget);
|
|
// };
|
|
|
|
// TODO
|
|
// () => {
|
|
// const Widget = () => null;
|
|
|
|
// const CoolWidget = createConnector({
|
|
// // displayName, getProvidedProps, refine, getSearchParameters, getMetadata
|
|
|
|
// searchForFacetValues(props, searchState, nextRefinement) {
|
|
// return {facetName: props.attribute, query: nextRefinement};
|
|
// },
|
|
// })(Widget);
|
|
// };
|
|
|
|
// TODO
|
|
// () => {
|
|
// const Widget = () => null;
|
|
|
|
// const CoolWidget = createConnector({
|
|
// // displayName, getProvidedProps, refine, getSearchParameters, getMetadata
|
|
|
|
// cleanUp(props, searchState) {
|
|
// return omit('queryAndPage', searchState);
|
|
// },
|
|
// })(Widget);
|
|
// };
|
|
|
|
// https://community.algolia.com/react-instantsearch/guide/Conditional_display.html
|
|
() => {
|
|
const Content = connectStateResults(
|
|
({ searchState }) =>
|
|
searchState && searchState.query
|
|
? <div>
|
|
The query {searchState.query} exists
|
|
</div>
|
|
: <div>No query</div>
|
|
);
|
|
};
|
|
|
|
() => {
|
|
const Content = connectStateResults(
|
|
({ searchState, searchResults }) =>
|
|
searchResults && searchResults.nbHits !== 0
|
|
? <div>Some results</div>
|
|
: <div>
|
|
No results has been found for {searchState.query}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
() => {
|
|
const Content = connectStateResults(
|
|
({ error }) =>
|
|
error ? <div>Some error</div> : <div>No error</div>
|
|
);
|
|
};
|
|
|
|
() => {
|
|
const Content = connectStateResults(
|
|
({ searching }) =>
|
|
searching ? <div>We are searching</div> : <div>Search finished</div>
|
|
);
|
|
};
|
|
|
|
() => {
|
|
const Content = connectStateResults(
|
|
({ searchingForFacetValues }) =>
|
|
searchingForFacetValues ? <div>We are searching</div> : <div>Search finished</div>
|
|
);
|
|
};
|
|
|
|
() => {
|
|
const App = () => (
|
|
<InstantSearch indexName="first" searchClient={{}}>
|
|
<SearchBox />
|
|
<AllResults>
|
|
<div>
|
|
<Index indexName="first">
|
|
<IndexResults>
|
|
<div>
|
|
<div>first: </div>
|
|
<Hits />
|
|
</div>
|
|
</IndexResults>
|
|
</Index>
|
|
<Index indexName="second">
|
|
<IndexResults>
|
|
<div>
|
|
<div>second: </div>
|
|
<Hits />
|
|
</div>
|
|
</IndexResults>
|
|
</Index>
|
|
<Index indexName="third">
|
|
<IndexResults>
|
|
<div>
|
|
<div>third: </div>
|
|
<Hits />
|
|
</div>
|
|
</IndexResults>
|
|
</Index>
|
|
</div>
|
|
</AllResults>
|
|
</InstantSearch>
|
|
);
|
|
|
|
const IndexResults = connectStateResults(
|
|
({ searchState, searchResults, children }) =>
|
|
searchResults && searchResults.nbHits !== 0 ? (
|
|
children as React.ReactElement
|
|
) : (
|
|
<div>
|
|
No results has been found for {searchState.query} and index{' '}
|
|
{searchResults ? searchResults.index : ''}
|
|
</div>
|
|
)
|
|
);
|
|
|
|
const AllResults = connectStateResults(({ allSearchResults, children }) => {
|
|
const hasResults =
|
|
allSearchResults &&
|
|
values(allSearchResults).some(results => results.nbHits > 0);
|
|
|
|
return !hasResults ? (
|
|
<div>
|
|
<div>No results in category, products or brand</div>
|
|
<Index indexName="first" />
|
|
<Index indexName="second" />
|
|
<Index indexName="third" />
|
|
</div>
|
|
) : (
|
|
children as React.ReactElement
|
|
);
|
|
});
|
|
};
|
|
|
|
// https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch-dom/src/widgets/InstantSearch.js
|
|
() => {
|
|
const InstantSearch = createInstantSearch(
|
|
() => ({}),
|
|
{
|
|
Root: 'div',
|
|
props: {
|
|
className: 'ais-InstantSearch__root',
|
|
},
|
|
}
|
|
);
|
|
|
|
<InstantSearch />;
|
|
};
|
|
|
|
() => {
|
|
const RefinementListWithSearchBox = connectRefinementList(props => {
|
|
const values = props.items.map(item => {
|
|
const label = item._highlightResult
|
|
? <Highlight attribute="label" hit={item}/>
|
|
: item.label;
|
|
|
|
return (
|
|
<li key={item.label}>
|
|
<span onClick={() => props.refine(item.value)}>
|
|
{label} {item.isRefined ? '- selected' : ''}
|
|
</span>
|
|
</li>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<input type="search" onInput={e => props.searchForItems((e.target as HTMLInputElement).value)}/>
|
|
<ul>{values}</ul>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return <RefinementListWithSearchBox attribute="products" />;
|
|
};
|
|
|
|
// https://community.algolia.com/react-instantsearch/guide/Virtual_widgets.html
|
|
() => {
|
|
const VirtualMenu = connectMenu(() => null);
|
|
const Hoodies = () => <VirtualMenu attribute="clothes" defaultRefinement="hoodies" />;
|
|
|
|
const App = () => (
|
|
<InstantSearch
|
|
indexName="..."
|
|
searchClient={{}}
|
|
>
|
|
<SearchBox defaultRefinement="hi" />
|
|
<Hoodies />
|
|
<Menu attribute="fruits" defaultRefinement="Orange" />
|
|
</InstantSearch>
|
|
);
|
|
};
|