diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx index bd18bbe270..9d68d4ba16 100644 --- a/example/src/Examples/SearchbarExample.tsx +++ b/example/src/Examples/SearchbarExample.tsx @@ -12,6 +12,7 @@ const SearchExample = ({ navigation }: Props) => { const [firstQuery, setFirstQuery] = React.useState(''); const [secondQuery, setSecondQuery] = React.useState(''); const [thirdQuery, setThirdQuery] = React.useState(''); + const [fourthQuery, setFourthQuery] = React.useState(''); const { isV3 } = useTheme(); @@ -44,6 +45,14 @@ const SearchExample = ({ navigation }: Props) => { icon="menu" style={styles.searchbar} /> + + setFourthQuery(query)} + value={fourthQuery} + loading + style={styles.searchbar} + /> ); }; diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx index 741b37cf4f..e46a9a0fe2 100644 --- a/src/components/Searchbar.tsx +++ b/src/components/Searchbar.tsx @@ -18,6 +18,7 @@ import { withTheme } from '../core/theming'; import type { IconSource } from './Icon'; import type { Theme } from '../types'; import MaterialCommunityIcon from './MaterialCommunityIcon'; +import ActivityIndicator from './ActivityIndicator'; export type Props = React.ComponentPropsWithRef & { /** @@ -70,6 +71,11 @@ export type Props = React.ComponentPropsWithRef & { * Custom icon for clear button, default will be icon close */ clearIcon?: IconSource; + /** + * @supported Available in v5.x + * Custom flag for replacing clear button with activity indicator. + */ + loading?: Boolean; }; type TextInputHandles = Pick< @@ -122,6 +128,7 @@ const Searchbar = React.forwardRef( style, theme, value, + loading = false, ...rest }: Props, ref @@ -218,26 +225,33 @@ const Searchbar = React.forwardRef( value={value} {...rest} /> - ( - - )) - } - accessibilityRole="button" - /> + {loading ? ( + + ) : ( + ( + + )) + } + accessibilityRole="button" + /> + )} ); } @@ -259,6 +273,9 @@ const styles = StyleSheet.create({ elevation: { elevation: 4, }, + loader: { + margin: 10, + }, }); export default withTheme(Searchbar); diff --git a/src/components/__tests__/Searchbar.test.js b/src/components/__tests__/Searchbar.test.js index 1d17e5187f..af7ff40b23 100644 --- a/src/components/__tests__/Searchbar.test.js +++ b/src/components/__tests__/Searchbar.test.js @@ -1,3 +1,4 @@ +import { render } from '@testing-library/react-native'; import * as React from 'react'; import renderer from 'react-test-renderer'; import Searchbar from '../Searchbar.tsx'; @@ -15,3 +16,21 @@ it('renders with text', () => { expect(tree).toMatchSnapshot(); }); + +it('activity indicator snapshot test', () => { + const tree = renderer.create().toJSON(); + + expect(tree).toMatchSnapshot(); +}); + +it('renders with ActivityIndicator', () => { + const tree = render(); + + expect(tree.getByTestId('activity-indicator')).toBeTruthy(); +}); + +it('renders without ActivityIndicator', () => { + const tree = render(); + + expect(() => tree.getByTestId('activity-indicator')).toThrow(); +}); diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap index 66802d975c..21b696a044 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap @@ -1,5 +1,390 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`activity indicator snapshot test 1`] = ` + + + + + + + + + □ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + exports[`renders with placeholder 1`] = `