Skip to content

Commit e9f2a1a

Browse files
InnaAtanasovaInnaAtanasova
authored
Merge pull request #44 from chrismanciero/search-input
Search input
2 parents 4a3cc56 + dba0f8a commit e9f2a1a

File tree

4 files changed

+410
-0
lines changed

4 files changed

+410
-0
lines changed

‎src/Routes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { MenuComponent } from './Menu/Menu.Component';
2121
import { ModalComponent } from './Modal/Modal.Component';
2222
import { PaginationComponent } from './Pagination/Pagination.Component'
2323
import { PopoverComponent } from './Popover/Popover.Component';
24+
import { SearchInputComponent } from './SearchInput/SearchInput.Component';
2425
import { SideNavigationComponent } from './SideNavigation/SideNavigation.Component';
2526
import { TableComponent } from './Table/Table.Component';
2627
import { TabsComponent } from './Tabs/Tabs.Component';
@@ -54,6 +55,7 @@ export default class Routes extends Component {
5455
{ url: '/modal', name: 'Modal', component: ModalComponent },
5556
{ url: '/pagination', name: 'Pagination', component: PaginationComponent },
5657
{ url: '/popover', name: 'Popover', component: PopoverComponent },
58+
{ url: '/searchInput', name: 'Search Input', component: SearchInputComponent },
5759
{ url: '/sideNavigation', name: 'Side Navigation', component: SideNavigationComponent },
5860
{ url: '/table', name: 'Table', component: TableComponent },
5961
{ url: '/tabs', name: 'Tabs', component: TabsComponent },

‎src/SearchInput/SearchInput.Component.js‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
import React, { Component } from 'react';
2+
import {
3+
DocsTile,
4+
DocsText,
5+
Separator,
6+
Header,
7+
Description,
8+
Import,
9+
Properties
10+
} from '../';
11+
import { SearchInput } from './SearchInput';
12+
13+
export class SearchInputComponent extends Component {
14+
data = [
15+
'Apple',
16+
'Apricot',
17+
'Avocado',
18+
'Abiu',
19+
'Acai',
20+
'Acerola',
21+
'Ackee',
22+
'Arhat',
23+
'American Mayapple',
24+
'African Cherry Orange',
25+
'Amazon grape',
26+
'Araza',
27+
'Alligator apple',
28+
'Ambarella',
29+
'African Cucumber',
30+
'African Medlar',
31+
'African Moringa',
32+
'Agave Plant',
33+
'Aizen Fruit',
34+
'American Black Elderberry',
35+
'American Chestnut',
36+
'American Hazelnut Shrub',
37+
'American Red Raspberry',
38+
'Aprium',
39+
'Atemoya',
40+
'Atherton Raspberry Banana',
41+
'Berry',
42+
'Bayberry',
43+
'Blueberry',
44+
'Blackberry',
45+
'Boysenberry',
46+
'Bearberry',
47+
'Bilberry',
48+
'Barberry',
49+
'Buffaloberry',
50+
'Black cherry',
51+
'Beach plum',
52+
'Black raspberry',
53+
'Black apple',
54+
'Blue tongue',
55+
'Bolwarra',
56+
'Burdekin plum',
57+
'Bramble',
58+
'Broadleaf Bramble',
59+
'Black mulberry',
60+
'Blood orange',
61+
'Babaco',
62+
'Bael',
63+
'Barbadine',
64+
'Barbados cherry',
65+
'Betel nut',
66+
'Bilimbi',
67+
'Bitter gourd',
68+
'Black sapote',
69+
'Bottle gourd',
70+
'Brazil nut',
71+
'Breadfruit',
72+
'Burmese grape',
73+
'Blackcurrant',
74+
'Bignay',
75+
'Beechnut',
76+
'Bacuri Fruit',
77+
'Balsam Apple',
78+
'Batuan Fruit',
79+
'Blood Lime',
80+
'Brazilian Guava',
81+
'Brush cherry Cantaloupe',
82+
'Chokeberry',
83+
'Cranberry',
84+
'Cloudberry',
85+
'Crowberry',
86+
'Conkerberry',
87+
'Calabash',
88+
'Calamansi',
89+
'Calamondins',
90+
'Canistel',
91+
'Cape Gooseberry',
92+
'Capuli Cherry',
93+
'Carob Fruit',
94+
'Cashew Apple',
95+
'Cedar Bay Cherry',
96+
'Cempedak',
97+
'Ceylon Gooseberry',
98+
'Charichuelo Fruit',
99+
'Chayote Fruit',
100+
'Cherimoya Fruit',
101+
'cherry Fruit',
102+
'Chokecherry',
103+
'Citrofortunella',
104+
'Clementines',
105+
'Cluster Fig',
106+
'Coco Plum',
107+
'Common Apple Berry',
108+
'Cornelian Cherry',
109+
'Cucumber',
110+
'Cupuacu'
111+
];
112+
113+
constructor(props) {
114+
super(props);
115+
116+
this.state = {
117+
data: []
118+
};
119+
}
120+
121+
searchInputCode = `<SearchInput
122+
placeHolder="Enter a fruit"
123+
onSearch={this.performSearch}
124+
/>`;
125+
126+
autoCompleteSearchInputCode = `<SearchInput
127+
placeHolder="Enter a fruit"
128+
data={this.state.data}
129+
onAutoComplete={this.performAutoComplete}
130+
onSearch={this.performSearch}
131+
/>`;
132+
133+
exampleAutoCompleteMethod = `performAutoComplete = searchTerm => {
134+
const searchResults = this.data.filter(item => {
135+
return item.toLowerCase().startsWith(searchTerm.toLowerCase());
136+
});
137+
138+
this.setState({ data: searchResults });
139+
};`;
140+
141+
performAutoComplete = searchTerm => {
142+
const searchResults = this.data.filter(item => {
143+
return item.toLowerCase().startsWith(searchTerm.toLowerCase());
144+
});
145+
146+
this.setState({ data: searchResults });
147+
};
148+
149+
performSearch = searchTerm => {
150+
console.log(`search fired for ${searchTerm}`);
151+
};
152+
153+
render() {
154+
return (
155+
<div>
156+
<Header>Search Input</Header>
157+
<Description />
158+
<Import module="SearchInput" path="/fundamental-react/src/" />
159+
160+
<Separator />
161+
162+
<Properties
163+
type="Inputs"
164+
properties={[
165+
{
166+
name: 'onSearch',
167+
description:
168+
'Func (Required) - Method to execute on click of Search icon, selection of auto-complete item or by pressing the Enter key.'
169+
},
170+
{
171+
name: 'placeHolder',
172+
description:
173+
'String - The text to use as placeholder when no text is entered.'
174+
},
175+
{
176+
name: 'data',
177+
description:
178+
'Array - Collection of items to display in auto-complete list.'
179+
},
180+
{
181+
name: 'onAutoComplete',
182+
description:
183+
'Func - Method that receives search input box text, to perform auto complete query.'
184+
}
185+
]}
186+
/>
187+
188+
<Separator />
189+
190+
<h2>Default Search</h2>
191+
<Description>
192+
A text input with Search button. Clicking on the Search button or
193+
pressing the Enter key will execute the onSearch method.
194+
</Description>
195+
<DocsTile>
196+
<div>
197+
<SearchInput
198+
placeHolder="Enter a fruit"
199+
onSearch={this.performSearch}
200+
/>
201+
</div>
202+
</DocsTile>
203+
<DocsText>{this.searchInputCode}</DocsText>
204+
205+
<Separator />
206+
207+
<h2>Auto Complete Search</h2>
208+
<Description>
209+
A text input with Search button that includes auto-complete
210+
functionality. Clicking on the Search button, selecting an
211+
auto-complete item or pressing the Enter key will execute the onSearch
212+
method. <br />
213+
<br />
214+
For the auto-complete functionality to work the parent component needs
215+
to pass a method to the <b>onAutoComplete</b> property. The Search
216+
Input component will pass to the onAutoComplete method the value
217+
entered in to the search box. It is up to the parent component to
218+
create the array of values to display and set it to the <b>data</b>{' '}
219+
property of the Search Input component.
220+
</Description>
221+
<DocsTile>
222+
<div>
223+
<SearchInput
224+
placeHolder="Enter a fruit"
225+
data={this.state.data}
226+
onAutoComplete={this.performAutoComplete}
227+
onSearch={this.performSearch}
228+
/>
229+
</div>
230+
</DocsTile>
231+
<DocsText>{this.autoCompleteSearchInputCode}</DocsText>
232+
<Separator />
233+
<Description>
234+
Sample auto-complete method which filters an array of fruit based on
235+
the search input value.
236+
</Description>
237+
<DocsText>{this.exampleAutoCompleteMethod}</DocsText>
238+
239+
<Separator />
240+
</div>
241+
);
242+
}
243+
}

0 commit comments

Comments
 (0)