Skip to content

Commit 0bc6c05

Browse files
mohdashraf010897mohdashraf010897
committed
fix(web): SearchBoxVoicesearch example
1 parent f820265 commit 0bc6c05

File tree

2 files changed

+157
-67
lines changed

2 files changed

+157
-67
lines changed

‎packages/web/examples/SearchBoxWithVoiceSearch/src/index.css‎

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ body {
1515
.col {
1616
flex: 1;
1717
padding: 15px;
18+
max-width: 100%;
1819
}
1920

2021
.row > .col:first-child {
2122
border-right: 1px solid #ccc;
22-
max-width: 400px;
2323
}
2424

2525
.row > .col:last-child {
@@ -70,11 +70,6 @@ body {
7070
.authors-list {
7171
color: #9d9d9d;
7272
font-weight: bold;
73-
overflow: hidden;
74-
text-overflow: ellipsis;
75-
display: -webkit-box;
76-
-webkit-line-clamp: 2;
77-
-webkit-box-orient: vertical;
7873
}
7974

8075
.ratings-list {
@@ -151,3 +146,59 @@ body {
151146
.col .meetup-list-image {
152147
background-size: cover;
153148
}
149+
150+
.pill-wrapper {
151+
width: 100%;
152+
max-width: 100%;
153+
display: flex;
154+
gap: 10px;
155+
overflow: auto;
156+
margin-top: 10px;
157+
}
158+
.pill-wrapper::-webkit-scrollbar {
159+
height: 0px;
160+
}
161+
162+
.pill-wrapper:hover::-webkit-scrollbar {
163+
height: 2px;
164+
}
165+
166+
.pill-wrapper::-webkit-scrollbar-track {
167+
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
168+
}
169+
170+
.pill-wrapper::-webkit-scrollbar-thumb {
171+
background-color: darkgrey;
172+
outline: 1px solid slategrey;
173+
}
174+
175+
.pill-btn {
176+
background-color: #ddd;
177+
border: none;
178+
color: black;
179+
padding: 10px 20px;
180+
text-align: center;
181+
text-decoration: none;
182+
display: inline-block;
183+
margin: 4px 2px;
184+
cursor: pointer;
185+
border-radius: 16px;
186+
white-space: nowrap;
187+
overflow: hidden;
188+
text-overflow: ellipsis;
189+
flex: 0 0 fit-content;
190+
max-width: 250px;
191+
}
192+
193+
.pill-btn:hover {
194+
filter: brightness(0.8);
195+
}
196+
.authors-list {
197+
color: #9d9d9d;
198+
font-weight: bold;
199+
overflow: hidden;
200+
text-overflow: ellipsis;
201+
display: -webkit-box;
202+
-webkit-line-clamp: 2;
203+
-webkit-box-orient: vertical;
204+
}

‎packages/web/examples/SearchBoxWithVoiceSearch/src/index.js‎

Lines changed: 100 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,114 @@
11
import ReactDOM from 'react-dom/client';
2-
2+
import { useState } from 'react';
33
import { ReactiveBase, SearchBox, ReactiveList, ResultCard } from '@appbaseio/reactivesearch';
44

55
import './index.css';
66

7-
const Main = () => (
8-
<ReactiveBase
9-
app="movies-demo-app"
10-
url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
11-
>
12-
<div className="row">
13-
<div className="col">
14-
<SearchBox
15-
title="SearchBox"
16-
dataField={['original_title', 'original_title.search']}
17-
componentId="MoviesSensor"
18-
showVoiceSearch
19-
autosuggest={false}
20-
/>
21-
</div>
7+
const Main = () => {
8+
const [value, setValue] = useState('');
229

23-
<div className="col">
24-
<ReactiveList
25-
componentId="SearchResult"
26-
dataField="original_title"
27-
size={10}
28-
className="result-list-container"
29-
pagination
30-
react={{
31-
and: 'MoviesSensor',
32-
}}
33-
render={({ data }) => (
34-
<ReactiveList.ResultCardsWrapper>
35-
{data.map((item) => (
36-
<ResultCard id={item._id} key={item._id}>
37-
<ResultCard.Image src={item.poster_path} />
38-
<ResultCard.Title>
39-
<div
40-
className="book-title"
10+
return (
11+
<ReactiveBase
12+
app="movies-demo-app"
13+
url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
14+
>
15+
<div className="row">
16+
<div className="col">
17+
<SearchBox
18+
title="SearchBox"
19+
dataField={['original_title', 'original_title.search']}
20+
componentId="MoviesSensor"
21+
showVoiceSearch
22+
showFocusShortcutsIcon={false}
23+
value={value}
24+
onChange={(value) => {
25+
setValue(value);
26+
}}
27+
render={({
28+
loading,
29+
error,
30+
data,
31+
value,
32+
downshiftProps: { isOpen, getItemProps },
33+
}) => {
34+
if (loading) {
35+
return <div>Fetching Suggestions.</div>;
36+
}
37+
if (error) {
38+
return (
39+
<div>
40+
Something went wrong! Error details {JSON.stringify(error)}
41+
</div>
42+
);
43+
}
44+
return isOpen && Boolean(value.length) ? (
45+
<div className="pill-wrapper">
46+
{data.map((suggestion, index) => (
47+
<button
48+
className="pill-btn"
49+
key={suggestion.value}
50+
title={suggestion.value}
51+
{...getItemProps({ item: suggestion })}
4152
dangerouslySetInnerHTML={{
42-
__html: item.original_title,
53+
__html: suggestion.value,
4354
}}
44-
/>
45-
</ResultCard.Title>
55+
></button>
56+
))}
57+
</div>
58+
) : null;
59+
}}
60+
/>
61+
<br />
62+
<ReactiveList
63+
componentId="SearchResult"
64+
dataField="original_title"
65+
size={10}
66+
className="result-list-container"
67+
pagination
68+
react={{
69+
and: 'MoviesSensor',
70+
}}
71+
render={({ data }) => (
72+
<ReactiveList.ResultCardsWrapper>
73+
{data.map((item) => (
74+
<ResultCard id={item._id} key={item._id}>
75+
<ResultCard.Image src={item.poster_path} />
76+
<ResultCard.Title>
77+
<div
78+
className="book-title"
79+
dangerouslySetInnerHTML={{
80+
__html: item.original_title,
81+
}}
82+
/>
83+
</ResultCard.Title>
4684

47-
<ResultCard.Description>
48-
<div className="flex column justify-space-between">
49-
<div>
50-
<div title={item.overview}>
51-
<span className="authors-list">
52-
{item.overview}
53-
</span>
54-
</div>
55-
<div className="ratings-list flex align-center">
56-
<span>
57-
{item.genres.map((_) => (
58-
<span> ∙ {_}</span>
59-
))}
60-
</span>
85+
<ResultCard.Description>
86+
<div className="flex column justify-space-between">
87+
<div>
88+
<div title={item.overview}>
89+
<span className="authors-list">
90+
{item.overview}
91+
</span>
92+
</div>
93+
<div className="ratings-list flex align-center">
94+
<span>
95+
{item.genres.map((_) => (
96+
<span> ∙ {_}</span>
97+
))}
98+
</span>
99+
</div>
61100
</div>
62101
</div>
63-
</div>
64-
</ResultCard.Description>
65-
</ResultCard>
66-
))}
67-
</ReactiveList.ResultCardsWrapper>
68-
)}
69-
/>
102+
</ResultCard.Description>
103+
</ResultCard>
104+
))}
105+
</ReactiveList.ResultCardsWrapper>
106+
)}
107+
/>
108+
</div>
70109
</div>
71-
</div>
72-
</ReactiveBase>
73-
);
110+
</ReactiveBase>
111+
);
112+
};
74113
const root = ReactDOM.createRoot(document.getElementById('root'));
75114
root.render(<Main />);

0 commit comments

Comments
 (0)