react-native-input-select 0.2.0 → 0.6.0

package/src/Dropdown.tsx

@@ -8,6 +8,7 @@ import {
   Image,
 } from 'react-native';
 import { colors } from './styles/colors';
+import { inputStyles } from './styles/input';
 import { typography } from './styles/typography';
 
 const Dropdown = ({
@@ -25,6 +26,7 @@ const Dropdown = ({
   dropdownStyle,
   dropdownContainerStyle,
   selectedItemStyle,
+  primaryColor,
 }: any) => {
   return (
     <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>
@@ -34,8 +36,8 @@ const Dropdown = ({
       <Pressable
         onPress={() => setOpen(!open)}
         style={({ pressed }) => [
-          pressed && styles.inputFocusState,
-          styles.input,
+          pressed && inputStyles.inputFocusState,
+          inputStyles.input,
           dropdownStyle,
         ]}
       >
@@ -52,7 +54,11 @@ const Dropdown = ({
               getSelectedItemsLabel().map((item: any, i: Number) => (
                 <Text
                   key={`SelectedItems${i}`}
-                  style={[styles.selectedItems, selectedItemStyle]}
+                  style={[
+                    styles.selectedItems,
+                    { backgroundColor: primaryColor },
+                    selectedItemStyle,
+                  ]}
                 >
                   {item}
                 </Text>
@@ -84,30 +90,13 @@ const Dropdown = ({
 
 const styles = StyleSheet.create({
   label: { marginBottom: 16, color: colors.gray, ...typography.caption },
-  input: {
-    paddingVertical: 18,
-    paddingHorizontal: 23,
-    backgroundColor: colors.lightGray,
-    borderRadius: 8,
-    borderColor: colors.dark,
-    borderWidth: 1,
-    color: colors.dark,
-    width: '100%',
-    minHeight: 64,
-  },
-  inputFocusState: {
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: colors.primary,
-    borderRadius: 8,
-  },
   inputFocusErrorState: {
     borderWidth: 2,
     borderStyle: 'solid',
-    borderColor: colors.cliqkiRed,
+    borderColor: colors.red,
   },
   iconStyle: { position: 'absolute', right: 25, top: 25 },
-  error: { color: colors.cliqkiRed, marginTop: 8, ...typography.caption },
+  error: { color: colors.red, marginTop: 8, ...typography.caption },
   helper: { marginTop: 8, color: colors.primary, ...typography.caption },
   dropdownInputContainer: { marginBottom: 23, width: '100%' },
   selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },

package/src/DropdownList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, FlatList, StyleSheet } from 'react-native';
+import { View, FlatList, StyleSheet, Text } from 'react-native';
 import DropdownListItem from './DropdownListItem';
 import { colors } from './styles/colors';
 
@@ -12,18 +12,18 @@ const DropdownList = ({
   selectedItem,
   handleMultipleSelections,
   handleSingleSelection,
+  primaryColor,
 }: any) => {
   return (
     <FlatList
       data={options}
       extraData={isMultiple ? selectedItems : selectedItem}
       initialNumToRender={5}
-      // ListEmptyComponent={
-      //   <EmptyStateComponent
-      //     style={{alignItems: 'flex-start', marginTop: 30}}
-      //     message="Be the first to reply"
-      //   />
-      // }
+      ListEmptyComponent={
+        <View style={styles.emptyListStyle}>
+          <Text>No options available</Text>
+        </View>
+      }
       ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}
       renderItem={(item) =>
         _renderItem(item, {
@@ -34,6 +34,7 @@ const DropdownList = ({
           onChange: isMultiple
             ? handleMultipleSelections
             : handleSingleSelection,
+          primaryColor,
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}
@@ -50,6 +51,7 @@ const _renderItem = ({ item }: any, props: any) => {
       isMultiple={props.isMultiple}
       selectedOption={props.selectedOption}
       onChange={props.onChange}
+      primaryColor={props.primaryColor}
     />
   );
 };
@@ -71,6 +73,7 @@ const styles = StyleSheet.create({
     height: 1,
     opacity: 0.15,
   },
+  emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },
 });
 
 export default DropdownList;

package/src/DropdownListItem.tsx

@@ -10,6 +10,7 @@ const DropdownListItem = ({
   isMultiple,
   selectedOption,
   onChange,
+  primaryColor,
 }: any) => {
   const selectedOptionValue = optionValue ?? 'value';
   return (
@@ -26,9 +27,9 @@ const DropdownListItem = ({
           }
           onChange={() => onChange(item[selectedOptionValue])}
           boxType="circle" //works on ios only
-          tintColors={{ true: colors.primary }} //android control
-          onCheckColor={colors.primary} //ios checkmark colour control
-          onTintColor={colors.primary} //ios box colour control
+          tintColors={{ true: primaryColor || colors.primary }} //android control
+          onCheckColor={primaryColor || colors.primary} //ios checkmark colour control
+          onTintColor={primaryColor || colors.primary} //ios box colour control
         />
       </View>
       <View>

package/src/Input.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { TextInput, StyleSheet, View } from 'react-native';
+import { inputStyles } from './styles/input';
+
+export const Input = ({
+  placeholder,
+  value,
+  onChangeText,
+  style,
+  ...rest
+}: any) => {
+  const [isFocused, setFocus] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        placeholder={placeholder}
+        style={[
+          inputStyles.input,
+          isFocused && inputStyles.inputFocusState,
+          style,
+        ]}
+        onFocus={() => {
+          setFocus(true);
+        }}
+        onBlur={() => setFocus(false)}
+        value={value}
+        onChangeText={onChangeText}
+        {...rest}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { margin: 23 },
+});

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_OPTION_LABEL = 'label';
+export const DEFAULT_OPTION_VALUE = 'value';

package/src/index.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import Dropdown from './Dropdown';
 import CustomModal from './Modal';
 import DropdownList from './DropdownList';
+import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
+import { Input } from './Input';
 
 export const DropdownSelect = ({
   placeholder,
@@ -14,18 +16,27 @@ export const DropdownSelect = ({
   onValueChange,
   selectedValue,
   isMultiple,
+  isSearchable,
   labelStyle,
   dropdownStyle,
   dropdownContainerStyle,
   selectedItemStyle,
   modalBackgroundStyle,
   modalOptionsContainer,
+  searchInputStyle,
+  primaryColor,
 }: any) => {
+  const [newOptions, setNewOptions] = useState(options ? options : []);
   const [open, setOpen] = useState(false);
   const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection
   const [selectedItems, setSelectedItems] = useState(
-    Array.isArray(selectedValue) ? selectedValue : []
+    Array.isArray(selectedValue)
+      ? selectedValue
+      : selectedValue === '' || selectedValue === undefined
+      ? []
+      : [selectedValue]
   ); //for multiple selection
+  const [searchValue, setSearchValue] = useState('');
 
   /*===========================================
    * Selection handlers
@@ -62,7 +73,8 @@ export const DropdownSelect = ({
           let selectedItemLabel =
             options &&
             options.find(
-              (item: string) => item[optionValue ?? 'value'] === element
+              (item: string) =>
+                item[optionValue ?? DEFAULT_OPTION_VALUE] === element
             )?.[optionLabel];
           selectedLabels.push(selectedItemLabel);
         });
@@ -72,9 +84,32 @@ export const DropdownSelect = ({
     let selectedItemLabel =
       options &&
       options.find(
-        (item: string) => item[optionValue ?? 'value'] === selectedItem
+        (item: string) =>
+          item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem
       );
-    return selectedItemLabel?.[optionLabel];
+    return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];
+  };
+
+  /*===========================================
+   * Search
+   *==========================================*/
+  const onSearch = (value: string) => {
+    setSearchValue(value);
+    let searchTerm = value.toString().toLocaleLowerCase();
+    const searchResults = options.filter((item: any) => {
+      return (
+        item[optionLabel ?? DEFAULT_OPTION_LABEL]
+          .toString()
+          .toLowerCase()
+          .includes(searchTerm) ||
+        item[optionValue ?? DEFAULT_OPTION_VALUE]
+          .toString(searchTerm)
+          .toLowerCase()
+          .includes()
+      );
+    });
+
+    setNewOptions(searchResults);
   };
 
   return (
@@ -94,6 +129,7 @@ export const DropdownSelect = ({
         dropdownContainerStyle={dropdownContainerStyle}
         selectedItemStyle={selectedItemStyle}
         isMultiple={isMultiple}
+        primaryColor={primaryColor}
       />
       <CustomModal
         open={open}
@@ -102,8 +138,15 @@ export const DropdownSelect = ({
         modalOptionsContainer={modalOptionsContainer}
         onRequestClose={() => {}}
       >
+        {isSearchable && (
+          <Input
+            value={searchValue}
+            onChangeText={(text: string) => onSearch(text)}
+            style={searchInputStyle}
+          />
+        )}
         <DropdownList
-          options={options}
+          options={newOptions}
           optionLabel={optionLabel}
           optionValue={optionValue}
           isMultiple={isMultiple}
@@ -111,6 +154,7 @@ export const DropdownSelect = ({
           selectedItem={selectedItem}
           handleMultipleSelections={handleMultipleSelections}
           handleSingleSelection={handleSingleSelection}
+          primaryColor={primaryColor}
         />
       </CustomModal>
     </>

package/src/styles/colors.ts

@@ -1,5 +1,6 @@
 export const colors: any = {
   primary: '#EF8031',
+  red: '#FA4169',
   black: '#000000',
   white: '#FFFFFF',
   dark: '#11142D',

package/src/styles/input.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import { colors } from './colors';
+
+export const inputStyles: any = StyleSheet.create({
+  input: {
+    paddingVertical: 18,
+    paddingHorizontal: 23,
+    backgroundColor: colors.lightGray,
+    borderRadius: 8,
+    borderColor: colors.dark,
+    borderWidth: 1,
+    color: colors.dark,
+    width: '100%',
+    minHeight: 64,
+  },
+  inputFocusState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: colors.primary,
+    borderRadius: 8,
+  },
+});