Merge pull request #130 from appbaseio/feat/image-search

Feat/image search

package.json

@@ -20,7 +20,7 @@
     "homepage": "https://github.com/appbaseio/reactive-playground#readme",
     "dependencies": {
         "@appbaseio/reactivemaps": "4.0.0",
-        "@appbaseio/reactivesearch": "4.1.0",
+        "@appbaseio/reactivesearch": "4.2.0-alpha.6",
         "docs": "appbaseio/Docs#dev",
         "moment": "^2.29.1",
         "react": "^18.2.0",

stories/index.js

@@ -109,6 +109,7 @@ import DateRangeDark from "./reactivesearch/DateRangeDark.stories";
 import ErrorBoundaryDefault from "./reactivesearch/ErrorBoundary.stories";
 import SearchBoxWithCustomAIRender, { GlobalStyles } from "./reactivesearch/SearchBoxWithCustomAIRender.stories";
 import { Remarkable } from 'remarkable';
+import { renderBookItemWithDate, renderBookItemWithLink } from "./utils/renderItem";
 const md = new Remarkable();
 
 md.set({
@@ -2562,6 +2563,20 @@ storiesOf("Search components/SearchBox", module)
     )
   )
   .add('with compoundClause', () => <SearchBoxRSDefault compoundClause={compoundClauseSelector()} />)
+  .add("with image search", () => (
+    <SearchBoxRSDefault
+      showImageSearch={boolean("showImageSearch", true)}
+      vectorDataField={text("vectorDataField", "image")}
+      enableAI={boolean("enableAI", false)}
+      autosuggest={boolean("autosuggest", true)}
+      imageSearchConfig={{
+        tooltip: text("tooltip", "Search by image"),
+        icon: text("icon", ""),
+        iconURL: text("iconURL", ""),
+      }}
+      themePreset={select("themePreset", ["light", "dark"])}
+    />
+  ))
   .add(
     "With document suggestions",
     () => (
@@ -2603,7 +2618,7 @@ storiesOf("Search components/SearchBox", module)
             "overview"
         ]}
         showClear
-        renderItem={(suggestion)=>(<div>{suggestion._source.original_title} <span style={{color: "crimson", backgroundColor: "lightgray", padding: 5, borderRadius: 3}}>{new Date(Number(suggestion._source._timestamp) * 1000).toDateString() || ""}</span></div>)}
+        renderItem={renderBookItemWithDate}
       />
     )
   )
@@ -2626,7 +2641,7 @@ storiesOf("Search components/SearchBox", module)
             "overview"
         ]}
         showClear
-        renderItem={(suggestion)=>(<a style={{width:'100%', height: '100%', display: 'block', textDecoration: "none", color: "inherit"}} href={`https://www.google.com/search?q=${suggestion._source.original_title}`} target="_blank" rel="noreferrer">{suggestion._source.original_title}</a>)}
+        renderItem={renderBookItemWithLink}
       />
     )
   )

stories/reactivesearch/SearchBox.stories.js

@@ -13,6 +13,8 @@ export default class SearchBoxDefault extends Component {
 					recordAnalytics: true,
 					"userId": "test",
 				}}
+				key={this.props.themePreset || "light"}
+				themePreset={this.props.themePreset || "light"}
 			>
 				<div className="row">
 					<div className="col">

stories/utils/renderItem.js

@@ -0,0 +1,23 @@
+export const renderBookItemWithDate = (suggestion)=>(
+    <div>{suggestion._source.original_title}
+        <span style={{color: "crimson", backgroundColor: "lightgray", padding: 5, borderRadius: 3}}>
+            {new Date(Number(suggestion._source._timestamp) * 1000).toDateString() || ""}
+        </span>
+    </div>
+)
+export const renderBookItemWithLink = (suggestion)=>(
+    <a
+        style={{
+                width:'100%',
+                height: '100%',
+                display: 'block',
+                textDecoration: "none",
+                color: "inherit"
+            }}
+        href={`https://www.google.com/search?q=${suggestion._source.original_title}`}
+        target="_blank"
+        rel="noreferrer"
+    >
+        {suggestion._source.original_title}
+    </a>
+)