-
Notifications
You must be signed in to change notification settings - Fork 735
SearchInput component #3530
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
SearchInput component #3530
Changes from 7 commits
Commits
Show all changes
17 commits
Select commit
Hold shift + click to select a range
54f7b68
add SearchInput component and related types
adids1221 f1edd83
delete SearchInput unit tests since they are failing
adids1221 5d643a9
add custom right element rendering and loader props
adids1221 bd94138
update renderCustomRightElement and renderLoaderElement to accept props
adids1221 ce42a0b
Merge branch 'master' into infra/SearchInput_component
adids1221 4a245c2
Update icon sources in SearchInputScreen and SearchInput components
adids1221 576f281
Merge branch 'master' into infra/SearchInput_component
adids1221 b167201
Refactor renderCustomRightElement prop to customRightElement
adids1221 fb8762f
Remove unused title prop
adids1221 2344345
Refactor SearchInput API
adids1221 2355bb1
Merge branch 'master' into infra/SearchInput_component
adids1221 8262669
fixed review notes
adids1221 5eb4fb7
Merge branch 'master' into infra/SearchInput_component
adids1221 c11c0f5
rename renderLoaderElement prop to customLoader
adids1221 0c6df1e
modify customLoader type in SearchInputProps
adids1221 f4f5293
Update customLoader type in searchInput.api.json for clarity
adids1221 0c26943
Fix renderLoader to directly use customLoader instead of invoking it …
adids1221 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
150 changes: 150 additions & 0 deletions
150
demo/src/screens/componentScreens/SearchInputScreen.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| import React, {useCallback, useRef, useState} from 'react'; | ||
| import {Alert} from 'react-native'; | ||
| import { | ||
| Colors, | ||
| View, | ||
| Text, | ||
| Switch, | ||
| SearchInput, | ||
| SearchInputRef, | ||
| SearchInputPresets, | ||
| Button, | ||
| Icon, | ||
| Assets | ||
| } from 'react-native-ui-lib'; | ||
|
|
||
| const SearchInputScreen = () => { | ||
| const [showCancelBtn, setShowCancelBtn] = useState(false); | ||
| const [showLoader, setShowLoader] = useState(false); | ||
| const [showCustomRightElement, setShowCustomRightElement] = useState(false); | ||
| const searchInput = useRef<SearchInputRef>(); | ||
|
|
||
| const onChangeText = (text: string) => { | ||
| console.log('UILIB text: ', text); | ||
| }; | ||
|
|
||
| const onDismiss = useCallback(() => { | ||
| Alert.alert('Cancel was pressed'); | ||
| }, []); | ||
|
|
||
| const customRightElement = () => { | ||
| return ( | ||
| <View center marginH-s2> | ||
| <Icon source={Assets.icons.demo.check}/> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <View style={{marginVertical: 5}}> | ||
| <Text center h3 $textDefault margin-5> | ||
| SearchInput | ||
| </Text> | ||
|
|
||
| <View> | ||
| <SearchInput | ||
| showLoader={showLoader} | ||
| ref={searchInput} | ||
| testID={'searchInput'} | ||
| value="" | ||
| placeholder="Search" | ||
| onDismiss={showCancelBtn ? onDismiss : undefined} | ||
| cancelButtonProps={{label: 'Cancel'}} | ||
| renderCustomRightElement={showCustomRightElement ? customRightElement : undefined} | ||
| /> | ||
| <View marginV-s2> | ||
| <SearchInput | ||
| showLoader={showLoader} | ||
| invertColors | ||
| value={''} | ||
| placeholder="Search with inverted colors" | ||
| style={{backgroundColor: Colors.$backgroundNeutralHeavy}} | ||
| onDismiss={showCancelBtn ? onDismiss : undefined} | ||
| cancelButtonProps={{label: 'Cancel'}} | ||
| onChangeText={onChangeText} | ||
| renderCustomRightElement={showCustomRightElement ? customRightElement : undefined} | ||
| /> | ||
| </View> | ||
| <SearchInput | ||
| showLoader={showLoader} | ||
| value={''} | ||
| placeholder="Search with custom colors" | ||
| onDismiss={showCancelBtn ? onDismiss : undefined} | ||
| cancelButtonProps={{label: 'Cancel'}} | ||
| onChangeText={onChangeText} | ||
| style={{backgroundColor: Colors.purple20}} | ||
| placeholderTextColor={Colors.white} | ||
| containerStyle={{color: Colors.white}} | ||
| renderCustomRightElement={showCustomRightElement ? customRightElement : undefined} | ||
| /> | ||
| </View> | ||
|
|
||
| <View marginV-s2> | ||
| <Text center h3 $textDefault margin-5> | ||
| Search Input Presets: | ||
| </Text> | ||
| <View margin-s2> | ||
| <Text marginL-s3 marginV-s2> | ||
| Default: | ||
| </Text> | ||
| <SearchInput | ||
| showLoader={showLoader} | ||
| testID={'searchInput'} | ||
| value="" | ||
| placeholder="Search" | ||
| onDismiss={showCancelBtn ? onDismiss : undefined} | ||
| cancelButtonProps={{label: 'Cancel'}} | ||
| renderCustomRightElement={showCustomRightElement ? customRightElement : undefined} | ||
| /> | ||
| </View> | ||
| <Text marginL-s3 marginV-s2> | ||
| Prominent: | ||
| </Text> | ||
| <SearchInput | ||
| showLoader={showLoader} | ||
| testID={'searchInput'} | ||
| value="" | ||
| placeholder="Search" | ||
| onDismiss={showCancelBtn ? onDismiss : undefined} | ||
| cancelButtonProps={{label: 'Cancel'}} | ||
| preset={SearchInputPresets.PROMINENT} | ||
Inbal-Tish marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| renderCustomRightElement={showCustomRightElement ? customRightElement : undefined} | ||
| /> | ||
| </View> | ||
|
|
||
| <View marginT-s8 marginH-s3> | ||
| <Text bodyBold>Settings:</Text> | ||
| <View row marginV-s2> | ||
| <Switch | ||
| value={showCancelBtn} | ||
| onValueChange={value => setShowCancelBtn(value)} | ||
| onColor={Colors.$iconSuccessLight} | ||
| /> | ||
| <Text marginL-s4>Toggle cancel button</Text> | ||
| </View> | ||
| <View row marginV-s2> | ||
| <Switch | ||
| value={showCustomRightElement} | ||
| onValueChange={value => setShowCustomRightElement(value)} | ||
| onColor={Colors.$iconSuccessLight} | ||
| /> | ||
| <Text marginL-s4>Toggle Custom right element</Text> | ||
| </View> | ||
| <View row marginV-s2> | ||
| <Switch value={showLoader} onValueChange={value => setShowLoader(value)} onColor={Colors.$iconSuccessLight}/> | ||
| <Text marginL-s4>Toggle loader</Text> | ||
| </View> | ||
| <View padding-10 marginV-s1> | ||
| <Text>Actions: on the first example</Text> | ||
| <View row spread marginV-s1> | ||
| <Button size={Button.sizes.small} label={'Blur'} onPress={() => searchInput?.current?.blur()}/> | ||
| <Button size={Button.sizes.small} label={'Focus'} onPress={() => searchInput?.current?.focus()}/> | ||
| <Button size={Button.sizes.small} label={'Clear'} onPress={() => searchInput?.current?.clear()}/> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default SearchInputScreen; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.