mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-04 14:57:10 +00:00
Move dom definitions to react-instantsearch-dom
This commit is contained in:
Gordon
@@ -4,7 +4,10 @@ import {
|
||||
createIndex,
|
||||
createConnector,
|
||||
SearchResults,
|
||||
connectStateResults
|
||||
connectStateResults,
|
||||
SearchBoxProvided,
|
||||
connectSearchBox,
|
||||
connectRefinementList
|
||||
} from 'react-instantsearch-core';
|
||||
|
||||
() => {
|
||||
@@ -135,3 +138,18 @@ import {
|
||||
{}
|
||||
);
|
||||
};
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Connectors.html
|
||||
() => {
|
||||
const MySearchBox = ({currentRefinement, refine}: SearchBoxProvided) =>
|
||||
<input
|
||||
type="text"
|
||||
value={currentRefinement}
|
||||
onChange={e => refine(e.target.value)}
|
||||
/>;
|
||||
|
||||
// `ConnectedSearchBox` renders a `<MySearchBox>` widget that is connected to
|
||||
// the <InstantSearch> state, providing it with `currentRefinement` and `refine` props for
|
||||
// reading and manipulating the current query of the search.
|
||||
const ConnectedSearchBox = connectSearchBox(MySearchBox);
|
||||
};
|
||||
|
||||
+136
@@ -0,0 +1,136 @@
|
||||
// Type definitions for react-instantsearch 5.2
|
||||
// Project: https://community.algolia.com/react-instantsearch/
|
||||
// Definitions by: Gordon Burgett <https://github.com/gburgett>
|
||||
// Justin Powell <https://github.com/jpowell>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.9
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import { Hit, BasicDoc } from 'react-instantsearch-core';
|
||||
|
||||
// Core
|
||||
export { createConnector } from 'react-instantsearch-core';
|
||||
export { HIGHLIGHT_TAGS } from 'react-instantsearch-core';
|
||||
export { translatable } from 'react-instantsearch-core';
|
||||
|
||||
// Widget
|
||||
export { Configure } from 'react-instantsearch-core';
|
||||
|
||||
// Connectors
|
||||
export { connectAutoComplete } from 'react-instantsearch-core';
|
||||
export { connectBreadcrumb } from 'react-instantsearch-core';
|
||||
export { connectConfigure } from 'react-instantsearch-core';
|
||||
export { connectCurrentRefinements } from 'react-instantsearch-core';
|
||||
export { connectGeoSearch } from 'react-instantsearch-core';
|
||||
export { connectHierarchicalMenu } from 'react-instantsearch-core';
|
||||
export { connectHighlight } from 'react-instantsearch-core';
|
||||
export { connectHits } from 'react-instantsearch-core';
|
||||
export { connectHitsPerPage } from 'react-instantsearch-core';
|
||||
export { connectInfiniteHits } from 'react-instantsearch-core';
|
||||
export { connectMenu } from 'react-instantsearch-core';
|
||||
export { connectNumericMenu } from 'react-instantsearch-core';
|
||||
export { connectPagination } from 'react-instantsearch-core';
|
||||
export { connectPoweredBy } from 'react-instantsearch-core';
|
||||
export { connectRange } from 'react-instantsearch-core';
|
||||
export { connectRefinementList } from 'react-instantsearch-core';
|
||||
export { connectScrollTo } from 'react-instantsearch-core';
|
||||
export { connectSearchBox } from 'react-instantsearch-core';
|
||||
export { connectSortBy } from 'react-instantsearch-core';
|
||||
export { connectStateResults } from 'react-instantsearch-core';
|
||||
export { connectStats } from 'react-instantsearch-core';
|
||||
export { connectToggleRefinement } from 'react-instantsearch-core';
|
||||
|
||||
// DOM
|
||||
interface CommonWidgetProps {
|
||||
/**
|
||||
* All static text rendered by widgets, such as “Load more”, “Show more” are translatable using the translations prop on relevant widgets.
|
||||
* This prop is a mapping of keys to translation values. Translation values can be either a String or a (...args: any[]) => any, as some take parameters.
|
||||
*
|
||||
* https://community.algolia.com/react-instantsearch/guide/i18n.html
|
||||
*/
|
||||
translations?: { [key: string]: string | ((...args: any[]) => any) };
|
||||
}
|
||||
|
||||
export interface InstantSearchProps {
|
||||
apiKey: string;
|
||||
appId: string;
|
||||
indexName: string;
|
||||
|
||||
algoliaClient?: any;
|
||||
searchClient?: any;
|
||||
createURL?: (...args: any[]) => any;
|
||||
searchState?: any;
|
||||
refresh?: boolean;
|
||||
onSearchStateChange?: (...args: any[]) => any;
|
||||
onSearchParameters?: (...args: any[]) => any;
|
||||
resultsState?: any;
|
||||
root?: {
|
||||
Root: string | ((...args: any[]) => any);
|
||||
props: any;
|
||||
};
|
||||
}
|
||||
/**
|
||||
* <InstantSearch> is the root component of all React InstantSearch implementations. It provides all the connected components (aka widgets) a means to interact with the searchState.
|
||||
*
|
||||
* https://community.algolia.com/react-instantsearch/widgets/%3CInstantSearch%3E.html
|
||||
*/
|
||||
export class InstantSearch extends React.Component<InstantSearchProps> {}
|
||||
export class Index extends React.Component<any> {}
|
||||
export class Breadcrumb extends React.Component<any> {}
|
||||
export class ClearRefinements extends React.Component<any> {}
|
||||
export class CurrentRefinements extends React.Component<any> {}
|
||||
export class HierarchicalMenu extends React.Component<any> {}
|
||||
export class Highlight extends React.Component<any> {}
|
||||
|
||||
export interface HitsProps<T> {
|
||||
hitComponent?: React.ComponentType<{ hit: Hit<T> }>;
|
||||
}
|
||||
/**
|
||||
* Displays a list of hits.
|
||||
* To configure the number of hits being shown, use the HitsPerPage widget, connectHitsPerPage connector or the Configure widget.
|
||||
*
|
||||
* https://community.algolia.com/react-instantsearch/widgets/Hits.html
|
||||
*/
|
||||
export class Hits<T = BasicDoc> extends React.Component<HitsProps<T>> {}
|
||||
export class HitsPerPage extends React.Component<any> {}
|
||||
export class InfiniteHits extends React.Component<any> {}
|
||||
export class Menu extends React.Component<any> {}
|
||||
export class MenuSelect extends React.Component<any> {}
|
||||
export class NumericMenu extends React.Component<any> {}
|
||||
export class Pagination extends React.Component<any> {}
|
||||
export class Panel extends React.Component<any> {}
|
||||
export class PoweredBy extends React.Component<any> {}
|
||||
export class RangeInput extends React.Component<any> {}
|
||||
export class RangeSlider extends React.Component<any> {}
|
||||
export class RatingMenu extends React.Component<any> {}
|
||||
export class RefinementList extends React.Component<any> {}
|
||||
export class ScrollTo extends React.Component<any> {}
|
||||
|
||||
export interface SearchBoxProps extends CommonWidgetProps {
|
||||
focusShortcuts?: string[];
|
||||
autoFocus?: boolean;
|
||||
defaultRefinement?: string;
|
||||
searchAsYouType?: boolean;
|
||||
showLoadingIndicator?: boolean;
|
||||
|
||||
submit?: JSX.Element;
|
||||
reset?: JSX.Element;
|
||||
loadingIndicator?: JSX.Element;
|
||||
|
||||
onSubmit?: (...args: any[]) => any;
|
||||
onReset?: (...args: any[]) => any;
|
||||
}
|
||||
/**
|
||||
* The SearchBox component displays a search box that lets the user search for a specific query.
|
||||
*
|
||||
* https://community.algolia.com/react-instantsearch/widgets/SearchBox.html
|
||||
*/
|
||||
export class SearchBox extends React.Component<SearchBoxProps> {}
|
||||
export class Snippet extends React.Component<any> {}
|
||||
export class SortBy extends React.Component<any> {}
|
||||
/**
|
||||
* The Stats component displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).
|
||||
*/
|
||||
export class Stats extends React.Component<{translations?: { [key: string]: (n: number, ms: number) => string }}> {}
|
||||
export class ToggleRefinement extends React.Component<any> {}
|
||||
@@ -0,0 +1,215 @@
|
||||
import * as React from 'react';
|
||||
import { InstantSearch, Hits, Highlight, SearchBox, RefinementList, CurrentRefinements, ClearRefinements, Pagination, Menu, Configure, Index } from 'react-instantsearch/dom';
|
||||
import { Hit, connectRefinementList, connectMenu } from 'react-instantsearch-core';
|
||||
|
||||
// DOM
|
||||
// https://community.algolia.com/react-instantsearch/Getting_started.html
|
||||
() => {
|
||||
const App = () => (
|
||||
<InstantSearch
|
||||
appId="latency"
|
||||
apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
|
||||
indexName="bestbuy"
|
||||
>
|
||||
<Search />
|
||||
</InstantSearch>
|
||||
);
|
||||
|
||||
function Search() {
|
||||
return (
|
||||
<div className="container">
|
||||
<Hits />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Product({ hit }: { hit: Hit }) {
|
||||
return <div>{hit.name}</div>;
|
||||
}
|
||||
|
||||
function Search2() {
|
||||
return (
|
||||
<div>
|
||||
<Hits hitComponent={Product} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Product2({ hit }: { hit: Hit }) {
|
||||
return (
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<span className="hit-name">
|
||||
<Highlight attribute="name" hit={hit} />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Search3() {
|
||||
return (
|
||||
<div className="container">
|
||||
<SearchBox />
|
||||
<RefinementList attribute="category" />
|
||||
<Hits hitComponent={Product} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Search4() {
|
||||
return (
|
||||
<div className="container">
|
||||
<CurrentRefinements />
|
||||
<ClearRefinements />
|
||||
<SearchBox />
|
||||
<RefinementList attribute="category" />
|
||||
<Hits hitComponent={Product} />
|
||||
<Pagination />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide//Highlighting_results.html
|
||||
() => {
|
||||
const Hit = ({ hit }: { hit: Hit }) => (
|
||||
<p>
|
||||
<Highlight attribute="description" hit={hit} tagName="mark" />
|
||||
</p>
|
||||
);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<InstantSearch
|
||||
appId="latency"
|
||||
apiKey="6be0576ff61c053d5f9a3225e2a90f76"
|
||||
indexName="instant_search"
|
||||
>
|
||||
<Hits hitComponent={Hit} />
|
||||
</InstantSearch>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// TODO
|
||||
// () => {
|
||||
// const CustomHighlight = connectHighlight(
|
||||
// ({ highlight, attribute, hit, highlightProperty }) => {
|
||||
// const parsedHit = highlight({
|
||||
// attribute,
|
||||
// hit,
|
||||
// highlightProperty: '_highlightResult'
|
||||
// });
|
||||
// const highlightedHits = parsedHit.map(part => {
|
||||
// if (part.isHighlighted) return <mark>{part.value}</mark>;
|
||||
// return part.value;
|
||||
// });
|
||||
// return <div>{highlightedHits}</div>;
|
||||
// }
|
||||
// );
|
||||
|
||||
// const Hit = ({ hit }: { hit: Hit }) => (
|
||||
// <p>
|
||||
// <CustomHighlight attribute="description" hit={hit} />
|
||||
// </p>
|
||||
// );
|
||||
|
||||
// function App() {
|
||||
// return (
|
||||
// <InstantSearch
|
||||
// appId="latency"
|
||||
// apiKey="6be0576ff61c053d5f9a3225e2a90f76"
|
||||
// indexName="instant_search"
|
||||
// >
|
||||
// <Hits hitComponent={Hit} />
|
||||
// </InstantSearch>
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/i18n.html
|
||||
() => {
|
||||
const App = () => (
|
||||
<InstantSearch
|
||||
appId="..."
|
||||
apiKey="..."
|
||||
indexName="..."
|
||||
>
|
||||
<Menu
|
||||
attribute="fruits"
|
||||
translations={{ showMore: 'Voir plus' }}
|
||||
/>
|
||||
</InstantSearch>
|
||||
);
|
||||
};
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Sorting_and_filtering.html
|
||||
// TODO
|
||||
// () => {
|
||||
// const App = () => (
|
||||
// <InstantSearch
|
||||
// appId="..."
|
||||
// apiKey="..."
|
||||
// indexName="..."
|
||||
// >
|
||||
// <SearchBox defaultRefinement="hi" />
|
||||
// <RefinementList
|
||||
// attribute="category"
|
||||
// transformItems={items =>
|
||||
// orderBy(items, ['label', 'count'], ['asc', 'desc'])
|
||||
// }
|
||||
// />
|
||||
// </InstantSearch>
|
||||
// );
|
||||
// };
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Default_refinements.html
|
||||
() => {
|
||||
const App = () => (
|
||||
<InstantSearch
|
||||
appId="..."
|
||||
apiKey="..."
|
||||
indexName="..."
|
||||
>
|
||||
<SearchBox defaultRefinement="hi" />
|
||||
<Menu attribute="fruits" defaultRefinement="Orange" />
|
||||
</InstantSearch>
|
||||
);
|
||||
};
|
||||
|
||||
// TODO
|
||||
// () => {
|
||||
// const VirtualMenu = connectMenu(() => null);
|
||||
|
||||
// const App = () => (
|
||||
// <InstantSearch
|
||||
// appId="..."
|
||||
// apiKey="..."
|
||||
// indexName="..."
|
||||
// >
|
||||
// <div>
|
||||
// <CurrentRefinements
|
||||
// transformItems={items =>
|
||||
// items.filter(item => item.currentRefinement !== 'Orange')
|
||||
// }
|
||||
// />
|
||||
// <SearchBox/>
|
||||
// <VirtualMenu attribute="fruits" defaultRefinement="Orange" />
|
||||
// <Menu attribute="origin" defaultRefinement="Spain" />
|
||||
// </div>
|
||||
// </InstantSearch>
|
||||
// );
|
||||
// };
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Searching_in_Lists.html
|
||||
|
||||
<RefinementList attribute="products" searchable />;
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Search_parameters.html
|
||||
<InstantSearch
|
||||
appId="appId"
|
||||
apiKey="apiKey"
|
||||
indexName="indexName"
|
||||
>
|
||||
<Configure distinct={1}/>
|
||||
// widgets
|
||||
</InstantSearch>;
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"jsx": "react",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"react-instantsearch-dom-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Vendored
+27
-127
@@ -1,129 +1,29 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { Hit, BasicDoc } from 'react-instantsearch-core';
|
||||
|
||||
// Core
|
||||
export { createConnector } from 'react-instantsearch-core';
|
||||
export { HIGHLIGHT_TAGS } from 'react-instantsearch-core';
|
||||
export { translatable } from 'react-instantsearch-core';
|
||||
|
||||
// Widget
|
||||
export { Configure } from 'react-instantsearch-core';
|
||||
|
||||
// Connectors
|
||||
export { connectAutoComplete } from 'react-instantsearch-core';
|
||||
export { connectBreadcrumb } from 'react-instantsearch-core';
|
||||
export { connectConfigure } from 'react-instantsearch-core';
|
||||
export { connectCurrentRefinements } from 'react-instantsearch-core';
|
||||
export { connectGeoSearch } from 'react-instantsearch-core';
|
||||
export { connectHierarchicalMenu } from 'react-instantsearch-core';
|
||||
export { connectHighlight } from 'react-instantsearch-core';
|
||||
export { connectHits } from 'react-instantsearch-core';
|
||||
export { connectHitsPerPage } from 'react-instantsearch-core';
|
||||
export { connectInfiniteHits } from 'react-instantsearch-core';
|
||||
export { connectMenu } from 'react-instantsearch-core';
|
||||
export { connectNumericMenu } from 'react-instantsearch-core';
|
||||
export { connectPagination } from 'react-instantsearch-core';
|
||||
export { connectPoweredBy } from 'react-instantsearch-core';
|
||||
export { connectRange } from 'react-instantsearch-core';
|
||||
export { connectRefinementList } from 'react-instantsearch-core';
|
||||
export { connectScrollTo } from 'react-instantsearch-core';
|
||||
export { connectSearchBox } from 'react-instantsearch-core';
|
||||
export { connectSortBy } from 'react-instantsearch-core';
|
||||
export { connectStateResults } from 'react-instantsearch-core';
|
||||
export { connectStats } from 'react-instantsearch-core';
|
||||
export { connectToggleRefinement } from 'react-instantsearch-core';
|
||||
|
||||
// DOM
|
||||
export interface CommonWidgetProps {
|
||||
/**
|
||||
* All static text rendered by widgets, such as “Load more”, “Show more” are translatable using the translations prop on relevant widgets.
|
||||
* This prop is a mapping of keys to translation values. Translation values can be either a String or a (...args: any[]) => any, as some take parameters.
|
||||
*
|
||||
* https://community.algolia.com/react-instantsearch/guide/i18n.html
|
||||
*/
|
||||
translations?: { [key: string]: string | ((...args: any[]) => any) };
|
||||
}
|
||||
|
||||
export interface InstantSearchProps {
|
||||
apiKey: string;
|
||||
appId: string;
|
||||
indexName: string;
|
||||
|
||||
algoliaClient?: any;
|
||||
searchClient?: any;
|
||||
createURL?: (...args: any[]) => any;
|
||||
searchState?: any;
|
||||
refresh?: boolean;
|
||||
onSearchStateChange?: (...args: any[]) => any;
|
||||
onSearchParameters?: (...args: any[]) => any;
|
||||
resultsState?: any;
|
||||
root?: {
|
||||
Root: string | ((...args: any[]) => any);
|
||||
props: any;
|
||||
};
|
||||
}
|
||||
/**
|
||||
* <InstantSearch> is the root component of all React InstantSearch implementations. It provides all the connected components (aka widgets) a means to interact with the searchState.
|
||||
*
|
||||
* https://community.algolia.com/react-instantsearch/widgets/%3CInstantSearch%3E.html
|
||||
*/
|
||||
export class InstantSearch extends React.Component<InstantSearchProps> {}
|
||||
export class Index extends React.Component<any> {}
|
||||
export class Breadcrumb extends React.Component<any> {}
|
||||
export class ClearRefinements extends React.Component<any> {}
|
||||
export class CurrentRefinements extends React.Component<any> {}
|
||||
export class HierarchicalMenu extends React.Component<any> {}
|
||||
export class Highlight extends React.Component<any> {}
|
||||
|
||||
export interface HitsProps<T> {
|
||||
hitComponent?: React.ComponentType<{ hit: Hit<T> }>;
|
||||
}
|
||||
/**
|
||||
* Displays a list of hits.
|
||||
* To configure the number of hits being shown, use the HitsPerPage widget, connectHitsPerPage connector or the Configure widget.
|
||||
*
|
||||
* https://community.algolia.com/react-instantsearch/widgets/Hits.html
|
||||
*/
|
||||
export class Hits<T = BasicDoc> extends React.Component<HitsProps<T>> {}
|
||||
export class HitsPerPage extends React.Component<any> {}
|
||||
export class InfiniteHits extends React.Component<any> {}
|
||||
export class Menu extends React.Component<any> {}
|
||||
export class MenuSelect extends React.Component<any> {}
|
||||
export class NumericMenu extends React.Component<any> {}
|
||||
export class Pagination extends React.Component<any> {}
|
||||
export class Panel extends React.Component<any> {}
|
||||
export class PoweredBy extends React.Component<any> {}
|
||||
export class RangeInput extends React.Component<any> {}
|
||||
export class RangeSlider extends React.Component<any> {}
|
||||
export class RatingMenu extends React.Component<any> {}
|
||||
export class RefinementList extends React.Component<any> {}
|
||||
export class ScrollTo extends React.Component<any> {}
|
||||
|
||||
export interface SearchBoxProps extends CommonWidgetProps {
|
||||
focusShortcuts?: string[];
|
||||
autoFocus?: boolean;
|
||||
defaultRefinement?: string;
|
||||
searchAsYouType?: boolean;
|
||||
showLoadingIndicator?: boolean;
|
||||
|
||||
submit?: JSX.Element;
|
||||
reset?: JSX.Element;
|
||||
loadingIndicator?: JSX.Element;
|
||||
|
||||
onSubmit?: (...args: any[]) => any;
|
||||
onReset?: (...args: any[]) => any;
|
||||
}
|
||||
/**
|
||||
* The SearchBox component displays a search box that lets the user search for a specific query.
|
||||
*
|
||||
* https://community.algolia.com/react-instantsearch/widgets/SearchBox.html
|
||||
*/
|
||||
export class SearchBox extends React.Component<SearchBoxProps> {}
|
||||
export class Snippet extends React.Component<any> {}
|
||||
export class SortBy extends React.Component<any> {}
|
||||
/**
|
||||
* The Stats component displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).
|
||||
*/
|
||||
export class Stats extends React.Component<{translations?: { [key: string]: (n: number, ms: number) => string }}> {}
|
||||
export class ToggleRefinement extends React.Component<any> {}
|
||||
export { InstantSearch, InstantSearchProps } from 'react-instantsearch-dom';
|
||||
export { Index } from 'react-instantsearch-dom';
|
||||
export { Breadcrumb } from 'react-instantsearch-dom';
|
||||
export { ClearRefinements } from 'react-instantsearch-dom';
|
||||
export { Configure } from 'react-instantsearch-dom';
|
||||
export { CurrentRefinements } from 'react-instantsearch-dom';
|
||||
export { HierarchicalMenu } from 'react-instantsearch-dom';
|
||||
export { Highlight } from 'react-instantsearch-dom';
|
||||
export { Hits, HitsProps } from 'react-instantsearch-dom';
|
||||
export { HitsPerPage } from 'react-instantsearch-dom';
|
||||
export { InfiniteHits } from 'react-instantsearch-dom';
|
||||
export { Menu } from 'react-instantsearch-dom';
|
||||
export { MenuSelect } from 'react-instantsearch-dom';
|
||||
export { NumericMenu } from 'react-instantsearch-dom';
|
||||
export { Pagination } from 'react-instantsearch-dom';
|
||||
export { Panel } from 'react-instantsearch-dom';
|
||||
export { PoweredBy } from 'react-instantsearch-dom';
|
||||
export { RangeInput } from 'react-instantsearch-dom';
|
||||
export { RangeSlider } from 'react-instantsearch-dom';
|
||||
export { RatingMenu } from 'react-instantsearch-dom';
|
||||
export { RefinementList } from 'react-instantsearch-dom';
|
||||
export { ScrollTo } from 'react-instantsearch-dom';
|
||||
export { SearchBox, SearchBoxProps } from 'react-instantsearch-dom';
|
||||
export { Snippet } from 'react-instantsearch-dom';
|
||||
export { SortBy } from 'react-instantsearch-dom';
|
||||
export { Stats } from 'react-instantsearch-dom';
|
||||
export { ToggleRefinement } from 'react-instantsearch-dom';
|
||||
|
||||
@@ -1,281 +1,10 @@
|
||||
import * as React from "react";
|
||||
import { InstantSearch, Hits, Highlight, SearchBox, RefinementList, CurrentRefinements, ClearRefinements, Pagination, Menu, Configure, createConnector, Index } from 'react-instantsearch/dom';
|
||||
import { connectHighlight, connectSearchBox, connectMenu, connectRefinementList, connectStateResults, SearchBoxProvided, Hit, SearchState } from "react-instantsearch/connectors";
|
||||
|
||||
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";
|
||||
|
||||
// DOM
|
||||
// https://community.algolia.com/react-instantsearch/Getting_started.html
|
||||
() => {
|
||||
const App = () => (
|
||||
<InstantSearch
|
||||
appId="latency"
|
||||
apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
|
||||
indexName="bestbuy"
|
||||
>
|
||||
<Search />
|
||||
</InstantSearch>
|
||||
);
|
||||
|
||||
function Search() {
|
||||
return (
|
||||
<div className="container">
|
||||
<Hits />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Product({ hit }: { hit: Hit }) {
|
||||
return <div>{hit.name}</div>;
|
||||
}
|
||||
|
||||
function Search2() {
|
||||
return (
|
||||
<div>
|
||||
<Hits hitComponent={Product} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Product2({ hit }: { hit: Hit }) {
|
||||
return (
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<span className="hit-name">
|
||||
<Highlight attribute="name" hit={hit} />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Search3() {
|
||||
return (
|
||||
<div className="container">
|
||||
<SearchBox />
|
||||
<RefinementList attribute="category" />
|
||||
<Hits hitComponent={Product} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Search4() {
|
||||
return (
|
||||
<div className="container">
|
||||
<CurrentRefinements />
|
||||
<ClearRefinements />
|
||||
<SearchBox />
|
||||
<RefinementList attribute="category" />
|
||||
<Hits hitComponent={Product} />
|
||||
<Pagination />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide//Highlighting_results.html
|
||||
() => {
|
||||
const Hit = ({ hit }: { hit: Hit }) => (
|
||||
<p>
|
||||
<Highlight attribute="description" hit={hit} tagName="mark" />
|
||||
</p>
|
||||
);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<InstantSearch
|
||||
appId="latency"
|
||||
apiKey="6be0576ff61c053d5f9a3225e2a90f76"
|
||||
indexName="instant_search"
|
||||
>
|
||||
<Hits hitComponent={Hit} />
|
||||
</InstantSearch>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// TODO
|
||||
// () => {
|
||||
// const CustomHighlight = connectHighlight(
|
||||
// ({ highlight, attribute, hit, highlightProperty }) => {
|
||||
// const parsedHit = highlight({
|
||||
// attribute,
|
||||
// hit,
|
||||
// highlightProperty: '_highlightResult'
|
||||
// });
|
||||
// const highlightedHits = parsedHit.map(part => {
|
||||
// if (part.isHighlighted) return <mark>{part.value}</mark>;
|
||||
// return part.value;
|
||||
// });
|
||||
// return <div>{highlightedHits}</div>;
|
||||
// }
|
||||
// );
|
||||
|
||||
// const Hit = ({ hit }: { hit: Hit }) => (
|
||||
// <p>
|
||||
// <CustomHighlight attribute="description" hit={hit} />
|
||||
// </p>
|
||||
// );
|
||||
|
||||
// function App() {
|
||||
// return (
|
||||
// <InstantSearch
|
||||
// appId="latency"
|
||||
// apiKey="6be0576ff61c053d5f9a3225e2a90f76"
|
||||
// indexName="instant_search"
|
||||
// >
|
||||
// <Hits hitComponent={Hit} />
|
||||
// </InstantSearch>
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/i18n.html
|
||||
() => {
|
||||
const App = () => (
|
||||
<InstantSearch
|
||||
appId="..."
|
||||
apiKey="..."
|
||||
indexName="..."
|
||||
>
|
||||
<Menu
|
||||
attribute="fruits"
|
||||
translations={{ showMore: 'Voir plus' }}
|
||||
/>
|
||||
</InstantSearch>
|
||||
);
|
||||
};
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Sorting_and_filtering.html
|
||||
// TODO
|
||||
// () => {
|
||||
// const App = () => (
|
||||
// <InstantSearch
|
||||
// appId="..."
|
||||
// apiKey="..."
|
||||
// indexName="..."
|
||||
// >
|
||||
// <SearchBox defaultRefinement="hi" />
|
||||
// <RefinementList
|
||||
// attribute="category"
|
||||
// transformItems={items =>
|
||||
// orderBy(items, ['label', 'count'], ['asc', 'desc'])
|
||||
// }
|
||||
// />
|
||||
// </InstantSearch>
|
||||
// );
|
||||
// };
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Connectors.html
|
||||
() => {
|
||||
const MySearchBox = ({currentRefinement, refine}: SearchBoxProvided) =>
|
||||
<input
|
||||
type="text"
|
||||
value={currentRefinement}
|
||||
onChange={e => refine(e.target.value)}
|
||||
/>;
|
||||
|
||||
// `ConnectedSearchBox` renders a `<MySearchBox>` widget that is connected to
|
||||
// the <InstantSearch> state, providing it with `currentRefinement` and `refine` props for
|
||||
// reading and manipulating the current query of the search.
|
||||
const ConnectedSearchBox = connectSearchBox(MySearchBox);
|
||||
};
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Default_refinements.html
|
||||
() => {
|
||||
const App = () => (
|
||||
<InstantSearch
|
||||
appId="..."
|
||||
apiKey="..."
|
||||
indexName="..."
|
||||
>
|
||||
<SearchBox defaultRefinement="hi" />
|
||||
<Menu attribute="fruits" defaultRefinement="Orange" />
|
||||
</InstantSearch>
|
||||
);
|
||||
};
|
||||
|
||||
// TODO
|
||||
// () => {
|
||||
// const VirtualMenu = connectMenu(() => null);
|
||||
|
||||
// const App = () => (
|
||||
// <InstantSearch
|
||||
// appId="..."
|
||||
// apiKey="..."
|
||||
// indexName="..."
|
||||
// >
|
||||
// <div>
|
||||
// <CurrentRefinements
|
||||
// transformItems={items =>
|
||||
// items.filter(item => item.currentRefinement !== 'Orange')
|
||||
// }
|
||||
// />
|
||||
// <SearchBox/>
|
||||
// <VirtualMenu attribute="fruits" defaultRefinement="Orange" />
|
||||
// <Menu attribute="origin" defaultRefinement="Spain" />
|
||||
// </div>
|
||||
// </InstantSearch>
|
||||
// );
|
||||
// };
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Searching_in_Lists.html
|
||||
|
||||
<RefinementList attribute="products" searchable />;
|
||||
|
||||
() => {
|
||||
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.value}>
|
||||
<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
|
||||
appId="..."
|
||||
apiKey="..."
|
||||
indexName="..."
|
||||
>
|
||||
<SearchBox defaultRefinement="hi" />
|
||||
<Hoodies />
|
||||
<Menu attribute="fruits" defaultRefinement="Orange" />
|
||||
</InstantSearch>
|
||||
);
|
||||
};
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Search_parameters.html
|
||||
<InstantSearch
|
||||
appId="appId"
|
||||
apiKey="apiKey"
|
||||
indexName="indexName"
|
||||
>
|
||||
<Configure distinct={1}/>
|
||||
// widgets
|
||||
</InstantSearch>;
|
||||
|
||||
// https://community.algolia.com/react-instantsearch/guide/Search_state.html
|
||||
() => {
|
||||
const searchState: SearchState = {
|
||||
@@ -610,3 +339,48 @@ import { createInstantSearch } from "react-instantsearch-core";
|
||||
|
||||
<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.value}>
|
||||
<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
|
||||
appId="..."
|
||||
apiKey="..."
|
||||
indexName="..."
|
||||
>
|
||||
<SearchBox defaultRefinement="hi" />
|
||||
<Hoodies />
|
||||
<Menu attribute="fruits" defaultRefinement="Orange" />
|
||||
</InstantSearch>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user