SearchInput component

demo/src/screens/MenuStructure.js

@@ -38,6 +38,7 @@ export const navigationData = {
       {title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},
       {title: 'ScrollBar', tags: 'scroll bar gradient', screen: 'unicorn.components.ScrollBarScreen'},
+      {title: 'SearchInputScreen', tags: 'search input', screen: 'unicorn.components.SearchInputScreen'},
       {
         title: 'Shared Transition',
         tags: 'shared transition element',
@@ -99,16 +100,18 @@ export const navigationData = {
       {title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
       {title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
       {title: 'SortableList', tags: 'sortable list drag', screen: 'unicorn.components.SortableListScreen'},
-      {title: 'HorizontalSortableList', tags: 'sortable horizontal list drag', screen: 'unicorn.components.HorizontalSortableListScreen'},
+      {
+        title: 'HorizontalSortableList',
+        tags: 'sortable horizontal list drag',
+        screen: 'unicorn.components.HorizontalSortableListScreen'
+      },
       {title: 'GridList', tags: 'grid list', screen: 'unicorn.components.GridListScreen'},
       {title: 'SortableGridList', tags: 'sort grid list drag', screen: 'unicorn.components.SortableGridListScreen'}
     ]
   },
   Charts: {
     title: 'Charts',
-    screens: [
-      {title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'}
-    ]
+    screens: [{title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'}]
   },
   LayoutsAndTemplates: {
     title: 'Layouts & Templates',
@@ -120,7 +123,11 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
-      {title: 'TabControllerWithStickyHeader', tags: 'tabbar controller native sticky header', screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'},
+      {
+        title: 'TabControllerWithStickyHeader',
+        tags: 'tabbar controller native sticky header',
+        screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'
+      },
       {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
       {
         title: 'withScrollEnabler',

demo/src/screens/componentScreens/SearchInputScreen.tsx

@@ -0,0 +1,137 @@
+import React, {useCallback, useRef, useState} from 'react';
+import {Alert} from 'react-native';
+import {Colors, View, Text, Switch, SearchInput, SearchInputRef, 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 = (
+    <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'}}
+          customRightElement={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}
+            customRightElement={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}}
+          customRightElement={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'}}
+            customRightElement={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={SearchInput.presets.PROMINENT}
+          customRightElement={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;

demo/src/screens/componentScreens/index.js

@@ -42,6 +42,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
   registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
   registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
+  registrar('unicorn.components.SearchInputScreen', () => require('./SearchInputScreen').default);
   registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
   registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
@@ -53,7 +54,8 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
   registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
-  registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => require('./TabControllerWithStickyHeaderScreen').default);
+  registrar('unicorn.components.TabControllerWithStickyHeaderScreen',
+    () => require('./TabControllerWithStickyHeaderScreen').default);
   registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
   registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
   registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);

src/components/index.js

@@ -137,6 +137,9 @@ export default {
   get ProgressiveImage() {
     return require('./progressiveImage').default;
   },
+  get SearchInput() {
+    return require('./searchInput').default;
+  },
   get StateScreen() {
     return require('./stateScreen').default;
   },